1.
Exercice sur le DOM Virtuel (Avec rendu visuel)
Objectif : Simuler un changement de données et voir le DOM se mettre à jour visuellement,
mais de manière optimisée.
Instructions :
1. Créez un fichier HTML avec une liste <ul> vide et un bouton.
2. Utilisez une variable pour stocker l'état initial des données (initialData).
3. Lorsque le bouton est cliqué, remplacez les données par un nouvel état (newData) et
mettez à jour la liste HTML en conséquence.
4. Votre code ne doit pas supprimer et recréer toute la liste. Il doit seulement modifier les
éléments existants, en ajouter de nouveaux ou en supprimer.
5. Utilisez une logique simple :
○ Le premier élément doit rester "Pomme".
○ L'élément "Banane" doit devenir "Kiwi".
○ L'élément "Orange" doit être supprimé.
○ Un nouvel élément "Fraise" doit être ajouté.
Code à écrire (HTML & JavaScript) :
<!DOCTYPE html>
<html>
<head>
<title>Exercice DOM Virtuel</title>
</head>
<body>
<h2>DOM Virtuel : Mise à jour de liste</h2>
<ul id="liste"></ul>
<button id="updateButton">Mettre à jour la liste</button>
<script>
const listeUL = [Link]('liste');
const updateButton = [Link]('updateButton');
const initialData = ["Pomme", "Banane", "Orange"];
const newData = ["Pomme", "Kiwi", "Fraise"];
function renderList(data) {
[Link] = ''; // Re-créez la liste, ceci est la
partie "naïve" à améliorer
[Link](itemText => {
const li = [Link]('li');
[Link] = itemText;
[Link](li);
});
}
renderList(initialData);
[Link]('click', () => {
// TODO: Écrivez le code qui compare et met à jour de
façon optimisée ici
// Indice : N'utilisez pas de `innerHTML = ''`
// Appliquez les changements pour que "Banane" devienne
"Kiwi", "Orange" soit supprimé et "Fraise" soit ajouté.
});
</script>
</body>
</html>
2. Exercice sur le Shadow DOM
Objectif : Créer un composant réutilisable avec un style encapsulé qui ne peut pas être modifié
par les règles CSS de la page principale.
Instructions :
1. Créez une div conteneur avec l'ID my-button-component.
2. Attachez un Shadow Root à cette div en mode open.
3. À l'intérieur du Shadow Root, ajoutez une balise <style> et un bouton (<button>).
4. Donnez un style distinct au bouton (par exemple, un fond vert, texte blanc).
5. Dans la page principale, ajoutez une règle CSS qui cible tous les boutons et les rend
rouges.
6. Vérifiez que le bouton à l'intérieur du Shadow DOM reste vert, prouvant ainsi
l'encapsulation.
Code à écrire :
<!DOCTYPE html>
<html>
<head>
<title>Exercice Shadow DOM</title>
<style>
/* Règle CSS pour la page principale */
button {
background-color: red !important; /* Pour être sûr */
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Shadow DOM : Encapsulation de style</h2>
<p>Le bouton ci-dessous devrait rester vert, malgré la règle CSS
rouge qui s'applique à tous les boutons.</p>
<div id="my-button-component"></div>
<script>
const componentContainer =
[Link]('my-button-component');
// TODO: Attachez le Shadow Root et créez le bouton avec ses
styles ici.
// N'oubliez pas d'attacher le style et le bouton au
shadowRoot.
</script>
</body>
</html>
3. Exercice sur la Délégation d'Événements
Objectif : Gérer les clics sur une liste dynamique en n'utilisant qu'un seul écouteur d'événement
sur le parent.
Instructions :
1. Créez une liste <ul> avec quelques éléments <li> statiques.
2. Ajoutez un bouton "Ajouter un élément" qui crée de nouveaux <li> à chaque clic.
3. Ajoutez un bouton "Supprimer" à côté de chaque élément <li>.
4. Attachez un seul écouteur de clic à l'élément <ul> (le parent).
5. Dans la fonction de l'écouteur, vérifiez si l'élément cliqué est un bouton "Supprimer". Si
oui, supprimez l'élément <li> parent de ce bouton.
6. Assurez-vous que la suppression fonctionne aussi bien sur les éléments initialement
présents que sur les nouveaux éléments ajoutés.
Code à écrire :
<!DOCTYPE html>
<html>
<head>
<title>Exercice Délégation d'Événements</title>
</head>
<body>
<h2>Délégation d'événements : Liste de tâches</h2>
<ul id="taskList">
<li>Tâche 1 <button class="delete-btn">Supprimer</button></li>
<li>Tâche 2 <button class="delete-btn">Supprimer</button></li>
<li>Tâche 3 <button class="delete-btn">Supprimer</button></li>
</ul>
<button id="addBtn">Ajouter une tâche</button>
<script>
const taskList = [Link]('taskList');
const addBtn = [Link]('addBtn');
let taskCount = 4;
// TODO: Écrivez le code pour la délégation d'événements ici.
// Attachez le gestionnaire au parent `taskList`.
// Code pour ajouter une nouvelle tâche (ne pas modifier)
[Link]('click', () => {
const li = [Link]('li');
[Link] = `Tâche ${taskCount} <button
class="delete-btn">Supprimer</button>`;
[Link](li);
taskCount++;
});
</script>
</body>
</html>