Conditions et boucles

Faire prendre des décisions à votre programme, et lui faire répéter une tâche sans copier-coller.

Objectifs de la séance

• écrire des conditions avec if / else if / else ;
• combiner des conditions avec && (et), || (ou) et ! (non) ;
• utiliser l'opérateur ternaire pour choisir entre deux valeurs ;
• répéter avec for, while et for...of ;
• éviter la boucle infinie.

---

Petite vérification

Avant de commencer, vérifiez si vous savez...

1. écrire une variable score qui vaut 3 et que l'on pourra augmenter plus tard, puis afficher Score : 3
2. prédire ce qu'affiche console.log("5" + 1) puis console.log(Number("5") + 1), et vérifier en l'exécutant
3. écrire la condition qui compare la variable niveau à 2 de façon stricte

📌 Réponse attendue

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

---

Notions théoriques

if, else if, else

La syntaxe est identique à celle de PHP.

const pourcentage = 70;

if (pourcentage >= 80) {
  console.log("Excellent !");
} else if (pourcentage >= 50) {
  console.log("Bien, continuez !");
} else {
  console.log("À retravailler.");
}

Bien, continuez !

Le programme teste les conditions dans l'ordre et s'arrête à la première qui est vraie.

Les opérateurs de comparaison :

Opérateur	Signification
===	égal (valeur et type)
!==	différent
< <=	plus petit (ou égal)
> >=	plus grand (ou égal)

Combiner des conditions

Opérateur	Signification	Exemple
&&	et (les deux doivent être vraies)	age >= 18 && permis === true
||	ou (au moins une vraie)	role === "admin" || role === "prof"
!	non (inverse)	!estConnecte

const estConnecte = true;
const role = "eleve";

if (estConnecte && role === "eleve") {
  console.log("Bienvenue dans le quiz");
}

Vrai ou faux ? Les valeurs « truthy » et « falsy »

Dans un if, JavaScript convertit la valeur en vrai ou faux. Les valeurs suivantes sont considérées comme fausses (falsy) :

false, 0, "" (texte vide), null, undefined et NaN.

Tout le reste est considéré comme vrai (même "0" et []).

const pseudo = "";

if (!pseudo) {
  console.log("Le pseudo est obligatoire");
}

Attention au 0

0 est falsy. Si un score peut valoir 0, ne testez pas if (!score) : 0 serait pris pour « pas de score ». Écrivez plutôt if (score === undefined) ou if (score === null). Nous verrons un opérateur plus pratique (??) dans la partie 3.

L'opérateur ternaire : choisir une valeur en une ligne

Quand il faut choisir entre deux valeurs selon une condition, le ternaire est plus court qu'un if.

const score = 7;
const mention = score >= 5 ? "Réussi" : "À revoir";
console.log(mention); // Réussi

Lisez-le ainsi : condition ? valeurSiVrai : valeurSiFaux. Vous le retrouverez très souvent dans les applications Expo pour afficher un contenu ou un autre.

Bonne pratique - Pas de ternaires imbriqués

Un seul ternaire se lit facilement. Deux ternaires imbriqués deviennent illisibles : utilisez alors if / else if / else.

La boucle for

Utilisez for quand vous savez combien de fois répéter.

for (let i = 1; i <= 3; i++) {
  console.log(`Question ${i}/3`);
}

Question 1/3
Question 2/3
Question 3/3

Les trois parties entre parenthèses :

1. let i = 1 : départ (exécuté une seule fois) ;
2. i <= 3 : condition pour continuer (testée avant chaque tour) ;
3. i++ : après chaque tour, on ajoute 1 à i.

La boucle while

Utilisez while quand vous répétez tant qu'une condition est vraie, sans savoir combien de tours seront nécessaires.

let tentatives = 0;

while (tentatives < 3) {
  tentatives++;
  console.log(`Tentative ${tentatives}`);
}

La boucle infinie

Si la condition ne devient jamais fausse (par exemple si vous oubliez tentatives++), la boucle ne s'arrête jamais et le terminal se fige. Appuyez sur Ctrl + C pour arrêter le programme. Avant de lancer une boucle while, demandez-vous toujours : « qu'est-ce qui la fera s'arrêter ? »

La boucle for...of : parcourir une liste

Une liste s'écrit entre crochets (vous l'étudierez en détail dans la partie 3). for...of est l'équivalent du foreach de PHP.

