phundrak/univ.phundrak.fr
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

TP1 et TP2 terminés

Browse Source
This commit is contained in:
Phuntsok Drak-pa 2018-10-11 03:03:07 +02:00
parent 1c90860183
commit d9e60dfd9e
19 changed files with 536 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
TP1.txt Normal file
View File

@ -0,0 +1,32 @@
1) Carré
Créer un carré de couleur qui se déplace de 3px vers la droite 60 fois par seconde
Dès qu'il commence à sortir de l'écran, il rentre à nouveau sur la gauche, puis on boucle
Le carré sera donc à droite et à gauche en même temps lorsqu'il sort.
2) Table
Cloner le git suivant : https://github.com/marak/Faker.js/
Lire rapidement la documentation
Initialiser la librairie Faker avec locale "fr"
Générer un tableau de 500 personnes : {nom, prénom, ville, métier}
Créer un élément "table" avec une colonne pour chaque propriété
L'en-tête des colonnes contient un bouton ayant pour texte la propriété de la colonne
Ajouter toutes les personnes à la table
Lorsqu'on clique sur un en-tête, classer le tableau par ordre alphabétique sur la propriété concernée
utiliser la méthode Array.sort()
classer le tableau
redessiner l'élément table
3) Canvas & Zoom
Créer un élément canvas 800x600px
Créer un élément img qui ne sera pas ajouté au corps de page
Donner une source à ce dernier
Une fois chargée, dessiner l'image sur le canvas à l'aide de la méthode "drawImage"
Lorsque le curseur bouge au dessus du canvas, programmer un effet de loupe carrée :
Copier les pixels de l'image originale vers la zone du canvas située sous le curseur en doublant la taille des pixels concernés
La méthode "drawImage" prend 9 arguments, voir la documentation MDN
Bonus : programmer l'effet loupe avec un rond plutôt qu'un carré

40
TP2.txt Normal file
View File

