Programmation Web, année 2019

Quelques ressources en lignes

  1. Déclancher une animation CSS

Dans le fichier TD3.html ajouter une balise de script à la fin du fichier script_TD3.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.

-
+
  1. Délimiter la zone

Faire un nouveau fichier script à ajouter après la balise de TD3_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.

-
+

Les boucles for

  1. Lisez la documentation sur les boucles for

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

  1. Une première boucle

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

  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 TD3_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éclenche un alert qui donne le code de la couleur.