Énoncés des TPs - DOM, Événements

TP 1 : Sélectionner et Modifier le DOM

Vous devez manipuler les éléments HTML avec JavaScript.

Exercice 1.1 : Sélectionner des éléments

Sélectionnez l’élément avec l’ID main
Sélectionnez le premier <h1> de la page
Sélectionnez tous les éléments avec la classe card
Sélectionnez tous les boutons qui ne sont pas désactivés

Exercice 1.2 : Créer et ajouter des éléments

Créez une <div> avec le texte “Bonjour !”
Ajoutez la classe container à cette div
Ajoutez-la au corps de la page
Créez un paragraphe avec du contenu HTML et ajoutez-le à la div

Exercice 1.3 : Modifier le contenu

Changez le titre principal en “Nouveau Titre”
Modifiez la couleur du titre en bleu
Augmentez la taille de la police à 32px
Ajoutez la classe active au titre

Exercice 1.4 : Gérer les classes

Créez un élément avec la classe inactive
Ajoutez la classe active
Retirez la classe inactive
Basculez la classe highlight
Vérifiez si l’élément a la classe active

Exercice 1.5 : Gérer les attributs

Créez un lien <a> avec href="https://google.com"
Changez l’URL en https://github.com
Ajoutez l’attribut target="_blank"
Vérifiez si le lien a l’attribut disabled
Supprimez l’attribut target

Exercice 1.6 : Attributs de données (data-*)

Créez un élément avec data-id="123"
Lisez la valeur de data-id
Modifiez data-status en “actif”
Vérifiez les attributs de données

TP 2 : Événements - Clic et Interaction

Vous devez écouter et réagir aux actions de l’utilisateur.

Exercice 2.1 : Événement click

Créez un bouton
Ajoutez un écouteur qui affiche “Bouton cliqué” dans la console
Modifiez le texte du bouton à chaque clic
Comptez le nombre de clics et affichez-le

Exercice 2.2 : Événements souris

Créez une <div> avec un fond bleu
À mouseenter, changez le fond en rouge
À mouseleave, revenez au bleu
À click, affichez les coordonnées de la souris

Exercice 2.3 : Événements clavier

Créez un <input> texte
À chaque keydown, affichez la touche pressée
Si c’est “Enter”, affichez “Entrée pressée”
À chaque input, affichez la valeur actuelle

Exercice 2.4 : Événement submit

Créez un formulaire avec un champ email et un bouton
À la soumission, empêchez le rechargement
Vérifiez que l’email contient “@”
Affichez un message de succès

TP 3 : Event Delegation

Vous devez gérer les événements sur plusieurs éléments avec un seul écouteur.

Exercice 3.1 : Délégation simple

Créez une liste <ul> avec 5 éléments <li>
Ajoutez un écouteur au <ul> (pas aux <li>)
Quand on clique sur un <li>, affichez son texte
Changez la couleur du <li> cliqué

Exercice 3.2 : Délégation avec boutons

Créez un conteneur avec 5 boutons
Ajoutez un écouteur au conteneur
Quand on clique sur un bouton, affichez son texte
Supprimez le bouton cliqué

Exercice 3.3 : Utiliser closest()

Créez une liste de cartes (chaque carte a un bouton de suppression)
Utilisez closest() pour trouver la carte parente
Supprimez la carte entière quand on clique sur le bouton

TP 4 : Fetch - Récupérer des Données

Vous devez récupérer des données depuis une API.

Exercice 4.1 : Fetch simple

Utilisez l’API JSONPlaceholder : https://jsonplaceholder.typicode.com/posts/1
Récupérez le premier post
Affichez le titre et le corps dans la console
Gérez les erreurs

Exercice 4.2 : Afficher les données dans le DOM

Récupérez 5 posts : https://jsonplaceholder.typicode.com/posts?_limit=5
Créez une <div> pour chaque post
Affichez le titre et le corps
Ajoutez-les au DOM

Exercice 4.3 : Fetch avec async/await

Refaites l’exercice 4.2 avec async/await
Vérifiez que la réponse est OK (response.ok)
Gérez les erreurs avec try/catch

Exercice 4.4 : Envoyer des données

