Conditions, boucles et tableaux

Nous allons aborder dans ce chapitre quelques instructions très utiles pour écrire des programmes en Javascript, que nous illustrerons par des exemples. Arrivé à ce stade vous pourrez commencer à écrire des traitements complexes, mais qui n’interagissent pas encore avec HTM et le navigateur.

Les conditionnelles en javascript

Ce type d’instruction permet d’effectuer certaines actions, certains traitements, suivant qu’une condition est réalisée ou non. On utilise un structure de type ‘si condition ok …alors action1…sinon action2’ soit en javascript :

  • Condition ‘if’

La condition à vérifier est une expression logique (évaluable à vraie ou fausse donc) entre parenthèse. L’action à executer sera en général une suite d’instructions entre accolades.

<script type= »text/javascript »>
if (civilite = « Mr »)
{
document.write(« <b>Bonjour Monsieur</b> »);
}
</script>

  • Alternative if / else

Si une alternative existe lorsque la condition n’est pas vérifiée (est fausse) on utilisera l’instruction ‘else’ suivie d’une autre action

<script type= »text/javascript »>
if (civilite = « Mr »)
{
document.write(« <b>Bonjour Monsieur</b> »)
}
else
{
document.write(« <b>Bonjour Madame</b> »)
}
</script>

  • Alternatives multiples : switch

Dans des cas un peu plus compliqués on peut avoir un nombre important d’alternative et ne vouloir qu’une seule action parmi soit exécutée. Dans ce cas on utilise l’instruction ‘switch’

Une seule condition pourra être varie, et un seul bloc d’instruction sera executé, suivant le schéma suivant :

switch(n)
{
cas 1:
execute le bloc 1
break
cas 2:
execute le bloc 2
break
// et dans tous les autres cas…
default:
execute le bloc 3
}

remarque : l’instruction ‘break’ sert à sortir de la séquence du traitement ligne à ligne et à éviter d’exécuter plus d’une action

exemple :

<script type= »text/javascript »>
var unedate=new Date()
cejour=unedate.getDay()
// un message différent suivant le no du jour renvoyé par getday()
switch (cejour)
{
case 6:
document.write(« Dieu merci c’est samedi ! »)
break
case 0:
document.write(« profitez de votre dimanche! »)
break
default:
document.write(« vivement le week-end hein? »)
}
</script>

Les boucles
Elles permettent comme leur nom l’indique de répéter un nombre déterminé ou non de fois un bloc d’instructions.

  • la boucle for

Avec la boucle ‘for’ on sait par définition à l’avance combien le code va être excuté de fois. On s’en servira souvent pour afficher un compteur, ou pour lire les cases d’un tableau.
<script type= »text/javascript »>
var i=0
for (i=0; i<=5; i++)
{
document.write(« no :  » + i)
document.write(« <br /> »)
}
</script>

note : l’indice de la boucle n’évolue pas forcément de 1 en 1, il pourrait augmenter de 3 en 3 (i = i+3 au lieu de i++ dans ce cas…) voire diminuer.

  • la boucle while

A la différence de la précédente on ne sait pas exactement quand la répétition va s’arrêter…mais il faudra quand même qu’elle sarrête si on ne veut pas faire une boucle infinie …et attendre longtemps le résultat !

La fin sera déterminée par une condition logique. Dès que la condition de répétition ne sera plus vraie, la boucle s’arrêtera.

La syntaxe est la suivante :

while (condition)
{
instructions
}

exemples :

while (civilite != ‘Mr’ && civilite != ‘Mme’)
{
saisir_civilite()
}
// on pourrait aussi s’en servir comme d’une boucle for…
// dans ce cas ne pas oublier l’increment DANS la boucle
while (i<=5
{
document.write(« no :  » + i)
document.write(« <br /> »)
i=i+1
}

Les tableaux

Les tableaux nous l’avons vu sont des variables structurées, avec un indice numérique, qui associé à l’opérateur ‘[]’ permet d’y lire ou d’y ranger des éléments.
Le traitement des tableaux nécessite généralement des boucles (comme la nature est bien faite !).

Voici un exemple simple de création et de lecture de tableau :

<script type= »text/javascript »>
var i
var passe_temps= new Array()
passe_temps[0] = « Tennis »
passe_temps[1] = « Planche à voile »
passe_temps[2] = « Snowboard »
for (i in passe_temps)
{
document.write(passe_temps[i] + « <br /> »)
}
</script>

note : on utilise ici une variante de la boucle for : ‘for…in’ qui va ‘automatiquement’ s’incrémenter le la première à la dernière case du tableau.