Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Structures de contrôle en Javascript

Compatible JavaScript. Cliquer pour en savoir plus sur les compatibilités.Par qwix, le 11 juin 2005

Qu'est ce que c'est ?

Une structure de contrôle est un suite d'intructions que l'on donne à l'ordinateur pour contrôler des données. Il y a quatre structures de contrôle qui permettent de faire tout ce que l'on veut en programmation :

  • L' instruction SI SINON
  • Les boucles FOR et WHILE
  • Les contrôles au cas par cas grâce à CASE

L' instruction SI SINON

Celle-ci permet de vérifier si une condition est vraie et, le cas échéant d'effectuer une ou plusieurs instructions. Sa structure est la suivante:

SI (condition est vraie)
instructions
.....
SINON
instructions
....

Un petit exemple:

On veut tester si un nombre est supérieur ou égal à zéro:

En pseudocode

procédure verifie(nombre)
var nombre

SI (nombre >= à 0)
affiche "Ce nombre est supérieur ou égal à zéro"
SINON
affiche "Ce nombre est inférieur à zéro"

/**** programme principal ****/
demande un nombre à l'utilisateur
appel de la procédure verifie avec le nombre saisi par l'utilisateur

En JavaScript

<script language="JavaScript" type="text/javascript">
function verifie (nombre)
{
parseFloat (nombre) ;
 
if (nombre >= 0)
{
document.write(nombre + " est supérieur ou égal à zéro") ;
}
else
{
document.write(nombre + " est inférieur à zéro") ;
}
}
 
var demandeNombre = prompt("Veuillez entrer un nombre SVP", "") ;
verifie(demandeNombre) ;
</script>

Dans ce cas on teste si la condition nombre >= 0 est vraie c'est à dire si le nombre est bel et bien supérieur ou égal à zéro.
Si cette condition est vraie, on affiche que le nombre est supérieur ou égal à zéro. Si cette condition n'est pas remplie, on exécute la seconde partie du code, c'est à dire que le nombre est inférieur à zéro.

L'opérateur "?"

Il est possible de faire ceci:

(condition) ? instruction si vrai : instruction si faux

