📋 ÉPREUVE PRATIQUE - JavaScript et DOM (Durée : 1h)

6 exercices pratiques - Total : 100 points

---

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

Objectif : Manipuler les éléments HTML

HTML fourni :

<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 de validation :

• ✅ Les 6 tâches sont complétées
• ✅ Le code fonctionne sans erreur
• ✅ Les modifications sont visibles dans la page

---

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

Objectif : Manipuler les classes et attributs HTML

HTML fourni :

<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 de validation :

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

---

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

Objectif : Créer dynamiquement des éléments

HTML de base :

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

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

Critères de validation :

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

---

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

Objectif : Écouter les clics et modifier l’interface

HTML fourni :

<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 de validation :

• ✅ Le compteur fonctionne correctement
• ✅ Le DOM se met à jour à chaque clic
• ✅ Les conditions à 5 et 10 clics fonctionnent
• ✅ Les messages console s’affichent

---

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

Objectif : Réagir aux mouvements de la souris

HTML fourni :

<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> (ex: "Clic à X: 150, Y: 200")

Critères de validation :

• ✅ Les changements de couleur fonctionnent
• ✅ Les événements souris déclenchent correctement
• ✅ Les coordonnées du clic s’affichent
• ✅ Le texte du paragraphe se met à jour

---

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

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

HTML fourni :

<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 ayant la classe active, retirez sa classe

Critères de validation :

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

---

📊 Barème de notation

Exercice	Points	Critères
1	15	Sélection + modification DOM
2	15	Classes + attributs
3	15	Création dynamique d’éléments
4	20	Événements + compteur
5	20	Événements souris
6	15	Délégation d’événements
TOTAL	100

---

⚠️ Consignes importantes

• ✅ Utilisez du JavaScript vanilla (pas de framework)
• ✅ Testez votre code dans la console du navigateur
• ✅ Pas d’erreur JavaScript tolérée
• ✅ Respectez les délais indiqués
• ✅ Commentez votre code si nécessaire
• ✅ Utilisez console.log() pour afficher les résultats demandés

Bonne chance ! 🚀