Les structures de contrôle en JavaScript

Les boucles et conditions de JavaScript sont celles du langage C mais elles sont étendues et plus flexibles. Par exemple, le switch case accepte tout type de valeurs.

if else
for
for in
while
break et continue
do while
switch case

if ... else

La syntaxe pour l'exécution conditionnel de code est:

if(condition) { } 

ou

if(condition) { } else { }; 

Les accolades sont optionnels s'il y a une seule instruction tandis que les parenthèses sont toujours obligatoires.
Quand l'évaluation de la condition retourne true, la ou les instructions sont exécutées sinon la partie else le sera si elle est présente.

Exemple:

if(a == 5)
{
    document.write("a vaut 5");
}

Il serait possible comme en C d'assigner une variable à l'intérieur de la condition, une pratique à éviter.

for

Pour exécuter en boucle une série d'instruction, la syntaxe est:

for(var = initialiseur; condition; incrémentation)
{
 ...instructions...
}

Exemple:

for(var i = 0; i < 10; i++)
{
    document.write(i + "<br>");
}

C'est la formulation de base. C'est aussi la plus rapide, comme le montrent les benchmarks sur les diverses formes de boucle en JavaScript.
Mais il existe d'autres formulations, plus simples à écrire.

for in

Cette structure permet de parser le contenu d'un objet pour accéder à la liste de ses propriétés et leurs valeurs. S'il s'agit d'un tableau, les propriétés sont les indices du tableau.

Syntaxe:

var arr = ["a", "b", "c"];
for(x in arr)
{
  document.write(arr[x]);
}

Voici des exemples d'utilisation de la structure de controle for in.

1) for in avec un tableau

La structure for in assigne les indices du tableau à une variable et l'on utilise celle-ci pour indexer le tableau.

var a = new Array("un","deux","trois","quatre","cinq");
a[5]="six";
for(x in a)
{
   document.write(x + ") " + a[x] +  "<br>");
}

2) for in avec un objet

La structure for in assigne le nom des propriétés d'un objet à une variable et l'on utilise celui-ci pour retrouver la valeur de la propriété de l'objet.

function voiture()
{
 this.passagers = 5;
 this.vitesse = 250;
 this.roues = 4;
 this.prix = 10000;
}
var v = new voiture();
for (x in v)
{
   document.write(x + ":" + v[x] + "<br>");
}

Autre exemple, for in dans une fonction avec un objet...

function scanObject(obj, nom)
{ 	
  var str = ""; 	
  for(i in obj)  	
  {
       str += nom + "." + i + " = " + obj[i] + "
"; } return str; } v = new voiture(); v.prix = 5000; document.write(scanObject(v, "voiture"));

3) for each (non standard)

For each obtient directement le contenu de l'objet et fonctionne comme la fonction foreach de PHP. Cette structure à été ajoutée à JavaScript 1.6.
Syntaxe avec toujours le même tableau:

for each(x in arr)
{
   document.write(x);
}

while

Pour une boucle qui exécute tant que la condition donnée est vraie, ce qui implique que l'expression conditionnelle contienne une variable qui est modifée dans le corps de la boucle:

while(condition) { }

Exemple:


var i = 0;
while(i < 3)
{
   document.write(arr[i]);
   i++;
}

Il est facile d'oublier d'incrémenter la variable de la condition ce qui provoque une boucle sans fin et le blocage du navigateur. A utiliser donc avec précautions. La boucle for de l'exemple suivant aura le même résultat et est donc préférable de même que for in.

for(i = 0; i < 3; i++)
{
    document.write(arr[i]);
}

break et continue

break permet de sortir de la boucle, tandis que continue passe à l'itération suivante.
Dans l'exemple, on crée une boucle sans fin avec une condition true qui sera évidemment toujours vraie, et l'on compte sur la commande break pour sortir de la boucle au moment choisi:


var arr = ["a", "b", "c", "d", "e"];
var x = 0;
while(true)
{
  if (x == 2) { x++;  continue; }
  if (x == arr.length) break;
  document.write(arr[x]);
  x++;
}

La chaine "c" n'est pas affichée car on continue quand on arrive à l'indice 2. La boucle s'arrête quand la taille du tableau est atteinte, grâce à l'instruction break:

Si une boucle while peut facilement tourner à l'infini, les choses s'aggravent encore avec l'utilisation de la commande continue car celle-ci peut passer l'instruction d'incrémentation de la variable de la condition qui permet de sortir de la boucle, ici avec l'instruction break.

La possibilité d'associer une étiquette à continue ne nous aide pas à éviter cet inconvénient car l'étiquette doit être déclarée avant l'utilisation de continue.


label:
...instructions...
continue label;
Ce que rend l'option de peu d'intérêt.

do ... while

do while équivaut à la structure while avec la condition reportée en fin de boucle. Le contenu de la boucle sera toujours exécuté au moins une fois.

do { } while(condition)

Exemple:

var i = 0;
do
{
  document.write(arr[i]);
  i++;
} while(i < 3);

Dans le cas présent, il n'y a pas de différence avec while. La différence n'intervient que si la condition n'est jamais respectée. Par exemple (i > 4) n'affiche rien avec while et affiche "a" avec do while.

switch case

Exécute un traitement au choix en fonction de la valeur d'une expression conditionnelle.

Syntaxe:

switch(expression)
{
  case valeur:
      ... instructions ...
      break;
  case valeur:
      ...instructions...
      break;
  default:
  ....
}

Les cas sont comparés successivement, c'est la première valeur qui corresponde à l'expression qui est retenue, et le code associé est exécuté. L'instruction break marque la fin du code pour le cas, donc si break est omis, le code du cas suivant est exécuté à son tour. Et le mot réservé default permet d'activer une procedure de secours quand aucun cas n'est vérifié.

On peut assigner des variables et des expressions dans les cas, exemple:

var x = 10;
var y = 8;
switch(x)
{
case 5: break;
case y + 2:
document.write("x = y + 2");
break;
default:
document.write("Inconnu");
}

Conclusion

JavaScript hérite de la syntaxe et des structures peu sûres du langage C, ce qui inclut l'aberration de l'assignement à l'intérieur d'une condition, avec des effets amplifiés en environnement client-serveur. Il faut être attentif aux boucles infinies éventuelles et pour les performances privilégier for ou for .. in.
Mais il offre une liberté supérieure grâce à sa nature dynamique.

© 2008-2022 Xul.fr