Niveau 5 contact (mode indices): map/find/reduce, delegation+debounce, modules, API en ligne, FormData

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

PROCHAINE_ETAPE_contact_4.md

@@ -0,0 +1,144 @@
+# 🧭 Niveau 5 — aller plus loin (mode indices)
+
+Salut Mélissa ! 👋
+
+> 📌 À faire **une fois le Niveau 4 terminé** (`createElement`, `fetch`, `setInterval`, clavier).
+
+Petit changement de format à partir d'ici : **je ne donne plus le code tout fait.** Pour chaque exo tu as un **🎯 objectif**, des **🔍 pistes** (quoi chercher, quels mots-clés, les pièges) et un **✅ test**. À toi d'écrire le code.
+
+> 🔎 Tu as maintenant assez de bases pour lire la doc directement. Le réflexe : chercher **« MDN » + le nom de la chose** (ex. `MDN Array map`). Cherche d'abord **le concept**, le code viendra de toi.
+
+| Module | Notions visées | Exos |
+|---|---|---|
+| **A. Tableaux, niveau 2** | `map`, `find`, `reduce` | 1 → 3 |
+| **B. Écouteurs malins** | délégation d'événements, anti-rebond | 4 → 5 |
+| **C. Organiser son code** | modules `export` / `import` | 6 |
+| **D. Une vraie API en ligne** | `fetch` vers le web réel | 7 |
+| **E. Lire un formulaire d'un coup** | `FormData` | 8 |
+
+---
+
+# 🧱 Module A — Les tableaux, niveau 2
+
+Tu connais déjà `filter` (garder certains éléments) et `sort` (trier). Voici trois autres méthodes qui reviennent **tout le temps**.
+
+## 🧪 Exo 1 — `map` : transformer une liste
+
+**🎯 Objectif :** à partir de ton tableau `equipe`, fabriquer un **nouveau** tableau qui ne contient que les **noms** (`["Mélissa", "Guillaume"]`).
+
+**🔍 Pistes :**
+- Cherche `MDN Array map`. L'idée : `map` applique une transformation à **chaque** élément et renvoie une **nouvelle** liste de même taille.
+- Différence avec `filter` : `filter` **garde ou jette** des éléments (la liste rétrécit) ; `map` **transforme** chacun (la liste garde la même taille).
+
+**✅ Test :** un `console.log` affiche bien la liste des noms seuls.
+
+## 🧪 Exo 2 — `find` : retrouver un élément précis
+
+**🎯 Objectif :** retrouver dans `equipe` l'objet de la personne qui a fait la « Page contact ».
+
+**🔍 Pistes :**
+- Cherche `MDN Array find`. `find` renvoie le **premier** élément qui remplit une condition (un seul objet, pas une liste).
+- Attention au cas « personne ne correspond » : `find` renvoie alors `undefined` → comment l'éviter de planter ? (cherche `optional chaining` ou un simple `if`).
+
+**✅ Test :** `console.log` affiche le bon objet membre.
+
+## 🧪 Exo 3 — `reduce` : calculer un total
+
+**🎯 Objectif :** si tu as fait le `vehicules.json` du Niveau 4, calcule le **kilométrage total** de toute la flotte.
+
+**🔍 Pistes :**
+- Cherche `MDN Array reduce`. C'est la méthode la plus abstraite des trois : elle « replie » toute une liste en **une seule valeur** (ici, une somme).
+- Repère les deux choses qu'elle attend : une fonction `(accumulateur, élément) => ...` et une **valeur de départ** (pour une somme, laquelle ?).
+- Si reduce te paraît trop dense au début, tu peux d'abord le faire avec une boucle `for...of` et une variable `total`, puis le réécrire en `reduce` pour comparer.
+
+**✅ Test :** le total affiché correspond à la somme des `km` de ton JSON.
+
+---
+
+# 🎯 Module B — Des écouteurs d'événements plus malins
+
+## 🧪 Exo 4 — La délégation d'événements
+
+**🎯 Objectif :** rendre **chaque ligne** du tableau d'équipe cliquable (au clic, afficher le nom du membre dans une alerte). Le piège : tes lignes sont **générées** par JS, et parfois recréées (recherche, tri)…
+
+**🔍 Pistes :**
+- L'approche naïve serait d'ajouter un écouteur sur chaque `<tr>`. Problème : à chaque ré-affichage, il faut tout réattacher, et on en oublie. Cherche pourquoi → `event delegation javascript`.
+- L'idée maligne : mettre **un seul** écouteur sur le **parent** (le `<tbody>`), qui ne bouge jamais. Quand un clic remonte jusqu'à lui, on regarde **d'où** il vient.
+- Pour savoir sur quel élément précis on a cliqué → cherche `event.target` et `closest`.
+
+**✅ Test :** clique sur n'importe quelle ligne → la bonne info s'affiche, **même après** avoir filtré/trié le tableau.
+
+## 🧪 Exo 5 — Anti-rebond (« debounce ») sur la recherche
+
+**🎯 Objectif :** ta recherche se relance à **chaque** frappe. Sur une grosse liste, c'est du gaspillage. Attendre que l'utilisateur arrête de taper ~300 ms avant de filtrer.
+
+**🔍 Pistes :**
+- Cherche `debounce javascript` et les fonctions `setTimeout` / `clearTimeout`.
+- L'idée : à chaque frappe, on **annule** le minuteur précédent et on en relance un. Le filtrage ne part que si l'utilisateur fait une pause.
+
+**✅ Test :** tape vite « gui » → le filtrage ne se déclenche qu'**une** fois, à la fin, pas trois.
+
+---
+
+# 📦 Module C — Organiser son code en modules
+
+Ton `contact.js` grossit (compteur, formulaire, FAQ, navbar, horloge, fetch…). Il est temps de **découper**.
+
+## 🧪 Exo 6 — Séparer en fichiers avec `export` / `import`
+
+**🎯 Objectif :** sortir, par exemple, `creerNavbar` dans son propre fichier `navbar.js`, et l'**importer** là où tu en as besoin.
+
+**🔍 Pistes :**
+- Cherche `javascript export import` (les **modules ES**).
+- Côté HTML, une balise `<script>` classique ne suffit pas pour les modules : cherche `script type module`.
+- ⚠️ Comme `fetch`, les modules **ne marchent pas en `file://`** : il te faut le petit serveur (`python3 -m http.server`) vu au Niveau 4.
+- Commence petit : **un seul** export (la navbar), et fais-le marcher avant d'en découper d'autres.
+
+**✅ Test :** la page fonctionne exactement comme avant, mais ton code est réparti dans plusieurs fichiers plus courts.
+
+---
+
+# 🌍 Module D — Des données d'une vraie API en ligne
+
+Au Niveau 4 tu lisais un fichier JSON **local**. Là, on va chercher des données sur un **vrai serveur public**, comme le font les applis réelles.
+
+## 🧪 Exo 7 — Afficher des données venues du web
+
+**🎯 Objectif :** récupérer une liste depuis une API publique gratuite et l'afficher dans ta page (par ex. une liste d'utilisateurs fictifs, ou de publications).
+
+**🔍 Pistes :**
+- Une API d'entraînement très connue, sans clé ni inscription : cherche `jsonplaceholder`. Par exemple l'adresse `https://jsonplaceholder.typicode.com/users` renvoie une liste de personnes en JSON.
+- Tu réutilises **exactement** ce que tu sais déjà : `fetch`, `await`, `.json()`, une boucle, et `createElement`/`append` pour afficher.
+- Ouvre d'abord l'adresse directement dans le navigateur pour **voir la forme** des données : quelles clés existent (`name`, `email`, `company`…) ? C'est le réflexe n°1 avant d'afficher quoi que ce soit.
+- Pense au `try/catch` : une API en ligne peut être lente ou indisponible.
+
+**✅ Test :** une liste de vraies données distantes s'affiche dans ta page. Coupe ta connexion → ton message d'erreur s'affiche proprement.
+
+---
+
+# 📝 Module E — Lire tout un formulaire d'un coup
+
+## 🧪 Exo 8 — `FormData`
+
+**🎯 Objectif :** à l'envoi, récupérer **toutes** les valeurs du formulaire (prénom, e-mail, message) sans aller chercher chaque champ un par un avec `getElementById`.
+
+**🔍 Pistes :**
+- Cherche `MDN FormData`. On lui passe le `<form>`, et on peut lire chaque champ par son attribut `name` (`.get("prenom")`…).
+- Pour que ça marche, vérifie que **chacun** de tes champs a bien un attribut `name` (pas seulement un `id`).
+- Bonus : cherche `Object.fromEntries(formData)` pour transformer tout le formulaire en un seul objet `{ prenom: ..., email: ..., message: ... }`.
+
+**✅ Test :** à l'envoi, un `console.log` montre un objet propre avec toutes les valeurs saisies.
+
+---
+
+## 🗺️ Ce que ce niveau ajoute
+
+- `map`, `find`, `reduce` — le trio qui complète `filter`/`sort`
+- **délégation d'événements** et **debounce** — des écouteurs propres et efficaces
+- **modules** `export`/`import` — du code organisé
+- **API en ligne** réelle — `fetch` au-delà du fichier local
+- **`FormData`** — lire un formulaire d'un coup
+
+Après ça, les grandes directions possibles : un **framework** (commencer par comprendre *pourquoi* ils existent — tu as déjà recréé à la main plusieurs de leurs idées : composants, données → affichage), ou approfondir l'**accessibilité** et les **tests**. On en parlera.
+
+Note tes questions, et cherche le concept avant le code.