• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 23/07/2020

Choisissez la condition appropriée pour contrôler le déroulement de votre programme (if, else, switch)

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Comme vous allez écrire des programmes de plus en plus évolués, la création de lignes de code qui s'exécutent l'une après l'autre dans un ordre défini ne suffira plus. C'est là que vient la notion de déroulement du programme.

Le déroulement du programme est un terme général qui décrit l'ordre dans lequel s'exécutent vos lignes de code. Ceci signifie que certaines lignes seront lues une seule fois, certaines plusieurs fois, et d'autres complètement ignorées, selon la situation.

Dans ce premier chapitre sur le déroulement du programme, nous allons nous intéresser aux instructions conditionnelles.

Appréhendez les instructions if/else

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 condition 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;
let 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 instructions if/else

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

Rendez-vous sur cet éditeur CodePen. Dans cet exercice, j'ai légèrement modifié notre classe  Episode  .  Au lieu de préciser si un épisode a été visionné au moment de créer l'instance, on va simplement donner le nombre de minutes visionnées par l'utilisateur, en le passant comme argument au  constructor  .

  1. Il y a des parenthèses vides pour les instructions if et else. Complétez ces conditions pour que la valeur de la propriété  hasBeenWatched  soit assignée correctement.

  2. Observez. Le premier épisode devrait afficher "Déjà regardé", et les deux autres "Pas encore regardé".

Si l'utilisateur a commencé à regarder un épisode mais ne l'a pas encore terminé, on considère l'épisode comme n'étant pas encore regardé.

N'oubliez pas, votre code ira entre les commentaires "===" sur l'exercice.

Solution :

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

Découvrez l'égalité :  ==  ou ===

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  à un  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

C'est le moment d'essayer certains de ces opérateurs dans notre composant d'épisodes. Rendez-vous sur cet éditeur CodePen pour vous entraîner.

Modifions encore un peu la logique de la class  Episode  . Le composant de votre collègue nécessite maintenant des épisodes avec les propriétés suivantes :

  • title  : le titre de l'épisode (string)

  • duration  : la durée de l'épisode en minutes (number)

  • watchedText  : un string contenant "Pas encore regardé", "En train de regarder" ou "Déjà regardé" selon le nombre de minutes visionnées

  • continueWatching  : un boolean qui sera true si l'utilisateur a commencé à regarder l'épisode mais pas encore terminé, et false sinon

C'est à vous de jouer ! Suivez les étapes suivantes :

  1. Avec une ou plusieurs instructions if/else, ajoutez la logique requise au constructor de la classe  Episode  .

  2. Est-ce possible de raccourcir votre code ou de le rendre plus lisible ?

N'oubliez pas d'utiliser le mot-clé  this  pour ajouter des propriétés à la classe.

Solution :

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

Appréhendez une notion importante : le scope des variables

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é scope de bloc, ou block scope.  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 :

Scopes surlignés
Scopes surlignés

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  !

Donc, comment obtenir le comportement voulu ? Comment passer des valeurs vers l'extérieur depuis l'intérieur d'un bloc de code ?

Dans ce cas, 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 est déclarée dans le scope parent, elle est disponible partout, accessible et peut être modifiée correctement.

Utilisez les instructions switch

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 et souhaitiez 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.

En résumé 

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 condition 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.

Exemple de certificat de réussite
Exemple de certificat de réussite