JavaScript module 1 : les fondamentaux, console en main

Jour 1 — La console et Node : votre laboratoire

Objectif : installer Node.js LTS, ouvrir la console du navigateur, et exécuter vos premières expressions dans les deux.

Théorie (20 min)

JavaScript est né dans le navigateur, mais il ne s'y limite plus. Deux environnements vont vous accompagner tout au long du parcours :

• La console du navigateur : ouvrez n'importe quelle page, appuyez sur F12, choisissez l'onglet « Console ». Vous tapez une expression, Entrée, le résultat s'affiche. C'est un REPL (read-eval-print loop : lire, évaluer, afficher, recommencer). Parfait pour essayer une idée en trois secondes.
• Node.js : le même moteur JavaScript (V8, celui de Chromium), sorti du navigateur, pour écrire de vrais programmes dans des fichiers et les lancer dans le terminal. La console du navigateur connaît la page courante ; Node connaît vos fichiers et votre machine.

Un programme est une suite d'instructions dans un fichier texte. JavaScript est un langage interprété : le moteur lit et exécute, sans étape de compilation visible pour vous. La version du langage s'appelle ECMAScript, abrégée ES : ce parcours utilise du JavaScript moderne (ES2022 et plus), celui que tous les navigateurs récents et Node LTS comprennent.

Pratique (30 min)

1. Installez Node.js depuis nodejs.org en choisissant « LTS ». Sous Windows, l'installateur fait tout ; sous macOS/Linux, l'installateur officiel ou votre gestionnaire de paquets conviennent.
2. Ouvrez un terminal et tapez node --version. Critère de réussite : il affiche quelque chose comme v22.11.0 ou plus récent. Si « commande introuvable » : fermez le terminal, rouvrez-le, et recommencez.
3. Tapez node seul : vous entrez dans le REPL de Node (le symbole > apparaît). Tapez 2 + 2, Entrée : il répond 4. Sortez avec Ctrl+D (ou .exit).
4. Ouvrez la console du navigateur (F12 → Console), tapez 2 + 2, Entrée : même réponse. Même langage, deux hôtes.
5. Dans le carnet : votre système, la version de Node, et les deux façons d'ouvrir un REPL.

Tips agent : un agent LLM diagnostique un souci d'installation en une question : « voici ce que répond node --version : [sortie collée], quel est le problème ? ». Piège : il ne voit pas votre écran — collez la sortie exacte. Preuve à demander : la commande qui montre que c'est réparé, pas une explication.

Synthèse (10 min)

Trois lignes : ce qu'est un REPL, la différence entre la console du navigateur et Node, ce que veut dire « LTS ». Puis, sans notes : fermez tout, rouvrez la console du navigateur et faites-lui calculer 6 × 7.

Jour 2 — Les valeurs et leurs types

Objectif : reconnaître les types de base de JavaScript et interroger n'importe quelle valeur avec typeof.

Théorie (20 min)

Un programme manipule des valeurs, et chaque valeur a un type — sa nature, qui décide de ce qu'on peut en faire. JavaScript en a quelques-uns à connaître par cœur :

• number : les nombres, entiers et décimaux confondus (42, -3.5). Un seul type, contrairement à d'autres langages. Cas spécial : NaN (« not a number »), le résultat d'un calcul impossible comme "abc" * 2 — c'est paradoxalement de type number.
• string : le texte, entre guillemets ("bonjour", 'salut').
• boolean : vrai ou faux, true et false, rien d'autre.
• undefined : « pas de valeur », ce que vaut une variable jamais remplie.
• null : « valeur vide » mise là exprès par le programmeur. La nuance : undefined est un oubli, null est un choix.
• Il existe aussi bigint, symbol, et les objets (jours 6 et 7) — vous les croiserez plus tard.

L'opérateur typeof interroge une valeur : typeof 42 vaut "number", typeof "salut" vaut "string". Bizarrerie historique à connaître : typeof null répond "object" — un bug de 1995, conservé pour ne pas casser le web. Ne vous y fiez pas.

Pratique (30 min)

1. Dans la console du navigateur ou le REPL Node, évaluez un par un : typeof 42, typeof 4.2, typeof "42", typeof true, typeof undefined, typeof null, typeof NaN.
2. Critère de réussite : pour chacun, vous avez d'abord écrit votre prédiction dans le carnet, puis comparé avec la console. Notez les surprises.
3. Produisez un NaN vous-même avec "abc" * 2, puis testez Number.isNaN("abc" * 2) : c'est la bonne façon de détecter un NaN (NaN === NaN vaut false, piège classique).
4. Testez typeof typeof 42 et expliquez le résultat dans le carnet (typeof rend toujours une chaîne).

