Notre magasin

Rue Albert 1er, 7

6810 Pin - Chiny

(/fax: 061/32.00.15

16. Mise en ligne d'un site

Formations informatiques en ligne sur YBET.be
Office Internet Techniques
Access Formation Internet PC et périphériques
Cours Excel PHP - MySQL Equipements réseaux
Powerpoint Créer son propre site Dos et Windows
ACCUEIL Forum webmasters Nous contacter

3. Fonctions conditionnelles et boucles en javascript

1. if else - 2. while - 3. for - 4. do ... while - 5. break et continue - 6. switch - 7. Fonctions spéciales

Après avoir débuter nos fonctions (le début de cette partie), nous allons étudier le fonctionnement des fonctions conditionnelles et des boucles. On va tout doucement donner un peu "d'intelligence" à nos script. De nouveau, ceux qui connaissent le PHP (ou on suivi la formation en ligne) ne vont pas trop être dépaysés puisqu'on va retrouver les fonctions If ... else, While, For, switch ... (mais c'est finalement les mêmes dans quasiment tous les langages de programmation). Attention, au contraire de beaucoup de langages, javascript est pointilleux sur les majuscules - minuscules: toutes ces fonctions doivent être notées en minuscule: While est faux, while est juste

1. Fonction conditionnelle if ... else ...

If (SI) permet d'exécuter une suite de commandes si une condition est vrai, la partie suivante (optionnelle) ELSE dans le cas contraire. La syntaxe est la suivante:

if(condition)
{
// a exécuter si la condition est remplie

}else // pas obligatoire
{
// a exécuter si elle n'est pas remplie)
}

ou sa version abrégée (uniquement si vous n'avez qu'une seule instruction dans le cas vrai) que je déconseille pour des questions de lisibilités des codes mais aussi parce que mélangé les deux va vite provoquer des "oublis". 

if (condition) une_commande;

Commençons par ces conditions en javascript. On retrouve strictement les mêmes qu'en PHP:

En comme en ... vous pouvez mettre plusieurs conditions séparées par OU (au moins une) ou ET (toutes doivent être remplies). En programmation script, çà s'écrit:

if (condition1 || condition2) pour le OU

if (condition1 && condition2) pour le ET 

On fait un petit essais ...

< script>
var nombre=prompt ('Un nombre supérieur ou égal à 5',0);
if (nombre >=5)
{
alert ('merci pour votre nombre supérieur ou égal à 5');
}
else
{
alert('Le monsieur te demande un nombre supérieur à 5 et tu entre '+nombre);
}
< /script>

On demande un nombre supérieur ou égal à 5 avec la commande prompts (0 comme valeur par défaut). Si le nombre entré rempli la condition, une fenêtre de merci. Par contre, si le nombre est inférieur à 5, ... on l'engueule copieusement (pas trop quand même) et on lui affiche le nombre qu'il a tapé (une concaténation avec +nombre). Si on veux juste le remercier pour son nombre correct, on peut entrer comme codes (sans les {} cette fois):

< script>
var nombre=prompt ('Un nombre supérieur ou égal à 5',0);
if (nombre >=5) alert ('merci pour votre nombre supérieur ou égal à 5');

< /script>

2. while

C'est la boucle la plus connue. Sa syntaxe est 

while (condition)
{
// instructions à exécuter
}

