# 📅 S05 – JavaScript : DOM & Événements

  • Période : du 17 novembre au 28 novembre 2025 – Semaines 47–48
  • Thématique : Manipulation du DOM et interactions utilisateur
  • Jour férié / vacances : ⚠️ 18 novembre – Fête de l’Indépendance

🧭 Objectifs de la session

  • Apprendre à sélectionner et modifier les éléments HTML via JavaScript.
  • Comprendre et manipuler le DOM (Document Object Model).
  • Mettre en place des écouteurs d’événements (click, input, etc.).
  • Développer des interfaces interactives simples (sans backend).

🎯 Cette session introduit la programmation événementielle côté client. Elle marque un changement important : de simples scripts console → vers des interactions réelles avec l’utilisateur.

📚 Unités d’apprentissage mobilisées

  • UA 3.1.3 – Manipuler le DOM – (5h) – référentiel
  • UA 3.1.4 – Réagir aux événements – (5h) – référentiel

🧩 Prototype

Titre : Check-list interactive

Description : Créer une liste de tâches HTML avec des cases à cocher (<input type="checkbox">). Le script JS doit :

  • Afficher un compteur de tâches cochées / non cochées
  • Mettre à jour le compteur en temps réel quand une case est cochée/décochée
  • Afficher un message personnalisé si toutes les tâches sont terminées

Technos : HTML + JS natif Aucune base de données, aucun style CSS requis

🧪 Mini-Projet

Titre : To-do list locale – Version simplifiée

Description : Développer une application de gestion de tâches dans le navigateur.

Fonctionnalités attendues :

  • Ajouter une tâche via un champ texte et un bouton
  • Afficher la liste des tâches dynamiquement
  • Permettre de cocher/décocher une tâche
  • Supprimer une tâche
  • En option : sauvegarde locale via localStorage (bonus)

Contraintes techniques :

  • HTML + CSS léger (optionnel)
  • JS pur sans bibliothèque externe
  • Interface 100% côté client (pas de backend)

Livrables :

  • index.html, script.js, (éventuellement style.css)
  • Dépôt GitHub avec README.md décrivant les fonctionnalités

📊 Grille d’évaluation par niveau

  • Niveau 1 : Sélecteurs DOM bien utilisés, événements simples fonctionnels
  • Niveau 2 : Gestion complète de la check-list ou de la to-do list
  • Niveau 3 : Projet interactif fluide, structuré, évolutif et documenté