Ce qui est strictement équivalent à l'instruction SI ci-dessus.
Avantage: une structure moins lourde et moins de caractères à taper ;) .
Incovénient: plus difficile à lire :( .

Les boucles FOR

Celles-ci permettent d'éxécuter de instructions en boucle pendant un nombre de fois déterminé à l'avance. Sa structure est la suivante:

POUR (initialisation d'un indice, définition d'une limite, définition de l'incrémentation)
instructions .....

Un petit exemple:

Rappelez vous dans le premier tutorial, nous voulions afficher tout les jours du tableau jourSemaine. Il était déclaré comme ceci:

var jourSemaine = new Array(7) ;
jourSemaine[0] = "Lundi" ;
jourSemaine[1] = "Mardi" ;
jourSemaine[2] = "Mercredi" ;
jourSemaine[3] = "Jeudi" ;
jourSemaine[4] = "Vendredi" ;
jourSemaine[5] = "Samedi" ;
jourSemaine[6] = "Dimanche" ;

Pour l'afficher nous pouvions faire:

document.write (jourSemaine) ;

Mais maintenant nous allons faire comme ceci:

for (i=0; i<tabSemaine.length; i++)
{
document.write(jourSemaine[i] + "<BR>") ;
}

Ce qui donne au final:

<script language="JavaScript" type="text/javascript">
 
var jourSemaine = new Array(7) ;
jourSemaine[0] = "Lundi" ;
jourSemaine[1] = "Mardi" ;
jourSemaine[2] = "Mercredi" ;
jourSemaine[3] = "Jeudi" ;
jourSemaine[4] = "Vendredi" ;
jourSemaine[5] = "Samedi" ;
jourSemaine[6] = "Dimanche" ;
 
for (i=0; i<jourSemaine.length; i++)
{
document.write(jourSemaine[i] + "<BR>") ;
}

Ici la boucle for va parcourir le tableau jourSemaine et afficher la valeur de chacune de ses cases grâce à document.write où i prend successivement les valeurs 0, 1, 2, 3, 4, 5, 6.

Pour être un peu plus clair, faisons une boucle qui compte de 0 jusqu'à 10:

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

On commence à 0:i = 0;, on s'arrête à 10: i<11, et on incrémente i à chaque fois: i++ ie on ajoute 1 à i à chaque passage. On affiche la valeur courante de i .

Voici quelques petits tips

for(i=0;i<10;i++) i va de 0 à 9.
for(i=0;i<=10;i++) i va de 0 à 10.
for(i=1;i<10;i++) i va de 1 à 9.
for(i=1;i<=10;i++) i va de 1 à 10.

Les instructions break et continue

L'instruction BREAK

Elle permet d'arrêter une boucle avant sa fin, parce que l'instruction traite un valeur impossible comme une division par zéro, une racine carrée d'un nombre négatif… C'est ce que l'on apelle un arrêt inconditionnel.

Elle s'utilise comme ceci:

FOR ( condition )
{
IF (traitement impossible ou erreur)
{
instructions
BREAK
}

instructions
}

L'instruction CONTINUE

Elle permet de ne pas prendre en compte une ou plusieurs valeurs qui seraient fauusses ou impossible à traiter, sans pour autant arrêter la boucle.C'est ce que l'on apelle un saut inconditionnel.

Elle s'utilise comme ceci:

FOR ( condition )
{
IF (traitement impossible ou erreur)
{
instructions
CONTINUE
}

instructions
}

BREAK et CONTINUE s'exécutent aussi avec un instruction WHILE

Les boucles WHILE

Elles permettent d'exécuter une ou plusieurs instructions tant que la condition à vérifier est vraie.

Un petit exemple :

Reprenons notre tableau ci-dessus, et affichons le :

En pseudocode:

var i = 0

TANT QUE ( i < la longueur du tableau jourSemaine )
affiche la valeur du tableau jourSemaine à l'indice i
incrémente i

En JavaScript maintenant:

<script language="JavaScript" type="text/javascript">
var jourSemaine = new Array(7) ;
jourSemaine[0] = "Lundi" ;
jourSemaine[1] = "Mardi" ;
jourSemaine[2] = "Mercredi" ;
jourSemaine[3] = "Jeudi" ;
jourSemaine[4] = "Vendredi" ;
jourSemaine[5] = "Samedi" ;
jourSemaine[6] = "Dimanche" ;
 
i = 0 ;
 
while ( i < jourSemaine.length )
{
document.write(jourSemaine[i] + "<BR>") ;
i++
}
</script>

Ici, on vérifie que i est bien strictement inférieur à la longueur du tableau. Si c'est vrai on affiche la valeur du tableau jourSemaine à l'indice i et on icrémente i. Si c'est faux la boucle s'arrête.

Les contrôles au cas par cas grâce à l'instruction CASE

Ceci permet de contrôler l'état de différents cas et d'exécuter un instruction spécifique en fonction de cet état.

Un petit exemple:

Créons un script qui puisse vous dire quelle couleur vous avez saisi dans une boite de dialogue.

En pseudocode:

procédure verifie(couleur)

REGARDE ( couleur )
CAS ( "rouge" ) : affiche "Vous avez tapé rouge"
CAS ( "jaune" ) : affiche "Vous avez tapé jaune"
CAS PAR DEFAUT : affiche "Vous n'avez rien tapé"


/**** programme principal ****/
demande une couleur à l'utilisateur
appel de la procédure verifie avec la couleur saisie par l'utilisateur

En JavaScript:

<script language="JavaScript" type="text/javascript">
function verifie ( couleur )
{
switch ( couleur )
{
case ( "rouge" ) : document.write( "Vous avez tapé rouge" ) ; break ;
case ( "jaune" ) : document.write( "Vous avez tapé jaune" ) ; break ;
default : document.write( "Vous n'avez rien tapé" ) ; break ;
}
 
}
 
var demandeCouleur = prompt("Veuillez saisir soit rouge, soit jaune, soit rien", "") ;
verifie(demandeCouleur) ;
</script>

Ici ce script “regarde” la couleur que vous avez saisi dans la boite de dialogue et affiche un résultat en fonction de cette couleur. C'est à dire qu'il va comparer la couleur saisie avec les différents CAS possible, et effectuer une instruction spécifique pour chaque cas.

ATTENTION : vérifiez bien que vous avez toujours tapé une instruction break à la fin de chaque cas.

Les opérateurs d'assignations

Les opérateurs d'assignations permettent d'affecter l'opérande de droite à l'opérande de gauche.

Exemple: x = 2 :arrow: 2 affecte sa valeur à x.

x += y équivaut à x = x + y résultat avec x = 2 et y = 3 :arrow: 5
x -= y équivaut à x = x - y résultat avec x = 2 et y = 3 :arrow: -1
x *= y équivaut à x = x * y résultat avec x = 2 et y = 3 :arrow: 6
x /= y équivaut à x = x / y résultat avec x = 2 et y = 3 :arrow: 0.6666
x %= y équivaut à x = x % y résultat avec x = 2 et y = 3 :arrow: 2

Les booléen permettent de vérifier si plusieurs conditions sont vraies

condition1 && condition2 : les deux conditions sont vraies
condition1 || condition2 : une des deux conditions est vraie
! condition1 : NON logique :arrow: met la condition1 à FAUX si elle était initialisé à VRAI, et inversement.

Incrémentation

x = 2
x++ :arrow: 3

Décrémentation :

x =2
+– :arrow: 1




Tutorial de qwix