Rappels utiles pour le TP

Exercice 1: Gestion des évènements et modèle de flux

  1. Faire le diagramme correspondant au DOM de ce document de départ.
  2. Gestion des évènements simples
    1. attacher à chaque élément du DOM un gestionnaire d'évènement qui fait en sorte que lors du clic sur un élément la console affiche l'id, le type (nodetype - 1-> élément, 3-> text, 8 -> comment, 9-> document) et le tag de l'élément cliqué
    2. modifier la gestion des évènements pour afficher le contenu textuel des paragraphes et le nombre d'éléments descendants dans le DOM pour les div.
    3. this.id et l'id de l'élément cliqué, aussi appelé cible (target en Anglais) peuvent-ils être différents? Si oui, dans quels cas?
    4. utiliser la méthode stopPropagation() définie sur les évènements javascript pour "consommer" un évènement, c'est-à-dire pour arrêter sa diffusion aux autres éléments susceptibles de le recevoir dans le DOM. Tester l'effet de cette méthode dans les deux modes de diffusion (capture et bubbling).
  3. Gestion plus évoluée à partir de ce document
    1. associer une lettre à chaque gestionnaire d'évènement pour l'identifier de manière unique. Lors du clic sur un élément, afficher dans la console: la lettre identifiant le gestionnaire d'évènement, l'évènement (ou le numéro de l'évènement), this et l'id de l'élément cliqué.
    2. modifier la gestion des évènements pour qu'un gestionnaire d'évènement sur deux fonctionne en mode capture, un sur deux en mode propagation (ie bulle ou bubble), sans qu'aucun gestionnaire ne consomme l'évènement.
    3. modifier la gestion des évènements pour qu'en plus de l'id, la console affiche le rang correspondant à l'ordre d'appel des gestionnaires d'évènement qui gèrent le même évènement.
    4. Pouvez-vous écrire une gestion d'évènement qui permette de reconstituer la phrase entière à partir des évènements reçus sur chaque partie de phrase?

Exercice 2: Création d'un slider pour la gestion des intervalles

Ce fichier source dessine un slider qui peut être utilisé pour définir des intervalles en utilisant des div emboités et des div stylisés en curseurs pour délimiter la borne min et la borne max.

slider
Figure 1 - Slider et input fields
  1. Ecrire le code javascript permettant de déplacer les curseurs
    1. en gérant la largeur du div représentant l'intervalle de manière cohérente avec le déplacement des curseurs.
    2. en respectant la contrainte min ≤ max
    3. lorsque min == max, seul un curseur est visible et peut être déplacé pour changer la valeur de min et de max.
  2. Ajouter des éléments input permettant, pour chaque intervalle, d’afficher et de définir valeur min et la valeur max (ou la valeur min et la taille de l'intervalle, ou la valeur max et la taille de l’intervalle) comme dans la Figure 1.
  3. Ecrire le code javascript permettant d'ajouter un intervalle en double-cliquant dans le slider.
  4. Ecrire le code javascript permettant de supprimer un intervalle en double-cliquant dessus.

Exercice 3: Glisser/Déposer

  1. Lire le résumé sur le glisser-déposer
  2. En exploitant la liste de lauréats Français de prix Nobel récents et la liste des disciplines, écrire le code javascript permettant de déposer chaque élément de la première liste sur l'un des éléments de la deuxième liste.