@ -0,0 +1,40 @@
exo
écrire une classe ES6 "Button"
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes
1 - dans le constructeur, créer un élément HTML <div/> qui sera la représentation visuelle du bouton
2 - il faudra donc une variable de classe : this.element = [l'élément HTML contrôlé par la classe];
3 - appliquer des propriétés CSS à l'élément (par exemple : color, background-color, border, border-radius)
> https://www.w3schools.com/cssref
4 - exécuter une méthode lorsque l'utilisateur clique sur l'élément HTML
> this.element.addEventListener(...
> on écrit généralement une méthode "addListeners" qui rassemble tous les événements de l'élément
> attention au binding, il faut conserver la référence vers l'objet "this" dans les callbacks
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/bind
5 - ajouter une méthode en argument sur le constructeur qui sera exécutée lorsqu'on clique sur le bouton
6 - écrire une classe fille de Button > "HoverButton"
7 - exécuter une méthode lorsque le curseur passe au dessus de l'élément HTML
> https://www.w3schools.com/jsref/dom_obj_event.asp
> appliquer une ombre CSS pour signifier que le bouton est "actif" (box-shadow)
8 - coder l'action inverse lorsque le curseur sort du bouton (enlever l'ombre)
9 - écrire une classe fille de Button > "PushButton"
10 - exécuter une méthode lorsque le curseur est enfoncé sur l'élément HTML
> https://www.w3schools.com/jsref/dom_obj_event.asp
> appliquer une ombre CSS interne (box-shadow inset)
11 - coder l'action inverse lorsque qu'on relâche le clic (enlever l'ombre) OU que le curseur sort du bouton
12 - écrire une classe "HoverPushButton"
programmer une animation
1 - créer une variable globale pointant vers un petit carré de couleur avec des coordonnées absolues
2 - deux variables int globales correspondant aux coordonnées du carré
2 - écrire une méthode exécutée à chaque "frame"
> https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame
3 - à chaque exécution de cette méthode, faire avancer le carré d'un pixel vers la droite
4 - lorsque le carré sort de l'écran, faire en sorte qu'il rentre à nouveau par la gauche
5 - créer un autre carré qui fera des aller-retours

10
TP3.txt Normal file
View File

@ -0,0 +1,10 @@
cloner le dossier "default" pour démarrer un nouveau projet JS
1 - ajouter un élément input de type file au corps de page
2 - puis un élément canvas 800x600px
3 - lorsqu'on sélectionne un fichier depuis l'input (événement "change"):
3.1 - vérifier qu'il s'agit bien d'une image
3.2 - insérer cette image à l'échelle dans le contexte du canvas
4 - créer trois composants slider "range"
ces composants serviront à modifier la luminosité, le contraste, et la saturation de l'image en temps-réel
5 - faire des recherches et implémenter les trois actions des sliders de la manière qui vous semble la plus efficace.

25
button/index.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Index - Lucien Cartier-Tilet</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/button.css">
<script type="text/javascript" src="../js/button.js"></script>
</head>
<body>
<ul class="navbar">
<li><a href="../">Home</a></li>
<li><a href="./">Moving red square</a></li>
<li><a href="../faker">Faker</a></li>
<li><a class="active" href="../button">Button</a></li>
<li><a href="../canvas-zoom">Canvas & Zoom</a></li>
</ul>
<div id="container" class="content">
</div>
</body>
</html>

31
canvas/index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>Moving Square - Lucien Cartier-Tilet</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/canvas.css" />
<script type="text/javascript" src="../js/canvas.js"></script>
</head>
<body>
<ul class="navbar">
<li><a href="../">Home</a></li>
<li><a href="./">Moving red square</a></li>
<li><a href="../faker">Faker</a></li>
<li><a class="active" href="../canvas-zoom">Canvas & Zoom</a></li>
<li><a href="../button">Button</a></li>
</ul>
<div id="container">
<div class="content">
<p>Un canvas contenant une image. En passant la souris par dessus l'image on obtient un zoom sur cette dernière.</p>
</div>
<img src="../img/france_ardeche_landscape.jpg" alt="Vue d’Ardèche" id="ardeche" />
<canvas id="canvastp1" width="800" height="600"></canvas>
<canvas id="loupe" width="80" height="80" display="none"></canvas>
</div>
</body>
</html>

13
css/button.css Normal file
View File

@ -0,0 +1,13 @@
#container {
}
#Button {
background-color: #F67280;
border: none;
color: #DDD;
padding: 0px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

31
css/canvas.css Normal file
View File

@ -0,0 +1,31 @@
#container {
position: relative;
height: 100%;
overflow-x: scroll;
}
#content {
position: absolute;
}
canvas {
position: absolute;
}
#canvastp1 {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
border: 1px solid #6C5B7B;
}
#loupe {
position: absolute;
display: none;
border-radius: 40px;
}
#ardeche {
display: none;
}

11
css/square.css
View File

@ -2,10 +2,19 @@ body {
overflow: hidden;
}
#carre {
#container {
}
.carre {
border: solid 50px #f67280;
width: 0px;
height: 0px;
margin-top: 100px;
margin-left: 0px;
position: absolute;
}
#carre2 {
display: none;
float: left;
}

18
css/style.css
View File

@ -101,6 +101,10 @@ h2 {
max-width: 650px;
}
a {
color: #F8B195;
}
li a {
display: block;
padding: 14px 16px;
@ -124,6 +128,20 @@ li a:hover,
background-color: #f67280;
}
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #f8b195;
text-align: left;
padding: 8px;
}
tr:nth-child(odd) {
background-color: #254c6d;
}
/*****************************************************************************/
/* scrollbar */
/*****************************************************************************/

29
faker/index.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Faker - Lucien Cartier-Tilet</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="https://univ.phundrak.fr/css/style.css">
<script src="https://univ.phundrak.fr/js/faker.min.js"></script>
<script src="https://univ.phundrak.fr/js/exo-faker.js"></script>
</head>
<body>
<ul class="navbar">
<li><a href="https://univ.phundrak.fr/">Home</a></li>
<li><a href="https://univ.phundrak.fr/moving-square/">Moving red square</a></li>
<li><a class="active" href="https://univ.phundrak.fr/faker">Faker</a></li>
<li><a href="https://univ.phundrak.fr/canvas-zoom">Canvas & Zoom</a></li>
</ul>
<div class="container">
<div class="content">
<h2>Liste des identitées créées avec Faker</h2>
<p>Vous pouvez trouver ci-dessous une liste de cinq cent identitées créées à l’aide de la bibliothèque <a href="https://github.com/Marak/faker.js">Faker.js</a>.</p>
<div id="list" style="text-align:center">
<p>Chargement...</p>
<p>Si rien ne se passe au bout de dix secondes, veuillez vérifier que votre navigateur web supporte Javascript, et réessayez.</p>
</div>
</div>
</div>
</body>
</html>

