Maitriser la Programmation Javascript
Maitriser la Programmation Javascript

Les Fondamentaux de JavaScript : Conditions et Boucles

Contexte du cours : Maîtriser la Programmation JavaScript

Bienvenue dans cette leçon fondamentale du cours "Maîtriser la Programmation JavaScript" ! Aujourd'hui, nous allons plonger au cœur de la logique de programmation : la prise de décision et la répétition de tâches. Ces deux concepts, les conditions et les boucles, sont absolument essentiels pour écrire des programmes dynamiques, réactifs et efficaces. Sans eux, un programme ne serait qu'une séquence linéaire d'instructions, incapable de s'adapter aux données ou aux interactions de l'utilisateur.

En maîtrisant les conditions, vous apprendrez à guider le flux d'exécution de votre code, le faisant réagir différemment selon certaines circonstances. Avec les boucles, vous découvrirez comment automatiser des tâches répétitives, évitant ainsi de copier-coller du code et rendant vos programmes beaucoup plus concis et performants. Préparez-vous à poser les bases de votre logique de développeur JavaScript !

1. Les Conditions en JavaScript : Prendre des Décisions

En programmation, les conditions nous permettent d'exécuter différents blocs de code en fonction de la validité (vraie ou fausse) d'une expression. C'est le moyen pour votre programme de "réfléchir" et de prendre des décisions.

1.1. L'instruction if...else if...else

C'est la structure conditionnelle la plus fondamentale et la plus utilisée. Elle permet d'exécuter un bloc de code si une condition est vraie, et éventuellement d'autres blocs si des conditions alternatives sont vraies, ou un bloc par défaut si aucune condition n'est vraie.

  • Syntaxe de base :

    if (condition) {
    // Code à exécuter si la condition est vraie
} else if (autreCondition) {
    // Code à exécuter si autreCondition est vraie (et que la première était fausse)
} else {
    // Code à exécuter si toutes les conditions précédentes sont fausses
}

  • Explication :

    • Le mot-clé if est suivi d'une paire de parenthèses () contenant une expression conditionnelle. Cette expression est évaluée et doit retourner une valeur booléenne (true ou false).
    • Si l'expression est true, le bloc de code situé entre les accolades {} est exécuté.
    • Si l'expression est false, le programme passe à la clause else if (si elle existe).
    • La clause else if permet de tester une nouvelle condition si la précédente était fausse. Vous pouvez en avoir plusieurs.
    • La clause else est facultative et représente le "cas par défaut" : son bloc de code est exécuté si aucune des conditions if ou else if précédentes n'était vraie.

  • Exemple pratique : Vérifier l'âge pour voter

    let age = 18;
let pays = "France";

if (age >= 18 && pays === "France") {
    console.log("Vous êtes éligible pour voter en France.");
} else if (age < 18) {
    console.log("Vous êtes trop jeune pour voter.");
} else {
    console.log("Vous n'êtes pas éligible pour voter en France (peut-être pas la bonne nationalité, ou autre critère non rempli).");
}

