Introduction aux évènements

Licence Informatique 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Notes de cours

Exercice 1 — Évènements, DOM et Javacsript #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW2/TP05/ex1/events.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

L'archive events.zip contient une page web events.html et 2 images. Vous ne pouvez pas modifier le HTML ! Penser à utiliser querySelector et querySelectorAll.

Les actions à réaliser sont indiquées dans la page. Créer une balise script à la fin du body pour initialiser les évènements sur la page et écrire les fonctions callback correspondantes.

Exercice 2 — Modifier les couleurs à la souris #

Créer une page HTML quelconque contenant une division d'au moins 200 pixels par 200 pixels (comme celle-ci, par exemple). Faire un script qui modifie les couleurs (texte et fond) de cette division lorsque l'internaute clique dessus, de façon à ce que la couleur du texte dépende uniquement de la position horizontale du clic, et la couleur du fond uniquement de la position verticale du clic. Conseil pour les plus à l'aise : en utilisant les couleurs HSL, il sera sans doute plus facile d'obtenir un résultat intéressant ; essayez de faire en sorte que toutes les teintes soient possibles, pour le texte comme pour le fond, et ce quelque soit les dimensions de la boîte.