TOC

Comment écrire des instructions conditionnelles en JavaScript

introduction

En programmation, il y aura de nombreuses occasions dans lesquelles vous voudrez que différents blocs de code soient exécutés en fonction des entrées de l’utilisateur ou d’autres facteurs.

Par exemple, vous pouvez souhaiter qu’un formulaire soit soumis si chaque champ est correctement rempli, mais vous pouvez également empêcher ce formulaire de le soumettre si certains champs obligatoires sont manquants. Afin de réaliser de telles tâches, nous avons des * instructions conditionnelles *, qui font partie intégrante de tous les langages de programmation.

Les instructions conditionnelles exécutent une action spécifique en fonction des résultats d’un résultat de https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#booleans [+ + vrai + ou + faux +] .

Voici quelques exemples d’instructions conditionnelles JavaScript que vous pouvez voir:

  • Vérifier l’emplacement d’un utilisateur et afficher la langue correcte en fonction du pays

  • Envoyez un formulaire lors de l’envoi ou affichez des avertissements à côté des champs obligatoires manquants

  • Ouvrir un menu déroulant sur un événement de clic ou fermer un menu déroulant s’il est déjà ouvert

  • Afficher le site Web d’un fournisseur d’alcool si l’utilisateur a atteint l’âge légal de boire

  • Afficher le formulaire de réservation pour un hôtel, mais pas si l’hôtel est réservé

Les instructions conditionnelles font partie de la logique, de la prise de décision ou du contrôle de flux d’un programme informatique. Vous pouvez comparer une déclaration conditionnelle à un livre «https://en.wikipedia.org/wiki/Choose_Your_Own_Adventure[Choose Your Own Adventure]» ou à un organigramme.

Dans ce tutoriel, nous allons passer en revue les instructions conditionnelles, y compris les mots-clés + if +, + else + et `+ else if + '. Nous couvrirons également l’opérateur ternaire.

Si déclaration

La plus fondamentale des déclarations conditionnelles est la déclaration + if +. Une instruction + if + évaluera si une instruction est vraie ou fausse, et ne sera exécutée que si l’instruction retourne + true +. Le bloc de code sera ignoré dans le cas d’un résultat + false +, et le programme passera à la section suivante.

Une instruction + if + est écrite avec le mot-clé + if +, suivi d’une condition entre parenthèses, avec le code à exécuter entre accolades. En bref, il peut être écrit en tant que + if () {} +.

Voici un examen plus long de l’énoncé de base + if +.

if (condition) {
   // code that will execute if condition is true
}

Le contenu d’une instruction + if + est en retrait et les accolades contenant le bloc de code à exécuter ne se terminent pas par un point-virgule, à la manière d’un bloc de fonction.

Par exemple, considérons une application de shopping. Dites, pour la fonctionnalité de cette application, un utilisateur qui a déposé une certaine quantité de fonds sur son compte voudrait alors acheter un article du magasin.

shop.js

// Set balance and price of item
const balance = 500;
const jeans = 40;

// Check if there are enough funds to purchase item
if (jeans <= balance) {
 console.log("You have enough money to purchase the item!");
}
OutputYou have enough money to purchase the item!

Nous avons un solde de compte de «+ 500 » et souhaitons acheter une paire de jeans pour « 40 ». En utilisant l'opérateur inférieur ou égal à, nous pouvons vérifier si le prix des jeans est inférieur ou égal au montant des fonds dont nous disposons. Puisque ` jeans ⇐ balance ` est évalué à ` ​​true +`, la condition passera et le bloc de code sera exécuté.

Dans un nouvel exemple, nous allons créer un nouvel élément de boutique dont le coût est supérieur au solde disponible.

shop.js

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
   console.log("You have enough money to purchase the item!");
}

Cet exemple n’aura aucune sortie, puisque + phone ⇐ balance + est évalué à + ​​faux +. Le bloc de code sera simplement ignoré et le programme passera à la ligne suivante.

Autre déclaration

Avec les instructions + if +, nous n’exécutons le code que lorsqu’une instruction est évaluée à` + true + `, mais nous voudrons souvent qu’il se passe autre chose si la condition échoue.

Par exemple, nous pourrions vouloir afficher un message indiquant à l’utilisateur quels champs ont été correctement remplis si un formulaire n’a pas été soumis correctement. Dans ce cas, nous utiliserions l’instruction `+ else + ', qui est le code qui s’exécutera si la condition d’origine échoue.

L’instruction + else + est écrite après l’instruction + if + et n’a pas de condition entre parenthèses. Voici la syntaxe d’une instruction de base + if …​ else +.

if (condition) {
   // code that will execute if condition is true
} else {
   // code that will execute if condition is false
}

En utilisant le même exemple que ci-dessus, nous pouvons ajouter un message à afficher si les fonds du compte sont trop bas.

