TP1 et TP2 terminés

TP1.txt

@@ -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é

TP2.txt

@@ -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

TP3.txt

@@ -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.

button/index.html

@@ -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>

canvas/index.html

@@ -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>

css/button.css

@@ -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;
+}

css/canvas.css

@@ -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;
+}

css/square.css

@@ -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;
 }

css/style.css

@@ -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                                 */
 /*****************************************************************************/

faker/index.html

@@ -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>

index.html

@@ -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 class="active" href="./">Home</a></li>
-        <li><a href="moving-square/">Moving red square</a></li>
+        <li><a href="square/">Square</a></li>
-        <li><a href="faker">Faker</a></li>
+        <li><a href="faker/">Faker</a></li>
-        <li><a href="canvas-zoom">Canvas & Zoom</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>

js/button.js

@@ -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);
+}

js/canvas.js

@@ -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";
+}

js/exo-faker.js

@@ -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;
+}

js/square.js

@@ -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";
+    }
+}

moving-square/index.html

@@ -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>

square/index.html

@@ -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>