Tips agent : « liste les valeurs pour lesquelles typeof surprend un débutant » : un agent vous sortira le trio null/NaN/fonction. Piège : il peut « exécuter de tête » et se tromper sur un cas tordu. Preuve : vous retapez chaque cas dans la console et vous comparez.

Synthèse (10 min)

Trois lignes : les cinq types de base, la différence undefined/null, le piège de typeof null. Sans notes : écrivez de mémoire le typeof de "false", false et 0 / 0, puis vérifiez.

Jour 3 — let et const : nommer les valeurs

Objectif : créer des variables avec let et const, savoir lequel choisir, et nommer proprement.

Théorie (20 min)

Une variable est un nom qui pointe vers une valeur : une étiquette collée sur une boîte. En JavaScript moderne, on la déclare avec let ou const :

let score = 0;
const nom = "Ada";
score = score + 10;

let crée une variable qu'on peut réaffecter (changer le contenu de la boîte) ; const crée un lien constant : réaffecter provoque une erreur. Règle simple et moderne : const par défaut, let seulement quand la valeur doit changer (un compteur, un total). Si tout est const, chaque nom ne change jamais de sens, et le code se lit comme une liste de faits.

Vous croiserez var dans du vieux code et de vieux tutoriels : c'est l'ancêtre de let, avec des règles de portée piégeuses. Dans ce parcours, var n'existe pas.

Nommage : la convention JavaScript est le camelCase — dateDeNaissance, nombreDeCafes. Lettres, chiffres (pas en premier), _ et $ ; pas d'espaces, pas d'accents de préférence. Un bon nom dit ce que contient la boîte : total vaut mieux que x.

Pratique (30 min)

1. Dans le REPL, tapez :

const prenom = "Ada";
const anneeNaissance = 1815;
let annee = 2026;
let age = annee - anneeNaissance;
age;

2. Critère de réussite : la dernière ligne affiche l'âge calculé par la machine, pas par vous.
3. Changez annee en 2030 (c'est un let, c'est permis), recalculez age, affichez-le : il suit.
4. Tentez prenom = "Grace"; et lisez la TypeError. C'est fait exprès : const protège.
5. Écrivez un nom interdit (let 2ePlace = 1;), lisez la SyntaxError, corrigez.
6. Remplacez mentalement chaque let par const : lesquels casseraient ? Ce sont exactement les variables qui « bougent ».

Tips agent : « relis ce code et dis quelles variables devraient être const » est une relecture qu'un agent fait bien. Piège : il peut réécrire tout le fichier au passage. Preuve à demander : la liste des changements proposés, pas un nouveau fichier.

Synthèse (10 min)

Trois lignes : let vs const, pourquoi const par défaut, les règles de nommage. Sans notes : déclarez un const pour votre ville, un let pour un compteur, incrémentez le compteur deux fois.

Jour 4 — Les nombres et les opérateurs

Objectif : faire calculer JavaScript comme une calculette, et connaître les deux pièges des nombres.

Théorie (20 min)

Les opérateurs arithmétiques :

• + addition, - soustraction, * multiplication ;
• / division : 10 / 4 donne 2.5 ;
• % reste de la division (« modulo ») : 10 % 3 donne 1 — et n % 2 === 0 teste si n est pair ;
• ** puissance : 2 ** 10 donne 1024 ;
• les parenthèses fixent l'ordre : (2 + 3) * 4 donne 20, 2 + 3 * 4 donne 14.

Premier piège : les décimaux sont approchés. 0.1 + 0.2 affiche 0.30000000000000004. Les nombres sont stockés en binaire flottant, et 0.1 n'a pas d'écriture binaire exacte — comme 1/3 en décimal. Pour de l'argent, on compte en centimes avec des entiers. Deuxième piège : le + colle les textes. "5" + 3 donne la chaîne "53", pas 8. Si une valeur vient d'un champ de formulaire ou d'un fichier, c'est une chaîne : convertissez avec Number("5") avant de calculer.

Pour arrondir : Math.round(2.6) donne 3, Math.floor(2.6) donne 2, Math.ceil(2.1) donne 3. Et les raccourcis : score += 10 vaut score = score + 10, compteur++ ajoute 1.