Créez un formulaire avec un champ texte
À la soumission, envoyez les données à https://jsonplaceholder.typicode.com/posts
Affichez la réponse du serveur

TP 5 : LocalStorage - Sauvegarder des Données

Vous devez sauvegarder et récupérer des données localement.

Exercice 5.1 : Sauvegarder et récupérer

Créez un objet utilisateur : { nom: 'Eva', age: 25 }
Sauvegardez-le dans localStorage
Récupérez-le et affichez-le dans la console
Supprimez-le

Exercice 5.2 : Liste TODO avec localStorage

Créez une application TODO
À chaque ajout, sauvegardez la liste dans localStorage
Au chargement de la page, récupérez les tâches sauvegardées
Affichez les tâches

Exercice 5.3 : Préférences utilisateur

Créez un bouton “Mode sombre”
Sauvegardez la préférence dans localStorage
Au chargement, appliquez la préférence sauvegardée
Testez en rechargeant la page

TP 6 : IntersectionObserver - Lazy Loading

Vous devez charger les images seulement quand elles sont visibles.

Exercice 6.1 : Détecter la visibilité

Créez 5 <div> avec du texte
Utilisez IntersectionObserver pour détecter quand elles deviennent visibles
Affichez un message dans la console
Ajoutez la classe visible à chaque élément visible

Exercice 6.2 : Lazy loading d’images

Créez 10 images avec src="placeholder.jpg" et data-src="image-reelle.jpg"
Utilisez IntersectionObserver pour charger l’image réelle quand elle est visible
Changez la classe en chargee après le chargement
Arrêtez d’observer après le chargement

Exercice 6.3 : Scroll infini

Créez une liste de 10 articles
Quand l’utilisateur scroll jusqu’au bas, chargez 10 articles supplémentaires
Utilisez IntersectionObserver sur le dernier article

TP 7 : Debounce - Retarder l’Exécution

Vous devez retarder l’exécution d’une fonction.

Exercice 7.1 : Implémenter debounce

Créez une fonction debounce(fonction, delai)
Testez-la avec un <input> de recherche
Affichez la valeur seulement 300ms après l’arrêt de la frappe
Comptez le nombre d’appels

Exercice 7.2 : Recherche avec debounce

Créez un <input> de recherche
À chaque changement, appelez une fonction rechercher(terme)
Utilisez debounce pour attendre 500ms
Affichez les résultats dans la console

Exercice 7.3 : Redimensionnement de fenêtre

Écoutez l’événement resize de la fenêtre
Utilisez debounce pour afficher la nouvelle taille seulement après 300ms
Testez en redimensionnant la fenêtre

TP 8 : Throttle - Limiter la Fréquence

Vous devez limiter la fréquence d’exécution d’une fonction.

Exercice 8.1 : Implémenter throttle

Créez une fonction throttle(fonction, limite)
Testez-la avec un clic répété
Affichez un message seulement une fois par 500ms
Comptez le nombre d’appels

Exercice 8.2 : Scroll throttle

Écoutez l’événement scroll
Utilisez throttle pour afficher la position du scroll une fois par 100ms
Affichez la hauteur scrollée

Exercice 8.3 : Clics throttle

Créez un bouton
Utilisez throttle pour limiter les clics à 1 par 1000ms
Affichez un message à chaque clic valide

TP 9 : Projet - Application TODO Complète

Créez une application TODO avec toutes les fonctionnalités.

Fonctionnalités requises :

Ajouter une tâche : Saisissez du texte et appuyez sur Entrée
Afficher les tâches : Listez toutes les tâches
Cocher comme fait : Cliquez sur une tâche pour la marquer comme complétée
Supprimer une tâche : Bouton de suppression pour chaque tâche
Sauvegarder : Les tâches sont sauvegardées dans localStorage
Charger : Au chargement, récupérez les tâches sauvegardées
Compteur : Affichez le nombre de tâches complétées/totales

Bonus :

Filtrer les tâches (toutes, actives, complétées)
Éditer une tâche
Ajouter une date de création
Ajouter une priorité (haute/normale/basse)

TP 10 : Projet - Galerie d’Images avec Lazy Loading

Créez une galerie d’images avec chargement optimisé.