shop.js

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
   console.log("You have enough money to purchase the item!");
} else {
   console.log("You do not have enough money in your account to purchase this item.");
}
OutputYou do not have enough money in your account to purchase this item.

Comme la condition + if n’a pas réussi, le code passe à l’instruction` + else`.

Cela peut être très utile pour afficher des avertissements ou pour informer l’utilisateur des actions à entreprendre pour avancer. Habituellement, une action est nécessaire en cas de succès et d’échec, aussi + if …​ else + est plus commun qu’une instruction solo + if +.

Sinon si déclaration

Avec + if et` + else`, nous pouvons exécuter des blocs de code selon que la condition est + true ou` + + faux`. Cependant, nous pouvons parfois avoir plusieurs conditions et sorties possibles, et avons besoin de plus que de deux options. Une façon de faire est d’utiliser l’énoncé + else if, qui permet d’évaluer plus de deux résultats possibles.

Voici un exemple de base d’un bloc de code contenant une instruction + if +, plusieurs instructions + else if + et une instruction + else + au cas où aucune des conditions ne serait évaluée à + ​​true +.

if (condition a) {
   // code that will execute if condition a is true
} else if (condition b) {
   // code that will execute if condition b is true
} else if (condition c) {
   // code that will execute if condition c is true
} else {
   // code that will execute if all above conditions are false
}

JavaScript tentera d’exécuter toutes les instructions dans l’ordre et si aucune d’entre elles n’aboutit, le bloc + else + sera utilisé par défaut.

Vous pouvez avoir autant de déclarations + else if que nécessaire. Dans le cas de nombreuses instructions + else if +, il peut être préférable d’utiliser les instructions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch [+ + switch +] .

Comme exemple de plusieurs instructions + else if +, nous pouvons créer une application de notation qui produira une note en fonction d’un score sur 100.

Les exigences de cette application sont les suivantes:

  • Grade de 90 et plus est un A

  • Grade de 80 à 89 est un B

  • Grade de 70 à 79 est un C

  • Grade de 60 à 69 est un D

  • La note de 59 ou moins est un F

Ci-dessous, nous allons créer un ensemble simple d’énoncés + if +, + else + et + else if +, et les tester par rapport à une note donnée.

grades.js

// Set the current grade of the student
let grade = 87;

// Check if grade is an A, B, C, D, or F
if (grade >= 90) {
 console.log("A");
} else if (grade >= 80) {
 console.log("B");
} else if (grade >= 70) {
 console.log("C");
} else if (grade >= 60) {
 console.log("D");
} else {
 console.log("F");
}
OutputB

Dans notre exemple, nous vérifions d’abord le score le plus élevé, qui sera supérieur ou égal à + ​​90 +. Après cela, les instructions + else if + vérifieront les valeurs supérieures à '+ 80 + , + 70 + et + 60 + jusqu’à atteindre la valeur par défaut + else + `d’une note d’échec.

Bien que notre valeur + grade + de + 87 + soit techniquement également vraie pour + C +, + D + et + F +, les instructions s’arrêteront à la première. Par conséquent, nous obtenons une sortie de + B +, qui est la première correspondance.

Opérateur ternaire

L’opérateur * ternaire *, également appelé opérateur conditionnel, est utilisé comme raccourci pour une instruction + if …​ else +.

Un opérateur ternaire est écrit avec la syntaxe d’un point d’interrogation (+? +) Suivi de deux points (+: +), comme illustré ci-dessous.

(condition) ? expression on true : expression on false

Dans la déclaration ci-dessus, la condition est écrite en premier, suivie d’un +? +. La première expression s’exécutera sur + true +, et la deuxième expression s’exécutera sur + false +. Cela ressemble beaucoup à une instruction + if …​ else +, avec une syntaxe plus compacte.

Dans cet exemple, nous allons créer un programme qui vérifie si un utilisateur est «+ 21 » ou plus ancien. S'ils le sont, cela affichera `" Vous pouvez entrer "` sur la console. S'ils ne le sont pas, il affichera `" Vous ne pouvez pas entrer. "+` Sur la console.

age.js

// Set age of user
let age = 20;

// Place result of ternary operation in a variable
const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";

// Print output
oldEnough;
Output'You may not enter.'

Comme le + age + de l’utilisateur était inférieur à + ​​21 +, le message d’échec a été envoyé à la console. L’équivalent + if …​ else + serait " Vous pouvez entrer. " Dans l’instruction + if +, et " Vous ne pouvez pas entrer. " Dans l’instruction + else + déclaration.

Conclusion

Les instructions conditionnelles nous permettent de contrôler le flux afin de déterminer le résultat de nos programmes. Ils constituent l’un des éléments constitutifs fondamentaux de la programmation et peuvent être trouvés dans pratiquement tous les langages de programmation.

Dans cet article, nous avons appris à utiliser les mots-clés + if,` + else` et + else if, ainsi que l’imbrication couverte d’instructions et l’utilisation de l’opérateur ternaire.

Related