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-2025/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'au début du TP de la semaine suivante pour terminer l'exercice.

Important

Les fonctions callback doivent être écrites en-dehors de la fonction init(), et vous devez bien respecter les noms des fonctions callback demandées.
La page inclut des tests. Attention les tests ne font que vérifier si les fonctions demandées existent. Cela vous permet seulement de voir si vous avez fait une erreur dans le nom des fonctions callback demandées.
C'est à vous de vérifier si chaque fonction callback fait bien ce qui est demandé.

À faire

L'archive events.zip contient une page web events.html, un fichier Javascript et deux images.
Vous ne pouvez pas modifier le HTML !

Le fichier Javascript contient une fonction init appelée après chargement de la page (puisque le script est inclus avec l'attribut defer).
Pour chacune des questions suivantes, compléter la fonction init() qui initialise les évènements à capter et écrire la fonction callback demandée pour chaque question.

L'élément d'identifiant question1 capte le clic et déclenche la fonction changeTitre qui met le titre h1 en rouge.
L'élément d'identifiant question2-3 capte l'entrée de la souris sur lui-même et déclenche la fonction ajouterBordure qui lui met une bordure de 4px orange en pointillés (4px dashed orange).
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 chateauPro qui fait passer de l'image du chateau de sable débutant à chateau de sable pro (Les images sont fournies dans le dossier images/
L'élément d'identifiant question5 capte le clic et déclenche la fonction alternerImage 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 le paragraphe d'identifiant para-q6 (penser à utiliser la propriété de style display avec les valeurs none ou block)
Le lien vers Google d'identifiant lien-google 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 ajouterItem qui ajoute un item à la fin de la liste d'identifiant numero
L'élément d'identifiant question9 capte le clic et déclenche la fonction ajouterClic qui va ajouter au paragraphe d'identifiant lepara un capteur de clic qui déclenche la fonction paraCouleur, celle-ci lui fait alterner les couleurs de fond jaune (yellow) et rose (pink)
Attention le paragraphe ne capte donc le clic que après avoir cliqué sur Q9.
L'élément d'identifiant question10 capte le clic et déclenche la fonction enleverClic qui fait que le paragraphe d'identifiant lepara ne capte plus le clic (on ne peut donc plus changer sa couleur).
L'élément d'identifiant question11 contient des éléments button. Chaque bouton capte le clic et déclenche la fonction supprimerItem qui supprime le dernier élément de la liste numero.
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 autreClic qui ajoute un capteur de clic au paragraphe d'identifiant autrepara. Lorsqu'on clique sur ce paragraphe autrepara, cela déclenche la fonction mettreRouge qui met son texte en couleur rouge, mais si on a cliqué sur le texte en gras alors rien ne doit se passer.
Indication : deux solutions pour cela :
1. utiliser target et/ou currentTarget pour savoir si on a cliqué sur le texte en gras ou non
2. ajouter un capteur de clic sur le texte en gras et empêcher sa propagation
L'élément d'identifiant question13 capte le clic et déclenche la fonction capterNoir qui ajoute un capteur de clic sur tous les éléments de classe sombre. Au clic sur l'élément de classe sombre, cela déclenche la fonction mettreNoir passe l'élément de classe sombre cliqué en police blanche sur fond noir.
Attention tester en cliquant sur les textes du paragraphe lepara qui sont en gras ou italiques, tout le paragraphe doit alors changer et non pas juste le gras ou italique.
L'élément d'identifiant question14 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 il déclenche la fonction couleurAleatoire qui change sa couleur de fond 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)