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-2024/TP05/ex1/events.html(en remplaçant LOGIN par votre identifiant numérique). 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="LOGIN" />en remplaçant LOGIN par les identifiants 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 lecarp213 et 20922462 ont travaillé ensemble, ils mettent
<meta name="author" content="lecarp213,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
.
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 fonctionchangeCouleur
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 fonctionmettreBordure
qui lui met une bordure. - L'élément d'identifiant
question2-3
capte la sortie de la souris et déclenche la fonctionenleverBordure
qui lui enlève sa bordure. - L'élément d'identifiant
question4
capte le clic et déclenche la fonctionchangeImage
qui fait passer de l'image du chateau de sable débutant à chateau de sable pro (Les images sont fournies dans la dossierimages/
- L'élément d'identifiant
question5
capte le clic et déclenche la fonctiontoggleImage
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 fonctiontogglePara
qui cache/montre l'élément d'identifiantpara
- Le lien vers Google d'identifiant
question7
capte le clic et déclenche la fonctionstopGoogle
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 fonctionajouteItem
qui ajoute un item à la fin de la liste d'identifiantliste
- L'élément d'identifiant
question9
capte le clic et déclenche la fonctionajouteDoubleClic
qui va ajouter au paragraphe d'identifiantpara
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 fonctionenleveDoubleClic
qui fait que le paragraphe d'identifiantpara
ne capte plus le double clic - L'élément d'identifiant
question11
contient des élémentsbutton
. Chaque bouton capte le clic et déclenche la fonctionsupprimeItem
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 fonctioninitDark
qui ajoute un capteur de clic sur tous les éléments de classedark
(uniquement ceux-là). Au clic, l'élément (de classedark
) cliqué passe en police blanche sur fond noir.
Attention tester en cliquant sur les textes du paragraphepara
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 fonctionparagraphesAleatoires
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 CSSrgb()
pour définir la couleur)