Wikilivres

« Programmation JavaScript/Structures de contrôle » : différence entre les versions

Navigation interactive dans l’historique
← Modification précédenteModification suivante →
Contenu supprimé Contenu ajouté
VisuelWikicode
Gmarzin (discussion | contributions)
260 modifications
Aucun résumé des modifications
multiples petites corrections
Ligne 1 :
[[programmation JavaScript/Sommaire| << Retour au sommaire détaillé]] / [[programmation JavaScript/Fonctions utilisateur|Fonctions utilisateur>>]]
 
Javascript dispose de structures de contrôle comparablecomparables à ce qu'on rencontre en langage cC. La plupart des règles et habitudes acquises dans ce langage sont immédiatement transposables en javascript.<br/>
Avant de passer en revue les structures de contrôle, il est utile de lire le paragraphe [[#EtablissementÉtablissement d'une expression logique|EtablissementÉtablissement d'une expression logique]] qui précise certains aspects de la méthode.
 
==EtablissementÉtablissement d'une expression logique==
L'usage de '''if''', '''while''' et '''do''' mettentmet en oeuvreœuvre des expressions logiques dont le résultat testé (vrai) conditionnera l'exécution de l'instruction ou du bloc d'instructioninstructions associé.<br/>
Ces expressions logiques sont inscrites entre parenthèses.<br/>
Du plus simple au plus complexe, on trouve :
*(5 == 5) est bizarre mais vrai
*(true) La constante true est toujours vraivraie
*(false) La constante false est toujours fausse
*(var_bool) Si var_bool est vrai, l'expression est vraie
*(!var_bool)Si var_bool est vrai, l'expression est fausse
*(var_bool==false) Si var_bool est fautfaux, l'expression est vraie (et oui...)
Avec des variables numériquenumériques ou des variables chaînes, le principe est similaire :
*(ma_var_num == 5)
*(ma_chaine == "foo")
Ligne 22 :
*(ma_chaine != "bar") le contenu de ma_chaine différent de "bar"
etc..<br/>
AÀ l'étape suivante, on peut combiner des expressions logiques avec des opérateurs logiques ET ( && ) et OU (||).
*((ma_var==5)&&(ma_chaine=="bar")) Réaliser les deux conditions
*((ma_var==5)||(ma_chaîne=="bar")) Réaliser l'une des conditions
Ligne 29 :
 
==Le piège==
L'auteur de cet article ne vient pas du cC , mais du pascal. Il commet donc encore aujourd'hui l'erreur de confondre l'opérateur d'affectation avec l'opérateur d'égalité logique. Ceci a pour conséquence d'introduire un bug à retardement dudû à l'affectation de la variable de test.
<div style="color:red;text-align:center">
if (ma_var = 0) Exécution du code
</div>
L'expression (ma_var = 0) est fausse. L'expression (ma_var = 5) est vraie. Mais dans les deux cas, l'affectation a lieu, écrasant le contenu précédent de la variable.<br/>
Donc cette erreur, si elle n'est pas comprise, plonge le programmeur dans des abimesabîmes de questions et de doutes, avec peu de chancechances de comprendre pourquoi. Bien entendu, la bonne façon est d'utiliser l'opérateur d'égalité logique ( == ) à la place de l'opérateur d'affectation ( = ).
 
==Branchement conditionnel==
===if else===
La structure de contrôle '''if''' permet de subordonner l'exécution d'une ligne ou d'un bloc d'instructions à l'évaluation (vrai) d'une [[programmation javascript syntaxe structures de contrôle#EtablissementÉtablissement d'une expression logique|expression logique]].<br/>
La syntaxe est :
{{Cadre code|Exemple if|
<pre>
if (condition_vrai) // Exécution d'une ligne d'instructioninstructions
alert("La condition est vraie");
.
Ligne 54 :
</pre>
}}
Le mot réservé '''else''' permet d'exécuter une ligne ou un bloc d'instructioninstructions alternativement au résultat de l'évaluation de l'expression logique.
{{Cadre code|Exemple if else|
<pre>
Ligne 66 :
if (condition)
{
alert("La condition est vraivraie");
alert("... je le confirme");
}
Ligne 78 :
 
===? :===
Cette structure est remarquable par sa concision, et peuxpeut se substituer à des if else reliés à des lignes d'instructions simples.<br/>
La syntaxe est la suivante : <br/>
<pre>
Ligne 85 :
 
L'expression à évaluer est inscrite entre parenthèses.<br/>
Le point d'interrogation effectue le test de l'expression entre parenthèse,parenthèses et si elle est vraivraie exécute la ligne d'instruction à droite jusqu'à l'apparition des deux- points.<br/>
Les deux- points se comportent comme un else (sinon) et déclenchedéclenchent l'exécution de la ligne d'instructioninstructions si l'expression est fausse.<br/>
Le point virgule referme la structure.
{{Cadre code|Exemple test rapide|
Ligne 94 :
}}
 
Note : on ne peuxpeut pas employer de blocs d'instructions.<br/>
on ne rencontre qu'un seul point-virgule.
 
Ligne 100 :
Switch permet en conjonction avec case de mettre en place un sélecteur de cas d'une grande souplesse.<br/>
Cette structure remplace avantageusement une structure équivalente construite à partir de if else et if else imbriqués.<br/>
Le mécanisme de test ne fait pas appel à une expression logique, mais à une comparaison d'une variable de type scalaire avec des constantes.<br/>
La structure '''switch case''' ne pourrait pas fonctionner correctement sans '''break'''. Enfin, le mot réservé '''default''' couvre les cas différentdifférents de ceux traités par les '''case'''.<br/>
{{Cadre code|switch exemple 1|
<pre>
Ligne 117 :
}}
On remarque les break systématiques dans ce cas.<br/>
Deuxième exemple : Nous allons regroupper plusieurs cas, et déclencher plusieurs exécutions d'instructions pour certaines valeurs.
{{Cadre code|switch exemple 2|
<pre>
Ligne 123 :
{
case 0:
alert("Vraiment nulle, cette variable"); // Elle vaut zerozéro
break;
case 1:
Ligne 142 :
</pre>
}}
On remarquera l'utilisation des break pour regroupperregrouper des cas entre eux...
 
==Contrôle d'itération==
===for===
====Description====
La structure for permet d'effectuer plusieurs fois une ligne d'instructioninstructions ou un bloc d'instructions.<br/>
Les modalités d'exécution de l'itération sont indiquées entre les parenthèses précédant le mot réservé for. L'instruction ou le bloc à exécuter se situent après.<br/>
Syntaxe:
Ligne 161 :
* La condition pour exécuter la boucle
* Les changements à effectuer à chaque tour (généralement une incrémentation ou décrémentation).
Ces trois instructions sont séparées par des points-virgule, et placées entre parenthèses aprésaprès le mot réservé '''for'''.<br/>
Généralement, ces trois instructions s'appliquent à une variable chargée de contrôler l'itération, et qu'on nomme avec la lettre '''i'''.<br/>
 
Ligne 174 :
</pre>
}}
Dans cet exemple, nous avons initialisé la variable i à 0, définitdéfini la condition pour exécuter la boucle (répéter tant que i est strictement inférieur à 5), et définitdéfini le changement à effectuer à chaque tour (incrémenter i).<br/>
Une fois assimilé le fonctionnement, on imagine aisément toutes les possibilités. <br/>
D'abord, on peut initialiser i avec la valeur de son choix. Commencer avec 1, ou un nombre négatif.<br/>
Ligne 187 :
}}
====Boucle décroissante====
De la même manière, une boucle peut- être décroissante :
{{Cadre code|Exemple for, boucle décroissante|
<pre>
Ligne 194 :
</pre>
}}
====EtatÉtat en sortie de boucle ====
En sortie de boucle, i contient la valeur résultante des modifications. Pour le dernier exemple, c'est -1.<br/>
 
 
====Utilisation de continue====
Ce mot réservé permet à volonté de sauter des tours. L'exemple suivant saute le passage à zerozéro d'une itération comprise entre -2 et 2.
{{Cadre code|Exemple de continue|
<pre>
Ligne 206 :
if (i==0)
continue;
alert(i); // Affiche -2, puis -1, 1 et 2... mais pas le zerozéro.
}
</pre>
}}
====Utilisation de break====
La boucle '''for''' autorise l'usage de '''break''' pour sortir de l'itération. C'est possible. Maismais c'est discutable.
 
====EviterÉviter les pièges :====
=====Boucle infinie=====
Il est possible, par inattention, de programmer une boucle infinie. CelàCela se produit quand la condition de boucle reste vraivraie malgré la modification de la variable.
<div>
for (i=0; <span style="color:red">i &gt;= 0</span>; i++)
</div>
L'incrémentation de i ne changera pas le fait que la variable est supérieure ou égale à zerozéro...
 
=====Variable modifiée=====
La structure for s'appuie sur une variable pour piloter le déroulement de la boucle. Seulement, elle ne rend pas la variable comme elle lal'a reçue. Elle la modifie complètement. Pour éviter de modifier une variable par erreur, il est judicieux d'utiliser le mot réservé var :
<pre>
for (var i=0; ....
Ligne 228 :
 
===while===
La structure while conditionne l'exécution répétée d'une instruction ou d'un bloc d'instructioninstructions au test d'une expression logique.
<pre>
while (condition)
Ligne 242 :
</pre>
 
Pour qu'il soit possible de sortir de la boucle, il faut que les instructions modiiemodifient à terme la condition pour la rendre fausse.
{{Cadre code|Exemple while|
<pre>
Ligne 250 :
</pre>
}}
En langage c, la boucle while peut-être volontairement infinie : while(true) toujours vrai, mais en JavaScript, le navigateur ne l'acceptera probablement pas.
 
===do===
La structure do permet d'exécuter une instruction ou un bloc d'instructioninstructions et de répéter cette action tant qu'une expression logique surveillée par while est vraie.
<pre>
do
Récupérée de « https://fr.wikibooks.org/wiki/Programmation_JavaScript/Structures_de_contrôle »