Séance 8 — Les listes et les boucles

Ranger plusieurs valeurs, et les parcourir

Créer un tableau et accéder à ses éléments
Parcourir un tableau avec for…of
Afficher une liste dans la page

1. Le problème

Imaginez une liste de courses. Avec ce que vous savez :

const article1 = "pain";
const article2 = "lait";
const article3 = "œufs";

Et s’il y en a 50 ? Et si on ne sait pas combien il y en aura ?

Il faut une seule boîte qui contient plusieurs valeurs : un tableau (array en anglais).

const courses = ["pain", "lait", "œufs"];

2. Créer et lire un tableau

const courses = ["pain", "lait", "œufs"];
//                 0       1        2      ← les positions (index)

On compte à partir de ZÉRO

C’est la chose à intégrer. Le premier élément est à la position 0, pas 1.

console.log(courses[0]); // "pain"
console.log(courses[1]); // "lait"
console.log(courses[2]); // "œufs"
console.log(courses[3]); // undefined  ← il n'y a rien à cette place

Un tableau de 3 éléments a donc les positions 0, 1 et 2. Le dernier index est toujours longueur - 1.

Combien y en a-t-il ?

console.log(courses.length); // 3

length (longueur) donne le nombre d’éléments. Attention : pas de parenthèses.

Modifier, ajouter

const courses = ["pain", "lait", "œufs"];

courses[1] = "beurre";       // remplace "lait"
courses.push("chocolat");    // ajoute à la FIN

console.log(courses); // ["pain", "beurre", "œufs", "chocolat"]

const et pourtant on modifie ? 🤔

Bonne question. const interdit de remplacer la boîte entière :

const courses = ["pain"];
courses = ["autre chose"]; // ❌ ERREUR

Mais on a le droit de modifier ce qu’il y a dedans :

courses.push("lait"); // ✅ autorisé

Image : const scelle l’étiquette du carton, pas son contenu. En pratique, on déclare presque toujours les tableaux avec const.

Exercice 8.1

Créez un tableau fruits contenant "pomme", "banane", "fraise". Puis :

Affichez le deuxième fruit
Affichez le nombre de fruits
Ajoutez "kiwi" et réaffichez le nombre

▸ Solution

app.js

const fruits = ["pomme", "banane", "fraise"];

console.log(fruits[1]);      // banane  ← index 1 = DEUXIÈME élément
console.log(fruits.length);  // 3

fruits.push("kiwi");
console.log(fruits.length);  // 4

3. La boucle `for…of`

Pour faire quelque chose avec chaque élément, on utilise une boucle.

const courses = ["pain", "lait", "œufs"];

for (const article of courses) {
  console.log(article);
}

Affiche :

pain
lait
œufs

