diff --git a/CORRECTION_alerte_file_vs_localhost.md b/CORRECTION_alerte_file_vs_localhost.md index 157c30a..1a68ae8 100644 --- a/CORRECTION_alerte_file_vs_localhost.md +++ b/CORRECTION_alerte_file_vs_localhost.md @@ -55,6 +55,29 @@ Deux façons : --- +## ⌨️ Et ton raccourci clavier Ctrl + Entrée ? (même cause) + +Ton code clavier est **correct**, bonne nouvelle : + +```js +zoneMessage.addEventListener("keydown", function (event) { + if (event.key === "Enter" && event.ctrlKey) { + formulaire.requestSubmit(); // ✅ bon choix + } + ... +}); +``` + +> 👍 Tu as bien utilisé **`requestSubmit()`** et pas `submit()`. La différence est importante : `requestSubmit()` **déclenche ton gestionnaire `submit`** (donc ta validation et — une fois corrigé — ton `preventDefault`), alors que `form.submit()` l'aurait **court-circuité** et aurait posté direct. Tu as pris le bon. + +Du coup, `Ctrl + Entrée` passe **exactement par le même chemin** que le clic sur « Envoyer » : il déclenche l'événement `submit` → ton gestionnaire tourne → et comme le `else` n'annule pas l'envoi, le formulaire **poste** pour de vrai → en `file://` rien ne se passe (« ça marche »), en `localhost` le serveur répond **501** et tu pars sur la page d'erreur (« ça ne marche pas »). + +👉 **Donc il n'y a pas de bug séparé pour le clavier** : c'est le même `preventDefault()` manquant. Dès que tu l'ajoutes (point ci-dessus), **le clic ET le Ctrl + Entrée** marcheront pareil, en `file://` comme en `localhost`. + +> 🔎 Et la **501** que tu vois ? C'est normal et attendu : le petit serveur `http.server` ne sait qu'**envoyer des fichiers** (méthode GET). Il ne sait pas **traiter** un envoi de formulaire (méthode POST) → il répond « 501 Unsupported method ». Ce n'est pas à toi de « réparer » le serveur : le bon réflexe, c'est de **ne pas poster du tout** (ton `preventDefault`), puisqu'il n'y a pas de programme derrière pour recevoir les données. + +--- + ## 📝 Bonus — bien comprendre `file://` vs `http://localhost` C'est **deux façons différentes** d'ouvrir la même page. Regarde ta **barre d'adresse**, elle te dit dans quel mode tu es. diff --git a/CORRECTION_map.md b/CORRECTION_map.md new file mode 100644 index 0000000..7045998 --- /dev/null +++ b/CORRECTION_map.md @@ -0,0 +1,77 @@ +# 🔧 Correction — ton `map` (et le `filter` au-dessus) + +D'abord : 👍 tu as bien corrigé le `preventDefault` (déplacé tout en haut du `submit`) — ton histoire de formulaire sur localhost est réglée, bravo. + +Pour le `map`, ton code de la fin de `equipe.js` : + +```js +const array = equipe.filter(function (stagiaire) { + return stagiaire.nom.toLowerCase().includes(mélissa, guillaume); +}); +const mapped = array.map((x) => x - stagiaire.job - stagiaire.partie); +console.log(mapped); +``` + +Il y a **3 erreurs** qui s'additionnent. On les prend une par une — ouvre la Console (F12), tu verras un message rouge `... is not defined`, c'est notre point de départ. + +--- + +## 🐛 Erreur 1 — `mélissa` et `guillaume` sont des variables qui n'existent pas + +```js +.includes(mélissa, guillaume) +``` + +Sans guillemets, `mélissa` et `guillaume` ne sont pas du **texte** : JavaScript les prend pour des **variables**… qui n'existent nulle part → **`ReferenceError: mélissa is not defined`**, et tout le fichier s'arrête là. + +Deux choses : +- Du texte, ça se met **entre guillemets** : `"mélissa"`. +- `includes("...")` ne prend **qu'un seul** mot à chercher (le 2ᵉ argument n'est pas un autre mot, c'est une position de départ — pas ce que tu veux). + +> 🔎 Mais surtout : **pour l'exo `map`, tu n'as pas besoin de `filter` du tout.** `filter` sert à *garder certains* éléments ; `map` sert à *transformer* chaque élément. Là, l'objectif (l'exo 1) est juste de transformer → donc `map` **directement sur `equipe`**, sans filtre. + +--- + +## 🐛 Erreur 2 — `stagiaire` n'existe pas dans le `map` + +```js +const mapped = array.map((x) => x - stagiaire.job - stagiaire.partie); +``` + +`stagiaire`, c'était le **nom du paramètre** de ta fonction `filter` (au-dessus). Il n'existe **que** à l'intérieur de cette fonction-là. Dans le `map`, il est **inconnu** → encore une `ReferenceError`. + +Dans le `map`, l'élément courant, c'est **`x`** (le nom que tu as choisi entre les parenthèses). C'est **lui** qu'il faut utiliser — pas `stagiaire`. + +> 💡 **À retenir :** le paramètre d'une fonction (`stagiaire`, `x`, `membre`…) n'existe qu'**à l'intérieur de cette fonction**. Ailleurs, il n'a jamais entendu parler de lui. + +--- + +## 🐛 Erreur 3 — le `-` (soustraction) n'a aucun sens ici + +```js +x - stagiaire.job - stagiaire.partie +``` + +`x` est un **objet** (`{ nom, job, partie }`) et `.job` / `.partie` sont du **texte**. Les **soustraire** ne veut rien dire → tu obtiendrais `NaN` (« Not a Number »). + +Le rôle du `map`, c'est de **renvoyer**, pour chaque élément, **la nouvelle valeur que tu veux**. Donc la question à te poser : *« pour chaque membre, qu'est-ce que je veux récupérer ? »* +- juste son nom → tu renvoies `x.nom` +- une phrase → tu renvoies `` `${x.nom} (${x.job})` `` + +> 💡 **À retenir :** dans un `map`, la fonction doit **`return`** quelque chose **construit à partir de l'élément** (`x.nom`, etc.). Pas une soustraction. + +--- + +## ✅ L'objectif de l'exo, remis au clair + +L'exo 1 (Niveau 5) voulait juste : *à partir de `equipe`, fabriquer la liste des **noms**.* C'est-à-dire **transformer** chaque membre en son nom : + +- pas de `filter`, +- `map` sur `equipe`, +- dans la fonction, **`return` le `.nom`** de l'élément reçu. + +**✅ Test :** ton `console.log` doit afficher `["Mélissa", "Guillaume", "Matthieu"]` (que des noms, dans un tableau). + +Essaie de l'écrire **toi-même** avec ces 3 corrections en tête. Si tu bloques vraiment, la solution exacte est dans `SOLUTIONS_contact_4.md` (exo 1) — mais tente d'abord, tu es à deux doigts. + +> 🧭 La phrase à garder : **`filter` choisit** *quels* éléments garder, **`map` transforme** *chaque* élément. Ici on transforme → c'est `map`, tout seul.