Programmation Web, année 2019

Quelques ressources en lignes

• Le site des tutoriels du W3C est une référence pour les langages du WEB (langue anglaise).
• Pour les non-anglophones le site de mozilla possède de nombreuses ressources en français pour HTML5, CSS3 et JavaScript
• Le site openclassrooms permet également de réviser les bases HTML5 et CSS3.

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.

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

3. Lisez la documentation sur les boucles for

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

4. Une première boucle

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

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

Compiled the: mer. 04 sept. 2024 12:49:35 CEST