// Un autre exemple avec un âge différent
age = 16;
if (age >= 18) {
    console.log("Majeur.");
} else {
    console.log("Mineur.");
}
    • Explication du code :
      • Dans le premier bloc if, nous utilisons l'opérateur logique && (ET) pour vérifier si age est supérieur ou égal à 18 ET si pays est exactement "France". Si les deux conditions sont vraies, le message d'éligibilité s'affiche.
      • Si la première condition est fausse (par exemple, l'âge est 16), le code passe au else if. Ici, on vérifie si l'âge est inférieur à 18. Si c'est le cas, le message "trop jeune" s'affiche.
      • Enfin, le else capture tous les autres cas (par exemple, age est 18 mais pays n'est pas "France"), affichant un message générique.
      • Le second exemple est une simple if/else pour démontrer la base.

1.2. Opérateurs de Comparaison et Logiques

Les conditions reposent sur l'évaluation d'expressions qui utilisent des opérateurs :

  • Opérateurs de comparaison :

    • == : Égalité de valeur (peut effectuer des conversions de type)
    • === : Égalité stricte (valeur et type) - Toujours préférer cet opérateur
    • != : Inégalité de valeur
    • !== : Inégalité stricte (valeur ou type différent)
    • < : Inférieur à
    • > : Supérieur à
    • <= : Inférieur ou égal à
    • >= : Supérieur ou égal à

  • Opérateurs logiques :

    • && (ET logique) : Retourne true si les deux opérandes sont vrais.
    • || (OU logique) : Retourne true si au moins un des opérandes est vrai.
    • ! (NON logique) : Inverse la valeur booléenne de l'opérande (transforme true en false et vice-versa).

1.3. L'instruction switch

Lorsque vous avez de multiples conditions basées sur la même variable ou expression, l'instruction switch peut être plus lisible et performante que de multiples else if.

  • Syntaxe :

    switch (expression) {
    case valeur1:
        // Code à exécuter si expression === valeur1
        break; // Important !
    case valeur2:
        // Code à exécuter si expression === valeur2
        break;
    case valeurN:
    case valeurM: // On peut grouper des cas sans break
        // Code pour valeurN ou valeurM
        break;
    default:
        // Code à exécuter si aucune des valeurs ne correspond
        break; // Optionnel si c'est la dernière instruction
}

  • Explication :

    • switch évalue une expression.
    • Il compare la valeur de cette expression à chaque case en utilisant une comparaison stricte (===).
    • Dès qu'une correspondance est trouvée, le code sous ce case est exécuté.
    • Le mot-clé break est crucial : il arrête l'exécution du switch et sort de la structure. Sans break, l'exécution "tombe" sur les cas suivants (comportement appelé fall-through), ce qui est rarement souhaité.
    • Le bloc default est facultatif et agit comme un else, exécuté si aucun case ne correspond.

  • Exemple pratique : Déterminer le jour de la semaine

    let jourNumero = 3; // 1 pour Lundi, 7 pour Dimanche
let nomDuJour;

switch (jourNumero) {
    case 1:
        nomDuJour = "Lundi";
        break;
    case 2:
        nomDuJour = "Mardi";
        break;
    case 3:
        nomDuJour = "Mercredi";
        break;
    case 4:
        nomDuJour = "Jeudi";
        break;
    case 5:
        nomDuJour = "Vendredi";
        break;
    case 6:
        nomDuJour = "Samedi";
        break;
    case 7:
        nomDuJour = "Dimanche";
        break;
    default:
        nomDuJour = "Numéro de jour invalide";
        break;
}

console.log(`Aujourd'hui, c'est ${nomDuJour}.`); // Affiche "Aujourd'hui, c'est Mercredi."
    • Explication du code :
      • Le switch évalue la variable jourNumero.
      • Lorsque jourNumero est 3, il correspond au case 3. La variable nomDuJour est définie à "Mercredi", puis break arrête le switch.
      • Si jourNumero avait été 0 ou 8, le default aurait été exécuté.

1.4. L'opérateur Ternaire (? :)

C'est une forme abrégée d'une instruction if...else simple, très utile pour l'affectation conditionnelle de valeurs.

  • Syntaxe :

    condition ? expressionSiVraie : expressionSiFausse;

  • Exemple pratique : Déterminer le statut d'un étudiant

    let note = 12;
let statut = (note >= 10) ? "Réussi" : "Échoué";
console.log(`L'étudiant a ${note} et a donc ${statut}.`); // Affiche "L'étudiant a 12 et a donc Réussi."

note = 8;
statut = (note >= 10) ? "Réussi" : "Échoué";
console.log(`L'étudiant a ${note} et a donc ${statut}.`); // Affiche "L'étudiant a 8 et a donc Échoué."
    • Explication du code :
      • L'expression note >= 10 est évaluée.
      • Si elle est true, la valeur "Réussi" est assignée à statut.
      • Si elle est false, la valeur "Échoué" est assignée à statut.

2. Les Boucles en JavaScript : Répéter des Tâches

Les boucles nous permettent d'exécuter un bloc de code plusieurs fois de suite, soit un nombre défini de fois, soit tant qu'une condition reste vraie. Elles sont indispensables pour traiter des listes de données, générer des éléments répétitifs ou attendre des événements.

2.1. La Boucle for

La boucle for est la plus courante pour répéter un bloc de code un nombre connu de fois.

  • Syntaxe :

    for (initialisation; condition; incrémentation/décrémentation) {
    // Code à exécuter à chaque itération
}

  • Explication des composants :

    1. initialisation : Exécutée une seule fois au début de la boucle. Typiquement, on y déclare et initialise une variable de compteur (ex: let i = 0;).
    2. condition : Évaluée avant chaque itération. Si elle est true, le bloc de code s'exécute. Si elle est false, la boucle s'arrête.
    3. incrémentation/décrémentation : Exécutée après chaque itération. Typiquement, on y met à jour la variable de compteur (ex: i++ ou i--).

  • Exemple pratique : Compter de 1 à 5

    console.log("Début du compte...");
for (let i = 1; i <= 5; i++) {
    console.log(`Compteur : ${i}`);
}
console.log("Fin du compte !");
    • Explication du code :
      • let i = 1; : La variable i est initialisée à 1.
      • i <= 5; : La boucle continue tant que i est inférieur ou égal à 5.
      • i++ : Après chaque exécution du bloc, i est incrémenté de 1.
      • Résultat : Les messages "Compteur : 1" à "Compteur : 5" seront affichés.

2.2. La Boucle while

La boucle while est utilisée lorsque le nombre d'itérations n'est pas connu à l'avance, et que la boucle doit continuer tant qu'une certaine condition reste vraie.

  • Syntaxe :

    while (condition) {
    // Code à exécuter tant que la condition est vraie
    // Assurez-vous de modifier la condition à l'intérieur de la boucle
    // pour éviter une boucle infinie !
}

  • Explication :

    • La condition est évaluée avant chaque itération.
    • Si la condition est true, le bloc de code est exécuté.
    • Si la condition devient false, la boucle s'arrête.
    • Attention : Il est crucial que le code à l'intérieur de la boucle modifie la condition à un moment donné, sinon vous aurez une boucle infinie qui bloquera votre programme.

  • Exemple pratique : Deviner un nombre aléatoire

    let nombreCible = Math.floor(Math.random() * 5) + 1; // Un nombre entre 1 et 5
let tentative = 0;
let trouve = false;

console.log("Devinez le nombre entre 1 et 5 !");

while (!trouve) {
    tentative++;
    let proposition = Math.floor(Math.random() * 5) + 1; // L'ordinateur "devine"
    console.log(`Tentative #${tentative}: Proposition est ${proposition}`);

    if (proposition === nombreCible) {
        trouve = true;
        console.log(`Bravo ! Le nombre était ${nombreCible}. Trouvé en ${tentative} tentatives.`);
    } else {
        console.log("Ce n'est pas ça, réessayez.");
    }
}
    • Explication du code :
      • On génère un nombreCible aléatoire.
      • La boucle while continue tant que trouve est false.
      • À chaque itération, une nouvelle proposition est générée.
      • Si la proposition correspond au nombreCible, trouve passe à true, ce qui met fin à la boucle.

2.3. La Boucle do...while

La boucle do...while est similaire à while, mais elle garantit que le bloc de code est exécuté au moins une fois avant que la condition ne soit évaluée pour la première fois.

  • Syntaxe :

    do {
    // Code à exécuter au moins une fois
    // ... puis tant que la condition est vraie
} while (condition);

  • Explication :

    • Le bloc do est exécuté d'abord.
    • Ensuite, la condition est évaluée.
    • Si la condition est true, le bloc do est exécuté à nouveau. Ce processus se répète tant que la condition est true.

  • Exemple pratique : Saisie utilisateur avec validation

    let reponse;
do {
    reponse = prompt("Voulez-vous continuer ? (oui/non)").toLowerCase();
} while (reponse !== "oui" && reponse !== "non");

if (reponse === "oui") {
    console.log("Vous avez choisi de continuer.");
} else {
    console.log("Vous avez choisi d'arrêter.");
}
    • Explication du code :
      • Le prompt s'affiche toujours au moins une fois pour demander la réponse.
      • La boucle do...while continue de demander tant que la reponse n'est ni "oui" ni "non".
      • Une fois que l'utilisateur entre "oui" ou "non", la condition devient fausse et la boucle se termine.

2.4. Boucles spécifiques aux collections (for...of, for...in)

JavaScript offre des boucles plus spécifiques pour parcourir des collections de données.

  • for...of : Pour les itérables (tableaux, chaînes de caractères, Map, Set, etc.)

    let fruits = ["pomme", "banane", "orange"];
console.log("Liste des fruits :");
for (let fruit of fruits) {
    console.log(fruit);
}

let chaine = "Bonjour";
console.log("\nCaractères de la chaîne :");
for (let char of chaine) {
    console.log(char);
}
    • Explication : Cette boucle itère directement sur les valeurs des éléments de la collection. C'est la méthode préférée pour parcourir les tableaux.

  • for...in : Pour les propriétés d'objets (à utiliser avec prudence)

    let personne = { nom: "Alice", age: 30, ville: "Paris" };
console.log("\nPropriétés de la personne :");
for (let cle in personne) {
    console.log(`${cle}: ${personne[cle]}`);
}
    • Explication : Cette boucle itère sur les noms des propriétés (clés) énumérables d'un objet. Soyez prudent avec for...in car elle peut aussi itérer sur des propriétés héritées et n'est pas recommandée pour les tableaux où for...of ou forEach sont plus appropriés.

2.5. Mots-clés de Contrôle de Boucle

Deux mots-clés permettent de modifier le comportement des boucles :

  • break : Termine immédiatement la boucle en cours et passe à l'instruction qui la suit.

    for (let i = 0; i < 10; i++) {
    if (i === 5) {
        console.log("Trouvé 5, arrêt de la boucle.");
        break; // Sort de la boucle for
    }
    console.log(i);
}
// Le programme continue ici après le break
console.log("Boucle terminée par break.");
    • Explication : Dès que i atteint 5, le message s'affiche, break est rencontré, et la boucle for s'arrête instantanément. Seuls 0, 1, 2, 3, 4 sont affichés avant le break.

  • continue : Arrête l'itération actuelle de la boucle et passe directement à l'itération suivante. Le code restant dans le bloc de la boucle pour l'itération actuelle n'est pas exécuté.

    for (let i = 0; i < 5; i++) {
    if (i % 2 === 0) { // Si i est pair
        console.log(`Saut de l'itération pour ${i} (pair).`);
        continue; // Passe à l'itération suivante
    }
    console.log(`Nombre impair : ${i}`);
}
    • Explication : Pour chaque valeur paire de i (0, 2, 4), le message de saut est affiché et le continue est exécuté, empêchant le console.log suivant ("Nombre impair : ...") de s'exécuter pour cette itération. Seuls 1 et 3 sont affichés comme nombres impairs.

Conclusion et Résumé

Félicitations ! Vous avez maintenant exploré les piliers de la logique de programmation en JavaScript : les conditions et les boucles.

  • Les conditions (if/else if/else, switch, opérateur ternaire) vous donnent le pouvoir de prendre des décisions et de diriger le flux d'exécution de votre programme en fonction de l'évaluation de certaines expressions.
  • Les boucles (for, while, do...while, for...of, for...in) vous permettent d'automatiser des tâches répétitives, rendant votre code plus concis, plus efficace et capable de gérer de grandes quantités de données.
  • Les mots-clés break et continue offrent un contrôle fin sur le déroulement de vos boucles.

Ces concepts sont interdépendants et sont la clé pour écrire des applications JavaScript dynamiques et interactives. La maîtrise de ces outils est fondamentale pour résoudre des problèmes de programmation complexes.

N'oubliez pas que la meilleure façon d'assimiler ces concepts est de les pratiquer. Essayez de créer de petits scripts qui utilisent différentes structures conditionnelles et de boucles. Pensez à des scénarios de la vie réelle où vous auriez besoin de répéter des actions ou de prendre des décisions, et tentez de les modéliser en code. La prochaine étape sera d'apprendre à organiser ce code en fonctions, puis en modules, pour des applications de plus grande envergure. Continuez à coder !