function moyenne(a, b) {
}

function moyenne(a, b) {
  return (a + b) / 2;
}

Pratique (30 min)

1. Dans le REPL, calculez : 7 % 3, 2 ** 10, (2 + 3) * 4, 100 / 7. Prédisez chaque résultat dans le carnet avant Entrée.
2. Vérifiez les deux pièges : 0.1 + 0.2, puis "5" + 3, puis la réparation Number("5") + 3.
3. Calculez le prix TTC d'un article à 19,99 € avec 20 % de TVA, en centimes : const prixCentimes = 1999; puis multipliez par 1.2 et arrondissez avec Math.round. Critère de réussite : vous obtenez 2399 centimes, pas un nombre à rallonge.
4. Réussissez l'exercice encadré moyenne ci-dessus : écrivez la fonction dans le cadre, lancez, et obtenez le feu vert.

Tips agent : « convertis ce calcul en centimes pour éviter les erreurs de flottants » est une consigne qu'un agent applique bien. Piège : il peut rendre un résultat en euros avec deux décimales « qui a l'air juste ». Preuve : le test Math.round(1999 * 1.2) === 2399 exécuté, pas relu.

Synthèse (10 min)

Trois lignes : le modulo et son usage « pair/impair », le piège des flottants et sa parade, le piège du + sur les chaînes. Sans notes : calculez le reste de 1000 divisé par 7, puis le carré de 12.

Jour 5 — Les chaînes de caractères

Objectif : manipuler du texte : mesurer, découper, chercher, assembler avec les gabarits.

Théorie (20 min)

Une chaîne est une suite de caractères entre guillemets. Les opérations quotidiennes :

• "bonjour".length → 7 : le nombre de caractères ;
• "bonjour".toUpperCase() → "BONJOUR" ; toLowerCase() l'inverse ;
• "bonjour".slice(0, 3) → "bon" : du caractère 0 inclus au 3 exclu ;
• "bonjour".includes("jou") → true ; startsWith et endsWith existent aussi ;
• " a ".trim() → "a" : enlève les espaces des bords ;
• "a,b,c".split(",") → un tableau ["a", "b", "c"] (les tableaux arrivent demain).

Point capital : les chaînes sont immuables — aucune méthode ne modifie la chaîne d'origine, elles renvoient toutes une nouvelle chaîne. let s = "bon"; s.toUpperCase(); laisse s à "bon" ; il faut écrire s = s.toUpperCase().

Pour assembler du texte avec des valeurs, le gabarit (template literal) avec les accents graves est le standard moderne :

const prenom = "Ada";
const age = 36;
console.log(`${prenom} a ${age} ans.`);

Tout ce qui est entre ${} est évalué comme du JavaScript et inséré. Fini les "..." + variable + "..." illisibles.

function salutation(nom) {
}

function salutation(nom) {
  return `Bonjour ${nom} !`;
}

Pratique (30 min)

1. Dans le REPL : const langage = "JavaScript"; puis affichez sa longueur, sa version majuscule, les quatre premières lettres avec slice, et testez langage.includes("Script").
2. Critère de réussite : vous avez écrit vos quatre prédictions avant d'exécuter, et langage vaut toujours "JavaScript" à la fin (immuabilité vérifiée).
3. Avec un gabarit, produisez la phrase Ada a 36 ans. à partir des deux variables du cours, sans aucun +.
4. Nettoyez la saisie fautive " Ada " avec trim(), puis recomptez sa longueur.
5. Réussissez l'exercice encadré salutation.

Tips agent : « réécris cette concaténation en gabarit » : un agent le fait instantanément. Piège : il peut oublier les accents graves et rendre des guillemets. Preuve : exécutez la ligne ; si la console affiche ${nom} tel quel, ce ne sont pas des accents graves.

Synthèse (10 min)

Trois lignes : length, slice et includes ; l'immuabilité ; la syntaxe d'un gabarit. Sans notes : à partir de "programmation", affichez sa longueur et ses cinq dernières lettres.

Jour 6 — Les tableaux : stocker une liste

Objectif : créer un tableau, lire et modifier ses éléments, ajouter et retirer.

Théorie (20 min)

Un tableau (array) est une liste ordonnée de valeurs, entre crochets :

const courses = ["pommes", "riz", "café"];
courses[0];        // "pommes" : le premier élément est à l'index 0
courses.length;    // 3
courses[2];        // "café" : le dernier est à l'index length - 1

