Les instructions - Cours Javascript

Introduction

Info

Les structures de contrôles ou "instructions" vont vous permettre de tester des variables, des propriétés,... et de déterminer une action ou des actions en fonction de leur valeur.

Les instructions conditionnelles / IF ----ELSE

Info

L'instruction IF.... ELSE permet de choisir entre deux blocs d'instructions lors d'un test logique.

L'instruction IF... ELSE utilise les opérateurs de comparaison pour des tests de type boolean (vrai/faux). Rappel : (chapitre Les opérateurs de comparaison)

Opérateur Signification Exemple>
< inférieur a < b
<= inférieur ou égal a <= b
== égal a == b
> supérieur a > b
>= supérieur ou égal a >= b
!= différent a != b
=== strictement égal a ===b
!== strictement différent a !== b


Vous pouvez introduire une autre comparaison à l'intérieur de la première.

Par exemple :
Exemple de code :
var nom ="dmc";
var nom2 =2;
if (nom=="dmc"){
  if (nom2<5){
    alert ("inférieur");
  }else {
    alert ("supérieur");
  }
}else{
  alert("pas ça");
}

Ce qui revient à dire :

si la variable nom est égale à "dmc" :
- et que la variable nom2 est inférieure à 5 alerte "inférieur";
- et que la variable nom2 est supérieure à 5 alerte "supérieur";

si la variable nom n'est pas égale à "dmc"
- alerte "pas ça".

Exemple 2 :
Exemple de code :
var nom ="2";
if (nom===2){
    alert ("égale");
  }else {
    alert ("pas égale");
  }

Nous obtenons une alerte "pas égale" car nous comparons un String et un Number.



L'instruction IF... ELSE utilise les opérateurs logiques pour une association de conditions.

Opérateur Signification Exemple
&& et (interception) a && b
|| ou ( réunion) a || b
! non (négation) a ! b

Imaginons maintenant que si la variable nom n'est pas égale à "dmc", j'alerte "n'est pas bon" et que si nom2 est supérieur à 5 , j'alerte le même message.
Je pourrais écrire :
Exemple de code :
var nom ="dmc";
var nom2 =2;
if (nom=="dmc"){
  if (nom2<5){
    alert ("inférieur");
  }else{
    alert ("n'est pas bon") ;
  }
}else{
  alert("n'est pas bon");
}

Cela est juste, mais il vaut mieux écrire :
Exemple de code :
var nom ="dmc";
var nom2 =2;
if ((nom=="dmc") && (nom2<5)){
  alert ("inférieur");
}else{
  alert("n'est pas bon");
}

Si vous voulez que au moins une condition soit bonne pour alerter "inférieur", il vous faut remplace && par ||.

L'instruction IF... ELSE peut effectuer des tests en cascade.

Maintenant, imaginons que nous voulons un message d'alerte différent suivant la valeur de nom2.
si nom2 <2, on alerte "inférieur à 2".
si nom2 = 4, on alerte "égal 4".
si nom2 <10 et différent de 4 et supérieur à 2 , on alerte "ok".
si nom2 ne remplit aucune des conditions nous alertons "nul".

Alors, nous écrirons :
Exemple de code :
if (nom=="dmc"){
  if (nom2 < 2) {
    alert ("inférieur à 2 ");
  } else if (nom2==4){
    alert ("égal 4") ;
  }else if (nom2<10 && nom2>2 && nom2 !=4){
$  alert ("ok");
  }else{
    alert ("nul") ;
  }
}else { alert("n'est pas bon");
}

Exemple

Voici un exemple :
Exemple de code :
var nom ="dmc";
if (nom == "dmc") {
  alert("bien");
}else {
  alert("pas bien");
}
Ou
Exemple de code :
var nom ="dmc";
if (nom != "dmc"){
  alert("pas bien");
}else{
  alert("bien");
}

Si nous la décortiquons cela donne :

- si la variable "nom" est égale à dmc, alors affiche un message d'alerte "bien",

- sinon affiche un message d'alerte "pas bien".

Exercez-vous à comparer deux variables entre elles, en utilisant les opérateurs de comparaison.

Les instructions conditionnelles / SWITCH

L'instruction SWITCH

L'instruction SWITCH est une variante de ELSE IF mais elle reste moins souple car elle n'accepte que des égalités.

Imaginons que nous voulons un message d'alerte différent suivant la valeur de nom2.
si nom2 =2, on alerte " 2".
si nom2 = 4, on alerte "4".
si nom2 =10 on alerte "10".
si nom2 ne remplit aucune des conditions nous alertons "nul".

