Javascript: Les conditions

  • prérequis : Avoir fini l'introduction au Javascript, la logique booléene, les opérateurs de comparaison, les opérateurs logiques.

  • objectif : Comprendre et savoir utiliser les structures de contrôle if .. else , switch .

Vous savez créer et/ou modifier vos propres variables, les comparer, les manipuler mais on ne va pas se restreindre à ça. Nous allons découvrir ici comment les conditions vont vous permettre de réaliser différentes actions selon qu'une condition (ou plusieurs) soit vraie ou fausse.

Dans les chapitres précédants, nous avons vu que l'on pouvait comparer deux variables (ou autres) afin d'obtenir un résultat booléen (vrai ou faux) comme:

2 == 4;       //retourne false !  

ou encore:

var i = 3O;  
i > 10;      //retoune true !  

1. if

Le if, traduit par 'Si', sert à effectuer une action si la condition passée en parametre est vraie.

Syntax:

if (condition) {  
    action à effectuer si condition est vraie;
}

Ici on va tester la condition, si elle est vraie alors action à effectuer s'executera.

Exemple:

//on declare une variable a égale à 10.
var a = 10;

//on teste si a est plus petit que 20, si oui on affiche "a plus petit que 20"
if (a < 20) {  
    console.log("a est plus petit que 20");
}

// sur la console on vera alors s' afficher le message: " a est plus petit que 20"!

2. else

On vient de voir comment effectuer une ou plusieurs actions lorsqu'une condition testée est vraie, mais que ce passe t-il lorsque la condition est fausse???

En faite, le if teste la condition mais n'effectue rien si la condition est fausse. Pour cela, on va utiliser un nouveau mot clé: else
le else, traduit par sinon, sert à éffectuer une action si la condition passée en parametre est fausse.

Syntax:

if (condition) {  
    action à effectuer si condition est vraie;
} else {
    action à effectuer si la condition passée en parametre est fausse
}

Exemple:

//on declare une variable a égale à 10.
var a = 30;

//on teste si a est plus petit que 20, si oui on affiche "a plus petit que 20"
if (a < 20) {  
    console.log("a est plus petit que 20");
} else {
    console.log("a est plus grand que 20");
}

// sur la console on vera alors s' afficher le message: "a est plus grand que 20"!

3. if ... else if ... else

Il est possible d'imbriquer des conditions entre elles, et ainsi de tester une condition2 si la condition1 est vraie.

Syntax:

if (condition1) {  
    instruction1;
    instruction2;
} else if (condition2) {
    instruction1;
    instruction2;
}

Exemple:

Prenons les l'exemple d'un nombre dont on doit determiner s'il est positif, negatif ou nul:

  • on teste si le nombre est superieur a zero
  • sinon on test si il est inferieur a zero
  • sinon il est ni negatif ni positif donc nul
var a = 10; 

if (a > 0) { // on test si a est plus grand que 0  
    // affiche un message si a est plus grand que 0
    console.log('a est positif');
} else if (a < 0) { //sinon on test si a est plus petit que 0
    console.log('a est negatif');
    } else {
        console.log('a est nul');
}    

4. switch

L'instruction switch sert à évaluer une expression, et executer des instructions en fonctions du resultat obtenus.

Cas concret:

Imaginons que nous voulons associer un jour de la semaine à un chiffre (1 = lundi, 2 = mardi ...), on pourrait le faire avec une serie de if:

var jour = 3; //on definie un jour  
if (jour == 1) {  
    console.log('lundi');
} else if (jour == 2) {
    console.log('mardi');
} else if (jour == 3) {
    console.log('mercredi')
} ....

Ici l' expression à evaluer est jour, et selon sa valeur on effectue divers traitements.
Seulement cette syntax n'est pas la meilleur, surtout si on avait beaucoup de cas possible (7 dans notre exemple)
L' instruction switch permet de palier à ce probleme:

Syntax:

switch (expression) {

    case valeur1:
        instruction à executer;
        break; //pour sortir du switch

    case valeur2:
        instruction à executer;
        break; //pour sortir du switch

    case valeur3:
        instruction à executer;
        break; //pour sortir du switch

    default:
        instruction à executer si rien ne correspond;
}

Exemple:

var jour = 3; //on definie un jour

switch (jour) {  
    case 1: 
        console.log("lundi");
        break;
    case 2: 
        console.log("mardi");
        break;
    case 3: 
        console.log("mercredi");
        break;
    case 4: 
        console.log("jeudi");
        break;
    case 5: 
        console.log("vendredi");
        break;
    case 6: 
        console.log("samedi");
        break;
    case 7: 
        console.log("dimanche");
        break;
    default: 
        console.log('jour non valide');
}

Ici le programme va afficher "mercredi"!

break ?

Vous l' aurait surement remarquer, à chaque cas possible, on a une instruction break.
L'instruction break peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si break n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction switch).

Dans notre exemple, si on avait pas mis break, les instructions pour les cas 4, 5, 6 , 7 se seraient executer.

default ?

Que faire si aucun cas ne correspond à l' expression évaluée?
grace à default, si aucun cas ne correspond à l'expression testée, on executera les instructions qui lui sont données.
Dans notre exemple, si la variable jour valait un nombre autre que 1 à 7, on aurait afficher 'jour non valide'

Ressources

lien mdn switch

lien mdn if

Matthieu Dehondt

Read more posts by this author.

Lille - France

Subscribe to Skillcode

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!