Rattrapage JS services (mode indices, sans solution): conditions, tableaux/boucles, filter, localStorage, classList, setInterval, fetch, composant navbar
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,200 @@
|
||||
# 🧗 Rattrapage JavaScript — page services
|
||||
|
||||
Salut Guillaume ! 👋
|
||||
|
||||
Tu as raté une journée, ce guide est là pour rattraper. Il couvre tout ce que le projet a avancé côté JavaScript, **dans l'ordre**, sur **ta** page services (le simulateur, le tableau des services, le formulaire de suggestions).
|
||||
|
||||
> ⚠️ **Ce guide est différent des précédents : il ne donne PAS 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. C'est en cherchant que ça rentre — et tu retiendras dix fois mieux qu'en copiant-collant.
|
||||
>
|
||||
> 🔎 Ton meilleur réflexe : taper dans Google **« MDN » + le nom de la chose** (ex. `MDN addEventListener`). MDN, c'est la doc de référence du web, en français, avec des exemples.
|
||||
|
||||
---
|
||||
|
||||
## 🩹 Avant de continuer : 3 choses à revoir dans ton `devis.js`
|
||||
|
||||
Tu as déjà bien attaqué le simulateur. Trois petits points à corriger toi-même (cherche, ne devine pas) :
|
||||
|
||||
1. Dans ton HTML, ta textarea a `row="6"`. Regarde bien l'attribut : il existe au **pluriel**. Lequel est le bon ? (cherche `MDN textarea rows`).
|
||||
2. Ton blocage à 100 véhicules : tu ajoutes 1, tu **affiches**, *puis* tu testes `> 99`. Dans quel ordre faudrait-il faire pour ne jamais afficher 100 une fraction de seconde ? (indice : teste **avant** d'afficher).
|
||||
3. Tu as une fonction `mettreAJourTOTAL` et une variable `totalargent` qui ne servent pas vraiment (le total affiché est toujours 0). Demande-toi : *d'où devrait venir le total ?* (indice : il se **calcule** à partir de `nbVehicules`, il ne se stocke pas dans une variable à part).
|
||||
|
||||
> 💡 Règle générale que tu retrouveras partout : une valeur qui **se déduit** d'une autre (le total se déduit du nombre de véhicules) ne se **stocke** pas — on la **recalcule** au moment de l'afficher.
|
||||
|
||||
---
|
||||
|
||||
# 🟢 Étape 1 — Les conditions (`if` / `else`)
|
||||
|
||||
## 🧪 Exo 1 — Singulier / pluriel dans le simulateur
|
||||
|
||||
**🎯 Objectif :** quand il y a **1** véhicule, afficher « 1 véhicule » ; à partir de 2, « N véhicules ».
|
||||
|
||||
**🔍 Pistes :**
|
||||
- La structure à chercher : `if (condition) { ... } else { ... }` → cherche `MDN if else`.
|
||||
- Pour comparer deux valeurs : l'opérateur d'égalité. Attention, en JS **`=` et `===` ne font pas la même chose** → cherche `difference == === javascript`. Dans un `if`, c'est presque toujours le triple.
|
||||
- Où mettre ce code ? Là où tu mets déjà à jour l'affichage du nombre.
|
||||
|
||||
**✅ Test :** descends à 1 → « véhicule » ; monte à 2+ → « véhicules ».
|
||||
|
||||
---
|
||||
|
||||
# 🟢 Étape 2 — Réagir à la saisie et à l'envoi
|
||||
|
||||
## 🧪 Exo 2 — Un compteur de caractères sur le formulaire de suggestions
|
||||
|
||||
**🎯 Objectif :** sous ta textarea, afficher « Il vous reste X caractères » qui se met à jour **à chaque frappe** (ta limite est `maxlength="500"`).
|
||||
|
||||
**🔍 Pistes :**
|
||||
- Il te faut un endroit où afficher le nombre : ajoute un `<span>` avec un `id` dans ton HTML.
|
||||
- L'événement qui se déclenche à chaque frappe dans un champ → cherche `MDN input event` (ce n'est pas `"click"`).
|
||||
- Pour savoir combien de caractères ont été tapés : sur un champ, `.value` donne le texte, et il existe une propriété qui donne sa **longueur** (la même que pour compter les éléments d'une liste) → cherche `javascript string length`.
|
||||
- Le reste = 500 moins ce nombre.
|
||||
|
||||
**✅ Test :** tape du texte → le nombre descend (499, 498…) et s'arrête à 0.
|
||||
|
||||
**Bonus :** passe le compteur en rouge sous 50 caractères → cherche `element.style.color` et l'opérateur ternaire `condition ? ... : ...`.
|
||||
|
||||
## 🧪 Exo 3 — Empêcher l'envoi d'un message vide
|
||||
|
||||
**🎯 Objectif :** si on clique « Envoyer » avec une suggestion vide, bloquer l'envoi et afficher un message.
|
||||
|
||||
**🔍 Pistes :**
|
||||
- L'événement déclenché quand un formulaire est envoyé → cherche `MDN form submit event`.
|
||||
- Pour **annuler** l'envoi par défaut → cherche `preventDefault`.
|
||||
- Pour considérer « que des espaces » comme vide → cherche `javascript trim`.
|
||||
- Afficher un message rapide → la fonction `alert(...)`.
|
||||
|
||||
**✅ Test :** envoi à vide → message + pas de rechargement. Avec du texte → ça passe.
|
||||
|
||||
---
|
||||
|
||||
# 🟡 Étape 3 — Les tableaux et les boucles (le gros morceau)
|
||||
|
||||
Jusqu'ici tes variables contiennent **une** valeur. Pour une **liste**, il y a les tableaux. C'est la base de presque tout.
|
||||
|
||||
## 🧪 Exo 4 — Décrire tes services dans un tableau d'objets
|
||||
|
||||
**🎯 Objectif :** au lieu d'avoir tes 4 services écrits « en dur » dans le `<table>`, range-les dans une **liste** en JavaScript.
|
||||
|
||||
**🔍 Pistes :**
|
||||
- Une **liste** s'écrit avec des crochets `[ ]` → cherche `javascript array`.
|
||||
- Chaque service a plusieurs infos (nom, description, prix) : ça, c'est un **objet** `{ }` avec des étiquettes → cherche `javascript object`.
|
||||
- Combine les deux : une liste d'objets `[ { ... }, { ... } ]`.
|
||||
- Pour parcourir la liste et tout afficher dans la console → cherche `javascript for of`.
|
||||
|
||||
**✅ Test :** un `console.log` dans la boucle affiche tes 4 services, un par ligne.
|
||||
|
||||
## 🧪 Exo 5 — Générer les lignes du tableau automatiquement
|
||||
|
||||
**🎯 Objectif :** que les lignes `<tr>` de ton tableau soient **fabriquées par le JS** à partir de la liste de l'exo 4. Ajouter un service = juste ajouter un objet à la liste.
|
||||
|
||||
**🔍 Pistes :**
|
||||
- Vide le corps de ton tableau dans le HTML et donne-lui un `id` (garde l'en-tête `<thead>`). Cherche `html tbody`.
|
||||
- Deux approches existent, regarde les deux et choisis :
|
||||
- assembler du texte HTML et l'injecter → cherche `innerHTML` et `template literals` (les accents graves `` ` `` avec `${...}`) ;
|
||||
- fabriquer chaque élément proprement → cherche `document.createElement` et `append`.
|
||||
- Une boucle parcourt la liste et ajoute une ligne par service.
|
||||
|
||||
**✅ Test :** le tableau s'affiche comme avant. Ajoute un 5ᵉ service dans la liste → la ligne apparaît sans toucher au HTML.
|
||||
|
||||
> 💡 Tu viens de toucher au principe des sites modernes : **les données d'un côté, l'affichage de l'autre**. On change les données, l'affichage suit.
|
||||
|
||||
## 🧪 Exo 6 — Une barre de recherche qui filtre les services
|
||||
|
||||
**🎯 Objectif :** un champ où l'on tape, et le tableau ne garde que les services dont le nom contient le texte.
|
||||
|
||||
**🔍 Pistes :**
|
||||
- Mets ton « affichage du tableau » dans une **fonction** que tu peux rappeler avec une liste différente.
|
||||
- Pour ne garder que certains éléments d'une liste → cherche `MDN Array filter`.
|
||||
- Pour ignorer les majuscules → cherche `toLowerCase`, et pour tester « contient » → cherche `string includes`.
|
||||
- À chaque frappe (`input`), filtre puis ré-affiche.
|
||||
|
||||
**✅ Test :** tape « géo » → seul le service de géolocalisation reste ; efface → tout revient.
|
||||
|
||||
---
|
||||
|
||||
# 🟡 Étape 4 — Donner une mémoire à la page (`localStorage`)
|
||||
|
||||
## 🧪 Exo 7 — Se souvenir du nombre de véhicules choisi
|
||||
|
||||
**🎯 Objectif :** si on règle le simulateur sur 12 véhicules et qu'on recharge la page, il doit revenir à **12**, pas à 1.
|
||||
|
||||
**🔍 Pistes :**
|
||||
- Le petit coffre-fort du navigateur qui survit au rechargement → cherche `MDN localStorage` (`setItem` pour ranger, `getItem` pour relire).
|
||||
- Sauvegarde à chaque changement ; relis au chargement de la page.
|
||||
- ⚠️ **Piège classique :** ce qui sort de `localStorage` est toujours du **texte**, pas un nombre. `"12" + 1` donne `"121"`, pas `13` ! Cherche `parseInt javascript` pour reconvertir en nombre.
|
||||
|
||||
**✅ Test :** règle un nombre, recharge (F5) → le simulateur repart sur ce nombre.
|
||||
|
||||
---
|
||||
|
||||
# 🟠 Étape 5 — Le style dynamique et le temps réel
|
||||
|
||||
## 🧪 Exo 8 — Un bouton « Mode sombre »
|
||||
|
||||
**🎯 Objectif :** un bouton qui bascule la page en thème sombre, et re-clic pour revenir.
|
||||
|
||||
**🔍 Pistes :**
|
||||
- Prépare une classe CSS (ex. `body.sombre { ... }`) avec un fond foncé et un texte clair.
|
||||
- En JS, pour ajouter/enlever une classe en un seul geste → cherche `classList toggle`.
|
||||
|
||||
**✅ Test :** clic → sombre, re-clic → clair.
|
||||
|
||||
## 🧪 Exo 9 — Une horloge qui tourne dans le pied de page
|
||||
|
||||
**🎯 Objectif :** afficher l'heure actuelle, mise à jour **chaque seconde**.
|
||||
|
||||
**🔍 Pistes :**
|
||||
- Pour obtenir l'heure : cherche `MDN Date` et `toLocaleTimeString`.
|
||||
- Pour répéter une action à intervalle régulier → cherche `MDN setInterval` (la durée est en **millisecondes** : 1 seconde = ?).
|
||||
|
||||
**✅ Test :** l'heure s'affiche et avance toute seule.
|
||||
|
||||
---
|
||||
|
||||
# 🔴 Étape 6 — Aller chercher des données ailleurs (`fetch`)
|
||||
|
||||
C'est l'étape la plus avancée, prends ton temps.
|
||||
|
||||
## 🧪 Exo 10 — Charger une liste de véhicules depuis un fichier JSON
|
||||
|
||||
**🎯 Objectif :** créer un fichier `vehicules.json` (quelques véhicules : modèle, immatriculation, km) et l'afficher dans un tableau via JavaScript, au lieu de l'écrire en dur.
|
||||
|
||||
**🔍 Pistes :**
|
||||
- Le format JSON ressemble à une liste d'objets, mais avec des règles strictes (guillemets doubles partout, pas de virgule finale) → cherche `JSON format`.
|
||||
- Pour aller chercher un fichier → cherche `MDN fetch`. Comme ça prend du temps, on utilise `async` / `await` → cherche `async await javascript`.
|
||||
- ⚠️ **Important :** `fetch` ne marche pas si tu ouvres la page en double-cliquant (`file://`). Il faut un mini-serveur : dans un terminal, dans le dossier du projet, lance `python3 -m http.server 8000`, puis ouvre `http://localhost:8000/...`. Cherche `python http server` si besoin.
|
||||
- Pour réagir si le fichier est introuvable → cherche `try catch javascript`.
|
||||
|
||||
**✅ Test :** la liste des véhicules s'affiche. Renomme le fichier exprès → un message d'erreur s'affiche au lieu d'un plantage.
|
||||
|
||||
---
|
||||
|
||||
# 🏁 Étape 7 — Pour être au niveau du reste du projet
|
||||
|
||||
## 🧪 Exo 11 — La navbar en composant réutilisable
|
||||
|
||||
**🎯 Objectif :** ta barre de navigation est recopiée à l'identique dans `index.html`, `services.html`, `contact.html`. L'écrire **une seule fois** en JavaScript et l'injecter sur la page.
|
||||
|
||||
**🔍 Pistes :**
|
||||
- Une **fonction** qui **renvoie** le HTML de la navbar (avec `return` et un *template literal*) → cherche `javascript return` et `template literals`.
|
||||
- Pour insérer ce HTML en haut du `<body>` → cherche `insertAdjacentHTML`.
|
||||
- Pour mettre en valeur le bouton de la page courante, passe à la fonction un **paramètre** (ex. la page active) et utilise une condition pour choisir la classe du bouton.
|
||||
|
||||
**✅ Test :** supprime la navbar écrite en dur dans le HTML, garde le JS → elle réapparaît. Changer un lien = un seul endroit à modifier.
|
||||
|
||||
---
|
||||
|
||||
## 🗺️ Quand tu auras fait tout ça, tu sauras :
|
||||
|
||||
- les **conditions** (`if`/`else`, ternaire) et les **événements** (`input`, `submit`, `click`)
|
||||
- les **tableaux** et **objets**, les **boucles**, `filter`
|
||||
- **générer du HTML** depuis des données
|
||||
- la **mémoire** (`localStorage`) et le piège du texte vs nombre
|
||||
- le **style dynamique** (`classList`) et le **temps réel** (`setInterval`)
|
||||
- les **données distantes** (`fetch`, `async`/`await`, JSON)
|
||||
- le **composant réutilisable**
|
||||
|
||||
C'est exactement le niveau où en est la page contact, tu seras à jour.
|
||||
|
||||
Note tes questions au fur et à mesure — et résiste à l'envie de chercher « la réponse toute faite » : cherche d'abord **le concept**, le code viendra de toi.
|
||||
Reference in New Issue
Block a user