Les conditions

Prendre des décisions est un aspect important du langage JavaScript. Cela nous permet de choisir à quel moment prendre une décision ou afficher une information spécifique. Pour cela, nous utilisons des conditions que nous allons écrire de la manière suivante:

if ( condition ) { code }

Si nous traduisons cette ligne cela donne quelque chose dans ce genre:

“Si la condition est rempli (valeur booléenne qui renvoi "true"), alors prend en compte le block entre accolade.

La condition, toujours dans une parenthèse, peut avoir plusieurs formes. Dans tous les cas, elle doit être booléenne. Le but étant de faire une action sur la condition est rempli. On cherche dnc à savoir si c'est le cas (true) ou si ce n'est pas le cas (false). On peut donc retrouver des variables, mais aussi des valeurs séparées d'opérateurs comparatifs ainsi que d'autres symboles comme les opérateurs logiques.

Une fois ce test fait, le langage nous propose plusieurs suites:

Passer à la suite
Il n'est parfois pas nécessaire de faire autre chose. Si notre condition n'est pas remplie, alors rien n'est entrepris. On peut par exemple penser à une interaction. Si notre utilisateur ne clique pas, et bien l'animation de se déclenche pas.

else { … }
On traduit “else” par “sinon”. Les accolades qui suivent nous proposent d'ajouter un code qui sera pris en compte lorsque la condition n'est pas remplie. En pratique, cela pourrait être le cas lorsque l'on teste si notre affichage est en portrait. Si ce n'est pas le cas, nous pourrions rajouter des instructions spécifiques pour un affichage en paysage.

else if ( … ) { … }
Ici, on mixe le fait que la première condition n'est pas remplie, mais qu'il est quand même nécessaire de savoir si une autre condition peut être prise en compte. On peut traduire cela en “… sinon, si …”. Un cas spécifique pourrait être si nous devons afficher un message spécifique le matin, l'après-midi ou le soir. On peut tester si c'est le matin, sinon, si c'est l'après-midi et sinon, c'est forcément le soir.

Il existe une seconde manière de jouer avec les conditions. Grâce à la déclaration “Switch”:

switch ( expression ) { 
  case x : 
  //code; 
  break;
  
  default:
  //code;
}

Cette approche est légèrement différente. D'une part, l'argument est une expression et non une valeur booléenne, et d'autre part, elle ne permet, dans notre cas, que de faire des comparaisons strictes (valeurs et types équivalents).

Pour résumer simplement, l'expression qui sera définie entre parenthèses va être testée par rapport aux cas (case). Si le résultat renvoie “true”, le code qui suit en prit en compte, sinon, on passe au cas suivant.

Il nous est aussi possible de proposer plusieurs cas pour une seule réponse. Pour ce faire, il suffit de les mettre les uns après les autres avant nos lignes de code:

…
case X:
case Y:
//code;
…

Une fois que la comparaison trouve un cas valide, tout le code qui suit sera effectué. Il nous est donc possible de créer des réponses complexes. Par contre, le switch ne fait plus la distinction entre les cas et les codes. Il est donc nécessaire de forcer la sortie du switch. Pour ce faire, il faudra rajouter un “break” à la fin des lignes de codes qui doivent être prises en compte après un cas valide.

Enfin, il est possible de rajouter un cas “default”. Ce cas sera pris en compte si aucun des autres cas n'est valide. Cela peut être pratique pour informer un utilisateur d'un mauvais prompt par exemple.

Liens utiles

If, else, eles if
W3School vous propose des exemples et des explications plus détaillées pour ces différentes déclarations.

Switch
W3School vous met aussi à disposition quelques exercices et infos supplémentaires sur l'utilisation de la déclaration “switch”.