BIN
img/france_ardeche_landscape.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 756 KiB

11
index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<title>Index - Lucien Cartier-Tilet</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
@ -9,10 +10,11 @@
<body>
<ul class="navbar">
<li><a class="active" href="https://univ.phundrak.fr/">Home</a></li>
<li><a href="moving-square/">Moving red square</a></li>
<li><a href="faker">Faker</a></li>
<li><a href="canvas-zoom">Canvas & Zoom</a></li>
<li><a class="active" href="./">Home</a></li>
<li><a href="square/">Square</a></li>
<li><a href="faker/">Faker</a></li>
<li><a href="canvas/">Canvas</a></li>
<li><a href="button/">Button</a></li>
</ul>
<div class="container">
<div class="content">
@ -21,4 +23,5 @@
</div>
</div>
</body>
</html>

61
js/button.js Normal file
View File

@ -0,0 +1,61 @@
window.onload = main;
var d = document;
var container;
var button;
function main() {
console.log("JS loaded!");
container = d.getElementById("container");
addListeners(d.body, 'click', createbutton);
}
function addListeners(e, a, f) {
e.addEventListener(a, f);
}
class Button {
constructor(f) {
this.element = d.createElement("div");
this.element.id = "Button";
this.element.innerHTML = "<p>Button</p>";
container.appendChild(this.element);
addListeners(this.element, 'mouseover', HoverButton.applyShadow);
addListeners(this.element, 'mouseout', HoverButton.applyUnshadow);
addListeners(this.element, 'mouseout', HoverButton.applyUnpush);
addListeners(this.element, 'mousedown', PushButton.applyPush);
addListeners(this.element, 'mouseup', PushButton.applyUnpush);
}
}
class HoverButton extends Button {
constructor() {
super();
}
static applyShadow() {
button.element.style.boxShadow = "3px 3px 5px #6C5B7B";
}
static applyUnshadow() {
button.element.style.boxShadow = "none";
}
}
class PushButton extends Button {
constructor() {
super();
}
static applyPush(elem) {
button.element.style.backgroundColor = "#C06C84";
}
static applyUnpush(elem) {
button.element.style.backgroundColor = "#F67280";
}
}
function createbutton() {
console.log(container.children);
if(container.children.length == 0) {
button = new Button();
console.log("button created!");
}
d.body.removeEventListener("click", createbutton);
}

69
js/canvas.js Normal file
View File