L'index commence à 0, pas à 1 : c'est la convention de presque tous les langages, et la source de l'erreur la plus fréquente des débutants (« décalage d'un »). courses.at(-1) lit le dernier élément sans calcul.

Ajouter et retirer, au bout :

• courses.push("thé") ajoute à la fin (et renvoie la nouvelle longueur) ;
• courses.pop() retire le dernier et le renvoie ;
• courses.includes("riz") teste la présence ; courses.indexOf("riz") donne l'index ou -1.

Un tableau déclaré const peut recevoir des push : const fige le lien vers le tableau, pas son contenu. C'est LA surprise du jour 3 qui se révèle : const t = []; t.push(1); est légal, t = []; ne l'est pas. Pour parcourir un tableau élément par élément, on écrit une boucle — c'est le programme du jour 11 ; aujourd'hui, on lit et on modifie.

function somme(nombres) {
}

function somme(nombres) {
  let total = 0;
  for (const n of nombres) {
    total += n;
  }
  return total;
}

Pratique (30 min)

1. Créez const repas = ["petit-déj", "déjeuner", "dîner"]; Affichez le premier élément, le dernier avec at(-1), et la longueur.
2. Ajoutez "goûter" avec push, vérifiez que length passe à 4, retirez-le avec pop.
3. Critère de réussite : repas.at(-1) redonne "dîner" et repas.length vaut 3 : vous avez ajouté puis annulé proprement.
4. Tentez repas[5] : que répond la console ? Notez que ce n'est PAS une erreur — undefined, encore lui.
5. Testez le const-mais-mutable : const t = []; t.push(42); t; puis tentez t = []; et lisez l'erreur.
6. Réussissez l'exercice encadré somme.

Tips agent : « pourquoi ce push marche sur une const ? » : un agent explique bien la différence lien/contenu. Piège : s'il vous propose du code avec var, son JavaScript date. Preuve : demandez-lui la version de la spec ou l'équivalent moderne.

Synthèse (10 min)

Trois lignes : index 0 et at(-1), push/pop, ce que const fige vraiment. Sans notes : créez un tableau de trois couleurs, affichez la deuxième, ajoutez-en une quatrième, donnez la longueur.

Jour 7 — Les objets : des paires clé-valeur

Objectif : créer un objet, lire et écrire ses propriétés, imbriquer objets et tableaux.

Théorie (20 min)

Un objet regroupe des valeurs sous des noms : des paires clé: valeur entre accolades. C'est la structure de données reine de JavaScript — tout ce qui vient d'une API web est un objet.

const personne = {
  prenom: "Ada",
  age: 36,
  langages: ["Ada", "COBOL"]
};
personne.prenom;        // "Ada" — notation point
personne["age"];        // 36 — notation crochets
personne.langages[0];   // "Ada" — on enchaîne

Le point est la voie normale. Les crochets servent quand la clé est dans une variable : const cle = "prenom"; personne[cle] vaut "Ada". On peut ajouter une propriété après coup (personne.ville = "Londres";), en modifier une, en supprimer une avec delete personne.age. Comme les tableaux, un objet const reste modifiable dans son contenu.

Trois outils pour inspecter : Object.keys(personne) liste les clés, Object.values(personne) les valeurs, Object.entries(personne) les paires. Et "age" in personne teste l'existence d'une clé — utile, car lire une clé absente donne undefined, silencieusement.

Pratique (30 min)

1. Créez l'objet livre avec les clés titre, auteur, pages, lu (un booléen). Affichez chaque propriété avec le point.
2. Changez lu à true, ajoutez livre.note = 4;, listez les clés avec Object.keys.
3. Critère de réussite : Object.keys(livre) contient les cinq clés et livre.lu vaut true.
4. Lisez avec une variable : const quoi = "titre"; livre[quoi]; — puis tentez livre.quoi et expliquez la différence dans le carnet.
5. Construisez un objet bibliotheque dont la clé livres est un tableau de deux objets livre. Affichez le titre du deuxième : bibliotheque.livres[1].titre. Vous venez de lire la structure exacte d'une réponse d'API.

Tips agent : « voici un extrait de JSON, écris le chemin d'accès au champ X » : un agent trouve le chemin instantanément. Piège : il invente parfois une clé qui n'existe pas dans votre extrait. Preuve : exécutez le chemin dans la console sur vos vraies données — undefined ou une valeur, la vérité est là.

Synthèse (10 min)

