Séance 6 — Les conditions

Faire des choix dans son programme

Écrire un if / else correctement
Comparer deux valeurs avec le bon opérateur
Combiner plusieurs conditions

1. Le programme qui choisit

Jusqu’ici, vos programmes exécutent toutes les lignes, dans l’ordre, à chaque fois. Aujourd’hui, on leur apprend à choisir.

const age = 19;

if (age >= 18) {
  console.log("Majeur");
} else {
  console.log("Mineur");
}

if ( age >= 18 ) {          si la condition est VRAIE
  …                         →  on fait ce bloc
} else {                    sinon
  …                         →  on fait celui-là
}

La forme exacte, à respecter au caractère près

if (condition) {
  // instructions si VRAI
} else {
  // instructions si FAUX
}

La condition est entre parenthèses
Les blocs sont entre accolades
Pas de point-virgule après ) ni après }
else se colle sur la même ligne que le } qui précède

Étape 1 — Premier essai

Créez seance06.html (squelette habituel avec <script src="app.js"></script>) et dans app.js :

app.js

const temperature = 12;

if (temperature > 20) {
  console.log("Il fait bon");
} else {
  console.log("Prends une veste");
}

Changez la valeur de temperature et rechargez plusieurs fois. Observez quel message s’affiche.

2. Comparer

Opérateur	Sens	Exemple vrai
`===`	est égal à	`3 === 3`
`!==`	est différent de	`3 !== 5`
`>`	strictement supérieur	`5 > 3`
`<`	strictement inférieur	`3 < 5`
`>=`	supérieur ou égal	`3 >= 3`
`<=`	inférieur ou égal	`3 <= 3`

= , == et === : la confusion à éviter

Écriture	Ce que ça fait
`=`	Range une valeur dans une variable
`==`	Compare mollement (à éviter)
`===`	Compare strictement ✅

Dans ce cours, on utilise toujours ===.

Pourquoi ? Regardez :

"5" == 5    // true  😱  == convertit en douce et fait semblant que c'est pareil
"5" === 5   // false ✅  === dit la vérité : un texte n'est pas un nombre

Le == est une source de bugs invisibles. === compare la valeur ET le type. Prenez tout de suite le bon réflexe : trois signes égal, toujours.

Une condition, c’est un booléen

age >= 18 n’est pas de la décoration : c’est une expression qui vaut true ou false. Vérifiez-le :

console.log(19 >= 18); // true
console.log(15 >= 18); // false

Le if ne fait qu’une chose : regarder si ce qu’on lui donne vaut true.

Exercice 6.1

Écrivez un programme qui affiche Bravo, tu as la moyenne ! si une variable note vaut 10 ou plus, et Il faut réviser. sinon.

▸ Solution

app.js

const note = 14;

if (note >= 10) {
  console.log("Bravo, tu as la moyenne !");
} else {
  console.log("Il faut réviser.");
}

Attention : >= et non >, sinon un 10 pile serait compté comme un échec.

3. Plus de deux cas : `else if`

const note = 14;

if (note >= 16) {
  console.log("Très bien");
} else if (note >= 14) {
  console.log("Bien");
} else if (note >= 10) {
  console.log("Passable");
} else {
  console.log("Insuffisant");
}

L’ordre est capital

JavaScript teste les conditions de haut en bas et s’arrête à la première qui est vraie. Les suivantes ne sont même pas regardées.

Si on écrivait les conditions dans l’autre sens :

if (note >= 10) {        // 18 passe ici…
  console.log("Passable");
} else if (note >= 16) { // …donc on n'arrive JAMAIS ici
  console.log("Très bien");
}

Un 18 afficherait « Passable ». Allez toujours du cas le plus restrictif au plus général.

Et else tout seul, c’est obligatoire ?

Non. Si vous n’avez rien à faire dans le cas « sinon », vous pouvez l’omettre :

if (age >= 18) {
  console.log("Bienvenue");
}
// et c'est tout

4. Combiner des conditions

Opérateur	Sens	Vrai quand…
`&&`	ET	les deux conditions sont vraies
`\\|\\|`	OU	au moins une est vraie
`!`	NON	inverse le résultat

const age = 20;
const aLePermis = true;

if (age >= 18 && aLePermis) {
  console.log("Peut conduire");
}

const jour = "samedi";

if (jour === "samedi" || jour === "dimanche") {
  console.log("C'est le week-end !");
}

L’erreur qui piège tout le monde

if (jour === "samedi" || "dimanche") { … } // ❌ ça a l'air logique… mais c'est faux

Chaque côté du || doit être une condition complète. Ici, le côté droit est juste le texte "dimanche", que JavaScript considère comme « vrai ». Résultat : la condition est toujours vraie, quel que soit le jour.