@ -0,0 +1,69 @@
var canvas;
var loupe;
var img;
var ratio;
var topmargin;
window.onload = function() {
canvas = document.getElementById("canvastp1");
var context = canvas.getContext("2d");
img = document.getElementById("ardeche");
var hRatio = canvas.width / img.width;
var vRatio = canvas.height / img.height;
ratio = Math.min(hRatio, vRatio);
topmargin = (canvas.height - img.height * ratio) / 2;
context.drawImage(img, 0, 0, img.width, img.height,
0, topmargin, img.width * ratio, img.height * ratio);
canvas.addEventListener('mousemove', displayMousePos, false);
canvas.addEventListener('mousemove', zoom, false);
canvas.addEventListener('mouseout', hide, false);
loupe = document.getElementById("loupe");
context = loupe.getContext("2d");
context.drawImage(img, 0, 0);
};
function displayMousePos(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ', ' + mousePos.y;
console.log(message);
}
function zoom(evt) {
var mousePos = getMousePos(canvas, evt); /* get mouse position */
loupe.style.display = "inline"; /* make glass visible */
/* process x axis */
var canvasXMargin = window.getComputedStyle(canvas).getPropertyValue('margin-left');
canvasXMargin = canvasXMargin.substr(0, canvasXMargin.length - 2);
var marginLeft = Number(canvasXMargin) + mousePos.x + 15;
console.log('X: ' + marginLeft);
loupe.style.marginLeft = marginLeft + "px";
/* process y axis */
var marginTop = mousePos.y + 15;
loupe.style.marginTop = marginTop + "px";
var actualPos = mousePos.y - topmargin;
console.log('Y: ' + marginTop +
', marginTop: ' + topmargin +
', actualPos: ' + actualPos);
/* clear and redraw glass */
var context = loupe.getContext("2d");
context.clearRect(0, 0, loupe.width, loupe.height);
context.drawImage(img,
(mousePos.x - loupe.width / 8) / ratio, (actualPos - loupe.height / 8) / ratio,
loupe.width, loupe.height, 0, 0, loupe.width, loupe.height);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function hide() {
loupe.style.display = "none";
}

79
js/exo-faker.js Normal file
View File

@ -0,0 +1,79 @@
window.onload = main;
var ids;
var nbIds = 500;
var de;
function main() {
ids = new Array();
de = document.getElementById("list");
var i;
faker.locale = "fr";
console.log(single_id);
for (i = 0; i < nbIds; ++i) {
var single_id = {
firstname: faker.name.firstName(),
lastname: faker.name.lastName(),
city: faker.address.city(),
job: faker.name.jobType()
};
ids.push(single_id);
}
displayIds();
}
function displayIds() {
var table = "<table><tr><th onclick=\"sortLName()\">Nom</th><th onclick=\"sortFName()\">Prénom</th><th onclick=\"sortCity()\">Ville</th><th onclick=\"sortJob()\">Métier</th></tr>";
for (i = 0; i < nbIds; ++i) {
table += "<tr><td>";
table += ids[i].lastname;
table += "</td><td>";
table += ids[i].firstname;
table += "</td><td>";
table += ids[i].city;
table += "</td><td>";
table += ids[i].job;
table += "</td></tr>";
}
table += "</table>";
de.innerHTML = table;
}
function sortLName() {
ids.sort(function(a, b) {
return compareString(a.lastname, b.lastname);
});
displayIds();
}
function sortFName() {
ids.sort(function(a, b) {
return compareString(a.firstname, b.firstname);
});
displayIds();
}
function sortCity() {
ids.sort(function(a, b) {
return compareString(a.city, b.city);
});
displayIds();
}
function sortJob() {
ids.sort(function(a, b) {
return compareString(a.job, b.job);
});
displayIds();
}
function compareString(a, b) {
var x = a.toLowerCase();
var y = b.toLowerCase();
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
}

21
js/faker.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

30
js/square.js Normal file
View File

@ -0,0 +1,30 @@
window.onload = main;
var d = document;
var de = d.documentElement;
var offset = 0;
var SIZE = 100;
function main() {
console.log("JS loaded");
setInterval(frame, 1000.0 / 60.0);
}
function frame() {
var screenwidth = de.clientWidth;
if (offset >= (screenwidth)) {
offset = 0;
} else {
offset += 3;
}
var squares = de.getElementsByClassName("carre");
for (i = 0; i < squares.length; ++i) {
squares[i].style.marginLeft = offset + "px";
}
if (offset >= (screenwidth - SIZE)) {
squares[1].style.display = "inline";
squares[1].style.marginLeft = (offset - screenwidth) + "px";
} else {
squares[1].style.display = "none";
}
}

18
moving-square/index.html
View File

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Moving Square - Lucien Cartier-Tilet</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="https://univ.phundrak.fr/css/style.css"/>
<link rel="stylesheet" href="https://univ.phundrak.fr/css/square.css" type="text/css"/>
<script src="https://univ.phundrak.fr/js/main.js"></script>
</head>
<body>
<div id="container">
<div id="carre">
</div>
</div>
</body>
</html>

30
square/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Moving Square - Lucien Cartier-Tilet</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" href="../css/square.css" type="text/css" />
<script src="../js/square.js"></script>
</head>
<body>
<ul class="navbar">
<li><a href="../">Home</a></li>
<li><a class="active" href="./">Moving red square</a></li>
<li><a href="../faker">Faker</a></li>
<li><a href="../canvas-zoom">Canvas & Zoom</a></li>
<li><a href="../button">Button</a></li>
</ul>
<div id="container">
<div class="content">
<p>Un carré traversant l’écran et apparaissant du côté gauche de l’écran alors qu’il disparaît du côté droit de ce dernier.</p>
</div>
<div class="carre"></div>
<div class="carre" id="carre2"></div>
</div>
</body>
</html>