const themes = ["mots de passe", "hameçonnage", "réseaux"];

for (const theme of themes) {
  console.log(`Thème : ${theme}`);
}

Thème : mots de passe
Thème : hameçonnage
Thème : réseaux

break arrête la boucle immédiatement, continue passe directement au tour suivant.

---

Test de mémorisation/compréhension

Que vaut mention après : const mention = 8 >= 10 ? "Réussi" : "À revoir"; ?

"Réussi", car 8 est considéré comme proche de 10

true

"À revoir" (8 est inférieur à 10)

undefined

Une erreur de syntaxe se produit

Quelle condition est vraie si le joueur est connecté ET possède le rôle "admin" ?

estConnecte && role === "admin"

estConnecte || role === "admin"

estConnecte & role == "admin" and true

!estConnecte && role === "admin"

estConnecte and role === "admin"

Combien de lignes affiche : for (let i = 0; i < 4; i++) { console.log(i); } ?

3 lignes (1, 2 et 3)

5 lignes (de 0 à 4 inclus)

Une infinité de lignes

Aucune ligne, car la condition est fausse dès le départ

4 lignes (0, 1, 2 et 3)

Pourquoi ce programme ne s'arrête-t-il jamais ? let n = 0; while (n < 3) { console.log(n); }

Parce que while ne peut pas fonctionner avec un nombre

n n'est jamais augmentée, la condition reste vraie

Parce que console.log bloque le programme

Parce qu'il faut utiliser const au lieu de let

Parce que la condition devrait utiliser == au lieu de <

Laquelle de ces valeurs est considérée comme fausse (falsy) dans un if ?

"0" (le caractère zéro entre guillemets)

[] (un tableau vide)

"false" (le mot false entre guillemets)

"" (un texte vide)

-1

Quelle boucle est l'équivalent du foreach de PHP pour parcourir une liste ?

while (liste) { }

for (let i = 0; i < liste; i++) { }

foreach (liste as element) { }

do { } until (liste.length === 0)

for (const element of liste) { }

---

TP pour réfléchir et résoudre des problèmes

Votre mission : compléter le bilan de la partie avec une appréciation, une barre de progression et la liste des thèmes. Travaillez dans le fichier labo-js/bilan2.js, qui reprend les valeurs de départ suivantes.

const joueur = "Alice";
const bonnesReponses = 7;
const nombreQuestions = 10;
const pourcentage = Math.round(bonnesReponses / nombreQuestions * 100);

Étape 1 — L'appréciation

Affichez Excellent si le pourcentage est d'au moins 80, Bien s'il est d'au moins 50, et À revoir sinon.

Bonne pratique - Du plus strict au plus large

Testez d'abord la condition la plus stricte (>= 80). Si vous commenciez par >= 50, tous les scores supérieurs à 80 s'arrêteraient à « Bien ».

Étape 2 — La barre de progression

Construisez avec une boucle for une barre composée d'un # par bonne réponse, par exemple ####### pour 7 bonnes réponses.

Bonne pratique - Commencer à 0

En programmation, on compte presque toujours à partir de 0. Avec i = 0 et i < n, la boucle fait exactement n tours. Cette habitude vous servira avec les tableaux, dont le premier élément est à la position 0.

Étape 3 — Afficher les thèmes

Parcourez la liste de thèmes et affichez chacun avec un tiret devant.

Bonne pratique - const dans for...of

Dans un for...of, la variable reçoit une nouvelle valeur à chaque tour : const convient parfaitement, car chaque tour crée sa propre variable.

📌 Une solution

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

---

Ce qu'il faut retenir

Notion	Résumé
if / else if / else	Teste les conditions dans l'ordre, s'arrête à la première vraie.
&&, ||, !	Et, ou, non.
Falsy	false, 0, "", null, undefined et NaN sont considérés comme faux.
Ternaire	condition ? siVrai : siFaux pour choisir une valeur en une ligne.
for	Répète un nombre connu de fois : départ, condition, pas.
while	Répète tant que la condition est vraie : attention à la boucle infinie.
for...of	Parcourt chaque élément d'une liste (équivalent de foreach).

Aperçu de la prochaine séance

Votre programme sait décider et répéter, mais tout votre code est écrit « en vrac ». Dans la partie 2, vous allez apprendre à regrouper vos instructions dans des fonctions : de petites briques réutilisables, faciles à tester et à relire.