Programmation événementielle avec le DOM

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

Programmation événementielle avec le DOM

Notes de cours

Travail personnel

Objectifs

Dans ce TP, on permet à l'internaute de manipuler la page de manière interactive, grâce à la programmation événementielle permise par l'API du DOM.

Exercice 1 — Manipulation des événements du DOM #

Une proposition de correction de la première partie est disponible (archive).

L'archive dom.zip contient un fichier HTML, un fichier CSS, et un fichier JS. Vous devez faire les exercices suivants en modifiant uniquement le fichier JS, et sans utiliser de bibliothèques externes.

Modifier le DOM avec les événements

On modifie l'apparence et le contenu de la section intitulée « une section bidon », en fonctions des actions de l'internaute.

  1. Faire en sorte que cliquer sur le paragraphe d'identifiant « toto » ajoute un cadre vert autour du premier item de la liste d'identifiant « bidon ».
  2. Passer la souris sur le mot en emphase dans toto duplique le deuxième item de la liste.
  3. Cliquer sur un item de la liste supprime l'item après avoir écrit son contenu dans la division d'identifiant « sortie ».
  4. Modifier le code pour qu'à la suppression d'un item, la page affiche une alerte indiquant « L'item numéro i a été supprimé » (avec i le numéro de l'item dans la liste).
  5. Appuyer sur la touche « A » du clavier permet d'ajouter un item à la liste. Utiliser la fonction prompt pour demander à l'internaute de rentrer le texte du nouvel item.
  6. Si ce n'est déjà fait, faire en sorte que les items nouvellement dupliqués ou ajoutés soient également supprimés quand on clique dessus… et vérifier que c'est toujours le cas pour les anciens items.

Optionnel : pour aller un peu plus loin

  1. Cliquer sur la citation de Wikipédia change sa couleur de fond, en suivant un cycle jaune → orange → vert → bleu.
  2. Cliquer sur un des items de la liste dans la dernière section déplace cet item en tête de la liste.
  3. Cliquer sur les titres de niveau h2 doit cacher toute la section correspondante, en laissant le titre apparent. Un deuxième clic affiche la section de nouveau.
  4. Au survol d'un titre de niveau h2, changer ses couleurs et ajouter un petit texte « cliquer pour cacher » ou « cliquer pour afficher » selon le cas.

Exercice 2 — Les boîtes #

Un corrigé de cet exercice est disponible (archive).

On va manipuler cette page HTML, qui contient des boîtes de différentes classes. Télécharger l'archive contenant le HTML, le CSS et un fichier JS vide. Sans modifier le HTML ni le CSS, écrire le code JavaScript qui commence par écrire dans chaque boîte le nom de ses classes (dans le span de classe etiquette), puis qui donne aux boîtes le comportement suivant :

  • un clic sur une boîte de classe compte incrémente le compteur (division d'identifiant « compteur ») ;
  • survoler une boîte de classe verte la fait passer à la classe rouge (et inversement) ;
  • les boîtes de classe fantome disparaissent si on clique dessus (le fichier CSS prévoit une classe hidden) ;
  • cliquer sur une boîte de classe revelateur fait réapparaître toutes les boîtes fantome disparues ;
  • cliquer sur une boîte de classe copieur duplique la dernière boîte sur laquelle on a cliqué, et place cette nouvelle boîte à la fin.

Optionnel : les boîtes dupliquées par les copieurs ont-elles le comportement attendu ? Si non, modifiez votre code pour que ce soit le cas.

Exercice 3 — Modifier les couleurs à la souris #

Un corrigé de cet exercice est disponible (archive).

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 quelles que soient les dimensions de la boîte.