Alors, nous écrirons :
Exemple de code :
var nom= "dmc";
var nom2 = 10;
if (nom=="dmc"){
  switch (nom2){
    case 2 : alert("2 "); break;
    case 4 :alert("4"); break;
    case 10 :alert("10");break;
    default :alert("nul");
  }
}else{
  alert("n'est pas bon");
}


L'instruction SWITCH est suivie du nom de la variable sur laquelle va se faire la comparaison, ici (nom2).
CASE annonce l'égalité donc dans l'ordre 2, 4,10.
BREAK veut dire de ne pas vérifier les autres conditions si l'égalité est vrai.
DEFAULT est l'action à faire si on a pas "breaker" ou si toutes les conditions sont fausses.

L'instruction SWITCH est très souvent utilisée dans les boucles.

L'instruction FOR.

L'instruction FOR

L'instruction FOR permet de répéter un bloc d'instructions tout en faisant progresser une valeur d'une variable.

Elle s'écrit sous la forme :
Exemple de code :
for (i=0; i<5; i++) {
  alert (i);
}

L'instruction FOR est composée :
- d'un bloc d'informations (i=0; i<5; i++) i étant un nom de variable de type number, qui est composé dans l'ordre :
- de l'expression initiale, c'est à dire la valeur à laquelle i commence i, i=0;
- de la condition de répétition i<5, c'est à dire que tant que i inférieur à 5, la boucle est exécuté;
- de la progression i++ (i=i+1) , la progression de i peut être toute autre.
- d'un bloc d'instructions qui est exécute à chaque fois que i prend +1 et que la condition de répétition est vraie { alert (i); } .

Faites très attention à la condition de répétition, car une boucle infinie peut bloquer votre ordinateur.
Par exemple ici nous avons une boucle infinie :
Exemple de code :
for (i=2; i<10; i++){
  document.write("valeur" +i +"<BR>"); i = i-1;
}

Exercice 1

Le but de cet exercice consiste à écrire les différentes valeurs de i. La condition initiale i = 2.
La condition de répétition i < 10. Le bloc d'instruction sera { document.write("valeur de i est égale à"+i+" "); }.
Pour info, document.write permet d'écrire du texte dans votre document HTML.

Le script à taper sera :
Exemple de code :
for (i=2; i<10; i++){
  document.write("valeur"+i+"<BR>");
}

Exercice 2

Le second exercice est un mélange de FOR et IF.
Le but de cet exercice est de créer une boucle avec FOR.
La condition initiale i = 2.
La condition de répétition i < 10.
Le bloc d'instruction sera { document.write("valeur de i est égale à"+i+"<BR>"); }.
Mais nous voulons que lorsque i = 5,
le texte change pour { document.write("valeur de i est égale à 5 "); }.

Le script à taper sera :
Exemple de code :
for (i=2; i<10; i++){
  if (i==5){
    document.write("valeur de i est égale à 5 ");
  }
  document.write("valeur"+i+"<BR>");
}

Pour le troisième exercice nous voulons que pour la valeur i = 5 stopper la boucle.
Le script à taper sera :
Exemple de code :
for (i=2; i<10; i++){
  if (i==5){
    document.write("valeur de i est égale à 5, je stoppe la boucle");
    break;
  }
  document.write("valeur"+i+"<BR>");
}

Le dernier exercice est un mélange de FOR et SWICHT. Nous voulons que pour la valeur i = 2 écrire "c'est un deux",
pour la valeur i = 8 "écrire "c'est un huit".
Exemple de code :
for (i=2; i<10; i++){
  switch (i){
  case 2 : document.write("c'est un deux");
    break;
  case 8 : document.write("c'est un huit");
    break;
  default : document.write("valeur" +i +"<BR>");
  }
}

L'instruction WHILE

Info

L'instruction WHILE est très proche de l'instruction FOR.

Elle est cependant moins sophistiquée, car on ne peut pas choisir le nombre de répétions.
L'instruction WHILE permet de répéter un bloc d'instruction tant que la condition est juste.

Elle s'écrit sous la forme :
Exemple de code :
while ( condition )
{ bloc d'instruction }

Par exemple :
nous invitons l'internaute à rentrer un chiffre dans une zone de texte.
Nous avons au départ une variable numb = 1 , à cette variable nous rajoutons +1 tant qu'elle n'est pas égale au carré du chiffre de l'internaute.
A chaque fois que nous ajoutons +1 nous écrirons "c'est pas ça" .
Pour cet exemple, nous symboliserons le chiffre entré dans la zone de texte par une variable du nom de numinter et qui sera égale à un chiffre entre 1 et 5 à vous de choisir.

Le code sera donc :
Exemple de code :
var numinter = 4;
var num = 1;
while ( num != numinter * numinter){
  document.write("c'est pas "+num+"<BR>" );
  num = num+1;
}