Explorer le branchement conditionnel en JavaScript

Introduction

Dans ce laboratoire, les participants plongeront profondément dans le monde de la branchement conditionnel en JavaScript, explorant diverses techniques pour prendre des décisions et contrôler le flux du programme. Le laboratoire couvre des concepts essentiels tels que les instructions if à une branche, la logique if...else, les instructions multi-conditions et les instructions switch, en offrant une expérience pratique avec différentes structures conditionnelles.

Grâce à des exercices de codage pratiques, les apprenants acqueront une maîtrise dans la mise en œuvre de la logique conditionnelle, la comparaison de différentes techniques de branchement et la compréhension de la manière de choisir l'approche la plus appropriée pour des scénarios de programmation spécifiques. En travaillant sur des exemples étape par étape impliquant la vérification d'âge, l'évaluation de notes et la gestion de cas, les participants développeront une solide base dans les capacités de programmation conditionnelle de JavaScript.

Comprendre l'instruction if à une seule branche

Dans cette étape, vous allez découvrir l'instruction if à une branche de base en JavaScript, qui vous permet d'exécuter du code de manière conditionnelle en fonction d'une condition spécifique.

Tout d'abord, créons un fichier JavaScript pour explorer l'instruction if à une branche. Ouvrez l'IDE Web et créez un nouveau fichier nommé conditional-basics.js dans le répertoire ~/project.

// Créez un exemple simple de vérification d'âge
let age = 18;

// Instruction if à une branche
if (age >= 18) {
  console.log("You are eligible to vote!");
}

Dans cet exemple, l'instruction if vérifie si l'âge est supérieur ou égal à 18. Si la condition est vraie, le bloc de code à l'intérieur des accolades {} sera exécuté.

Exécutons le script pour voir la sortie :

node ~/project/conditional-basics.js

Sortie exemple :

You are eligible to vote!

Maintenant, essayons un autre exemple pour démontrer comment fonctionne l'instruction if lorsque la condition est fausse :

// Modifiez le fichier précédent
let temperature = 15;

if (temperature < 10) {
  console.log("It's cold outside. Wear a jacket!");
}

Dans ce cas, comme la température est de 15 (ce qui n'est pas inférieure à 10), rien ne sera affiché lorsque vous exécuterez le script.

Implémenter la logique conditionnelle if...else

Dans cette étape, vous allez découvrir la logique conditionnelle if...else en JavaScript, qui vous permet d'exécuter différents blocs de code selon que la condition est vraie ou fausse.

Ouvrez l'IDE Web et créez un nouveau fichier nommé conditional-else.js dans le répertoire ~/project. Nous allons créer un exemple simple qui montre comment fonctionne if...else :

// Créez un exemple simple d'évaluation de notes
let score = 75;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

Dans cet exemple, l'instruction if...else vérifie si le score est supérieur ou égal à 60. Si la condition est vraie, elle affiche un message de réussite. Sinon, elle affiche un message d'échec.

Exécutons le script pour voir la sortie :

node ~/project/conditional-else.js

Sortie exemple :

Congratulations! You passed the exam.

Maintenant, modifions le script pour démontrer la partie else en changeant le score :

// Modifiez le fichier précédent
let score = 45;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

Lorsque vous exécutez ce script, vous verrez une sortie différente :

Sortie exemple :

Sorry, you did not pass the exam.

Créons un autre exemple pour montrer comment if...else peut être utilisé avec différents types de conditions :

// Ajoutez un autre exemple au fichier
let isRaining = true;

if (isRaining) {
  console.log("Take an umbrella with you.");
} else {
  console.log("Enjoy the sunny day!");
}

Cet exemple montre également comment if...else peut fonctionner avec des conditions booléennes.

Créer des instructions if...else if...else à conditions multiples

Dans cette étape, vous allez apprendre à utiliser plusieurs conditions avec les instructions if...else if...else en JavaScript pour gérer des scénarios de prise de décision plus complexes.

Ouvrez l'IDE Web et créez un nouveau fichier nommé multi-condition.js dans le répertoire ~/project :

// Créez un exemple de classification de notes
let score = 85;

if (score >= 90) {
  console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
  console.log("Great job! You got a B grade.");
} else if (score >= 70) {
  console.log("Good work! You got a C grade.");
} else if (score >= 60) {
  console.log("You passed. You got a D grade.");
} else {
  console.log("Sorry, you failed the exam.");
}

Dans cet exemple, l'instruction if...else if...else vérifie plusieurs conditions séquentiellement. La première condition qui se révèle vraie aura son bloc de code exécuté, et les conditions restantes seront ignorées.

Exécutons le script pour voir la sortie :

node ~/project/multi-condition.js

Sortie exemple :

Great job! You got a B grade.

Maintenant, modifions le score pour voir comment fonctionnent les différentes conditions :

// Essayez différents scénarios de score
let score = 55;

if (score >= 90) {
  console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
  console.log("Great job! You got a B grade.");
} else if (score >= 70) {
  console.log("Good work! You got a C grade.");
} else if (score >= 60) {
  console.log("You passed. You got a D grade.");
} else {
  console.log("Sorry, you failed the exam.");
}

Lorsque vous exécutez ce script, vous verrez une sortie différente :

Sortie exemple :

Sorry, you failed the exam.

Créons un autre exemple pour démontrer la logique à conditions multiples avec un autre scénario :

// Exemple de condition météorologique
let temperature = 25;

if (temperature > 30) {
  console.log("It's very hot outside.");
} else if (temperature > 20) {
  console.log("The weather is warm and pleasant.");
} else if (temperature > 10) {
  console.log("It's a bit cool today.");
} else {
  console.log("It's cold outside.");
}

Cet exemple montre comment if...else if...else peut être utilisé pour gérer plusieurs conditions avec différents résultats.

Utiliser l'instruction switch pour la gestion de plusieurs cas

Dans cette étape, vous allez découvrir l'instruction switch en JavaScript, qui fournit une manière alternative de gérer plusieurs conditions pour une seule variable.

Ouvrez l'IDE Web et créez un nouveau fichier nommé switch-statement.js dans le répertoire ~/project :

// Créez un exemple de jour de la semaine en utilisant l'instruction switch
let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day");
}

