Apprenez à programmer avec JavaScript

L'instruction   if  /  else  est une des plus universelles en programmation. Qu'il s'agisse de réagir à une saisie de l'utilisateur, aux résultats de calculs ou de simplement vérifier si quelqu'un est connecté ou non, vous aurez souvent à utiliser des instructions if/else.

IF (SI) l'utilisateur est connecté, ouvrir sa page d'accueil)

ELSE (SINON) revenir à la page de connexion)

C'est ce qu'on appelle une instruction conditionnelle, parce qu'elle vérifie si certaines conditions sont réunies, et réagit en conséquence. Voyons les types de conditions qui peuvent être utilisés dans ces instructions.

Utilisez des valeurs boolean

En JavaScript, si on utilise des   boolean  (bouléens, en français) simples pour les instructions   if  /  else  , la syntaxe se présente comme suit :

if (myBoolean) {
// réaction à la valeur vraie de myBoolean
} else {
// réaction à la valeur faux de myBoolean
}

Donc, pour vérifier si un utilisateur est connecté, vous pouvez procéder comme suit :

let UserLoggedIn = true;
if (UserLoggedIn) {
   console.log("Utilisateur connecté!");
} else {
   console.log("Alerte, intrus!");
}

Dans le cas ci-dessus, vous obtiendrez l'impression sur la console de   "Utilisateur connecté!"  , car le boolean   userLoggedIn  a la valeur true. S'il avait la valeur false, vous obtiendriez à la place   "Alerte, intrus!"  .

Utilisez des expressions

Plutôt qu'une simple variable logique dans une condition   if  /  else  , vous pouvez aussi utiliser des expressions de comparaison, qui comparent des valeurs entre elles.

Les expressions de comparaison vous permettent de comparer deux valeurs par les opérateurs suivants :

• <   inférieur à ;

• <=   inférieur ou égal à ;

• ==   égal à ;

• >=   supérieur ou égal à ;

• >   supérieur à ;

• !=   différent de.

Par exemple :

const numberOfSeats = 30;
const numberOfGuests = 25;
if (numberOfGuests < numberOfSeats) {
// autoriser plus d'invités
} else {
// ne pas autoriser de nouveaux invités
}

Vous pouvez aussi chaîner les instructions   if  /  else  pour réagir à des conditions potentielles multiples :

if (numberOfGuests == numberOfSeats) {
// tous les sièges sont occupés
} else if (numberOfGuests < numberOfSeats) {
// autoriser plus d'invités
} else {
// ne pas autoriser de nouveaux invités
}

Le chaînage d'instructions permet de prévoir différents résultats en fonction des différentes situations.

Pratiquez les conditions if/else

Voici une occasion de vous entraîner à l'utilisation des instructions if/else.

Rendez-vous sur cet éditeur CodePen. Dans cet exercice, nous allons mettre en place un contrôle de l'âge pour afficher un contenu. Sur notre page, il y a un input text qui demande de saisir votre âge, et un bouton pour valider. Si on est majeur, donc 18 ans et plus, on affiche le message autorisé, sinon on affiche une alerte disant que l’on n’est pas autorisé.

Pour réaliser cet exercice, voici comment vous allez procéder :

1. Vous allez lire le code JavaScript, qui est intégralement commenté, pour bien comprendre à quoi sert chaque élément, et surtout les variables à votre disposition. Il y a sûrement des éléments que vous ne comprenez pas car vous n’avez pas encore vu comment manipuler du HTML en JavaScript, mais ici vous n’avez qu’à exploiter les variables et fonctions déjà codées.

2. Vous allez écrire une condition if/else entre les lignes 34 et 38 qui appellera la fonction refuser() si l'âge saisi correspond à un mineur, et la fonction valider() s’il est majeur.

3. Attention, l'âge de la majorité a été stocké dans la variable ageMajorite, donc il faut utiliser cette variable dans la condition.

Une fois que vous aurez codé la bonne condition, vous pourrez enchaîner les tests en saisissant différents âges et en validant.

Solution

Voici un nouveau CodePen avec une solution à l’exercice.

En JavaScript, toutes les égalités ne sont pas nées égales :

Il y a deux façons de vérifier si deux valeurs sont égales en JavaScript :  ==  et  ===, aussi appelées égalité simple et égalité stricte :

• l'égalité simple vérifie la valeur, mais pas le type. Donc ceci renvoie la valeur true  :
  5 == "5"

• par contre, l'égalité stricte vérifie à la fois la valeur et le type. Donc :
  5 === "5"
  renvoie   false  , car on compare un   number  à une   string  .

De même, il y a deux opérateurs d'inégalité,   !=  et   !==  , avec la même distinction.

Comprenez les conditions multiples

Dans certaines situations, vous souhaitez vérifier plusieurs conditions pour un même résultat ; par exemple dans la même instruction if. Pour cela, il existe des opérateurs logiques :

• &&  – ET logique – pour vérifier si deux conditions sont toutes les deux vraies ;

• ||    – OU logique – pour vérifier si au moins une condition est vraie ;

• !    – NON logique – pour vérifier si une condition n'est pas vraie. 

let userLoggedIn = true;
let UserHasPremiumAccount = true;
let userHasMegaPremiumAccount = false;

userLoggedIn && userHasPremiumAccount; // true
userLoggedIn && userHasMegaPremiumAccount; // false

userLoggedIn || userHasPremiumAccount; // true
userLoggedIn || userHasMegaPremiumAccount; // true

!userLoggedIn; // false
!userHasMegaPremiumAccount; // true

