A. Les instructions conditionnelles
Ces instructions permettent d'orienter le déroulement du script en fonction de tests.
Par exemple, il est possible de contrôler le contenu d’une variable et d'exécuter une instruction si le test est respecté (true), ou d'exécuter une autre instruction, si le ré- sultat du test est faux (false). Ces instructions sont placées à l’intérieur de structu- res de contrôles, qui permettent de traiter tous les cas de figure en fonction de la réponse du test.
1. if
L’instruction if (si en français) permet de distinguer généralement deux cas de figure seulement. Pour les tests comprenant plus de situations, il est préférable d’utiliser l’instruction switch que nous détaillerons plus loin. Le test doit être placé entre parenthèses et comprend généralement des opérateurs de comparaison et des variables ou constantes. Le test est suivi d’une accolade, la première ligne instruction se trouvant sur la ligne suivante. Il n’y a donc pas de point-virgule à la fin de cette ligne, ce qui correspond à une exception. Il est possible de considérer que la première instruction correspond à un test positif mais il n’y a pas d’obligation. Le nombre de lignes d'instruction est illimité, chacune d’entre elles se terminant par un point-virgule. La gestion du premier cas de figure se termine par une accolade fermante sur la ligne suivante, pour une meilleure lisibilité du code.
Le mot clé else (sinon) est ajouté sur la ligne suivante sans point-virgule pour terminer. Une autre accolade est ouverte sur la ligne suivante, elle définit le début des instructions à réaliser si la valeur du test est false. Il est également possible d’ajouter autant de lignes que nécessaires pour traiter ce deuxième cas de figure.
Le script continue son déroulement normal après l’accolade fermante. La syntaxe de la structure de contrôle avec l’instruction if est donc la suivante :
if (test) {
Ligne 1 d’instruction ; Ligne 2 d’instruction ; }
else {
Ligne 1 d’instruction ; Ligne 2 d’instruction ; }
EditionsENI-Allrightsreserved
Exemple : afficher une boîte de dialogue et tester le réponse pour continuer ou non le déroulement du script.
<script language="javascript">
suite=confirm("Voulez-vous poursuivre ? ");
if (suite==true) {
alert("J'en suis heureux ");
} else {
alert("C'est dommage");
}
</script>
Le script débute par l’affichage d’une boîte de dialogue demandant à l'utilisateur s'il souhaite ou pas continuer le déroulement du script. Cette boîte de dialogue récu- père la réponse de l’utilisateur dans une variable, appelée suite, par l’intermédiaire de la méthode confirm(). La valeur renvoyée correspond soit à true, soit à false. Si l’utilisateur clique sur OK (true), le script affiche une boîte de dialogue de type alert pour le remercier. Au contraire, si l’utilisateur clique sur le bouton Annuler (false dans le test), le script affiche une autre boîte, qui permet de regretter cet abandon.
À noter les deux signes égal, côte à côte, qui permettent d’effectuer une com- paraison et non une affectation.
Il est également possible d’utiliser l’opérateur ternaire pour effectuer le test. Le script devient alors :
<script language="javascript">
suite=confirm("Voulez-vous poursuivre ? ");
(suite==true)? alert("J'en suis heureux ") : alert("C'est dommage");
</script>
Même si le résultat du script est équivalent au précédent en utilisant cet opérateur, il faut convenir que le décryptage est plus délicat.
Si vous désirez effectuer plusieurs tests sur une variable, il est possible d’imbriquer les " if ".
Exemple : afficher deux boîtes de dialogues successivement et tester leurs répon- ses pour continuer ou non le déroulement du script, en utilisant des if imbriqués.
<script language="javascript">
avis=confirm("Aimez-vous le JavaScript ? ");
suite=confirm("Voulez-vous poursuivre ? ");
if (avis==true) {
if (suite==true) {
alert("J'en suis heureux ");
} else {
alert("C'est dommage");
} } else {
alert("C'est dommage");
}
</script>
Nous reprenons le même test que précédemment, mais en ajoutant une question pour savoir si l’utilisateur aime le JavaScript et en affectant la valeur de cette ré- ponse à la variable avis. Si c’est le cas, l’utilisateur reçoit un remerciement unique- ment s'il a répondu favorablement aux deux questions. Dans le cas contraire s’il a répondu en cliquant sur annuler pour l’une ou l’autre des questions, le script affiche la seconde boîte de dialogue.
Vous voyez ici l’utilité de l’indentation de script, afin de clarifier la présentation et donc de retrouver facilement les instructions concernant la première et la seconde condition. Mais, vous imaginez facilement la difficulté de lecture d’un script imbri- quant cinq ou six if.
EditionsENI-Allrightsreserved
Cette technique, bien que correcte, est donc à déconseiller fortement. En effet, il est possible de lui préférer l’usage des opérateurs logiques Et « && » et OU « || ».
Exemple : afficher deux boîtes de dialogues successivement et tester leurs répon- ses pour continuer ou non le déroulement du script, à l’aide des opérateurs &&,
|| et !=.
<script language="javascript">
avis=confirm("Aimez-vous le JavaScript ? ");
suite=confirm("Voulez-vous poursuivre ? ");
if (suite==true && avis==true) { alert("J'en suis heureux ");
} else {
alert("C'est dommage");
}
</script>
Le même script, en utilisant l’opérateur ou « || » qui permet de ne vérifier qu’une seule des conditions.
<script language="javascript">
avis=confirm("Aimez-vous le JavaScript ? ");
suite=confirm("Voulez-vous poursuivre ? ");
if (suite==true || avis==true) {
alert("J'en suis heureux mais cela reste à confirmer");
} else {
alert("C'est dommage");
}
</script>
Une autre variante utilisant l’opérateur logique Non « != », expliqué au chapitre Utilisation des constantes, variables et opérateurs.
<script language="javascript">
avis=confirm("Aimez-vous le JavaScript ? ");
suite=confirm("Voulez-vous poursuivre ? ");
if (suite!=false && avis!=false) { alert("J'en suis heureux ");
} else {
alert("C'est dommage");
}
</script>
L’utilisation de la structure de contrôle avec if est largement répandue, mais il existe une autre syntaxe à l’aide de l’opérateur conditionnel ternaire.
2. L’opérateur conditionnel ternaire
Pour effectuer des tests, il est également possible d’utiliser l’opérateur conditionnel ternaire. Sa syntaxe est la suivante :
(test) ? instruction si vrai : instruction si faux ;
Même si la syntaxe est plus concise, la relecture n’est pas facilitée par cette struc- ture de contrôle. C’est pour cette raison que son utilisation est peu fréquente et qu-
’elle est rarement utilisée dans certains scripts.
Exemple : demander une valeur à l’utilisateur et la tester, pour savoir si elle est supérieure ou inférieure à l’opérateur conditionnel ternaire.
<script language="javascript">
var mavar=prompt("Quelle valeur voulez-vous prendre pour faire un test avec l'opérateur conditionnel ternaire ?");
(mavar<2)? alert("La variable est inférieure à 2"):alert("La variable est supérieure à 2");
</script>
EditionsENI-Allrightsreserved
Ici, une valeur est affectée à la variable mavar avec la méthode prompt(), puis le script utilise l’opérateur conditionnel ternaire pour la comparer à 2. Dans le cas où le test est respecté, c’est l’instruction figurant juste après le point d’interrogation qui est exécutée, dans le cas contraire, c’est l’instruction se trouvant juste après le double-point.
3. else if
L’instruction else if est utilisée en complément de if dans le cas où le nombre de situations est supérieur à deux ; nous parlerons alors de concaténation de tests. Le début est identique à la première structure de contrôle, par contre lorsqu'il faut ajouter un second test, il faut utiliser l’instruction else if suivi du nouveau test entre parenthèses et de l’accolade ouvrante. Ainsi, toutes les situations possibles seront traitées par élimination, jusqu’à la dernière. il faut terminer par l’instruction else qui concerne, alors, toutes les autres situations qui n’ont pas été traitées auparavant.
La syntaxe de la structure de contrôle avec l’instruction else if est la suivante :
if (test) {
Ligne 1 d’instruction ; Ligne 2 d’instruction ; }
else if (test) {
Ligne 1 d’instruction ; Ligne 2 d’instruction ;}
} else {
Ligne 1 d’instruction ; Ligne 2 d’instruction ; }
Exemple : afficher la valeur d’une réduction obtenue par calcul, en fonction du montant de la commande saisie dans une boîte de dialogue. La réduction sera égale à zéro si le montant de la commande n'atteint pas 10 000 euros. Elle sera égale à 5 % de la commande si celle-ci est comprise entre 10 000 et 25 000 euros et elle sera égale à 10 % au-dessus de ce montant.
