Introduction aux évènements

Travail personnel

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

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

https://dev-LOGIN.users.info.unicaen.fr/TW2-2026/TP05/ex1/events.html

(en remplaçant LOGIN par votre nom de login). 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="LOGINS" />

en remplaçant LOGINS par les noms de login 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 dupont210 et durand212 ont travaillé ensemble, ils mettent <meta name="author" content="dupont210,durand212" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui. Attention, le travail en binôme est réservé aux cas où il n'y a pas assez de machines disponibles.

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

Vous avez jusqu'à la fin 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.

Pour chacune des questions suivantes, compléter la fonction init() qui initialise les évènemements à capter et écrire la fonction callback indiquée pour chaque question.

Important

Afin que vous puissiez tester les interactions vous-mêmes en cliquant sur les divers éléments, les tests proposés ne sont pâs exécutés automatiquement.
Pour lancer les test, cliquez sur le bouton du haut de page.
Testez la page vous-mêmes AVANT de lancer les tests afin de mieux comprendre ce qui se passe sur la page.

Les fonctions callback doivent être écrites en-dehors de la fonction init(), et vous devez bien respecter les noms des fonctions callback demandées.

Utiliser le console.log pour comprendre ce qui se passe dans votre code.

L'élément d'identifiant question1 capte le clic et déclenche la fonction changeCouleur qui met le titre h1 en vert.
L'élément d'identifiant question2-3 capte l'entrée de la souris sur lui-même et déclenche la fonction mettreBordure qui lui met une bordure.
L'élément d'identifiant question2-3 capte la sortie de la souris et déclenche la fonction enleverBordure qui lui enlève sa bordure.
L'élément d'identifiant question4 capte le clic et déclenche la fonction changeImage qui fait passer de l'image du chateau de sable débutant à chateau de sable pro (Les images sont fournies dans la dossier images/
L'élément d'identifiant question5 capte le clic et déclenche la fonction toggleImage qui change l'image du chateau de sable en alternant entre les 2 images fournies (ça change donc à chaque fois qu'on clique)
L'élément d'identifiant question6 capte le clic et déclenche la fonction togglePara qui cache/montre l'élément d'identifiant para
Le lien vers Google d'identifiant question7 capte le clic et déclenche la fonction stopGoogle qui arrête l'activation du lien : on reste donc sur la page au lieu de partir chez Google
L'élément d'identifiant question8 capte le clic et déclenche la fonction ajouteItem qui ajoute un item à la fin de la liste d'identifiant liste
L'élément d'identifiant question9 capte le clic et déclenche la fonction ajouteDoubleClic qui va ajouter au paragraphe d'identifiant para un capteur de double clic qui lui fait alterner les couleurs de fond jaune (yellow) et rose (pink)
L'élément d'identifiant question10 capte le clic et déclenche la fonction enleveDoubleClic qui fait que le paragraphe d'identifiant para ne capte plus le double clic
L'élément d'identifiant question11 contient des éléments button. Chaque bouton capte le clic et déclenche la fonction supprimeItem qui supprime le dernier élément de la liste.
Attention, ne pas répéter 3 fois le code pour ajouter un capteur
L'élément d'identifiant question12 capte le clic et déclenche la fonction initDark qui ajoute un capteur de clic sur tous les éléments de classe dark (uniquement ceux-là). Au clic, l'élément (de classe dark) cliqué passe en police blanche sur fond noir.
Attention tester en cliquant sur les textes du paragraphe para en gras ou italiques, tout le paragraphe doit changer et non pas juste le gras ou italique.
L'élément d'identifiant question13 capte le clic et déclenche la fonction paragraphesAleatoires qui ajoute N paragraphes en fin de page (N sera un nombre aléatoire entre 1 et 5). Chaque paragraphe créé doit alors capter le clic, et au clic sa couleur de fond change aléatoirement (pour cela, on pourra tirer 3 nombres aléatoires entre 0 et 255 et utiliser la syntaxe CSS rgb() pour définir la couleur)