Instructions conditionnelles en JavaScript

Introduction

Dans ce laboratoire, vous apprendrez à utiliser les instructions conditionnelles en JavaScript. Les instructions conditionnelles sont un élément fondamental de la programmation qui vous permettent d'exécuter différents blocs de code en fonction de la véracité ou de la fausseté d'une certaine condition. Cela vous permet de créer des applications dynamiques et réactives qui peuvent prendre des décisions et modifier leur comportement en conséquence.

Nous aborderons les concepts clés suivants :

• L'instruction if pour exécuter du code lorsqu'une condition est vraie.
• La clause else pour fournir un chemin alternatif.
• L'instruction else if pour vérifier plusieurs conditions.
• La différence entre les opérateurs d'égalité faible (==) et d'égalité stricte (===).

À la fin de ce laboratoire, vous aurez créé un script simple qui démontre comment contrôler le flux de votre programme à l'aide de ces outils essentiels.

Écrire une instruction if avec comparaison

Dans cette étape, vous apprendrez à utiliser l'instruction if, qui est l'instruction conditionnelle la plus basique en JavaScript. Elle exécute un bloc de code uniquement si une condition spécifiée est évaluée à true.

La syntaxe de base est la suivante :

if (condition) {
  // code à exécuter si la condition est vraie
}

Nous allons créer un script qui affiche une salutation en fonction de l'heure de la journée. Tout d'abord, vérifions s'il s'agit du matin.

1. Dans l'explorateur de fichiers sur le côté gauche du WebIDE, trouvez et ouvrez le fichier script.js.
2. Ajoutez le code suivant à script.js. Ce code récupère l'heure actuelle du système, et si l'heure est inférieure à 12, il modifie le texte de l'élément <h1> de notre page HTML.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
}

3. Après avoir ajouté le code, enregistrez le fichier (vous pouvez utiliser Ctrl+S ou Cmd+S).
4. Pour voir le résultat, cliquez sur l'onglet Web 8080 en haut de l'interface. Si l'heure actuelle est avant midi, vous verrez le message "Good Morning!". Sinon, le message restera "Hello!".

Ajouter une clause else pour le chemin alternatif

Dans cette étape, vous allez ajouter une clause else à votre instruction if. La clause else vous permet de spécifier un bloc de code qui sera exécuté si la condition de l'instruction if est false. Cela offre un chemin alternatif pour la logique de votre programme.

La syntaxe est la suivante :

if (condition) {
  // code à exécuter si la condition est vraie
} else {
  // code à exécuter si la condition est fausse
}

Modifions notre script pour afficher une salutation différente s'il ne fait pas le matin.

1. Ouvrez à nouveau le fichier script.js dans l'éditeur.
2. Modifiez votre code existant pour inclure un bloc else. Cela définira la salutation sur "Good Afternoon!" si la condition currentHour < 12 est fausse.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else {
  greetingElement.textContent = "Good Afternoon!";
}

3. Enregistrez le fichier script.js.
4. Basculez vers l'onglet Web 8080 pour voir les changements. Désormais, si l'heure est passée midi, le message passera de "Hello!" à "Good Afternoon!".

Utiliser else if pour plusieurs conditions

Dans cette étape, vous apprendrez à utiliser l'instruction else if pour gérer plusieurs conditions. Lorsque vous avez plus de deux résultats possibles, else if vous permet de tester une série de conditions dans l'ordre.

La syntaxe est la suivante :

if (condition1) {
  // code pour condition1
} else if (condition2) {
  // code pour condition2
} else {
  // code si aucune condition n'est remplie
}

Développons notre script de salutation pour inclure un message pour le soir. Nous définirons "après-midi" comme avant 18h00 et "soir" comme toute heure après cela.