Trois lignes : point vs crochets, pourquoi const n'empêche pas la modification, le trio keys/values/entries. Sans notes : créez un objet film avec trois propriétés, changez-en une, vérifiez une clé absente.

Jour 8 — Lire un message d'erreur sans paniquer

Objectif : reconnaître les trois erreurs courantes et remonter d'un message à la ligne fautive.

Théorie (20 min)

Un message d'erreur n'est pas une punition : c'est le moteur qui vous dit quoi et où. Il se lit en deux temps : le type d'erreur d'abord, la pile d'appels (stack trace) ensuite, de haut en bas jusqu'à la première ligne qui est dans VOTRE code.

• SyntaxError : le code est mal formé, le moteur n'a même pas pu le lire. Parenthèse ouverte jamais fermée, guillemet manquant, mot-clé mal tapé. Exemple : Unexpected token ou missing ) after argument list.
• ReferenceError : vous utilisez un nom qui n'existe pas. total is not defined signifie : variable jamais déclarée, ou faute de frappe (score vs scroe), ou variable déclarée dans un autre bloc.
• TypeError : la valeur n'est pas du bon type pour l'opération. Les deux hits du débutant : undefined is not a function (vous appelez quelque chose qui n'est pas une fonction) et Cannot read properties of undefined (reading 'nom') (vous lisez .nom sur une valeur qui est undefined — la clé d'avant n'existait pas).

La méthode de lecture : (1) lire le type, (2) lire le message, (3) suivre la pile jusqu'à son propre fichier et son numéro de ligne, (4) afficher les valeurs juste avant cette ligne avec console.log pour voir laquelle est undefined. Quatre-vingt-dix pour cent des erreurs de débutant se résolvent ainsi, sans rien demander à personne.

Pratique (30 min)

1. Provoquez les trois erreurs volontairement, dans le REPL, et lisez chaque message à voix haute : console.log("a"; (SyntaxError), console.log(inconnu) (ReferenceError), const x = undefined; x.nom; (TypeError).
2. Critère de réussite : pour chacune, vous avez écrit dans le carnet le type, la cause, la réparation — avant de réparer.
3. Créez un fichier bug.js avec cinq lignes dont une TypeError au milieu, lancez node bug.js, et identifiez le numéro de ligne dans la pile.
4. Réparez le fichier en ajoutant un console.log juste avant la ligne fautive pour afficher la valeur coupable.

Tips agent : collez le message d'erreur ET les cinq lignes de code autour : « quelle ligne fautive, et pourquoi ? ». Piège : sans le code, l'agent devine. Preuve à demander : la ligne citée, et une seule correction à appliquer — puis vous relancez vous-même.

Synthèse (10 min)

Trois lignes : SyntaxError vs ReferenceError vs TypeError, comment se lit une pile d'appels, pourquoi console.log avant la ligne fautive. Sans notes : provoquez une ReferenceError et une TypeError et nommez-les.

Jour 9 — true, false et le « truthy »

Objectif : comparer proprement avec ===, et savoir quelles valeurs se comportent comme faux.

Théorie (20 min)

Les comparaisons qui renvoient un booléen : === égalité stricte (même type ET même valeur), !== différent, < > <= >= pour l'ordre. La règle d'or du JavaScript moderne : toujours ===, jamais ==. Le double égal « convertit » avant de comparer : "5" == 5 vaut true, 0 == false vaut true, "" == false vaut true — des pièges en série que === élimine : "5" === 5 vaut false, fin de la discussion.

Les opérateurs logiques : && (et), || (ou), ! (non). true && false vaut false ; false || true vaut true.

Dernière pièce : les valeurs falsy — celles qui comptent pour faux dans une condition. Il y en a exactement six : false, 0, "" (chaîne vide), null, undefined, NaN. Tout le reste est truthy, y compris les surprises : "0" (chaîne non vide), [] (tableau vide), {} (objet vide). C'est pourquoi if (liste) ne teste PAS si une liste est vide — elle ne l'est jamais aux yeux d'un if ; on écrit liste.length === 0.

Pratique (30 min)

1. Prédisez puis vérifiez dans la console : 5 === "5", 5 == "5", null === undefined, null == undefined, !"", !"bonjour", !![].
2. Critère de réussite : au moins six bonnes prédictions sur sept ; notez celle qui vous a trompé dans le carnet.
3. Écrivez la liste des six valeurs falsy de mémoire, puis vérifiez chacune avec Boolean(valeur).
4. Testez le piège de la liste vide : const l = []; if (l) { console.log("truthy !"); } — puis la version correcte avec l.length.

Tips agent : « convertis ces comparaisons == en === et dis lesquelles changent de résultat » : un agent fait ce tri bien. Piège : il peut affirmer le résultat sans exécuter. Preuve : vous évaluez chaque paire dans la console, c'est immédiat.

Synthèse (10 min)

Trois lignes : pourquoi === et pas ==, les six falsy, pourquoi if (tableau) ne teste pas le vide. Sans notes : citez les six falsy, puis écrivez le test correct d'une chaîne vide.

Jour 10 — if / else : le programme décide

Objectif : écrire des branchements avec if, else if, else, et les conditions composées.

Théorie (20 min)

Le if exécute un bloc seulement si sa condition est truthy :

const age = 20;
if (age >= 18) {
  console.log("majeur");
} else if (age >= 16) {
  console.log("presque");
} else {
  console.log("mineur");
}

Les blocs sont évalués de haut en bas, et le premier dont la condition est vraie gagne — les suivants sont ignorés. L'ordre compte donc : testez le cas le plus restrictif d'abord. Le else final, sans condition, attrape tout ce qui reste.

Les conditions se combinent : age >= 18 && carte (les deux), gratuit || etudiant (l'un ou l'autre), !bloque (pas bloqué). Attention à la lecture : a && b s'arrête dès que a est faux (b n'est même pas évalué — c'est le « court-circuit »), et a || b s'arrête dès que a est vrai.

Deux formes courtes à connaître : l'opérateur ternaire const label = age >= 18 ? "majeur" : "mineur"; pour choisir entre deux valeurs, et l'opérateur ?? qui fournit un défaut seulement si la valeur est null ou undefined : const nom = saisie ?? "anonyme"; (contrairement à ||, il laisse passer 0 et "", souvent ce qu'on veut).

Pratique (30 min)

1. Créez accueil.js : une variable heure, et un if/else if/else qui affiche « bonjour » avant 18 h, « bonsoir » avant 23 h, « bonne nuit » ensuite. Lancez avec node accueil.js.
2. Changez l'heure trois fois pour traverser les trois branches. Critère de réussite : les trois messages apparaissent chacun au moins une fois.
3. Ajoutez une condition composée : if (heure >= 8 && heure < 12) affiche « café ? ».
4. Testez le ternaire : const message = heure < 12 ? "matin" : "après-midi"; affiché avec console.log.
5. Testez le piège ?? : const qte = 0; console.log(qte || 1, qte ?? 1); — expliquez les deux valeurs dans le carnet.

Tips agent : « réécris ce if/else en ternaire » ou l'inverse : un agent jongle bien entre les deux formes. Piège : un ternaire à trois branches imbriquées devient illisible — refusez-le, l'agent obéit. Preuve : les deux versions affichent la même chose sur vos trois valeurs de test.

Synthèse (10 min)

Trois lignes : l'ordre des else if, le court-circuit de && et ||, la différence || et ??. Sans notes : écrivez le if qui affiche « pair » ou « impair » selon un nombre (indice : modulo).

Jour 11 — Les boucles : répéter sans se répéter

Objectif : maîtriser les trois boucles : while, for classique, for…of.

Théorie (20 min)

Une boucle répète un bloc tant qu'une condition tient. Trois formes, trois usages :

// while : tant qu'une condition est vraie (nombre de tours inconnu)
let essais = 0;
while (essais < 3) {
  console.log("essai", essais + 1);
  essais++;
}

// for classique : compteur, condition, pas — tout tient sur une ligne
for (let i = 0; i < 3; i++) {
  console.log("tour", i);
}

// for…of : pour chaque élément d'un tableau — la plus utilisée
const courses = ["pommes", "riz", "café"];
for (const article of courses) {
  console.log(article);
}

Règles de survie : la condition d'un while doit finir par devenir fausse, sinon la boucle est infinie (dans la console : Ctrl+C ou fermez l'onglet) — oublier le essais++ est le grand classique. Dans une boucle, break sort immédiatement, continue saute au tour suivant. Et choisissez la forme adaptée : for…of pour un tableau, for classique quand l'index compte, while quand on ne sait pas combien de tours il faudra.

Pratique (30 min)

1. Écrivez les trois boucles du cours dans un fichier boucles.js, lancez-le avec node, vérifiez les affichages.
2. Avec un for classique, affichez les tables de 7 de 1 à 10 (7 x 3 = 21, avec un gabarit).
3. Avec un for…of, calculez la somme du tableau [4, 8, 15, 16, 23, 42]. Critère de réussite : 108.
4. Avec un while, partez de 1000 et divisez par 2 jusqu'à passer sous 1, en comptant les tours. Vérifiez : 10 tours.
5. Provoquez volontairement une boucle infinie (while sans incrément) DANS NODE, arrêtez-la avec Ctrl+C, et notez dans le carnet comment on s'en sort.

Tips agent : « cette boucle est-elle infinie ? justifie en suivant la variable de contrôle tour par tour » : un agent le fait bien quand la boucle tient en dix lignes. Piège : sur une boucle tordue il peut répondre trop vite. Preuve : faites-la tourner 3 secondes dans node — une boucle infinie ne s'arrête pas seule.

Synthèse (10 min)

Trois lignes : les trois formes et leur usage, break et continue, le réflexe anti-boucle-infinie. Sans notes : affichez les carrés de 1 à 5 avec un for classique.

Jour 12 — Les fonctions : un nom pour un calcul

Objectif : déclarer et appeler des fonctions, avec paramètres, valeur de retour et forme fléchée.

Théorie (20 min)

Une fonction est un bloc de code nommé, qu'on peut appeler autant de fois qu'on veut, avec des entrées (paramètres) et une sortie (la valeur après return) :

function aire(largeur, hauteur) {
  return largeur * hauteur;
}
aire(3, 4);   // 12

// la forme fléchée, équivalente et partout dans le code moderne
const aire2 = (largeur, hauteur) => {
  return largeur * hauteur;
};
// et sa forme courte quand le corps tient en une expression :
const double = n => n * 2;

Quatre idées font tout : (1) les paramètres sont des variables locales, invisibles hors de la fonction ; (2) return renvoie la valeur ET termine la fonction — tout code après un return exécuté ne tourne jamais ; (3) sans return, la fonction renvoie undefined, la cause n° 1 des « mon calcul donne undefined » ; (4) une fonction peut appeler une autre fonction : c'est ainsi qu'on construit des programmes, en empilant de petits calculs nommés.

Un paramètre peut avoir une valeur par défaut : function saluer(nom = "inconnu"). Et une fonction est une valeur comme une autre : on peut la ranger dans une variable, la passer en argument — c'est la porte du module 2.

function fizzbuzz(n) {
}

function fizzbuzz(n) {
  if (n % 15 === 0) return "FizzBuzz";
  if (n % 3 === 0) return "Fizz";
  if (n % 5 === 0) return "Buzz";
  return n;
}

Pratique (30 min)

1. Écrivez dans fonctions.js : double (forme courte), aire (forme classique), saluer(nom = "inconnu") avec un gabarit. Appelez chacune deux fois avec des valeurs différentes et console.log.
2. Critère de réussite : saluer() sans argument affiche « inconnu », et double(21) affiche 42.
3. Écrivez estPair(n) qui renvoie un booléen (modulo), puis decrire(n) qui appelle estPair et renvoie "pair" ou "impair" — une fonction qui en appelle une autre.
4. Oubliez volontairement le return dans une fonction, appelez-la, constatez l'undefined, réparez. Gravez le réflexe.
5. Réussissez l'exercice encadré fizzbuzz — il prépare le mini-projet de demain.

Tips agent : « extrais ce bloc répété trois fois en une fonction avec paramètres » : un agent fait ce refactoring proprement. Piège : il peut changer le nommage ou ajouter des options non demandées. Preuve : le programme affiche exactement la même sortie avant et après.

Synthèse (10 min)

Trois lignes : paramètre vs argument, ce que fait return, les deux écritures (classique et fléchée). Sans notes : écrivez cube(n) et une fonction qui l'utilise pour donner le volume d'un cube.

Jour 13 — Mini-projet : FizzBuzz

Objectif : assembler conditions, boucle et fonction dans un programme complet qui tourne sous Node.

Théorie (20 min)

FizzBuzz est l'exercice d'entretien le plus célèbre du monde : afficher les nombres de 1 à 100, en remplaçant les multiples de 3 par « Fizz », ceux de 5 par « Buzz », ceux des deux par « FizzBuzz ». Il ne teste pas la mémoire mais la capacité à décomposer : une fonction qui traite UN nombre, une boucle qui l'appelle CENT fois.

Le piège qui fait échouer la moitié des candidats est l'ordre des tests : si on teste « multiple de 3 » avant « multiple de 15 », le 15 tombe dans « Fizz » et « FizzBuzz » n'apparaît jamais. Le cas le plus spécifique d'abord — vous l'avez vu au jour 10, le voici en situation réelle.

La structure d'un bon petit programme : les fonctions en haut (les outils), le « scénario » en bas (ce qu'on fait avec). Ici : fizzbuzz(n) en haut (elle existe déjà, jour 12), puis la boucle qui l'appelle et affiche. Ce découpage rendra le programme testable au module 4 : on teste la fonction, pas la boucle.

Pratique (30 min)

1. Créez fizzbuzz.js : reprenez votre fonction fizzbuzz(n) du jour 12 (retapez-la), puis ajoutez la boucle :

for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i));
}