Il faut répéter la variable :

if (jour === "samedi" || jour === "dimanche") { … } // ✅

Exercice 6.2 — Vrai ou faux ?

Sans ordinateur, dites si chaque condition est vraie ou fausse.

const age = 17;
const eleve = true;

// a)
age > 18
// b)
age >= 17 && eleve
// c)
age > 18 || eleve
// d)
!eleve
// e)
age === "17"

▸ Solution

	Résultat	Pourquoi
a)	`false`	17 n’est pas strictement supérieur à 18
b)	`true`	`17 >= 17` est vrai et `eleve` est vrai
c)	`true`	Le premier côté est faux, mais le second est vrai → `\\|\\|` suffit
d)	`false`	`!` inverse : `eleve` est `true`, donc `!eleve` est `false`
e)	`false`	`===` compare aussi le type : nombre ≠ texte

5. Les conditions dans la page

C’est là que ça devient intéressant : on combine le if avec ce qu’on a vu en séance 5.

Étape 2 — Un message qui dépend du compteur

seance06.html

<h2 id="score">0</h2>
<p id="commentaire">Commence à cliquer…</p>
<button id="plus">+1</button>

app.js

const score = document.querySelector("#score");
const commentaire = document.querySelector("#commentaire");
const plus = document.querySelector("#plus");

let compteur = 0;

plus.addEventListener("click", () => {
  compteur = compteur + 1;
  score.textContent = compteur;

  if (compteur >= 20) {
    commentaire.textContent = "Champion du monde ! 🏆";
  } else if (compteur >= 10) {
    commentaire.textContent = "Pas mal du tout.";
  } else {
    commentaire.textContent = "Continue…";
  }
});

Cliquez et regardez le commentaire changer à 10 puis à 20.

Exercice 6.3 — Le compteur qui refuse de descendre sous zéro

Reprenez le compteur avec ses boutons +1 et -1. Modifiez le bouton -1 pour qu’il ne fasse rien si le compteur vaut déjà 0.

▸ Solution

app.js

moins.addEventListener("click", () => {
  if (compteur > 0) {
    compteur = compteur - 1;
    score.textContent = compteur;
  }
});

Ici, pas besoin de else : quand le compteur vaut 0, on ne fait simplement rien.

On peut aussi prévenir l’utilisateur :

moins.addEventListener("click", () => {
  if (compteur > 0) {
    compteur = compteur - 1;
    score.textContent = compteur;
  } else {
    commentaire.textContent = "Impossible de descendre sous zéro.";
  }
});

6. À toi de jouer

Exercice 6.4 — Trouver le bug

Ce code doit afficher Trop chaud au-dessus de 30°, Agréable entre 15 et 30, et Trop froid en dessous. Il ne marche pas. Pourquoi ?

const t = 35;

if (t > 15) {
  console.log("Agréable");
} else if (t > 30) {
  console.log("Trop chaud");
} else {
  console.log("Trop froid");
}

▸ Solution

Avec t = 35, le programme affiche Agréable.

Pourquoi : 35 > 15 est vrai, donc le premier bloc s’exécute et JavaScript saute tout le reste. La ligne else if (t > 30) n’est jamais atteinte pour aucune valeur : tout nombre supérieur à 30 est aussi supérieur à 15.

Il faut mettre la condition la plus restrictive en premier :

const t = 35;

if (t > 30) {
  console.log("Trop chaud");
} else if (t > 15) {
  console.log("Agréable");
} else {
  console.log("Trop froid");
}

Exercice 6.5 — Le mode sombre, sans `toggle`

En séance 5, on a fait un bouton « mode sombre » avec classList.toggle. Refaites-le sans toggle, en utilisant une variable let sombre = false; et un if / else.

Le texte du bouton doit aussi changer : Mode sombre ↔︎ Mode clair.

▸ Solution

app.js

const theme = document.querySelector("#theme");

let sombre = false;

theme.addEventListener("click", () => {
  if (sombre === true) {
    document.body.classList.remove("sombre");
    theme.textContent = "Mode sombre";
    sombre = false;
  } else {
    document.body.classList.add("sombre");
    theme.textContent = "Mode clair";
    sombre = true;
  }
});

Remarquez qu’on retourne la variable sombre à la fin de chaque branche : c’est elle qui garde la mémoire de l’état entre deux clics.

Petit raffinement : quand la condition porte sur un booléen, if (sombre === true) s’écrit plus simplement if (sombre). Les deux sont corrects.

Exercice 6.6 — Le jeu du nombre mystère 🎲

Faites une page mystere.html qui contient :