En français, tant que la condition est vraie, exécutez les instructions. Comme en PHP et dans tous les langages de programmation, la liste des instructions doit contenir une commande qui va permettre de sortir de la boucle. Le plus souvent, c'est une variable compteur qu'on incrémente comme ci-dessous (sans les balises script de début et de fin, vous avez l'habitude maintenant). On initialise la valeur à zéro, le tests va afficher une fenêtre avec le nombre et l'incrémenter. Une fois le nombre arrivé à 3, le programme quitte la boucle.

var i=0;
while (i <3)
{
alert('le nombre '+i);
i++;
}

.Petit exemple, reprenons notre bêtisier en calcul qui ne sait pas compter plus haut que ... 4. Nous allons afficher chaque fois une fenêtre demandant un nombre tant que le nombre entré n'est pas supérieur à 5.

var nombre=prompt ('Un nombre supérieur ou égal à 5',0);
while (nombre <5)
{
alert('Le monsieur te demande un nombre supérieur à 5 et tu entre '+nombre);
nombre=prompt ('Un nombre supérieur ou égal à 5, merci!',0);
}
alert('Merci pour votre nombre correct '+nombre);

Le résultat est presque identique à la partie précédente sauf que la question va lui être posée tant qu'il ne rentrera pas un nombre correct. Une fois qu'il a trouvé une solution, un petit merci. En utilisant les || et les &&, je vous laisse les idées pour apprendre les nombres à votre enfant.

3. FOR (pour)

Même si je préfère personnellement le WHILE (une vieille habitude de mes cours de basic), il y a une méthode plus propre pour coder la même opération tant qu'on utilise des compteurs, la commande FOR.

For (valeur initiale;condition;incrémentation)
{
// liste d'instructions
}

Par "valeur initiale", on donne la valeur de départ (qui sera exécutée) ; (point-virgule, c'est important) la condition sur cette variable ; la valeur d'incrémentation. En pratique, on code:

var 1;
for (i=0;i<5;i+=2)
{
alert('nombre '+i);
}

ou parce qu'on peut directement déclarer la variable dans l'instruction

for (var i=0;i<5;i+=2)
{
alert('nombre '+i);
}

Nous aurons une première fenêtre qui affichera 0, puis une seconde 2 et la dernière affichera le nombre 4. De nouveau, s'il n'y a qu'une seule instruction, on peut oublier les parenthèses:

for (var i=0;i<5;i+=2) alert('nombre '+i);

4. do ... while

C'est une petite variante de while dont la syntaxe est

do
{
// instruction
}

while (condition)

La seule différence est que la condition est vérifiée après les instruction (donc au moins une fois au premier passage). Par exemple, ici nous définissons la variable nombre au départ à 10. La fenêtre va bien afficher 10, puis la suite du programme va vérifier la condition (qui n'est pas remplie) et quitter la boucle. Remarquez quand même l'incrémentation sur nombre pour éviter une boucle sans fin (on sait jamais).

var nombre=10
do
{
alert('nombre affiché '+nombre);
nombre++;
}
while (nombre <5)

5. break et continue

Dans certains cas, on a besoin de quitter la boucle ou de la continuer. C'est justement le rôle de break pour quitter et continue pour rester dans la boucle. Ces deux instructions sont utilisée dans des boucles imbriquées.

Commençons par la première break en reprenant notre débutant en calcul. Cette fois, nous allons lui compliquer la tâche en lui permettant seulement 3 essais. On initialise deux variables: i pour un nombre à entrer supérieur à 5 et j qui va afficher le nombre d'essais restants (on débute à 3). A chaque essais, on décrémente j (le compteur). Lorsque j arrive à 0 essais restant, on quitte la boucle.

var i=0;
var j=3;
while (i<=5)
{
i=prompt('un nombre supérieur à 5, reste '+j+' essais',0);
j--;
if (j<1)
{
break;
}
}

Et pour continue c'est l'inverse, on passe une étape dans la boucle. Prenons par exemple cette boucle qui divise un nombre par la valeur du compteur. La variable varie de -10 à +10 par pas de 10 mais contient ... 0 dans sa liste de valeurs. continue va simplement passer la valeur 0 et éviter l'erreur.

var i;
var nombre=100;
for(i=-10; i<20; i+=10)
{
if(i == 0)
continue;

alert("100 divisé par " + i + " égal " + nombre/i);
}

6. Switch

Cette fonction permet de sélectionner une ligne de commande en fonction d'une valeur. Elle est identique à celle en PHP, y compris l'utilisation de break après chaque valeur de liste de choix pour quitter.

var nombre = prompt ('entrez un nombre compris entre 0 et 3',0);
nombre=parseInt(nombre)
switch (nombre)
{
case 0:
alert (0);
break;
case 1:
alert (1);
break;
case 2:
alert (2);
break;
case 3:
alert(3);
break;
default:
alert ("Merci d'entrer un nombre entier compris entre 0 et 3");
break;
}

On demande d'entrer une valeur qu'on convertit ensuite en nombre entier (parseInt()). La commande switch reprend la variable nombre avec le reste entre {}. Pour chaque valeur, le mot réservé case suivit de la valeur: (deux point), la liste des commandes pour cette valeur terminée par break;. Si aucune valeur ne correspond (default), on le signale. Pour utiliser les mêmes lignes de commande pour deux valeurs distinctes:

case2:
case3:
// lignes de commande
break;

7. Fonctions spécifiques

Quelques fonctions spécifiques vont nous être utiles pour vérifier par exemple si les valeurs entrées sont correctes.

7.1. Nombre?

La première va permettre de vérifier si la valeur entrée est un nombre (souvenez vous du message d'erreur NaN), c'est la fonction isNaN qui va être utilisée avec la fonction if

var chiffre=prompt('Entrez un chiffre');

if (isNaN(chiffre)) alert('Entrez un chiffre');

En complément:

>4. Utilisation des tableaux 

< 2. Variables et fonctions standards