Bien sûr, ces opérateurs peuvent être mélangés et combinés en fonction de vos besoins précis.

Pratiquez les opérateurs logiques

Rendez-vous sur cet éditeur CodePen pour vous entraîner.

Nous reprenons l’exercice précédent avec une checkbox servant à indiquer si le contrôle parental est activé ou non. On se retrouve avec 2 situations :

• Le contrôle parental est activé et il faut être majeur pour accéder au contenu.

• Le contrôle parental est désactivé et tout le monde accède au contenu.

Il y a donc une notion de contrôle parental qui se retrouve dans une nouvelle variable dans le code.

Votre mission est donc d’écrire la condition de la même manière que l’exercice précédent au niveau des lignes 40 à 42, en prenant en compte la nouvelle variable  isControlParentalActive  .

Avant de commencer à coder votre solution, n’hésitez pas à regarder comment la variable  isControlParentalActive  est obtenue. Mais si vous ne comprenez pas, ce n’est pas grave, l’objectif ici est avant tout d’exploiter sa valeur dans une condition.

Solution

Vous avez terminé ? Voici un nouveau CodePen avec une solution à l’exercice.

En JavaScript, les variables créées par   let  ou   const  ne peuvent être vues ou utilisées qu'à l'intérieur du bloc de code dans lequel elles sont déclarées.

Ce phénomène est appelé portée des variables ou block scope (en anglais).  Voici un exemple :

let userLoggedIn = true;

if (userLoggedIn) {
   let welcomeMessage = 'Welcome back!';
} else {
   let welcomeMessage = 'Welcome new user!';
}

console.log(welcomeMessage); // renvoie une erreur

Dans ce code, nous avons deux blocs de code issus de l'instruction if  /   else  . Ils sont mis en évidence dans l'image ci-dessous :

Les deux blocs orange et rose déclarent une variable par let welcomeMessage  . Néanmoins, ces variables ne sont disponibles qu'à l'intérieur des blocs où elles sont déclarées. C'est pourquoi, quand vous essayez d'afficher le contenu de   welcomeMessage  sur la console, vous obtenez une erreur : pour le code en dehors des blocs (aussi appelé portée extérieure ou parente), il n'y a pas de variable   welcomeMessage  !

Pour cette situation, une méthode pourrait être de déclarer la variable dans la portée extérieure, puis de la modifier à l'intérieur des blocs if  /  else  :

let userLoggedIn = true;
let welcomeMessage = ''; // déclarer la variable ici

if (userLoggedIn) {
    welcomeMessage = 'Welcome back!'; // modifier la variable extérieure
} else {
    welcomeMessage = 'Welcome new user!'; // modifier la variable extérieure
}

console.log(welcomeMessage); // imprime 'Welcome back!'

Ici, du fait que la variable soit déclarée dans le scope parent, elle est disponible et accessible partout, et peut être modifiée correctement.

Et si vous souhaitez vérifier la valeur d'une variable par rapport à une liste de valeurs attendues, et réagir en conséquence ? Pour cela, vous pouvez utiliser l'instruction   switch  :

Supposons que vous ayez quelques objets utilisateurs. Vous souhaitez vérifier quel type de compte a chacun, pour envoyer un message personnalisé :

let firstUser = {
    name: "Will Alexander",
    age: 33,
    accountLevel: "normal"
};

let secondUser = {
    name: "Sarah Kate",
    age: 21,
    accountLevel: "premium"
};

let thirdUser = {
    name: "Audrey Simon",
    age: 27,
    accountLevel: "mega-premium"
};

Vous pouvez ici utiliser une instruction   switch  , qui prend la variable à vérifier et une liste de valeurs, comme différents cas :

switch (firstUser.accountLevel) {
case 'normal':
      console.log('You have a normal account!');

break;
case 'premium':
      console.log('You have a premium account!');

break;
case 'mega-premium':
      console.log('You have a mega premium account!');
break;

default:
      console.log('Unknown account type!');
}

Après le code à exécuter dans chaque instruction case  , ajoutez l'instruction break  . Si vous ne le faites pas, JavaScript continuera l'exécution des cas suivants (en cascade) jusqu'à rencontrer une instruction  break  ou la fin de l'instruction   switch  . Comme vous pouvez le voir dans l'exemple, vous pouvez aussi ajouter un cas   default  qui ne sera exécuté que si la variable que vous vérifiez ne correspond à aucune des valeurs répertoriées.

Le switch peut servir dans différents cas mais surtout rendre plus facile à lire l'enchaînement de condition  if/else  .

Par exemple voici comment on aurait écrit l’exemple précédent avec des if/else :

if (firstUser.accountLevel === 'normal' ) {
      console.log('You have a normal account!');
} else if (firstUser.accountLevel === 'premium' ) {
      console.log('You have a premium account!');
} else if (firstUser.accountLevel === 'mega-premium' ) {
      console.log('You have a mega premium account!');
}  else {
      console.log('Unknown account type!');
}

Félicitations pour l'achèvement de ce chapitre ! Nous avons traité beaucoup de choses ici. Vous avez :

• appris le fonctionnement des instructions   if  /  else  ;

• vu les différents types de conditions pouvant être utilisés pour les instructions if/else ;

• appris à regrouper les différentes conditions avec des opérateurs logiques ;

• exploré la portée des variables, et les conséquences qu'elle a sur la structure du code ;

• découvert l'instruction switch  pour comparaison à une liste de valeurs attendues.

Dans le chapitre suivant, nous allons nous intéresser à la répétition de tâches avec des boucles.