Dans cet exemple, l'instruction switch vérifie la valeur de day. Chaque case représente une valeur spécifique, et le bloc de code correspondant est exécuté lorsque la valeur correspond. L'instruction break empêche le passage à l'un des cas suivants.

Exécutons le script pour voir la sortie :

node ~/project/switch-statement.js

Sortie exemple :

Wednesday

Maintenant, créons un autre exemple pour démontrer le cas default :

// Classification de notes en utilisant l'instruction switch
let grade = "B";

switch (grade) {
  case "A":
    console.log("Excellent performance!");
    break;
  case "B":
    console.log("Good job!");
    break;
  case "C":
    console.log("Satisfactory performance.");
    break;
  case "D":
    console.log("Needs improvement.");
    break;
  default:
    console.log("Invalid grade.");
}

Lorsque vous exécutez ce script, vous verrez :

Sortie exemple :

Good job!

Montrez comment plusieurs cas peuvent partager le même bloc de code :

// Détection du week-end en utilisant l'instruction switch
let day = 6;

switch (day) {
  case 6:
  case 7:
    console.log("It's the weekend!");
    break;
  default:
    console.log("It's a weekday.");
}

Cet exemple montre comment vous pouvez gérer plusieurs cas avec la même action.

Comparer et choisir entre les instructions if et switch

Dans cette étape, vous allez découvrir les principales différences entre les instructions if et les instructions switch, et comprendre quand utiliser chaque approche.

Ouvrez l'IDE Web et créez un nouveau fichier nommé conditional-comparison.js dans le répertoire ~/project :

// Comparer if et switch pour différents scénarios

// Scénario 1: Vérification d'égalité simple
let fruit = "apple";

// Utilisation de l'instruction if
if (fruit === "apple") {
  console.log("If Statement: It's an apple.");
} else if (fruit === "banana") {
  console.log("If Statement: It's a banana.");
} else {
  console.log("If Statement: Unknown fruit.");
}

// Utilisation de l'instruction switch
switch (fruit) {
  case "apple":
    console.log("Switch Statement: It's an apple.");
    break;
  case "banana":
    console.log("Switch Statement: It's a banana.");
    break;
  default:
    console.log("Switch Statement: Unknown fruit.");
}

// Scénario 2: Conditions complexes
let score = 85;

// L'instruction if est meilleure pour les conditions complexes
if (score >= 90 && score <= 100) {
  console.log("Excellent grade (A)");
} else if (score >= 80 && score < 90) {
  console.log("Good grade (B)");
} else if (score >= 70 && score < 80) {
  console.log("Satisfactory grade (C)");
} else {
  console.log("Needs improvement");
}

// Le switch est moins adapté aux conditions basées sur une plage ou complexes

Exécutons le script pour voir les sorties :

node ~/project/conditional-comparison.js

Sortie exemple :

If Statement: It's an apple.
Switch Statement: It's an apple.
Good grade (B)

Différences clés à retenir :

Les instructions if sont plus flexibles et peuvent gérer des conditions complexes
Les instructions switch sont meilleures pour la correspondance exacte de valeurs
if peut comparer différents types et utiliser des opérateurs logiques complexes
switch est limité aux vérifications d'égalité stricte

Créons un dernier exemple pour illustrer ces points :

// Choisir entre if et switch

function recommendConditional(input) {
  // Utiliser switch pour les correspondances de valeur simple et exacte
  switch (input) {
    case "red":
    case "blue":
    case "green":
      console.log("Use switch for simple value checks");
      break;

    // Utiliser if pour les conditions plus complexes
    default:
      if (typeof input === "number" && input > 0 && input < 100) {
        console.log("Use if for range and type checking");
      } else {
        console.log("Complex conditions are better with if statements");
      }
  }
}

recommendConditional("blue");
recommendConditional(50);

Résumé

Dans ce laboratoire, les participants ont exploré les techniques de branchement conditionnel en JavaScript, en se concentrant sur différents types d'instructions conditionnelles. Le laboratoire a commencé par la compréhension des instructions if à une seule branche, en démontrant comment exécuter du code sur la base de conditions spécifiques telles que la vérification de l'âge et les vérifications de température. Les apprenants ont pratiqué la création de logique conditionnelle simple qui permet au code de s'exécuter seulement lorsqu'une condition spécifiée est vraie.

Le laboratoire s'est ensuite poursuivi avec des techniques conditionnelles plus avancées, y compris les instructions if...else pour la gestion du branchement bi-directionnel, les instructions if...else if...else à conditions multiples pour la prise de décision complexe et les instructions switch pour la gestion de plusieurs scénarios de cas. Les participants ont appris à comparer différentes approches conditionnelles, en comprenant la syntaxe et les applications pratiques de chaque méthode dans la programmation JavaScript.