Contrôle Continu - DOM et Événements (JavaScript)

Durée : 1h - 6 exercices pratiques

---

Exercice 1 : Sélection et Modification du DOM (15 min)

Objectif : Manipuler les éléments HTML

Créez une page HTML avec la structure suivante :

<div id="container">
    <h1 id="title">Mon Titre</h1>
    <p class="text">Paragraphe 1</p>
    <p class="text">Paragraphe 2</p>
    <button id="btn">Cliquez-moi</button>
</div>

Tâches JavaScript :

1. Sélectionnez le titre avec l’ID title
2. Changez son texte en “Titre Modifié”
3. Changez sa couleur en bleu
4. Augmentez la taille de police à 28px
5. Sélectionnez tous les éléments avec la classe text
6. Ajoutez la classe highlight à chaque paragraphe

Critères :

• ✅ Les 6 tâches sont complétées
• ✅ Le code fonctionne sans erreur

---

Exercice 2 : Gestion des Classes et Attributs (15 min)

Objectif : Manipuler les classes et attributs HTML

Créez un élément :

<a id="link" href="https://google.com">Google</a>

Tâches JavaScript :

1. Vérifiez si le lien a la classe active (utiliser classList.contains())
2. Ajoutez la classe active au lien
3. Vérifiez que la classe a bien été ajoutée (afficher true/false dans la console)
4. Changez l’attribut href en https://github.com
5. Ajoutez l’attribut target="_blank"
6. Lisez et affichez l’attribut href actuel dans la console

Critères :

• ✅ Les classes sont gérées correctement
• ✅ Les attributs sont modifiés
• ✅ Les vérifications affichent les bons résultats

---

Exercice 3 : Créer et Ajouter des Éléments au DOM (15 min)

Objectif : Créer dynamiquement des éléments

Tâches JavaScript :

1. Créez une <div> avec le texte “Bonjour !”
2. Ajoutez-lui la classe message
3. Créez une liste <ul> avec 3 éléments <li> :
   • “Premier élément”
   • “Deuxième élément”
   • “Troisième élément”
4. Ajoutez la classe item à chaque <li>
5. Ajoutez la div et la liste au <body>
6. Affichez le nombre d’éléments <li> dans la console

HTML de base :

<div id="app"></div>

Critères :

• ✅ Les éléments sont créés dynamiquement
• ✅ Les classes sont ajoutées
• ✅ Tout s’affiche correctement dans la page

---

Exercice 4 : Événement Click et Compteur (20 min)

Objectif : Écouter les clics et modifier l’interface

HTML :

<div id="app">
    <button id="counter-btn">Cliquez-moi</button>
    <p id="count">Clics : 0</p>
</div>

Tâches JavaScript :

1. Créez une variable clickCount initialisée à 0
2. Ajoutez un écouteur click au bouton
3. À chaque clic :
   • Augmentez le compteur
   • Affichez le nouveau nombre dans le <p id="count">
   • Affichez “Bouton cliqué N fois” dans la console
4. Quand le compteur atteint 5 clics, changez la couleur du bouton en rouge
5. Quand il atteint 10 clics, affichez une alerte “Vous avez cliqué 10 fois !”

Critères :

• ✅ Le compteur fonctionne
• ✅ Le DOM se met à jour
• ✅ Les conditions à 5 et 10 clics fonctionnent

---

Exercice 5 : Événements de Souris (20 min)

Objectif : Réagir aux mouvements de la souris

HTML :

<div id="box" style="width: 200px; height: 200px; background-color: blue;"></div>
<p id="status">Survolez la boîte</p>

Tâches JavaScript :

1. Sélectionnez la boîte
2. À l’événement mouseenter :
   • Changez la couleur de fond en green
   • Modifiez le texte du <p> en “Vous survolez la boîte !”
3. À l’événement mouseleave :
   • Changez la couleur de fond en blue
   • Modifiez le texte du <p> en “Vous avez quitté la boîte”
4. À l’événement click :
   • Affichez les coordonnées de la souris (event.clientX, event.clientY) dans la console
   • Affichez aussi un message dans le <p>

Critères :

• ✅ Les changements de couleur fonctionnent
• ✅ Les événements souris déclenchent correctement
• ✅ Les coordonnées du clic s’affichent

---

Exercice 6 : Délégation d’Événements (20 min)

Objectif : Gérer plusieurs éléments avec un seul écouteur

HTML :

<div id="container">
    <ul id="list">
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
        <li>Élément 4</li>
        <li>Élément 5</li>
    </ul>
</div>
<p id="result">Cliquez sur un élément</p>

Tâches JavaScript :

1. Récupérez l’élément <ul> avec l’ID list
2. Ajoutez un SEUL écouteur click au <ul> (pas aux <li>)
3. Quand on clique sur un <li> :
   • Affichez son texte dans le <p id="result">
   • Ajoutez la classe active à l’élément cliqué
   • Retirez la classe active des autres éléments
4. Affichez dans la console le nombre d’éléments cliqués au total

Bonus :

• Quand on clique sur un élément active, retirez sa classe

Critères :

• ✅ Un SEUL écouteur sur le parent
• ✅ Les clics sur les enfants sont détectés
• ✅ Les classes active se gèrent correctement
• ✅ Le compteur de clics fonctionne

---

📋 Grille de Notation

Critère	Points
Ex 1 : DOM (sélection)	10 pts
Ex 2 : Classes/Attributs	10 pts
Ex 3 : Créer des éléments	10 pts
Ex 4 : Événement click	15 pts
Ex 5 : Événements souris	15 pts
Ex 6 : Délégation	20 pts
Bonus	+5 pts
TOTAL	100 pts

---

💡 Conseils pour réussir

✅ Commencez par lire le HTML fourni avant de coder ✅ Testez chaque exercice dans le navigateur ✅ Utilisez console.log() pour déboguer ✅ Lisez les messages d’erreur dans la console ✅ Vérifiez que le DOM se met à jour correctement

⚡ Raccourcis utiles

// Sélection
document.getElementById('id');
document.querySelector('selector');
document.querySelectorAll('selector');

// Modification
element.textContent = 'texte';
element.style.color = 'red';
element.classList.add('class');
element.classList.remove('class');
element.setAttribute('attr', 'value');

// Événements
element.addEventListener('event', callback);
event.target;
(event.clientX, event.clientY);

---

Bonne chance ! 🚀