Programmation Web, année 2019

Attention.

Les TD doivent être réalisés sous Linux et non sous Windows. Chaque étudiant doit être inscrit sur Moodle. Le forum peut être utilisé pour poser des questions pendant et en dehors des TD.

Quelques ressources en lignes

  1. Déclancher une animation CSS

Dans le fichier TD4.html ajouter une balise de script à la fin du fichier script_TD4.js.

Essayez de reproduire à l’aide du CSS et du JavaScript adapté l’exemple suivant qui n’utilise que des éléments div et les propriétés CSS transform ainsi que les transitions vu dans le TD2.

-
+

var ex1plus = document.getElementById(“ex_1_plus”); var ex1moins = document.getElementById(“ex_1_moins”); var target = document.getElementById(“target”); var transX = 0; var rotate = 0; ex1plus.onmouseenter = function() { transX += 60; rotate += 105; target.style.transform = “translateX(”+transX+“px) rotate(”+rotate+“deg)”; }; ex1moins.onmouseenter = function() { transX += -60; rotate += -105; target.style.transform = “translateX(”+transX+“px) rotate(”+rotate+“deg)”; }

  1. Délimiter la zone

Faire un nouveau fichier script à ajouter après la balise de TD4_script2.js afin d’essayer d’améliorer le résultat précédant en empéchant le carré bleu de sortir de sa zone comme dans l’exemple suivant (vous pouvez utiliser la propriété clientWidth des éléments HTML.

-
+
var ex2plus = document.getElementById(“ex_2_plus”); var ex2moins = document.getElementById(“ex_2_moins”); var holder2 = document.getElementById(“ex_2”); var target2 = document.getElementById(“target2”); var transX2 = 0; var rotate2 = 0; ex2plus.onmouseenter = function() { transX2 += 60; rotate2 += 105; transX2 = Math.min(holder2.clientWidth-20, transX2); target2.style.transform = “translateX(”+transX2+“px) rotate(”+rotate2+“deg)”; }; ex2moins.onmouseenter = function() { transX2 += -60; rotate2 += -105; transX2 = Math.max(0, transX2); target2.style.transform = “translateX(”+transX2+“px) rotate(”+rotate2+“deg)”; }

Les boucles for

  1. Lisez la documentation sur les boucles for

Indiquez quelle source vous avez utilisé et ajouté l’un des exemples à TD4.html

  1. Une première boucle

Essayez de reproduire l’exemple suivant dans TD4.html en utilisant un nouveau fichier de script TD4_script3.js.

var holder3 = document.getElementById(“ex_3”); var target3 = document.getElementById(“target3”); function lancer(){ for (var i=0; i<120; i++) { box = document.createElement(“div”); box.innerHTML = i; box.setAttribute(“class”, “witness”); holder3.appendChild(box); box.style.borderRadius = i+“px”; } } function effacer() { holder3.innerHTML=““; }

  1. Une boucle un peu plus compliqué (à finir à la maison)

Le HSL est un format de couleur permettant de jouer sur la tonalité et la saturation d’une teinte de couleur donné.

Essayez de reproduire le visualisateur de couleurs suivant dans un script TD4_script4.js en imbriquant deux boucles for et un l’évènement oninput sur l’élément input.

Faites en sorte qu’en cliquant sur une couleur, cela déclanche un alert qui donne le code de la couleur.

holder4 = document.getElementById(“holder4”); range = document.getElementById(“range_input”); function mise_a_jour_couleur() { value = range.value; holder4.innerHTML = ““; for (var i=0; i<33; i++) { for (var j=0; j<33; j++) { var hsl_value=value+”,“+3*i+”%,“+3*j+”%“; box = document.createElement(”div”); box.style.backgroundColor = “hsl(”+hsl_value+“)”; box.setAttribute(“class”, “colorbox”); box.value = hsl_value; box.onclick = function() { alert(“hsl(”+this.value+“)”); }; holder4.appendChild(box); } linebreak = document.createElement(“br”); holder4.appendChild(linebreak); } } mise_a_jour_couleur();


Compiled the: mer. 08 janv. 2025 11:51:30 CET