2. Lancez node fizzbuzz.js. Critère de réussite : la sortie commence par 1, 2, Fizz, 4, Buzz, Fizz, 7… et le quinzième élément est FizzBuzz. Vérifiez les 20 premières lignes à l'œil.
3. Modifiez la borne pour afficher de 1 à 15 seulement, relancez, comptez : 4 Fizz, 2 Buzz, 1 FizzBuzz (sur 15 nombres).
4. Variante : ajoutez un paramètre limite à une fonction afficher(limite) qui contient la boucle, et appelez afficher(30).
5. Dans le carnet : qu'est-ce qui sépare « la règle » (la fonction) du « déroulé » (la boucle) ? Pourquoi c'est utile ?

Tips agent : « écris FizzBuzz en JavaScript moderne » : tout agent le fait par cœur — l'intérêt est ailleurs : demandez « quels tests écrirais-tu pour cette fonction ? » et comparez avec vos vérifications manuelles. Piège : un code qui marche du premier coup ne prouve rien ; les cas 3, 5, 15, 7, eux, prouvent.

Synthèse (10 min)

Trois lignes : la décomposition fonction + boucle, le piège de l'ordre des tests, la structure outils-en-haut / scénario-en-bas. Sans notes : réécrivez FizzBuzz de 1 à 20 entièrement de mémoire.

