3-Structures de contrôle, conditions et opérateurs de comparaison JavaScript
Les conditions IF et SWITCH
Dans cette nouvelle partie, nous allons étudier et comprendre l’intérêt des structures de contrôle en JavaScript.
On appelle « structure de contrôle » un ensemble d’instructions qui permet de contrôler l’exécution du code.
Il existe deux grands types de structure de contrôle de base qu’on retrouve dans la plupart des langages informatiques et notamment en JavaScript : les structures de contrôle conditionnelles (ou plus simplement les « conditions ») et les structures de contrôle de boucles (ou plus simplement les « boucles »).
Les conditions vont nous permettre d’exécuter un certain nombre d’instructions si et seulement si une certaine condition est vérifiée.
Les boucles vont nous permettre d’exécuter un bloc de code en boucle tant qu’une condition donnée est vérifiée.
Présentation des conditions en JavaScript
Les structures de contrôle conditionnelles (ou plus simplement conditions) vont nous permettre d’exécuter une série d’instructions si une condition donnée est vérifiée ou (éventuellement) une autre série d’instructions si elle ne l’est pas.
Les conditions vont ainsi être un passage incontournable pour rendre un site dynamique puisqu’elles vont nous permettre d’exécuter différents codes et ainsi afficher différents résultats selon le contexte.
Notez que nous allons souvent créer nos conditions en nous appuyant sur le contenu de variables. On va ainsi pouvoir exécuter un code si une variable contient telle valeur ou tel autre code si notre variable contient une autre valeur.
Nous avons accès aux structures conditionnelles suivantes en JavaScript :
- La condition if (si) ;
- La condition if… else (si… sinon) ;
- La condition if… elseif… else (si… sinon si… sinon).
Nous allons étudier chacune de ces conditions dans la suite de cette partie.
Présentation des opérateurs de comparaison
Comme je l’ai précisé plus haut, nous allons souvent construire nos conditions autour de variables : selon la valeur d’une variable, nous allons exécuter tel bloc de code ou pas.
En pratique, nous allons donc comparer la valeur d’une variable à une certaine autre valeur donnée et selon le résultat de la comparaison exécuter un bloc de code ou pas. Pour comparer des valeurs, nous allons devoir utiliser des opérateurs de comparaison.
On va pouvoir utiliser les opérateurs de comparaison suivants en JavaScript :
| Opérateur | Définition |
| == | Permet de tester l’égalité sur les valeurs |
| === | Permet de tester l’égalité en termes de valeurs et de types |
| != | Permet de tester la différence en valeurs |
| <> | Permet également de tester la différence en valeurs |
| !== | Permet de tester la différence en valeurs ou en types |
| < | Permet de tester si une valeur est strictement inférieure à une autre |
| > | Permet de tester si une valeur est strictement supérieure à une autre |
| <= | Permet de tester si une valeur est inférieure ou égale à une autre |
| >= | Permet de tester si une valeur est supérieure ou égale à une autre |
Certain de ces opérateurs nécessitent certainement une précision de ma part. La première chose à bien comprendre ici est que les opérateurs de comparaison ne nous servent pas à indiquer au JavaScript que tel opérande est supérieur, égal, ou inférieure à tel autre opérande.
Note : les opérandes sont les valeurs de chaque côté d’un opérateur.
Les conditions if, if…else et if…else if…else en JavaScript
Maintenant que nous savons utiliser les opérateurs de comparaison, nous allons pouvoir créer nos premières structures conditionnelles ou plus simplement « conditions ».
Nous allons ici nous concentrer sur les structures de contrôle conditionnelles if, if…else et if… else if… else.
La condition if en JavaScript
La structure de contrôle conditionnelle if est présente dans l’ensemble des langages de programmation utilisant les structures de contrôle et notamment en JavaScript.
La condition if est l’une des conditions les plus utilisées et est également la plus simple à appréhender puisqu’elle va juste nous permettre d’exécuter un bloc de code si et seulement si le résultat d’un test vaut true.
Cela signifie que quoi qu’on passe en test d’une condition, le JavaScript renverra true ou false. Dans le cas où on ne passe qu’une valeur (ou qu’une variable), le JavaScript va donc l’évaluer et renvoyer true ou false.
Ici, vous devez savoir que toute valeur évaluée par le JavaScript dans un contexte booléen va être évaluée à true à l’exception des valeurs suivantes qui vont être évaluées à false :
- Le booléen false ;
- La valeur 0 ;
- Une chaine de caractères vide ;
- La valeur null ;
- La valeur undefined ;
- La valeur NaN (« Not a Number » = « n’est pas un nombre »).
La condition if…else en JavaScript
La condition if est une structure conditionnelle limitée par définition puisqu’elle ne nous permet d’exécuter un bloc de code que dans le cas où le résultat d’un test est évalué à true mais elle ne nous offre aucun support dans le cas contraire.
La structure conditionnelle if…else (« si… sinon » en français) va être plus complète que la condition if puisqu’elle va nous permettre d’exécuter un premier bloc de code si un test renvoie true ou un autre bloc de code dans le cas contraire.
La condition if…else if…else en JavaScript
La condition if…else if…else (« si…sinon si…sinon ») est une structure conditionnelle encore plus complète que la condition if…else puisqu’elle va nous permettre cette fois-ci de générer et de prendre en charge autant de cas que l’on souhaite.
En effet, nous allons pouvoir écrire autant de else if que l’on veut dans notre condition if…else if…else et chaque else if va posséder son propre test.
Opérateurs logiques, précédence et règles d’associativité des opérateurs en JavaScript
Dans cette leçon, nous allons découvrir et apprendre à utiliser un nouveau type d’opérateurs qui sont les opérateurs logiques. Ce type d’opérateurs va nous permettre d’effectuer plusieurs comparaisons dans nos conditions ou d’inverser la valeur logique du résultat d’un test.
Nous parlerons également de précédence et d’associativité des opérateurs, c’est-à-dire de l’ordre et de la façon selon lesquels le JavaScript va traiter les opérateurs.
- Présentation et utilisation des opérateurs logiques
Les opérateurs logiques sont des opérateurs qui vont principalement être utilisés avec des valeurs booléennes et au sein de conditions.
Le JavaScript supporte trois opérateurs logiques : l’opérateur logique « ET », l’opérateur logique « OU » et l’opérateur logique « NON ».
Les opérateurs logiques « ET » et « OU » vont nous permettre d’effectuer plusieurs comparaisons dans une condition. Si on utilise l’opérateur « ET », toutes les comparaisons devront être évaluées à true pour que le test global de la condition retourne true. Dans le cas où n utilise l’opérateur logique « OU », il suffira qu’une seule des comparaisons soit évaluée à true pour exécuter le code dans la condition.
Finalement, l’opérateur logique « NON » va nous permettre d’inverser le résultat logique d’un test dans une condition, ce qui signifie que ce qui a été évalué à true renverra false avec l’opérateur logique « NON » et inversement pour ce qui a été évalué à false.
Les opérateurs logiques vont être représentés par les symboles suivants en JavaScript qu’il faudra obligatoirement utiliser :
| Opérateur (nom) | Opérateur (symbole) | Description |
| AND (ET) | && | Lorsqu’il est utilisé avec des valeurs booléennes, renvoie true si toutes les comparaisons sont évaluées à true ou false sinon |
| OR (OU) | || | Lorsqu’il est utilisé avec des valeurs booléennes, renvoie true si au moins l’une des comparaisons est évaluée à true ou false sinon |
| NO (NON) | ! | Renvoie false si une comparaison est évaluée à true ou renvoie true dans le cas contraire |
Voyons immédiatement comment utiliser les opérateurs logiques pour créer des conditions plus puissantes et plus performantes.
Utiliser l’opérateur ternaire pour écrire des conditions JavaScript condensées
Dans cette nouvelle leçon, nous allons présenter et étudier le fonctionnement d’un opérateur de comparaison que j’ai jusqu’à présent laissé volontairement de côté : l’opérateur ternaire ? :.
Cet opérateur va nous permettre d’écrire des conditions plus condensées et donc d’alléger nos scripts et de gagner du temps en développement.
L’opérateur ternaire et les structures conditionnelles ternaires
Les structures conditionnelles ternaires (souvent simplement abrégées “ternaires”) correspondent à une autre façon d’écrire nos conditions en utilisant une syntaxe basée sur l’opérateur ternaire <strong>? :</strong> qui est un opérateur de comparaison.
Les ternaires vont utiliser une syntaxe très condensée et nous allons ainsi pouvoir écrire toute une condition sur une ligne et accélérer la vitesse d’exécution de notre code.
Avant de vous montrer les écritures ternaires, je dois vous prévenir : beaucoup de développeurs n’aiment pas les ternaires car elles ont la réputation d’être très peu lisibles et très peu compréhensibles.
Ce reproche est à moitié justifié : d’un côté, on peut vite ne pas comprendre une ternaire si on est un développeur moyen ou si le code qui nous est présenté n’est pas ou mal commenté. De l’autre côté, si vous indentez et commentez bien votre code, vous ne devriez pas avoir de problème à comprendre une structure ternaire.
Exemples d’utilisation des structures ternaires
Les structures ternaires vont se présenter sous la forme suivante : <strong>test ? code à exécuter si true : code à exécuter si false</strong>.
L’instruction switch en JavaScript
Dans cette nouvelle leçon, nous allons nous intéresser à une autre structure de contrôle de base du JavaScript : l’instruction switch qu’on va pouvoir utiliser dans certaines situations précises à la place d’une condition if…else if…else.
- Présentation du switch en JavaScript
L’instruction switch va nous permettre d’exécuter un code en fonction de la valeur d’une variable. On va pouvoir gérer autant de situations ou de « cas » que l’on souhaite.
En cela, l’instruction switch représente une alternative à l’utilisation d’un if…else if…else.
Cependant, ces deux types d’instructions ne sont pas strictement équivalentes puisque dans un switch chaque cas va être lié à une valeur précise. En effet, l’instruction switch ne supporte pas l’utilisation des opérateurs de supériorité ou d’infériorité.
Dans certaines (rares) situations, il va pouvoir être intéressant d’utiliser un switch plutôt qu’un if…else if…else car cette instruction peut rendre le code plus clair et légèrement plus rapide dans son exécution.
Dans tous les cas, il est bon de savoir à quoi ressemble un switch puisque c’est une structure de base commune à de nombreux langages de programmation et cela vous permettra donc de pouvoir comprendre certains codes utilisant ce genre de structure.
TP
let age = 19
if (age>=18){
console.log('vous êtes majeur')
}else
{
console.log('vous êtes mineur')
}let mg = prompt('entrer la moyenne')
if (mg >=10){
console.log('vous êtes admis')
}else
{
console.log('vous êtes ajourné')
}let a = Number(prompt('entrer la valeur de a'))
let b = Number (prompt('entrer la valeur de b'))
let operation = prompt('entrer l\'operation')
console.log(typeof a)
console.log(typeof b)
console.log(operation)
switch (operation){
case "+":{
console.log(a+b);
break;
}
case "-":{
console.log(a-b);
break;
}
case "*":{
console.log(a-b);
break;
}
case "/":{
if(b!= 0){
console.log(a/b);
}else
{
console.log('impossible')
}
break;
}
default :{
console.log('pas operation')
}
}