Module 2Acquérir les fondamentaux de JavaScript
Chapitre 5 sur 15
Maîtriser les structures de contrôle
Écrire des conditions (if, switch, ternaire) et des boucles (for, while, for...of, forEach).
- ≈ 100 min
- 2 leçons
- 4 vidéos
- 4 exercices
Module 2Acquérir les fondamentaux de JavaScript
Chapitre 5 sur 15
Écrire des conditions (if, switch, ternaire) et des boucles (for, while, for...of, forEach).
Objectifs
Avec ce chapitre, tu sauras…
if, else, else if et l'opérateur ternaire ;switch ;for, while et do...while ;for...in et un tableau avec for...of et forEach() ;break et continue.Tu connais déjà ces structures en pseudo-code (M102) et en Python. En JavaScript, la logique est la même ; seule la syntaxe change : les conditions sont entre parenthèses et les blocs entre accolades { }.
| Pseudo-code (M102) | JavaScript |
|---|---|
Si condition Alors … Sinon … FinSi |
if (condition) { … } else { … } |
Selon variable Faire … FinSelon |
switch (variable) { case …: … break; } |
Pour i de 0 à 4 Faire … FinPour |
for (let i = 0; i <= 4; i++) { … } |
TantQue condition Faire … FinTQ |
while (condition) { … } |
Répéter … Jusqu'à condition |
do { … } while (!condition); |
Leçon 1
if, else, else if
let note = 9;
if (note >= 10) {
console.log("Réussi");
} else if (note > 8) {
console.log("Rattrapage");
} else {
console.log("Échoué");
}
// Affiche : RattrapageL'opérateur ternaire
Pour choisir entre deux valeurs, l'opérateur ternaire condition ? valeurSiVrai : valeurSiFaux remplace un if...else en une ligne.
const age = 20;
const statut = age >= 18 ? "majeur" : "mineur";
console.log(statut); // majeurLes valeurs « falsy » et « truthy »
const nom = prompt("Ton nom ?");
if (nom) { // faux si "" (vide) ou null (Annuler)
console.log(`Bonjour ${nom}`);
} else {
console.log("Tu n'as rien saisi.");
}Vidéo · À regarder
FRTutoriel JavaScript en 1 HEURE | Comprendre l'ESSENTIEL pour Débutant
Melvynx · YouTube
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Leçon 2
| Boucle | Usage |
|---|---|
for | répéter un nombre connu de fois |
while | répéter **tant qu'**une condition est vraie (nombre de tours inconnu) |
do...while | comme while, mais le bloc s'exécute au moins une fois |
for...in | parcourir les clés (propriétés) d'un objet |
for...of | parcourir les valeurs d'un tableau ou d'une chaîne |
1La boucle qui s'exécute au moins une fois est…
2Sans break dans un case de switch…
3Pour parcourir les clés d'un objet :
4Laquelle de ces valeurs est « truthy » ?
5const x = 15 > 10 ? "A" : "B"; donne…
6continue dans une boucle…
L'essentiel du chapitre
if (cond) { } else if (cond) { } else { } : conditions testées dans l'ordre, le premier vrai gagne.cond ? a : b. Valeurs falsy : false, 0, "", null, undefined, NaN.switch compare avec === ; n'oublie pas les break et le default.for (nombre connu), while (tant que), do...while (au moins une fois).for...in : clés d'un objet ; for...of et forEach() : valeurs d'un tableau.break sort de la boucle, continue passe au tour suivant. Attention aux boucles infinies.tableau.forEach(fonction) | appeler une fonction pour chaque élément d'un tableau |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Les conditions en JavaScript, en français.
Les instructions if (en anglais), avec des exemples pas à pas.
switch
let jour;
switch (new Date().getDay()) { // 0 = dimanche … 6 = samedi
case 0: jour = "Dimanche"; break;
case 1: jour = "Lundi"; break;
case 2: jour = "Mardi"; break;
case 3: jour = "Mercredi"; break;
case 4: jour = "Jeudi"; break;
case 5: jour = "Vendredi"; break;
case 6: jour = "Samedi"; break;
default: jour = "Inconnu";
}
console.log(`Aujourd'hui : ${jour}`);Sans break, l'exécution continue dans les cas suivants (on dit qu'elle « tombe » dans le case suivant). Ce comportement peut servir à regrouper des cas :
switch (mois) {
case 12: case 1: case 2: saison = "hiver"; break;
case 3: case 4: case 5: saison = "printemps"; break;
default: saison = "été ou automne";
}
switch compare avec l'égalité stricte (===) : case 1 ne correspond pas à la chaîne "1".
L'opérateur ternaire puis le switch (en anglais).
Avec un switch, affiche le prix d'un plat saisi par l'utilisateur : « tajine » 60 DH, « couscous » 55 DH, « pastilla » 80 DH, « harira » 15 DH. Pour un autre plat, affiche « Plat non disponible ». Accepte la saisie en majuscules ou en minuscules.
let resultat = "";
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) continue;
if (i > 7) break;
resultat += i + " ";
}
console.log(resultat);Demande une note sur 20 avec prompt. Affiche « Note invalide » si elle n'est pas entre 0 et 20, sinon la mention : moins de 10 « Ajourné », de 10 à moins de 12 « Passable », de 12 à moins de 14 « Assez bien », de 14 à moins de 16 « Bien », 16 et plus « Très bien ».
for
let texte = "";
for (let i = 0; i < 5; i++) { // initialisation ; condition ; incrémentation
texte += "Le nombre est " + i + "\n";
}
console.log(texte); // de 0 à 4while et do...while
const secret = 7;
let essai;
do {
essai = Number(prompt("Devine le nombre entre 1 et 10 :"));
} while (essai !== secret); // on recommence tant que ce n'est pas le bon
console.log("Bravo !");
let n = 1;
while (n <= 1000) { // les puissances de 2 jusqu'à 1000
console.log(n);
n *= 2;
}Si la condition d'un while ne devient jamais fausse (tu as oublié n *= 2), la boucle tourne indéfiniment et l'onglet du navigateur se fige. Vérifie toujours que la variable de la condition change dans la boucle.
for...in, for...of et forEach
const personne = { fname: "Hassan", lname: "FILALI", age: 25 };
for (let cle in personne) { // for...in : les CLÉS d'un objet
console.log(cle, "→", personne[cle]); // fname → Hassan, lname → FILALI, age → 25
}
const langages = ["Java", "Python", "C++"];
for (let langage of langages) { // for...of : les VALEURS d'un tableau
console.log(langage);
}
const nombres = [45, 4, 9, 16, 25];
nombres.forEach(function (valeur, index) { // forEach : une fonction par élément
console.log(`nombres[${index}] = ${valeur}`);
});for...in sur un tableau fonctionne (le résumé le montre), mais il parcourt les indices sous forme de chaînes ("0", "1"…) et peut parcourir des propriétés inattendues. Pour un tableau, utilise for...of, forEach() ou un for classique.
break et continue
for (let i = 0; i < 10; i++) {
if (i === 3) { continue; } // saute 3
if (i === 6) { break; } // arrête tout à 6
console.log(i); // 0 1 2 4 5
}Les boucles while et for, puis un jeu « devine le nombre » (en anglais).
Demande un nombre entre 1 et 10 (redemande tant que la saisie n'est pas valide, avec do...while), puis affiche sa table de multiplication de 1 à 10 dans la console, sous la forme « 7 x 3 = 21 ».