for ( const article  of  courses ) {
             └───┬──┘      └──┬──┘
                 │            └── LE TABLEAU à parcourir
                 └─────────────── la boîte qui contient
                                  l'élément COURANT

Ça se lit : « pour chaque article parmi courses, fais ceci ».

Comment ça marche, tour par tour

Le bloc est exécuté une fois par élément, et article change de valeur à chaque tour :

Tour	`article` vaut	Ce qui s’affiche
1	`"pain"`	`pain`
2	`"lait"`	`lait`
3	`"œufs"`	`œufs`

Puis la boucle s’arrête toute seule : il n’y a plus d’élément.

Nommez bien la variable de boucle

for (const article of courses) se lit tout seul. for (const x of y) ne dit rien.

Convention pratique : le tableau au pluriel, la variable de boucle au singulier.

for (const fruit of fruits) { … }
for (const etudiant of etudiants) { … }

Étape 1 — Calculer avec une boucle

app.js

const notes = [12, 15, 8, 17, 11];

let total = 0;

for (const note of notes) {
  total = total + note;
}

console.log(`Total : ${total}`);
console.log(`Moyenne : ${total / notes.length}`);

Deux points essentiels :

let total = 0; est avant la boucle. Sinon il serait remis à zéro à chaque tour (souvenez-vous du compteur de la séance 5 !).
On divise par notes.length, jamais par un 5 écrit en dur : si on ajoute une note, le code reste juste.

Exercice 8.2 — Prédire

Qu’affiche ce programme ?

const nombres = [3, 7, 2];
let resultat = 0;

for (const n of nombres) {
  resultat = resultat + n * 2;
}

console.log(resultat);

▸ Solution

24

Déroulé tour par tour :

Tour	`n`	`n * 2`	`resultat` devient
début			`0`
1	`3`	`6`	`0 + 6 = 6`
2	`7`	`14`	`6 + 14 = 20`
3	`2`	`4`	`20 + 4 = 24`

La méthode à retenir : quand vous ne comprenez pas une boucle, faites ce tableau sur papier. Une colonne par variable, une ligne par tour.

4. Afficher une liste dans la page

C’est là que ça devient utile.

Étape 2 — Générer du HTML

seance08.html

<h1>Ma liste de courses</h1>
<ul id="liste"></ul>

<script src="app.js"></script>

Le <ul> est vide : c’est le JavaScript qui va le remplir.

app.js

const courses = ["pain", "lait", "œufs", "chocolat"];
const liste = document.querySelector("#liste");

let html = "";

for (const article of courses) {
  html = html + `<li>${article}</li>`;
}

liste.innerHTML = html;

Rechargez : les 4 articles s’affichent dans la liste. 🎉

textContent ou innerHTML ?

	Ce qu’il fait
`textContent`	Met du texte brut. `<li>a</li>` s’afficherait littéralement
`innerHTML`	Met du HTML, que le navigateur interprète

Ici on veut créer de vraies balises <li> : il faut donc innerHTML.

Règle de sécurité : jamais innerHTML avec du texte tapé par l’utilisateur

Si vous mettez dans innerHTML un texte saisi dans un formulaire, un visiteur malveillant peut y glisser des balises et faire exécuter son code sur votre site. Cette attaque s’appelle XSS (cross-site scripting) et c’est l’une des plus répandues du web.

La règle simple :

Contenu que vous écrivez dans le code → innerHTML est acceptable
Contenu venant d’un utilisateur ou d’Internet → textContent, toujours

On verra à la séance 10 comment construire des listes sans innerHTML, avec document.createElement. C’est la méthode propre.

Comment ça marche, la construction du texte

Départ :  html = ""
Tour 1 :  html = "" + "<li>pain</li>"           → "<li>pain</li>"
Tour 2 :  html = "<li>pain</li>" + "<li>lait</li>"
                                                → "<li>pain</li><li>lait</li>"
…

À la fin, html contient toutes les balises collées bout à bout, et on les injecte d’un seul coup.

L’erreur : injecter dans la boucle

for (const article of courses) {
  liste.innerHTML = `<li>${article}</li>`; // ❌
}

Ici, chaque tour écrase le précédent. Il ne restera que le dernier article. Le = remplace, il n’ajoute pas.

Exercice 8.3

Affichez dans la page une liste numérotée de 5 films que vous aimez, avec un titre <h2> qui indique combien il y en a : Mes 5 films préférés.

Le nombre dans le titre doit être calculé, pas écrit à la main.

▸ Solution

seance08.html

<h2 id="titre"></h2>
<ol id="films"></ol>

app.js

const films = ["Le Voyage de Chihiro", "Intouchables", "Inception", "Coco", "Parasite"];

const titre = document.querySelector("#titre");
const listeFilms = document.querySelector("#films");

titre.textContent = `Mes ${films.length} films préférés`;

let html = "";
for (const film of films) {
  html = html + `<li>${film}</li>`;
}
listeFilms.innerHTML = html;

Comme on veut une liste numérotée, le conteneur est un <ol> — mais les éléments restent des <li>.

5. Boucle + condition

Les deux se combinent très naturellement.

const notes = [12, 15, 8, 17, 11, 6];

for (const note of notes) {
  if (note >= 10) {
    console.log(`${note} : validé`);
  } else {
    console.log(`${note} : à repasser`);
  }
}

Compter combien remplissent une condition :

const notes = [12, 15, 8, 17, 11, 6];
let nbReussites = 0;

for (const note of notes) {
  if (note >= 10) {
    nbReussites = nbReussites + 1;
  }
}

console.log(`${nbReussites} notes sur ${notes.length} sont au-dessus de 10`);

Exercice 8.4 — Le maximum

Trouvez la note la plus haute du tableau [12, 15, 8, 17, 11], sans utiliser d’outil tout fait : uniquement une boucle et un if.

Indice

Imaginez que vous triez des copies à la main : vous gardez la meilleure trouvée jusqu’ici, et vous la remplacez chaque fois que vous en voyez une meilleure.

▸ Solution

app.js

const notes = [12, 15, 8, 17, 11];

let maximum = notes[0]; // on part de la première note

for (const note of notes) {
  if (note > maximum) {
    maximum = note;
  }
}

console.log(`La meilleure note est ${maximum}`);

Déroulé :

`note`	`note > maximum` ?	`maximum` après
12	12 > 12 → non	12
15	15 > 12 → oui	15
8	non	15
17	oui	17
11	non	17

⚠️ Pourquoi partir de notes[0] et pas de 0 ? Parce qu’avec des valeurs négatives (des températures, par exemple), partir de 0 donnerait un résultat faux. Partir du premier élément marche toujours.

6. À toi de jouer

Exercice 8.5 — Trouver les 3 erreurs

Ce code doit afficher les 3 villes dans la page. Il ne marche pas.

<ul id="villes"></ul>

const villes = ["Paris", "Lyon", "Marseille"];
const conteneur = document.querySelector("villes");

for (const ville in villes) {
  conteneur.innerHTML = "<li>ville</li>";
}

▸ Solution

querySelector("villes") → il manque le #. Sans lui, on cherche une balise <villes> qui n’existe pas, on obtient null.
for (const ville in villes) → in au lieu de of. in donne les index ("0", "1", "2") et non les valeurs. Une lettre, un tout autre résultat.
"<li>ville</li>" → guillemets droits : on affiche littéralement le mot « ville ». Il faut un gabarit avec accents graves et ${ville}. Et le = écrase à chaque tour : il faut accumuler.

const villes = ["Paris", "Lyon", "Marseille"];
const conteneur = document.querySelector("#villes");

let html = "";
for (const ville of villes) {
  html = html + `<li>${ville}</li>`;
}
conteneur.innerHTML = html;

Exercice 8.6 — Le carnet de notes 📊

Faites une page notes.html qui, à partir de ce tableau :

const notes = [14, 9, 17, 11, 5, 13];

affiche dans la page, sans rien écrire en dur :

Une liste à puces des notes, chacune suivie de ✅ si ≥ 10, de ❌ sinon
Le nombre de notes
La moyenne, arrondie à 2 décimales (toFixed(2))
La meilleure note
Une phrase : Bilan : X notes validées sur Y

▸ Solution

notes.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Carnet de notes</title>
    <link rel="stylesheet" href="notes.css" />
  </head>
  <body>
    <h1>Carnet de notes</h1>

    <ul id="liste"></ul>

    <p id="stats"></p>
    <p id="bilan"></p>

    <script src="notes.js"></script>
  </body>
</html>

notes.js

const notes = [14, 9, 17, 11, 5, 13];

const liste = document.querySelector("#liste");
const stats = document.querySelector("#stats");
const bilan = document.querySelector("#bilan");

let html = "";
let total = 0;
let maximum = notes[0];
let validees = 0;

for (const note of notes) {
  // 1. la ligne de la liste
  if (note >= 10) {
    html = html + `<li>${note} ✅</li>`;
    validees = validees + 1;
  } else {
    html = html + `<li>${note} ❌</li>`;
  }

  // 2. les statistiques
  total = total + note;
  if (note > maximum) {
    maximum = note;
  }
}

const moyenne = total / notes.length;

liste.innerHTML = html;
stats.textContent = `${notes.length} notes — moyenne ${moyenne.toFixed(2)} — meilleure ${maximum}`;
bilan.textContent = `Bilan : ${validees} notes validées sur ${notes.length}`;

Le point clé : une seule boucle suffit pour tout calculer. On aurait pu écrire quatre boucles séparées, mais c’est quatre fois plus long à lire et à exécuter.

Testez la robustesse de votre code : changez le tableau en [3, 4] puis en [20, 19, 18]. Tout doit rester juste sans toucher au reste.

7. Fiche mémo

Un tableau

const fruits = ["pomme", "banane", "kiwi"];

fruits[0]        // "pomme"  ← on compte à partir de 0
fruits.length    // 3
fruits[1] = "x"  // remplacer
fruits.push("y") // ajouter à la fin

La boucle

for (const fruit of fruits) {
  console.log(fruit);
}

of = les valeurs (celui qu’on veut) in = les index (piège classique)

Accumuler

let total = 0;              // AVANT la boucle
for (const n of nombres) {
  total = total + n;        // on ajoute, on n'écrase pas
}

Afficher une liste

let html = "";
for (const x of tableau) {
  html = html + `<li>${x}</li>`;
}
conteneur.innerHTML = html;

⚠️ innerHTML jamais avec du texte venant d’un utilisateur.

8. Avant la prochaine séance

Je sais que le premier élément est à l’index 0
Je sais écrire une boucle for…of de tête
Je sais placer un accumulateur avant la boucle
Je sais afficher un tableau sous forme de liste HTML

1. Le problème

2. Créer et lire un tableau

Combien y en a-t-il ?

Modifier, ajouter

Exercice 8.1

3. La boucle for…of

Étape 1 — Calculer avec une boucle

Exercice 8.2 — Prédire

4. Afficher une liste dans la page

Étape 2 — Générer du HTML

Comment ça marche, la construction du texte

Exercice 8.3

5. Boucle + condition

Exercice 8.4 — Le maximum

6. À toi de jouer

Exercice 8.5 — Trouver les 3 erreurs

Exercice 8.6 — Le carnet de notes 📊

7. Fiche mémo

Un tableau

La boucle

Accumuler

Afficher une liste

8. Avant la prochaine séance

3. La boucle `for…of`