« JavaScript/Structures de contrôle » : différence entre les versions
"ralier" des conditions ? |
|||
Ligne 21 : | Ligne 21 : | ||
</source> |
</source> |
||
Dans la condition, on se sert généralement des opérateurs de comparaison. |
Dans la condition, on se sert généralement des opérateurs de comparaison mais toute fonction renvoyant un booléen est autorisée. |
||
<source lang="javascript"> |
<source lang="javascript"> |
||
Ligne 33 : | Ligne 33 : | ||
</source> |
</source> |
||
Notez que ceci est également possible (lorsque le bloc |
Notez que ceci est également possible (lorsque le bloc à exécuter ne nécessite qu'une seule ligne) : |
||
<source lang="javascript"> |
<source lang="javascript"> |
||
Ligne 46 : | Ligne 46 : | ||
<source lang="javascript"> |
<source lang="javascript"> |
||
var temps = "orageux"; |
var temps = "orageux"; |
||
var |
var je_prends; |
||
if (temps == "soleil") |
if (temps == "soleil") je_prends = "mon parasol."; |
||
else if (temps == "nuageux") |
else if (temps == "nuageux") je_prends = "mon chapeau."; |
||
else if (temps == "pluvieux") |
else if (temps == "pluvieux") je_prends = "mon parapluie."; |
||
else |
else je_prends = "mon paratonnerre."; |
||
document.write("Lorsque le temps est "+temps+", je |
document.write("Lorsque le temps est "+temps+", je prends "+je_prends); |
||
// Lorsque le temps est orageux, je |
// Lorsque le temps est orageux, je prends mon paratonnerre. |
||
</source> |
</source> |
||
Cet exemple montre comment gérer simplement les conditions multiples en JavaScript. |
|||
====Ralier plusieurs conditions==== |
====Ralier plusieurs conditions==== |
||
Il est possible de ralier plusieurs conditions en une seule. Évidemment, la précision sera moindre mais cela se révèle vite incontournable et très pratique. Pour cela il existe deux opérateurs très |
Il est possible de ralier plusieurs conditions en une seule. Évidemment, la précision sera moindre mais cela se révèle vite incontournable et très pratique. Pour cela il existe deux opérateurs très simples d'utilisation. |
||
* && : il |
* && : il veut dire ET. |
||
* || : il veut dire OU. |
* || : il veut dire OU. |
||
Ligne 70 : | Ligne 70 : | ||
var temps = "neigeux"; |
var temps = "neigeux"; |
||
var temperature = -5; |
var temperature = -5; |
||
var |
var je_prends; |
||
if (temps == "neigeux" || temperature <= 0) |
if (temps == "neigeux" || temperature <= 0) je_prends = "ma luge ou mon gros blouson."; |
||
else if (temps == "neigeux" && temperature <= 0) |
else if (temps == "neigeux" && temperature <= 0) je_prends = "ma luge et mon gros blouson."; |
||
else |
else je_prends = "mes lunettes de soleil."; // Avec un peu de chance il fait beau :) |
||
document.write("Lorsque le temps est "+temps+" et que la température est de "+temperature+"°C, je |
document.write("Lorsque le temps est "+temps+" et que la température est de "+temperature+"°C, je prends "+je_prends); |
||
// Lorsque le temps est orageux et que la température est de -5°C, je |
// Lorsque le temps est orageux et que la température est de -5°C, je prends ma luge ou mon gros blouson. |
||
</source> |
</source> |
||
On |
On peut aussi séparer les ET et les OU avec des parenthèses. |
||
===L'alternative |
===L'alternative switch=== |
||
Il existe une alternative intéressante aux if et else. En effet, lorsque vous avez un nombre important de cas à vérifier, il peut être intéressant de ne pas avoir à recopier une cascade de else if |
Il existe une alternative intéressante aux if et else. En effet, lorsque vous avez un nombre important de cas à vérifier, il peut être intéressant de ne pas avoir à recopier une cascade de else if. |
||
Pour cela, il y a switch : |
Pour cela, il y a le mot-clé switch : |
||
<source lang="text"> |
<source lang="text"> |
||
Ligne 97 : | Ligne 97 : | ||
</source> |
</source> |
||
Switch permet de gérer plusieurs cas |
Switch permet de gérer plusieurs cas en fonction de la valeur d'une variable. Son utilisation, bien que pratique, est réputée être (un peu) plus lente que le if et surtout assez restreinte. |
||
Exemple : |
Exemple : |
||
Ligne 103 : | Ligne 103 : | ||
<source lang="javascript"> |
<source lang="javascript"> |
||
var temps = "soleil"; |
var temps = "soleil"; |
||
var |
var je_prends; |
||
switch (temps) |
switch (temps) |
||
{ |
{ |
||
case "soleil": |
case "soleil": je_prends = "mon parasol."; break; |
||
case "nuageux": |
case "nuageux": je_prends = "mon chapeau."; break; |
||
case "pluvieux": |
case "pluvieux": je_prends = "mon parapluie."; break; |
||
default: |
default: je_prends = "mon paratonnerre."; break; |
||
} |
} |
||
document.write("Lorsque le temps est "+temps+", je |
document.write("Lorsque le temps est "+temps+", je prends "+je_prends); |
||
// Lorsque le temps est soleil, je |
// Lorsque le temps est soleil, je prends mon parasol. |
||
</source> |
</source> |
||
Vous admettrez que |
Vous admettrez que la seconde méthode est préférable :-) |
||
===Structures ternaires=== |
===Structures ternaires=== |
||
Derrière ce nom "barbare" se cache un procédé raisonnablement complexe mais surtout très pratique et permettant de gagner du temps, de la place |
Derrière ce nom "barbare" se cache un procédé raisonnablement complexe mais surtout très pratique et permettant de gagner du temps, de la place et de la lisibilité. |
||
Les ternaires sont en fait un concentré d'un groupe if et else (sans ''else if'' au milieu). Cela permet d'écrire une condition en une seule ligne. C'est une alternative aux structures conditionnelles vues précédemment. Voici la syntaxe : |
Les ternaires sont en fait un concentré d'un groupe if et else (sans ''else if'' au milieu). Cela permet d'écrire une condition en une seule ligne. C'est une alternative aux structures conditionnelles vues précédemment. Voici la syntaxe : |
||
Ligne 153 : | Ligne 153 : | ||
Qu'est-ce qu'une boucle ? |
Qu'est-ce qu'une boucle ? |
||
Une boucle, c'est un bloc d'instructions qui sera répétée tant qu'une condition sera vérifiée (= true). Une boucle peut être finie (elle finira à un moment) ou au contraire infinie (généralement il s'agit d'une erreur de code et cela |
Une boucle, c'est un bloc d'instructions qui sera répétée tant qu'une condition sera vérifiée (= true). Une boucle peut être finie (elle finira à un moment) ou au contraire infinie (généralement il s'agit d'une erreur de code et cela finit par faire "planter" le navigateur). |
||
===while=== |
===while=== |
||
Ligne 192 : | Ligne 192 : | ||
===do... while=== |
===do... while=== |
||
La boucle do while est la sœur de la boucle while puisqu'il s'agit de la même boucle SAUF que le bloc d'instruction s'effectuera |
La boucle do while est la sœur de la boucle while puisqu'il s'agit de la même boucle SAUF que le bloc d'instruction s'effectuera au minimum une fois et ce même si la condition de la boucle n'est pas vérifiée dès le début. |
||
Voici un exemple simple : |
Voici un exemple simple : |
||
Ligne 207 : | Ligne 207 : | ||
</source> |
</source> |
||
Ici, la condition vaut false dès le début. Un while normal aurait donc sauté la condition pour passer à la suite du code. Mais le do while |
Ici, la condition vaut false dès le début. Un while normal aurait donc sauté la condition pour passer à la suite du code. Mais le do while exécute une fois le code et affiche : |
||
''Ligne 5'' |
''Ligne 5'' |
||
Ligne 235 : | Ligne 235 : | ||
</source> |
</source> |
||
Le résultat est le même que celui de la boucle while. Ceci |
Le résultat est le même que celui de la boucle while. Ceci dit, l'utilisation d'une des trois boucles dépend du contexte et des besoins du script. |
||
===break=== |
===break=== |
||
Il arrive parfois que l'on veuille sortir d'une boucle alors même que la condition de la boucle est encore vraie. Pour cela, on peut faire appel à l'instruction break. Lorsque cette instruction |
Il arrive parfois que l'on veuille sortir d'une boucle alors même que la condition de la boucle est encore vraie. Pour cela, on peut faire appel à l'instruction break. Lorsque cette instruction est exécutée, la boucle se terminer immédiatement et le code la suivant est exécuté. |
||
<source lang="javascript"> |
<source lang="javascript"> |
||
Ligne 250 : | Ligne 250 : | ||
</source> |
</source> |
||
Ce qui |
Ce qui affiche : ''La valeur de i est 5''. En effet, le programme sort de la boucle lorsque i prend la valeur de 5, donc après 4 tours. |
||
===continue=== |
===continue=== |
Version du 22 avril 2009 à 10:12
Structures conditionnelles
if, else
Les instructions if et else mettent en place une condition dans le code. Elles permettent de différencier plusieurs cas lors de l'exécution.
if (condition){
...
}else{
...
}
Dans la condition, on se sert généralement des opérateurs de comparaison mais toute fonction renvoyant un booléen est autorisée.
var age = 15;
if (age >= 18){
document.write("Vous pouvez entrer.");
}else{
document.write("Vous ne pouvez pas entrer.");
}
Notez que ceci est également possible (lorsque le bloc à exécuter ne nécessite qu'une seule ligne) :
var age = 15;
if (age >= 18) document.write("Vous pouvez entrer.");
else document.write("Vous ne pouvez pas entrer.");
On peut aussi rajouter des conditions intermédiaires entre le if et le else qui permettront de tester plus de cas. Voyez plutôt :
var temps = "orageux";
var je_prends;
if (temps == "soleil") je_prends = "mon parasol.";
else if (temps == "nuageux") je_prends = "mon chapeau.";
else if (temps == "pluvieux") je_prends = "mon parapluie.";
else je_prends = "mon paratonnerre.";
document.write("Lorsque le temps est "+temps+", je prends "+je_prends);
// Lorsque le temps est orageux, je prends mon paratonnerre.
Cet exemple montre comment gérer simplement les conditions multiples en JavaScript.
Ralier plusieurs conditions
Il est possible de ralier plusieurs conditions en une seule. Évidemment, la précision sera moindre mais cela se révèle vite incontournable et très pratique. Pour cela il existe deux opérateurs très simples d'utilisation.
- && : il veut dire ET.
- || : il veut dire OU.
Voyons comment cela fonctionne :
var temps = "neigeux";
var temperature = -5;
var je_prends;
if (temps == "neigeux" || temperature <= 0) je_prends = "ma luge ou mon gros blouson.";
else if (temps == "neigeux" && temperature <= 0) je_prends = "ma luge et mon gros blouson.";
else je_prends = "mes lunettes de soleil."; // Avec un peu de chance il fait beau :)
document.write("Lorsque le temps est "+temps+" et que la température est de "+temperature+"°C, je prends "+je_prends);
// Lorsque le temps est orageux et que la température est de -5°C, je prends ma luge ou mon gros blouson.
On peut aussi séparer les ET et les OU avec des parenthèses.
L'alternative switch
Il existe une alternative intéressante aux if et else. En effet, lorsque vous avez un nombre important de cas à vérifier, il peut être intéressant de ne pas avoir à recopier une cascade de else if.
Pour cela, il y a le mot-clé switch :
switch (variable)
{
case a: ... break;
case b: ... break;
case c: ... break;
default: ... break;
}
Switch permet de gérer plusieurs cas en fonction de la valeur d'une variable. Son utilisation, bien que pratique, est réputée être (un peu) plus lente que le if et surtout assez restreinte.
Exemple :
var temps = "soleil";
var je_prends;
switch (temps)
{
case "soleil": je_prends = "mon parasol."; break;
case "nuageux": je_prends = "mon chapeau."; break;
case "pluvieux": je_prends = "mon parapluie."; break;
default: je_prends = "mon paratonnerre."; break;
}
document.write("Lorsque le temps est "+temps+", je prends "+je_prends);
// Lorsque le temps est soleil, je prends mon parasol.
Vous admettrez que la seconde méthode est préférable :-)
Structures ternaires
Derrière ce nom "barbare" se cache un procédé raisonnablement complexe mais surtout très pratique et permettant de gagner du temps, de la place et de la lisibilité.
Les ternaires sont en fait un concentré d'un groupe if et else (sans else if au milieu). Cela permet d'écrire une condition en une seule ligne. C'est une alternative aux structures conditionnelles vues précédemment. Voici la syntaxe :
(condition) ? ...bloc du if : ...bloc du else
Le "?" remplace donc l'accolade du if tandis que les " : " remplacent celle du else. Un code avec if et else :
var age = 15;
if (age >= 18) document.write("Vous pouvez entrer.");
else document.write("Vous ne pouvez pas entrer.");
Un code avec structure ternaire renvoyant le même résultat :
var age = 15;
document.write((age >= 18) ? "Vous pouvez entrer." : "Vous ne pouvez pas entrer.");
Pratique non ?
Ici, on a mit la condition en ternaire directement dans le document.write (allez faire ça avec un if...)
Structures répétitives : les boucles
Qu'est-ce qu'une boucle ?
Une boucle, c'est un bloc d'instructions qui sera répétée tant qu'une condition sera vérifiée (= true). Une boucle peut être finie (elle finira à un moment) ou au contraire infinie (généralement il s'agit d'une erreur de code et cela finit par faire "planter" le navigateur).
while
While est la boucle la plus simple d'utilisation puisqu'elle ne comporte qu'un seul "argument" : la condition ! Voici la syntaxe de while :
while (condition)
{
... (instructions, incrémentation...)
}
Voici un exemple simple :
var i = 0;
while (i < 5){
document.write("Ligne "+i+"<br />");
i++;
}
document.write("Boucle terminée !");
Cela va vous afficher ceci :
Ligne 0
Ligne 1
Ligne 2
Ligne 3
Ligne 4
Boucle terminée !
do... while
La boucle do while est la sœur de la boucle while puisqu'il s'agit de la même boucle SAUF que le bloc d'instruction s'effectuera au minimum une fois et ce même si la condition de la boucle n'est pas vérifiée dès le début.
Voici un exemple simple :
var i = 5;
do
{
document.write("Ligne "+i+"<br />");
i++;
} while (i < 5);
document.write("Boucle terminée !");
Ici, la condition vaut false dès le début. Un while normal aurait donc sauté la condition pour passer à la suite du code. Mais le do while exécute une fois le code et affiche :
Ligne 5
Boucle terminée !
for
Cette structure répétitive ne porte pas bien son nom contrairement aux précédentes. Pour faire court; for est un alias de while à la différence qu'elle regroupe en son sein l'initialisation de(s) variable(s) utilisée(s), la condition ainsi que l'incrémentation (décrémentation) de celle(s)-ci.
Syntaxe :
for (initialisation; condition; incrémentation)
{
...
}
Exemple :
for (i = 0; i<5; i++)
{
document.write("Ligne "+i+"<br />");
}
document.write("Boucle terminée !");
Le résultat est le même que celui de la boucle while. Ceci dit, l'utilisation d'une des trois boucles dépend du contexte et des besoins du script.
break
Il arrive parfois que l'on veuille sortir d'une boucle alors même que la condition de la boucle est encore vraie. Pour cela, on peut faire appel à l'instruction break. Lorsque cette instruction est exécutée, la boucle se terminer immédiatement et le code la suivant est exécuté.
var i = 1;
while (i <= 10)
{
if (i == 5) break;
i++;
}
document.write("La valeur de i est "+i);
Ce qui affiche : La valeur de i est 5. En effet, le programme sort de la boucle lorsque i prend la valeur de 5, donc après 4 tours.
continue
Le rôle de l'instruction continue est de sauter le tour actuel et d'en recommencer un nouveau. Cette instruction s'utilise exactement de la même façon que break.