diff --git a/TP1.txt b/TP1.txt new file mode 100644 index 0000000..2a57db6 --- /dev/null +++ b/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é diff --git a/TP2.txt b/TP2.txt new file mode 100644 index 0000000..e6c75cc --- /dev/null +++ b/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
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 diff --git a/TP3.txt b/TP3.txt new file mode 100644 index 0000000..af86b92 --- /dev/null +++ b/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. diff --git a/button/index.html b/button/index.html new file mode 100644 index 0000000..5df8557 --- /dev/null +++ b/button/index.html @@ -0,0 +1,25 @@ + + + + +Un canvas contenant une image. En passant la souris par dessus l'image on obtient un zoom sur cette dernière.
+Vous pouvez trouver ci-dessous une liste de cinq cent identitées créées à l’aide de la bibliothèque Faker.js.
+Chargement...
+Si rien ne se passe au bout de dix secondes, veuillez vérifier que votre navigateur web supporte Javascript, et réessayez.
+Button
"; + 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); +} diff --git a/js/canvas.js b/js/canvas.js new file mode 100644 index 0000000..7ed8d4a --- /dev/null +++ b/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"; +} diff --git a/js/exo-faker.js b/js/exo-faker.js new file mode 100644 index 0000000..353bb4b --- /dev/null +++ b/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 = "Nom | Prénom | Ville | Métier |
---|---|---|---|
"; + table += ids[i].lastname; + table += " | "; + table += ids[i].firstname; + table += " | "; + table += ids[i].city; + table += " | "; + table += ids[i].job; + table += " |
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.
+