Un bouton Deviner et 5 boutons numérotés de 1 à 5
Un paragraphe #resultat

Au chargement, le programme tire un nombre au hasard entre 1 et 5 :

let secret = Math.floor(Math.random() * 5) + 1;

Quand on clique sur un des 5 boutons :

si c’est le bon nombre → Gagné ! 🎉 en vert, et on tire un nouveau secret
sinon → Raté, essaie encore. en rouge

Indice

Pour éviter d’écrire 5 fois le même code, donnez à chaque bouton un id différent (#b1, #b2…) et écrivez 5 écouteurs — c’est répétitif, et c’est volontaire : à la séance 9, on apprendra à supprimer cette répétition.

▸ Solution

mystere.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Nombre mystère</title>
    <link rel="stylesheet" href="mystere.css" />
  </head>
  <body>
    <h1>Nombre mystère</h1>
    <p>Je pense à un nombre entre 1 et 5. Trouve-le !</p>

    <button id="b1">1</button>
    <button id="b2">2</button>
    <button id="b3">3</button>
    <button id="b4">4</button>
    <button id="b5">5</button>

    <p id="resultat">À toi de jouer.</p>

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

mystere.css

body {
  font-family: system-ui, Arial, sans-serif;
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
}

button {
  font-size: 24px;
  padding: 12px 20px;
  margin: 4px;
}

.gagne {
  color: green;
  font-weight: bold;
}

.perdu {
  color: #c0392b;
}

mystere.js

const resultat = document.querySelector("#resultat");

let secret = Math.floor(Math.random() * 5) + 1;

const b1 = document.querySelector("#b1");
b1.addEventListener("click", () => {
  if (1 === secret) {
    resultat.textContent = "Gagné ! 🎉";
    resultat.className = "gagne";
    secret = Math.floor(Math.random() * 5) + 1;
  } else {
    resultat.textContent = "Raté, essaie encore.";
    resultat.className = "perdu";
  }
});

const b2 = document.querySelector("#b2");
b2.addEventListener("click", () => {
  if (2 === secret) {
    resultat.textContent = "Gagné ! 🎉";
    resultat.className = "gagne";
    secret = Math.floor(Math.random() * 5) + 1;
  } else {
    resultat.textContent = "Raté, essaie encore.";
    resultat.className = "perdu";
  }
});

// … et ainsi de suite pour b3, b4, b5

Ce qu’il faut voir : ce code est correct mais atroce — cinq blocs quasiment identiques. Si vous voulez changer le message, il faut le modifier cinq fois.

C’est exactement le problème que les fonctions (séance 9) vont résoudre. On réécrira ce jeu en 10 lignes.

À noter : resultat.className = "gagne" remplace toutes les classes de l’élément d’un coup. C’est pratique ici, où l’on veut passer de perdu à gagne.

7. Fiche mémo

La forme

if (condition) {
  // si vrai
} else if (autreCondition) {
  // sinon si vrai
} else {
  // dans tous les autres cas
}

Comparer

===   égal (valeur ET type)   ← TOUJOURS celui-là
!==   différent
>  <  >=  <=

Combiner

a && b   // ET  : les deux
a || b   // OU  : au moins un
!a       // NON : l'inverse

Les 3 pièges

= range, === compare
L’ordre des else if : du plus restrictif au plus général
x === 1 || x === 2 — on répète la variable de chaque côté

8. Avant l’évaluation

La séance 7 est une évaluation portant sur les séances 1 à 6.

Je sais écrire une page HTML complète de mémoire
Je sais brancher un CSS et un JS
Je sais faire un bouton qui modifie la page
Je sais écrire un if / else if / else correct
Je sais lire un bout de code et prédire ce qu’il affiche

Comment réviser

Ne relisez pas passivement. Refaites l’exercice 5.6 (compteur de cafés) et l’exercice 6.6 (nombre mystère) sans regarder la solution. Si vous y arrivez, vous êtes prêt·e.

1. Le programme qui choisit

Étape 1 — Premier essai

2. Comparer

Exercice 6.1

3. Plus de deux cas : else if

4. Combiner des conditions

Exercice 6.2 — Vrai ou faux ?

5. Les conditions dans la page

Étape 2 — Un message qui dépend du compteur

Exercice 6.3 — Le compteur qui refuse de descendre sous zéro

6. À toi de jouer

Exercice 6.4 — Trouver le bug

Exercice 6.5 — Le mode sombre, sans toggle

Exercice 6.6 — Le jeu du nombre mystère 🎲

7. Fiche mémo

La forme

Comparer

Combiner

Les 3 pièges

8. Avant l’évaluation

3. Plus de deux cas : `else if`

Exercice 6.5 — Le mode sombre, sans `toggle`