1. Dans le fichier script.js, mettez à jour votre code pour inclure une condition else if. La logique sera désormais la suivante :
   • Si l'heure est avant 12h, c'est le "Matin".
   • Sinon, si l'heure est avant 18h, c'est l'"Après-midi".
   • Sinon, c'est le "Soir".

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else if (currentHour < 18) {
  greetingElement.textContent = "Good Afternoon!";
} else {
  greetingElement.textContent = "Good Evening!";
}

2. Enregistrez le fichier et actualisez l'onglet Web 8080. La salutation reflétera désormais avec précision s'il s'agit du matin, de l'après-midi ou du soir, en fonction de l'heure actuelle.

Appliquer l'opérateur d'égalité == dans la condition

Dans cette étape, nous allons explorer l'opérateur d'égalité ==. Cet opérateur, également connu sous le nom d'opérateur d'égalité "lâche" ou "abstraite", compare deux valeurs pour vérifier leur égalité après avoir tenté de les convertir en un type commun.

Par exemple, le nombre 10 et la chaîne de caractères '10' sont considérés comme égaux lors de l'utilisation de ==.

Pour voir cela en action, nous allons ajouter un nouveau morceau de code à notre script. Ce code n'affectera pas la salutation mais affichera un message dans la console du développeur du navigateur.

1. Ajoutez le code suivant à la fin de votre fichier script.js.

let numberValue = 10;
let stringValue = "10";

if (numberValue == stringValue) {
  console.log("The == operator says they are equal!");
}

2. Enregistrez le fichier. Pour voir la sortie, vous devez ouvrir la console du développeur.
3. Dans l'onglet Web 8080, faites un clic droit n'importe où sur la page et sélectionnez "Inspecter" ou "Inspecter l'élément". Cela ouvrira les outils de développement.
4. Cliquez sur l'onglet "Console" dans les outils de développement. Vous devriez voir le message : The == operator says they are equal!. Cela confirme que JavaScript a converti les types avant la comparaison.

Tester l'égalité stricte avec l'opérateur ===

Dans cette dernière étape, vous découvrirez l'opérateur d'égalité stricte ===. Contrairement à l'opérateur d'égalité lâche (==), l'opérateur d'égalité stricte compare à la fois la valeur et le type des opérandes. Il n'effectue pas de conversion de type.

C'est généralement l'opérateur recommandé pour les vérifications d'égalité en JavaScript, car il se comporte de manière plus prévisible et aide à éviter les bugs subtils.

Modifions l'exemple de l'étape précédente pour utiliser === et observer la différence.

1. Ajoutez le nouveau bloc de code suivant à la fin de votre fichier script.js.

let numberValueStrict = 10;
let stringValueStrict = "10";

if (numberValueStrict === stringValueStrict) {
  console.log("The === operator says they are equal!");
} else {
  console.log(
    "The === operator says they are NOT equal, because their types are different."
  );
}

2. Enregistrez le fichier et regardez à nouveau la console du développeur dans l'onglet Web 8080. Vous devrez peut-être actualiser la page.
3. Cette fois, vous verrez le message : The === operator says they are NOT equal, because their types are different.. C'est parce que numberValueStrict est un number (nombre) et stringValueStrict est une string (chaîne de caractères), et l'opérateur === les identifie correctement comme différents.

Résumé

Félicitations pour avoir terminé ce laboratoire ! Vous avez appris les bases de la logique conditionnelle en JavaScript, une compétence cruciale pour tout développeur.

Dans ce laboratoire, vous avez :

• Utilisé l'instruction if pour exécuter du code en fonction d'une seule condition.
• Ajouté une clause else pour gérer le cas alternatif.
• Implémenté else if pour gérer plusieurs conditions séquentielles.
• Compris et appliqué l'opérateur d'égalité lâche (==), qui effectue une conversion de type.
• Compris et appliqué l'opérateur d'égalité stricte (===), qui vérifie à la fois la valeur et le type, et qui est le choix recommandé pour la plupart des comparaisons.

La maîtrise des instructions conditionnelles vous permet d'écrire du code intelligent, réactif et capable de gérer une grande variété de scénarios.