SELFHTML/Aides à la navigation JavaScript/DOM Éléments du langage JavaScript |
Instructions conditionnelles (if-else/switch) | |
Conditions si, alors... avec "if" |
|
Vous pouvez faire dépendre l'exécution d'instructions de conditions.
Exemple d'affichage: aperçu (mot de passe = danseuretoile)
<html><head><title>Test</title> <script type="text/javascript"> <!-- function secret() { var motpasse = "danseuretoile"; var saisie = window.prompt("Veuillez donner le mot de passe:",""); if(saisie != motpasse) { alert("Mot de passe erroné!"); secret(); } else document.location.href="secret.htm"; } // --> </script> </head><body onload="secret()"> <h1>Vous n'accédez ici qu'avec un mot de passe ;-)</h1> </body></html> |
L'exemple représente une demande de mot de passe simple. Le script est noté dans une fonction nommée secret()
, qui est appelée dès que le fichier HTML est complètement chargé. À cet effet, est noté dans le repère d'ouverture <body>
le gestionnaire d'événement onLoad
. Dans la fonction, une fenêtre de dialogue (window.prompt()
) réclame de l'utilisateur qu'il entre un mot de passe. La valeur renvoyée par window.prompt()
, le mot de passe saisi, est sauvegardé dans la variable saisie
.
Avec if(saisie != motpasse)
le script demande si la saisie est différente de la valeur affectée danseuretoile
auparavant à la variable motpasse
. Si c'est le cas, à savoir si les deux valeurs sont différentes, alors la saisie est erronée. Dans ce cas, une annonce correspondante est sortie avec alert()
. Ensuite la fonction secret()
est appelée à nouveau et l'utilisateur peut essayer encore d'entrer le mot de passe. Dans le cas contraire (else
), quand saisie
et motpasse
ont la même valeur, une autre page est appelée avec document.location.href
, en l'occurrence, la page "protégée".
Avec if
Vous introduisez une condition si, alors... (if = si). Derrière, entre parenthèses, vous formulez la condition. Pour formuler de telles conditions, vous avez besoin d' opérateurs de comparaison et également, dans la plupart des cas, de variables. Pour les cas où la condition n'est pas remplie, vous pouvez définir une alternative "sinon". Cela se fait avec else
(else = sinon).
Une ramification Else n'est pas absolument indispensable. Si vous voulez noter plus d'une instruction sous et dépendant de if
ou de else
, vous devez les mettre entre des parenthèses accolade (voir aussi la partie sur les blocs d'instructions).
Pour les simples demandes soit, soit, il y a une syntaxe spéciale que vous pouvez employer en remplacement de l'instruction if/else.
<html><head><title>Test</title> <script type="text/javascript"> <!-- function reponse() { var resultat = (document.formulaire.saisie.value == "42") ? "CORRECTE!" : "FAUSSE!"; document.formulaire.saisie.value = "La réponse est " + resultat; } // --> </script> </head><body> <h1>Le sens de la vie</h1> <form name="formulaire"> <p>Quel est le sens de la vie?</p> <input type="text" name="saisie" size="40"> <input type="button" value="OK" onClick="reponse()"> </form> </body></html> |
L'exemple contient une fonction JavaScript nommée reponse()
. Cette fonction est appelée quand l'utilisateur clique sur le bouton marqué OK
dans le formulaire HTML noté plus bas, et cela avec le gestionnaire d'événement onClick
. La fonction vérifie si la valeur du champ de saisie du formulaire (document.formulaire.saisie.value
) a la valeur 42
. Selon la réponse, c'est soit la valeur CORRECTE!
ou bien la valeur FAUSSE!
qui est affectée à la variable resultat
. Ensuite une phrase correspondante est composée dans le champ de texte du formulaire qui a servi à la saisie (voir aussi à ce sujet Opérateur pour relier des chaînes de caractères).
Une simple demande soit..., soit... est introduite par une condition. La condition doit être entre parenthèses, dans l'exemple (document.formulaire.saisie.value == "42")
. Derrière est noté un point d'interrogation. Derrière celui-ci est mentionnée une valeur qui est celle qui est valable quand la condition est remplie. Suivent deux points et une valeur pour le cas où la condition ne serait pas remplie. Étant donné qu'il s'agit de valeurs qui n'ont de sens pour la suite que si elles sont sauvegardées dans une variable, il est placé, en règle générale, au début d'une telle demande soit..., soit... une variable, dans l'exemple la variable resultat
. La variable se voit affecter par ce genre d'instruction le résultat de la demande soit..., soit...
Pour formuler des conditions vous avez besoin d' opérateurs de comparaison..
Avec if
et else
vous pouvez différencier exactement deux cas. Si vous voulez opérer une différenciation plus fine, donc différencier entre plusieurs cas, vous pouvez certes noter plusieurs demandes if l'une derrière l'autre, mais il existe une possibilité plus élégante: la différenciation de cas avec "switch". Cette syntaxe, issue du langage de programmation C, existe en JavaScript seulement depuis la version 1.2 du langage - Les navigateurs plus anciens rencontrent de telles instructions en sortant un message d'erreur.
<html><head><title>Test</title> </head><body> <script type="text/javascript"> <!-- var saisie = window.prompt("Entrez un nombre entre 1 et 4:",""); switch(saisie) { case "1": alert("Vous êtes très modeste"); break; case "2": alert("Vous êtes un bipède sincère"); break; case "3": alert("Vous avez gagné un tricycle"); break; case "4": alert("Marchez à quatre pattes et vous serez plus modeste"); break; default: alert("Vous restez malheureusement sot"); break; } // --> </script> </body></html> |
Avec switch
vous introduisez une différenciation de cas (switch = interrupteur). Suit entre parenthèses une variable ou une expression pour la valeur actuelle de laquelle vous différenciez les cas. Dans l'exemple, c'est la variable nommée saisie
. Cette variable se voit affecter une valeur avant la différenciation de cas, car une boite de dialogue (window.prompt()
) avec un champ de saisie demande à l'utilisateur d'entrer un chiffre entre 1 et 4. La valeur entrée est sauvegardée dans saisie
.
Les différents cas que vous désirez distinguer sont notés dans des parenthèses accolade. Chaque cas distinct est introduit par case
(case = cas). Suit la mention de la valeur que vous voulez vérifier. L'instruction case "1":
dans l'exemple ci-dessus signifie à peu près: 'Si la variable entree
a la valeur "1" '. Dans l'exemple une annonce individuelle est donnée pour chaque cas.
Le mot break
à la fin est lui aussi important (break = interrompre). Si vous oubliez le mot, tous les cas suivants seront aussi exécutés mais ce n'est pas en général ce que vous voulez obtenir.
Pour le cas où aucun des cas définis n'est exact, vous pouvez à la fin de la différenciation de cas, définir le cas default:
: Les instructions notées après seront alors exécutées si aucun des autres cas n'est exact.
Boucles (while/for/do-while) | |
Opérateurs | |
SELFHTML/Aides à la navigation JavaScript/DOM Éléments du langage JavaScript |
© 2001 Stefan Münz / © 2002 Traduction Serge François, 13405@free.fr
selfhtml@fr.selfhtml.org