Jour 14 — Bilan du module 1

Objectif : vérifier que les fondations tiennent, et combler les trous avant d'attaquer le module 2.

Théorie (20 min)

Pas de notion nouvelle : relisez votre carnet des jours 1 à 13. Le fil rouge du module : JavaScript manipule des valeurs typées, rangées sous des noms (let/const), transformées par des opérateurs et des fonctions, aiguillées par des conditions et répétées par des boucles. Tout le reste du parcours — et du langage — est une variation sur ces six idées.

Auto-test oral, à voix haute ou par écrit : expliquez chacune de ces phrases comme à un ami qui n'y connaît rien : « const fige le lien, pas le contenu », « === compare sans convertir », « return termine la fonction », « l'index commence à 0 », « une chaîne ne se modifie pas, on en crée une nouvelle ». Chaque phrase qui résiste est une séance à refaire — pas un échec, une indication.

Pratique (30 min)

1. Refaites sans notes, dans l'ordre : la moyenne (jour 4), la salutation par gabarit (jour 5), la somme d'un tableau (jour 6), FizzBuzz (jour 13). Chronométrez : chacun devrait prendre moins de cinq minutes.
2. Critère de réussite : les quatre programmes tournent sous node sans erreur, et les sorties sont bonnes au premier ou deuxième essai.
3. Écrivez de mémoire la liste des six valeurs falsy, puis vérifiez.
4. Pour chaque séance du module, notez dans le carnet : « solide », « à revoir », ou « à refaire ». Les « à refaire » se programment ce week-end à la place de la séance suivante.
5. Rangement : votre dossier contient maintenant bonjour du code — créez un dossier js/ avec un sous-dossier module-1/ et déplacez-y vos fichiers. Un programmeur ordonne son atelier.

Tips agent : « voici mon carnet du module 1, fais-moi un quiz de dix questions qui piègent sur ce que j'ai noté comme fragile » : un agent est un excellent examinateur à partir de VOS points faibles. Piège : ses réponses à lui peuvent être fausses aussi — faites vérifier chaque réponse ambiguë par la console.

Synthèse (10 min)

Trois lignes : les trois notions les plus solides, les deux à revoir, ce que vous refaites ce week-end. Le module 2 attaque ce qui fait la réputation de JavaScript : les closures et les fonctions qui manipulent des fonctions. Vous êtes prêt.