Résumé et prochaines étapes
Cette page n'ajoute pas de syntaxe nouvelle. Elle pose tout le cours sur une commande : boisson tea, taille regular. La ligne à expliquer est tea / regular.
D'où vient cette ligne
La page d'accessibilité l'a écrite avec un vrai button type=button. Mouse, Enter et Space lancent le même clic. aria-live="polite" parle après la phrase en cours. Si size manque, button.disabled vaut true et le bouton reste. Le focus reste sur le bouton.
Deux lignes plus tôt
Au débogage, le code a lu order.cup sur { drink: "tea", size: "regular" }. L'objet a size, pas cup. console.error ne lance pas, le script continue. Cette ligne était fixed / tea / regular.
throw new Error("missing size") arrête label avant return. catch lit error.message, donc missing size. error.name vaut Error. finally s'exécute dans les deux cas. Cette ligne était caught / missing size.
Sept rangées, une commande
Chaque rangée est un morceau de la même commande. Ouvre la séance correspondante seulement si le résultat paraît mince.
📊 Ce que le cours fait avec une commande
| Groupe | Tu peux | Un résultat |
|---|---|---|
| Valeurs et flux | garder les valeurs, choisir avec if, parcourir une liste | tea / regular |
| Fonctions | recevoir la commande et renvoyer une ligne | tea / regular |
| Objets et tableaux | lire le champ, lire le JSON, copier | { drink: "tea", size: "regular" } |
| La page | trouver le bouton et écrire la ligne | tea / regular |
| Attente | suspendre une fonction async ; fetch donne une Response | response.ok, puis response.json() |
| Syntaxe plus récente | tirer les noms, bâtir le texte, construire la classe | tea / regular |
| Soin | lire la vraie propriété, lancer exprès, garder le bouton | fixed / tea / regular, puis caught / missing size, puis tea / regular |
La carte est un rappel. Ce n'est pas un second cours, et elle n'a pas de questions.
Valeurs et décisions
Tu gardes tea et regular, tu les compares et tu répètes. if choisit. break quitte une boucle. continue saute un élément et poursuit.
Fonctions
Une fonction renvoie tea / regular. Une fonction fléchée est une fonction plus courte. Un closure voit encore la liaison après le retour de la fonction extérieure.
Objets, JSON et tableaux
JSON.parse transforme le texte en objet. map construit un nouveau tableau. find renvoie une correspondance. spread copie. rest rassemble ce que tu n'as pas nommé. La copie est superficielle.
La page
querySelector trouve le bouton. textContent écrit la ligne. setTimeout s'exécute plus tard et ne remplace pas le bouton.
L'attente
await ne suspend que cette fonction async. Le reste de la page continue. Une fonction async renvoie toujours une Promise. fetch se résout en une Response, pas en un corps déjà lu. response.json() renvoie une autre Promise. Un HTTP 404 ne rejette en général pas fetch. Vérifie response.ok. Une panne réseau peut rejeter.
Syntaxe plus récente
La déstructuration prend drink et size par leur nom. Un objet imbriqué absent peut lancer. Les gabarits remplissent ${...} à l'exécution. Les modules ne sont pas sur window et se chargent par HTTP. Une classe enfant appelle super avant this. Un champ privé reste dans la classe.
Quand la commande est fausse
Lis size, pas une propriété absente. console.error ne lance pas et la ligne suivante continue. throw arrête la fonction, et seul catch reprend. Mets l'action sur un bouton. Laisse le contour du focus visible.
La suite
La page suivante est une courte liste de tâches : ajouter, marquer comme fait, retirer. Elle fait encore partie du parcours de base.
Ensuite, en option : strict mode, Map et Set, expressions régulières, web storage, cookies et héritage de classes. Rien de cela n'est exigé pour finir le parcours de base.
Dis ces cinq lignes à voix haute
- Le bouton écrit tea / regular et aria-live="polite" parle après la phrase en cours
- console.error ne lance pas ; la ligne de débogage était fixed / tea / regular
- throw new Error("missing size") arrête label avant return ; catch lit missing size ; cette ligne était caught / missing size
- fetch se résout en une Response ; vérifie response.ok avant response.json()
- La page suivante est la liste de tâches