Bases de javascript (suite)

1. Objectifs

Après avoir fait connaissance avec la notion de variable, vous allez travailler avec elles. Il existe plusieurs types de variables, ce module est consacré aux variables de type numérique.

2. Des variables numériques

Jusqu’à présent, vous avez travaillé avec des variables contenant du texte. Vous allez maintenant travailler avec des variables contenant d’autres types de données : des nombres !
ex : compteur = 3 ;
Lorsque l’on ne met pas de guillemets, cela signifie qu’on a un nombre.
compteur = "3" est donc différent de compteur = 3. Dans le premier cas, vous avez le texte 3alors que dans le deuxième, vous avez le nombre 3.
Comment faire pour convertir le texte "3" en un nombre 3 ?
Attention ! Le contenu que l’on récupère d’un champ texte d’un formulaire est de type texte. Si l’on souhaite récupérer une valeur numérique, il faudra donc convertir le contenu.
Il existe une commande qui permet la conversion de contenu de type textuel en contenu de type numérique : parseFloat().
Voici un exemple simple de l’utilisation de cette commande :

texte="3";

nombre=parseFloat(texte);

// la variable nombre a une valeur de 3

//cette valeur est de type numérique

document.write(nombre);

// la valeur de la variable nombre s’affiche : 3

Remarque : N’essayez pas de convertir le texte "Bonjour" en type numérique ! Voici la démonstration de cette erreur :

=> Lorsque le programme ne parvient pas à convertir du contenu textuel en nombre, il donne une valeur spéciale qui est NaN et qui signifie Not A Number (n’est pas un nombre).

parseFloat() est une commande qui permet de convertir du contenu textuel en contenu numérique.

3. Des opérations mathématiques avec des variables

Avec ces variables de type numérique, on peut effectuer toute une série d’opérations mathématiques comme l’addition, la soustraction, la division et la multiplication.

4. L’addition

Le signe utilisé pour additionner deux nombres est "+". Voici un exemple très simple d’addition de variables numériques :

var nombre1 = 123;

var nombre2 = 321;

var resultat = nombre1 + nombre2;

alert(resultat);

5. Appliquez : l’addition

"Créer un programme qui affiche la somme de deux nombres. Ces deux nombres sont insérés dans des champs de formulaire par l’utilisateur. Lorsque l’utilisateur clique sur le bouton "=", le programme affiche le résultat de l’addition dans un troisième champ du formulaire." (nom du fichier : addition.htm)
Les étapes du développement :
1. créer le formulaire HTML (avec 3 champs et 1 bouton)
2. effectuer l’addition
3. afficher la somme dans le 3ème champ du formulaire
Il y a toutefois une particularité à cet exercice : les valeurs insérées dans les champs "texte"sont de type chaîne de caractères (comme le nom l’indique : champ texte).
Il faudra donc utiliser la commande parseFloat() pour convertir le contenu du champ texte en nombre, comme ceci :

nombre1 = parseFloat(document.calculatrice.nombre1.value);

Vous pouvez essayer de faire l’exercice seul ou voir le développement du programme détaillé dans les pages suivantes.

6. L'addition 1/4

Créons d'abord le formulaire HTML dont voici le code (lignes 6 à 8).

<html>

   <head>

   <title>Additionner des nombres</title>

</head>

<body>

   <form name="calculatrice">

      <input type="text" name="nombre1"> + <input type="text" name="nombre2">

         <input type="button" value=" = ">

             <input type="text" name="resultat">

            </form>

         </body>

      </html>

7. L'addition 2/4

Récupérons ensuite les valeurs (lignes 4 à 16) des champs "nombre1" et "nombre2" (dans des variables du même nom) lors de l’événement onclick sur le bouton "=".
N’oublions pas de convertir les valeurs récupérées en nombre à l’aide de la commande parseFloat().

<html>

   <head>

   <title>Additionner des nombres</title>

   <script>

      var nombre1; // déclaration de la variable nombre1

      var nombre2; // déclaration de la variable nombre2

       function Main(){

      // fonction principale appelée au chargement de la page

       nombre1 = parseFloat(document.calculatrice.nombre1.value);

      // récupération du premier nombre inséré dans le formulaire dans la variable nombre1

      // et conversion en type numérique

      nombre2 = parseFloat(document.calculatrice.nombre2.value);

       // récupération du deuxième nombre inséré dans le formulaire dans la variable nombre2

      // et conversion en type numérique

</script>

</head>

<body>

<form name="calculatrice">

   <input type="text" name="nombre1"> + <input type="text" name="nombre2">

      <input type="button" value=" = ">

          <input type="text" name="resultat">

         </form>

      </body>

   </html>

8. L'addition 3/4

Calculons la somme des deux nombres (lignes 7,16 et 26).

<html>

   <head>

   <title>Additionner des nombres</title>

   <script>

      var nombre1; // déclaration de la variable nombre1

      var nombre2; // déclaration de la variable nombre2

      var resultat; // déclararation de la varaible resultat

       function Main(){

      // fonction principale appelée au chargement de la page

       nombre1 = parseFloat(document.calculatrice.nombre1.value);

      // récupération du premier nombre inséré dans le formulaire dans la variable nombre1

      // et conversion en type numérique

      nombre2 = parseFloat(document.calculatrice.nombre2.value);

       // récupération du deuxième nombre inséré dans le formulaire dans la variable nombre2

      // et conversion en type numérique

       resultat = nombre1 + nombre2; // calcul de la somme des deux nombres

</script>

</head>

<body>

<form name="calculatrice">

   <input type="text" name="nombre1"> + <input type="text" name="nombre2">

      <input type="button" value=" = ">

         <input type="text" name="resultat">

         </form>

      </body>

   </html>

. L'addition 4/4

Affichons le résultat dans le champ adéquat ((lignes 17 et 18) et ajoutons une instruction onclick sur le bouton qui chargera la fonction Main() (ligne 26).

<html>

   <head>

   <title>Additionner des nombres</title>

   <script>

      var nombre1; // déclaration de la variable nombre1

      var nombre2; // déclaration de la variable nombre2

      var resultat; // déclararation de la varaible resultat

       function Main(){

      // fonction principale appelée au chargement de la page

       nombre1 = parseFloat(document.calculatrice.nombre1.value);

      // récupération du premier nombre inséré dans le formulaire dans la variable nombre1

      // et conversion en type numérique

      nombre2 = parseFloat(document.calculatrice.nombre2.value);

       // récupération du deuxième nombre inséré dans le formulaire dans la variable nombre2

      // et conversion en type numérique

       resultat = nombre1 + nombre2; // calcul de la somme des deux nombres

       document.calculatrice.resultat.value = resultat ;

      // affichage du résultat dans le champ "resultat"

</script>

</head>

<body>

<form name="calculatrice">

   <input type="text" name="nombre1"> + <input type="text" name="nombre2">

      // ajout de onclick="Main();" sur le bouton

      <input type="button" value=" = " onclick="Main();">

         <input type="text" name="resultat">

         </form>

      </body>

   </html>

Il ne vous reste plus qu’à enregistrer le code sous "addition.htm" et à l’exécuter.

10. Quizz

La commande permettant de convertir du texte en nombre est

int()

var

parseFloat()

La valeur récupérée d’un champ de formulaire est de type

numérique

texte

variable

Pour additionner deux nombres, on utilise l’opérateur

Add

11. Soustraction

Le signe utilisé pour soustraire deux nombres est "-". Voici un exemple très simple de soustraction de variables numériques :

var nombre1 = 123;

var nombre2 = 321;

var resultat = nombre2–nombre1;

alert(resultat);

12. Appliquez : la soustraction

"Ce programme effectue l’addition de deux nombres insérés dans un champ texte, modifiez-le pour qu’il effectue la différence entre les deux nombres."

Résultat

Solution

<html>

      <head>

            <title>Addition / soustraction</title>

            <script>

                  var nombre1;

                  var nombre2;

                  var resultat;

                  function Main(){

                        nombre1 = parseFloat(document.calculatrice.nombre1.value);

                        nombre2 = parseFloat(document.calculatrice.nombre2.value);

                        resultat = nombre1 - nombre2;

                        document.calculatrice.resultat.value = resultat ;

            </script>

      </head>

      <body>

            <form name="calculatrice">

                  <input type="Text" name="nombre1"> - <input type="Text" name="nombre2"><input type="Button" value=" = " onclick="Main();"> <input type="Text" name="resultat">

            </form>

      </body>

</html>

13. Multiplication

Le signe utilisé pour multiplier deux nombres est "*". Voici un exemple très simple de multiplication de variables numériques :

var prixHTVA = 999;

var Taux = 1,21;

var prixTVAC=prixHTVA*Taux;

alert(prixTVAC);

14. Division

Le signe utilisé pour diviser un nombre est "/". Voici un exemple très simple de division d’une variable numérique par une autre variable numérique :

var nombre1 = 2500;

var nombre2 = 5;

var resultat = nombre1/nombre2;

alert(resultat) ;

15. Appliquez : la calculatrice

"Créer une calculatrice : Deux nombres sont insérés dans des champs de formulaire par l’utilisateur. Lorsque l’utilisateur clique sur le bouton "+", "-", "*" ou "/", le programme affiche le résultat de l’opération dans un troisième champ du formulaire." (nom du fichier : calculatrice.htm)
Voici à quoi le formulaire de la calculatrice devrait ressembler :

Essayez de créer ce programme. Pour plus de détails sur les étapes de développement ou pour voir la solution de l’exercice, passez à la page suivante.

16. La calculatrice, les étapes du programme

Voici quelques précisions sur le développement du programme :
Attention ! Dans ce programme, il y a 4 actions pour 4 événements :
- clic sur le bouton " + " : action additionner
- clic sur le bouton " - " : action soustraire
- clic sur le bouton " * " : action multiplier
- clic sur le bouton " / " : action diviser
Vous allez donc devoir créer 4 fonctions :

function Addition(){

   nombre1=document.formulaire.nombre1.value;

   nombre2=document.formulaire.nombre2.value;

   resultat=nombre1+nombre2;

   document.formulaire.resultat.value = resultat;

function Soustraction(){

   nombre1=document.formulaire.nombre1.value;

   nombre2=document.formulaire.nombre2.value;

   resultat = nombre1 - nombre2;

   document.formulaire.resultat.value = resultat;

Chaque bouton fera appel à la fonction adéquate :

<input type="button" value="+" onclick="Addition()">

   <input type="button" value="-" onclick="Soustraction()">

Remarque : vous aurez l’occasion d’approfondir la notion de fonction dans le module 9.
Voici le code de l'application "calculatrice".

<html>

   <head>

   <title>Créer une calculatrice</title>

   <script>

      var nombre1;

      var nombre2;

      var resultat;

      function Addition(){

      nombre1 = parseFloat(document.calculatrice.nombre1.value);

      // récupération du premier nombre inséré dans le formulaire dans la variable nombre1

      // et conversion en type numérique

       nombre2 = parseFloat(document.calculatrice.nombre2.value);

      // récupération du deuxième nombre inséré dans le formulaire dans la variable nombre2

      // et conversion en type numérique

      resultat = nombre1 + nombre2;

      // calcul de la somme des deux nombres

      document.calculatrice.resultat.value = resultat;

      // affichage du résultat dans le champs "resultat"

   function Soustraction(){

      nombre1 = parseFloat(document.calculatrice.nombre1.value);

      // récupération du premier nombre inséré dans le formulaire dans la variable nombre1

      // et conversion en type numérique

      nombre2 = parseFloat(document.calculatrice.nombre2.value);

      // récupération du deuxième nombre inséré dans le formulaire dans la variable nombre2

      // et conversion en type numérique

      resultat = nombre1 - nombre2;

      // calcul de la différence des deux nombres

      document.calculatrice.resultat.value = resultat ;

      // affichage du résultat dans le champs "resultat"

   function Multiplication(){

   nombre1 = parseFloat(document.calculatrice.nombre1.value);

   // récupération du premier nombre inséré dans le formulaire dans la variable nombre1

   // et conversion en type numérique

   nombre2 = parseFloat(document.calculatrice.nombre2.value);

   // récupération du deuxième nombre inséré dans le formulaire dans la variable nombre2

   // et conversion en type numérique

   resultat=nombre1*nombre2;

   // calcul de le produit des deux nombres

    document.calculatrice.resultat.value=resultat;

   // affichage du résultat dans le champs "resultat"

function Division(){

   nombre1 = parseFloat(document.calculatrice.nombre1.value);

   // récupération du premier nombre inséré dans le formulaire dans la variable nombre1

   // et conversion en type numérique

   nombre2 = parseFloat(document.calculatrice.nombre2.value);

   // récupération du deuxième nombre inséré dans le formulaire dans la variable nombre2

   // et conversion en type numérique

   resultat=nombre1/nombre2;

   // calcul du quotient des deux nombres

   document.calculatrice.resultat.value=resultat;

   // affichage du résultat dans le champ "resultat"

</script>

</head>

<body>

<form name="calculatrice">

 <input type="text" name="nombre1"> <input type="button" value=" + " onclick="Addition();">  <input type="button" value=" - " onclick="Soustraction();">  <input type="button" value=" * " onclick="Multiplication();">  <input type="button" value=" / " onclick="Division();">  <input type="text" name="nombre2"> =  <input type="text" name="resultat">

</form>

</body>

</html>

Exécuter le programme.
Il vous suffit d’insérer deux nombres et de cliquer sur l’opération souhaitée.

17. Conclusion

Quelle commande permet de convertir du contenu de type textuel en contenu de type numérique ?

parseFloat()

prompt()

Aucune, la conversion est toujours automatique

Sachant que a = 3 et b = 5, laquelle de ces instructions représente l’addition de a et b ?

a + b = resultat ;

resultat = a + b;

resultat = "a + b";

Trouvez l’instruction qui convertit correctement des EUR en BEF:

eur = bef / 40,3399 ;

eur = bef * 40,3399 ;

bef = eur / 40,3399 ;

18. Mémo

Les variables numériques

Jusqu'ici, nous avons travaillé avec des variables de type textuelles:
nom = "Capitaine Haddock" ;
Nous allons aborder les variables numériques:
Pointure = 45 ;

Des opérations mathématiques

Le signe utilisé pour additionner deux nombres est "+"
var resultat = nombre1 + nombre2 ;
Le signe utilisé pour soustraire deux nombres est "-"
var resultat = nombre2 – nombre1 ;
Le signe utilisé pour multiplier deux nombres est "*"
var prixTVAC = prixHTVA * 1,21;
Le signe utilisé pour diviser un nombre est "/"
var resultat = nombre1 / nombre2 ;

Passer du textuel au numérique

Si vous avez récupéré une valeur textuelle et que vous désirez faire une opération arithmétique dessus, il vous faut la convertir en numérique.
Cette opération s'appelle "parser" une valeur grâce à la commande parseFloat();
texte = "3" ; // les guillemets indiquent une valeur "String"
nombre = parseFloat(texte) ; // on insère dans la variable nombre le contenu de la variable texte transformé en nombre
Remarque : N’essayez pas de convertir le texte "Bonjour" en type numérique, vous provoqueriez une erreur.

Le signe + et ses différentes utilisations

Nous avons vu dans le chapitre précédent que le signe "+" permettait de concaténer deux chaînes de caractères, et dans celui-ci qu'il permettait d'additionner deux valeurs numériques.
Faites donc bien attention au type de variable employé, ainsi qu'à leur contenu. Par défaut, ce qui est récupéré dans un champ de formulaire est considéré comme du texte.
Ainsi, cet exemple vous montrera l'utilisation du "+" dans les deux contextes:

nombre1="123"; // contenu textuel

nombre2="321" ; // contenu textuel

 resultat1=nombre1+nombre2;

// resultat1 vaut "123321" car 123 et 321 sont considérés comme du texte

// on a concaténé le texte 123 au texte 321

resultat2 = parseFloat(nombre1) + parseFloat(nombre2) ;

 // resultat2 vaut 444 car 123 et 321 sont des nombres, on a additionné les deux nombres

La conversion implicite

Si vous concaténez un nombre et une chaîne de caractères, et que vous placez le résultat dans une variable, une conversion implicite s'exécute.
Le programme convertit lui-même la variable de type numérique en type texte.

var nombre;

var texte;

var resultat;

nombre=3; // variable de type numérique

texte = "Nombre de BD gagnées : " ; // variable de type texte

 resultat = texte + nombre ; // resultat sera de type texte

Le contraire est également vrai, on peut convertir implicitement une chaîne de caractères en nombre:

var nombre;

var texte;

var resultat;

nombre=100; // variable de type numérique

texte = "40.3399" ; // variable de type texte

resultat = texte * nombre ; // resultat sera de type numérique

Bien entendu, il n'y a pas de conversion explicite avec le signe "+" qui fera plutôt une concaténation.

Connaître le type d'une variable

Il peut être utile de vérifier un type de valeur entrée par un visiteur, afin par exemple de contrôler la valeur saisie dans un champ.
Nous utiliserons dès lors l'opérateur typeof qui affiche le type d'une variable:
- var num ;
- num = "3";
- alert(typeof num); // la variable num est de type TEXTE

Compléments

En complément, vous découvrirez plus d'informations sur les types de variables ainsi que deux exercices pratiques destinés à approfondir les notions vues jusqu'ici.

A. L’opérateur +

L’opérateur "+" est utilisé dans 2 opérations différentes :
· la concaténation de chaînes de caractères
· l’addition de nombres
Comment savoir quelle opération va être effectuée ?
· la concaténation : variables de type texte
· l’addition : variables de type numérique
Pour être certain d’effectuer une addition de deux nombres, il suffit de convertir les variables en numérique à l’aide de la commande parseFloat().

. Utilisation de la commande parseFloat()

Voici un exemple de l’utilisation de cette commande :

nombre1="123"; // contenu textuel

nombre2="321" ; // contenu textuel

resultat1=nombre1+nombre2;

// resultat1 vaut "123321" car 123 et 321 sont considérés comme du texte

// on a concaténé le texte 123 au texte 321

resultat2=parseFloat(nombre1)+parseFloat(nombre2);

// resultat2 vaut 444 car 123 et 321 sont des nombres, on a additionné les deux nombres

C. Convertir un nombre en une chaîne de caractères

Voici un exemple de concaténation de chaînes de caractères un peu particulier : vous allez concaténer un nombre et une chaîne de caractères…

 var nombre;

var texte;

var resultat;

nombre=3; // variable de type numérique

texte="Nombre de BD gagnées : " ; // variable de type texte

resultat=texte+nombre ;

A votre avis, le résultat est de type

Texte

Numérique

On obtient une erreur

Lorsque le programme effectue l’opération "+", il convertit lui-même la variable de type numérique en type texte. C’est ce que l’on appelle la conversion implicite.
La variable resultat est de type texte et sa valeur est "Nombre de BD gagnées : 3"
Mémo :
[texte] + [texte] = concaténation
[nombre] + [nombre] = addition
[nombre] + [texte] = concaténation avec conversion implicite du nombre en texte

D. Convertir une chaîne de caractères en un nombre

Vous avez vu que le JavaScript peut convertir automatiquement un nombre en texte grâce à la conversion implicite. Voici un exemple provoquant l’effet inverse : une conversion implicite de texte en nombre.

var nombre;

var texte;

var resultat;

nombre = 100; // variable de type numérique

texte = "40.3399" ; // variable de type texte

resultat = texte * nombre ;

A votre avis, le résultat est de type

Texte

Numérique

On obtient une erreur

Lorsque le programme effectue l’opération "*", il convertit lui-même la variable de type texteen type numérique. Il y a là conversion implicite d’un texte en nombre.
La variable resultat est de type numérique et sa valeur est 4033.99.
Mémo :
Pour les opérations mathématiques (sauf addition, "+"):
[nombre] * [nombre] = opération mathématique
[nombre] * [texte] = opération mathématique avec conversion implicite du texte en nombre
Remarque : si le texte ne peut pas être converti, vous obtiendrez la valeur NaN, Not A Number (pas un nombre)

E. Type texte ou type numérique ?

Vous n’êtes plus certain du type d’une variable ? L’opérateur typeof vous affiche le type d’une variable :

var num ;

num = "3";

alert(typeof num); // la variable num est de type TEXTE

num = parseFloat(num);

alert(typeof num); // la variable num est de type NUMERIQUE

L’opérateur typeof peut retourner les types suivants :
number: type numérique
string: type texte
boolean: type booléen (vrai ou faux)
object: objet
function: fonction
undefined: déclaré mais non défini (pas de valeur assignée)

F. Quizz

Soit le code suivant : var num ; alert(typeof num); Quelle est la valeur retournée par l’opérateur typeof ?

number

string

undefined

G. Exercice de synthèse

"Ecrire un programme qui calcule la réduction du prix d’une BD (-30%). L’utilisateur encode le prix d’une BD dans le champ adéquat et clique sur le bouton "=" pour calculer la réduction" (nom du fichier : reducBD.htm)
Vous devrez donc :
1. créer un formulaire similaire à celui-ci :

2. récupérer la valeur du champ "prix"
3. calculer la réduction
4. afficher le prix réduit dans le champ "prixreduit"
Remarque : prixBD – 30%(prixBD) est équivalent à prixBD * 0.7

H. Quizz

Pour récupérer la valeur insérée dans le champ "prix" du formulaire "formBD", la commande est :

Document.formBD.prix.value

document.formBD.prix

document.formBD.prix.value

1. Objectifs

Ce module montre comment gérer des conditions et cas particuliers d’un programme. Vous apprendrez à tester, à comparer certaines informations avant d’effectuer des instructions ce qui, par exemple, vous évitera d’effectuer des traitements inutiles ou d’obtenir des erreurs.

2. Une condition dans l’énoncé

Reprenons le programme login.htm (cf. module 2) et améliorons l’énoncé :
"Ecrire un programme qui récupère un mot de passe dans un formulaire de connexion sécurisée. Si le mot de passe est égal à "bachibouzouk", une alerte prévient l’utilisateur qu’il a l’autorisation d’entrer. Sinon, une alerte prévient que l’utilisateur n’a pas l’autorisation d’entrer." (nom du fichier : Securite2.htm)
Les mots importants de cet énoncé sont en rouge : Si, Sinon.
Ces mots marquent clairement une condition de traitement.
Cela signifie que le programme va effectuer l’un ou l’autre traitement en fonction d’une condition :
La condition :
Le mot de passe donné par l’utilisateur est égal à "Bachibouzouk"Si la condition est vraie (traitement A) :
L’utilisateur peut entrerSinon (traitement B):
L’utilisateur ne peut pas entrer

3. Une structure conditionnelle

Pour traduire cette étape en langage de programmation, on respecte une syntaxe prédéfinie appelée structure conditionnelle.
Voici comment on représente (en JavaScript) une structure conditionnelle :

if (condition){

   // traitement A

}else{

   // traitement B

Remarque : Pour éviter les erreurs de syntaxe (oubli de "}", par exemple), on indentecorrectement le code pour qu’il soit clair. Prenez la bonne habitude d’ajouter directement une accolade fermante lorsque vous venez d’insérer une accolade ouvrante. Comme cela, vous n’oublierez jamais d’accolade !

Le "if" et le "else" doivent impérativement être écrits en minuscules.

4. Le code du programme

Voici le code du programme qui récupère le mot de passe inséré par l’utilisateur dans le formulaire de connexion.
Commençons d’abord par récupérer le mot de passe :

<html>

   <head>

      <title>

         Ecrire un programme qui récupère un mot de passe dans un formulaire

      </title>

      <script>

         var motpropose;

          function Main(){

            motpropose = document.securite.motdepasse.value;

            // on récupère la valeur du champ texte dans une variable

      </script>

   </head>

   <body>

   <h3>Zone Sécurisée</h3>

<p>Veuillez entrer votre mot de passe:</p>

<form name="securite">

   <input type="text" name="motdepasse">

      <input type="button" value="ENTRER" onclick="Main()">

      </form>

   </body>

</html>

Le mot de passe inséré par l’utilisateur est récupéré dans la variable motpropose.
Il ne reste plus qu’à comparer la valeur de motpropose à "bachibouzouk" :

if(motpropose=="bachibouzouk"){ // si le mot proposé est égal à "bachibouzouk"

alert("Vous avez le droit d’entrer!");

 // alors on affiche le texte "Vous avez le droit d’entrer !"

}else{ // sinon

alert("Vous n’avez PAS le droit d’entrer");

// on affiche le texte "Vous n’avez PAS le droit d’entrer"

Pour comparer l’égalité de motpropose et "bachibouzouk", on a utilisé un double égal "==" et non un simple "=". Lorsque l’on veut comparer l’égalité de deux éléments, on utilise toujours le "==". N’oubliez pas que "=" signifie que l’on assigne une valeur à une variable.
Rappel : N’oubliez pas que le langage JavaScript est sensible à la casse. La valeur "bachibouzouk" en minuscules est donc différente de la valeur "BACHIBOUZOUK" en majuscules !
Voilà! Il ne vous reste plus qu’à insérer ce morceau de code dans votre programme et à l’enregistrer sous "securite2.htm".

5. Conclusion

Dans un programme, il peut y avoir deux traitements différents en fonction d’une condition. Si la condition est VRAIE, on effectue un traitement A ; sinon (la condition est FAUSSE), on effectue un traitement B.
Voici le "squelette" de la structure conditionnelle "if" :

if(condition){

   // traitement A

}else{

   // traitement B

Pour comparer l’égalité de 2 valeurs, on utilise "==" et non "=" !!! Faites bien attention à ne pas vous tromper ! 6. Exercice : une condition

Reprenez votre programme demanderForm.htm (voir l’exercice du module 2.11). Ce programme demande une injure du capitaine Haddock. Améliorez ce programme pour qu’il vérifie si le champ n’est pas vide. Si l’injure est égale à "" (rien), avertir l’utilisateur qu’il n’a rien inséré avec le message "Veuillez proposer une injure du capitaine Haddock.", sinon afficher le message "Le capitaine Haddock a dit [INJURE]." (nom du fichier : injureV2.htm)

7. Comparer 2 valeurs

Jusqu’à présent, vous avez comparé l’égalité de deux valeurs (motpropose == "bachibouzouk").
Il est également possible d’effectuer d’autres opérations de comparaison. On les utilise principalement pour comparer des valeurs numériques :
Valeur1 "plus petit que" valeur2 :
nombre < 100
Valeur1 "plus grand que" valeur2 :
nombre > 100
Valeur1 "plus petit ou égal" valeur2 :
nombre <= 100
Valeur1 "plus grand ou égal" valeur2 :
nombre >= 100
Valeur1 "différent de" valeur2 :
nombre != 100

8. Quizz

if(prop <= 100){…}Dans cette structure conditionnelle, la condition est

"Si la variable prop est plus petite que 100"

"Si la variable prop est plus grande ou égale à 100"

"Si la variable prop est plus petite ou égale à 100"

9. Appliquez : comparer des valeurs numériques

"Ecrire un programme qui demande (dans un champ de formulaire) le nombre de BD de Spirou et Fantasio que vous avez dans votre bibliothèque. Si le nombre est plus grand que 45, on obtient l’alerte suivante : "Vous avez presque toute la collection !". Sinon, on obtient l’alerte : "Il vous manque encore quelques tomes avant que la collection soit complète"."

Résultat

Spirou et Fantasio

Combien de BD de Spirou & Fantasio avez-vous?

Solution

<html>

      <head>

            <title>Collection</title>

            <script>

                  var total;

                  function Main(){

                        total = parseFloat(document.BD.spirou.value);

                        if(total > 45){

                               alert("Vous avez presque toute la collection");

                  }else{

                        alert("Il vous manque encore quelques tomes avant que la collection soit complète");

            </script>

      </head>

      <body>

            <h3>Spirou et Fantasio</h3>

            <p>Combien de BD de Spirou & Fantasio avez-vous?</p>

            <form name="BD">

                  <input type="Text" name="spirou">

                  <input type="Button" value="ENREGISTRER" onclick="Main();">

            </form>

      </body>

</html>

10. Travailler avec plusieurs conditions

Il est également possible d’avoir plus d’une condition dans un programme.
Voici l’énoncé d’un programme de jeu:
"L’ordinateur choisit un nombre au hasard entre 0 et 100. L’utilisateur doit le deviner et proposer un nombre. Le programme vérifie si la proposition de l’utilisateur est égale à son nombre… Si c’est le cas, l’utilisateur a gagné ! Si la proposition est plus petite que le nombre, on aide l’utilisateur avec l’indice "plus grand". Si la proposition est plus grande que le nombre, on aide l’utilisateur avec l’indice "plus petit"." (nom du fichier : jeu.htm)
Remarquez que l’on retrouve 3 "si" dans l’énoncé, il y a donc plusieurs conditions et plusieurs traitements !
Voici la syntaxe d’une structure conditionnelle à plusieurs conditions :

if (condition1){

   // traitement A

}else if(condition2){

   // traitement B

}else{

   // traitement C

Remarque : Vous pouvez ajouter autant de blocs "else if(…){…}" que vous le souhaitez.
A la page suivante, nous vous expliquons comment choisir un nombre au hasard entre 0 et 100.

11. Un nombre au hasard entre 0 et 100

Voici l’instruction qui permet de choisir un nombre au hasard entre 0 et 100 :

var nombre;

nombre=Math.round(Math.random()*100);

Math.random() est une commande qui prend un nombre décimal au hasard entre 0 et 1 :
0.7813682387203784
Ensuite, on multiplie ce nombre par 100 :
78,13682387203784
Et on arrondit ce résultat à l’aide de la commande Math.round() :
78
Avec cette méthode, on obtiendra toujours un nombre entre 0 et 100. C’est une simple formule mathématique, ne vous inquiétez pas si vous ne vous sentez pas à l’aise devant cette instruction. Courage !
Vous avez maintenant toutes les clés en main pour développer le programme. Essayez de créer ce programme de jeu, le détail de la solution se trouve à la page suivante.

12. La solution de l’exercice

Plusieurs conditions dans une structure conditionnelle
Voici le code de la structure conditionnelle qui compare la valeur de la proposition à la valeur du nombre choisi au hasard :

if(proposition==nombre){

   // si la proposition est égale au nombre, c’est gagné !

    alert("gagné !");

}else if(proposition < nombre){

   // si la proposition est inférieure au nombre, l’indice est : " plus grand ".

    alert("Le nombre à trouver est plus grand !");

 }else{

   // si la proposition n’est ni égale, ni inférieure,

   // c’est qu’elle est supérieure au nombre.

   // Dans ce cas, l’indice est : " plus petit ".

   alert("Le nombre à trouver est plus petit ! ");

Mettons tous ces morceaux de codes bout à bout pour former le programme :

<html>

   <head>

      <title>

         Le jeu du bon numéro

      </title>

      <script>

         var nombre;

          var proposition;

          // on choisit le nombre au hasard en début de programme

         nombre = Math.round(Math.random()*100);

          function Main(){

            proposition=parseFloat(document.jeu.prop.value);

             if(proposition==nombre){

                // si la proposition est égale au nombre, c’est gagné !

                alert("gagné !") ;

             }else if(proposition<nombre){

               // si la proposition est inférieure au nombre, l’indice est : "plus grand".

               alert("Le nombre à trouver est plus grand !");

            }else{

               // si la proposition n’est ni égale, ni inférieure,

               // c’est qu’elle est supérieure au nombre.

               // Dans ce cas, l’indice est : "plus petit".

               alert("Le nombre à trouver est plus petit !");

      </script>

   </head>

   <body>

   <h1>Le jeu du bon numéro</h1>

   <form name="jeu">

      <input type="text" name="prop">

         <input type="button" value="verifier!" onclick="Main()">

         </form>

      </body>

   </html>

Enregistrez ce code sous "jeu.htm" et exécutez-le.

13. Conclusion

Dans un programme, il peut y avoir plusieurs traitements différents en fonction de plusieurs conditions. Si la condition 1 est VRAIE, on effectue le traitement A, si la condition 2 est VRAIE, on effectue le traitement B, si la condition 3 est VRAIE, on effectue le traitement C, …, sinon on effectue un traitement X.
Voici le "squelette" de la structure conditionnelle "if" avec plusieurs conditions:
if (condition1 ){
traitement A
}
else if (condition2 ){
traitement B
}
else if (condition3 ){
traitement C
}
…
}else { traitement X
}
Remarque : On peut insérer autant de blocs "else if" que l’on veut, mais il faut éviter d’avoir trop de conditions différentes car cela complique le code…
Les structures conditionnelles sont souvent utilisées pour éviter des erreurs dans le programme :
- Si l’utilisateur n’a pas encodé de valeur
- Si la valeur encodée n’est pas correcte
- …

14. Appliquez : plusieurs conditions

Créez un programme qui demande à l’utilisateur la quantité de chocolats mangée chaque jour.
SI la réponse est "égal à 0" => alerter "Vous devriez ! Le chocolat est bon pour la santé !"
SI la réponse est "plus petit que 5" => alerter "Vive le chocolat !"
SINON => afficher le message : "La gourmandise est un vilain défaut !"

Résultat

Solution

<html>

      <head>

            <title>Aimez-vous le chocolat?</title>

            <script>

                  var reponse;

                  function Main(){

                        reponse = parseFloat(document.choco.reponse.value);

                        if(reponse == 0){

                               alert("Vous devriez en manger ! Le chocolat est bon pour la santé!");

                        }else if(reponse < 5){

                               alert("Vive le chocolat !");

                        }else{

            \t    alert("La gourmandise est un vilain défaut!");

            </script>

      </head>

      <body>

            <form name="choco">

                  <h3>Combien de fois par jour mangez-vous du chocolat ?</h3>

                  <input type="text" name="reponse"> fois<br>

                  <input type="button" value="Enregistrer la réponse" onClick="Main();">

            </form>

      </body>

</html>

15. Synthèse

Dans ce module, vous avez appris à créer des programmes qui effectuent différents traitements en fonction d’une ou plusieurs conditions.
Pour effectuer différents traitements en fonction d’une condition, on utilise une structure conditionnelle.
Dans une condition, on compare la valeur de deux éléments.

16. Mémo

Les conditions

Les structures conditionnelles permettent de faire une action ou une autre en fonction d'un résultat.
Grâce à elles, nous pouvons faire des comparaisons ou des tests, afin d'éviter d’effectuer des traitements inutiles ou d’obtenir des erreurs.
Dans un programme, il peut y avoir deux traitements différents en fonction d’une condition. Si la condition est VRAIE, on effectue un traitement A ; sinon la condition est FAUSSE, on effectue donc un traitement B.
Une condition se présente de cette façon:
Si la condition est vraie
On effectue le traitement A
Sinon
On effectue le traitement B
Voici la version en code:

if (motpropose == "bachibouzouk") { //condition

alert("Vous avez le droit d’entrer!") // traitement A

} else {

alert("Vous n’avez PAS le droit d’entrer"); // traitement B

Pensez à indenter votre code, et à fermer toute accolade ouverte directement. Egalement, le "if" et le "else" doivent être écrits en minuscules.
La comparaison se fait grâce au "==", tandis qu'une assignation de valeur se fait avec un simple "=".
La comparaison:
Egalité: ==
nombre == 100
Plus petit que: <
nombre < 100
Plus grand que: >
nombre > 100
Plus petit ou égal: <=
nombre <= 100
Plus grand ou égal: >=
nombre >= 100
Différent de: !=
nombre != 100

Plusieurs conditions imbriquées:

Il est possible de faire des conditions à plusieurs niveaux, en les imbriquant les unes dans les autres:
SI la condition 1 est remplie, effectuer le TRAITEMENT A, SINON SI la condition 2 est remplie effectuer TRAITEMENT B (et ainsi de suite...), SINON effectuer le TRAITEMENT X.
Voici cet exemple illustré en code:
if (condition1){
traitement A
}
else if (condition2){
traitement B
}
else if (condition3){
traitement C
}
...
else {
traitement X
}
On peut imbriquer autant de "if" que l'on veut, mais attention à garder un code lisible!
Toute la difficulté du jeu consiste à ne pas commettre d'erreur de syntaxe. Pensez à traiter vos structures conditionnelles une à la fois, afin d'éviter toute erreur éventuelle.

Les opérateurs logiques

Grâce à l'opérateur logique || (OU), vous pouvez diminuer le code nécessaire pour vos structures conditionnelles, en reprenant plusieurs conditions en un seul test:
if(proposition == "" || proposition > 100 || proposition < 0){ traitement }
On teste 3 choses: si la valeur entrée est vide, si elle est supérieure à 100, ou si elle est inférieure à 0, alors on effectue le traitement.
L'opérateur logique && (ET) permet également de grouper des conditions en les cumulant:
if(proposition != "" && proposition >= 0 && proposition <= 100){ traitement }
Si la proposition n'est pas vide, ET si elle est supérieure ou égale à 0, ET si elle est inférieure ou égale à 100, on effectue le traitement.

Instructions mathématiques

Afin de faire des tests plus poussés, il peut être utile de connaître les instructions suivantes:
Math.random() est une commande qui prend un nombre décimal au hasard entre 0 et 1
Math.round() permet d'arrondir un nombre décimal en entier.

Compléments

En complément, vous pourrez approfondir le travail avec plusieurs conditions. Nous vous proposons aussi, comme défi, de réaliser vous-même un quizz interactif.

A. Imbrication de structures conditionnelles

Voici une spécification supplémentaire pour le programme "jeu.htm" :
"Si l’utilisateur n’a inséré aucune valeur dans le formulaire, afficher l’alerte suivante : "Veuillez introduire un nombre entre 0 et 100 !", sinon on effectue les tests de comparaison." (nom du fichier : jeuV2.htm)
En d’autres termes :
Si la proposition est videAlors afficher "Veuillez introduire un nombre entre 0 et 100 !"Sinon
Si la proposition est égale au nombre
Alors afficher "gagné !"
Sinon Si la proposition est inférieure au nombre
Alors afficher "Le nombre à trouver est plus grand !"
Sinon (la proposition est supérieure au nombre)
Afficher "Le nombre à trouver est plus petit !"
Il y a deux conditions imbriquées, voici le code correspondant à ces conditions :

if(proposition==""){

   alert("Veuillez introduire un nombre entre 0 et 100  ! ") ;

}else{

   if (proposition==nombre){

   alert("gagné !");

}else if(proposition < nombre){

    alert("Le nombre à trouver est plus grand !");

}else{

alert("Le nombre à trouver est plus petit ! ");

Complétez votre code et enregistrez-le sous "jeuV2.htm".

B. Conclusion

On peut utiliser plusieurs structures conditionnelles imbriquées (emboîtées).
La difficulté est de ne pas commettre d’erreur de syntaxe. Pour cela, soyez systématique : commencez par écrire le squelette de la première structure conditionnelle avant de vous attaquer à la seconde.
Indentez votre code, il sera beaucoup plus clair !

if(condition A){

   // Instruction A

}else{

   if(condition B){

      // Instruction B1

   }else{

      // Instruction B2

C. Plusieurs comparaisons à la fois

Encore une spécification supplémentaire pour le jeu du bon numéro :
"Si l’utilisateur n’a inséré aucune valeur ou si la proposition est plus grande que 100 ou si la proposition est plus petite que 0, afficher l’alerte "Veuillez introduire un nombre entre 0 et 100 !"" (nom du fichier : jeuV3.htm)
Il est possible de vérifier ces 3 conditions à la suite en utilisant "else if" :Si la proposition est videAlors afficher l’alerte d’erreurSinon Si la proposition est supérieure à 100Alors afficher l’alerte d’erreurSinon Si la proposition est inférieure à 0Alors afficher l’alerte d’erreur
Remarquez que ces 3 conditions mènent à la même erreur : "Veuillez fournir un nombre entre 0 et 100 !" Il y a donc répétition de l’instruction alert("Veuillez fournir un nombre entre 0 et 100 !") ;
Groupons ces 3 conditions :

 if(proposition== "" || proposition>100 || proposition<0){

    alert("Veuillez fournir un nombre entre 0 et 100 !") ;

 } else{

// traitement B

Voici la traduction de cette condition :Si la proposition est vide OU si la proposition est supérieure à 100 OU si la proposition est inférieure à 0Alors afficher l’alerte d’erreur
|| signifie "OU", c’est un opérateur logique : il permet de grouper des conditions
Complétez votre code et enregistrez votre programme sous "jeuV3.htm".

D. Encore des comparaisons

Il existe d’autres opérateurs logiques : && signifie "ET" et permet également de grouper des conditions.
Exemple :
Si la proposition n’est pas vide ET si la proposition est plus grande ou égale à 0 ET si la proposition est inférieure ou égale à 100
Alors effectuer la comparaison entre la proposition et le nombre.
… Et le code correspondant :
if(proposition != "" && proposition >= 0 && proposition <= 100){
… traitement A
}

E. En résumé

Le squelette de structures conditionnelles imbriquées :

if(condition A){

// Instruction A

}else{

if(condition B){

// Instruction B1

}else{

// Instruction B2

Les opérateurs conditionnels :
"ET"

 if(a == b && b == c){

// alors a est égal à c

"OU"

 if(a < b || a > b){

    // alors a est soit plus grand, soit plus petit que b (mais n’est pas égal à b)

F. Défi ! Un petit quizz

Voici l’énoncé du défi :
"Ecrire un programme qui présente un petit questionnaire (voir illustration ci-dessous). Lorsque l’utilisateur envoie ses réponses, une fenêtre d’alerte affiche son score."

1. Objectifs

Dans ce module, vous apprendrez à créer des structures dites "itératives" pour répéter un traitement. Ce type de structure possède quelques paramètres de configuration que vous apprendrez à manipuler pour créer une répétition personnalisée.

2. Dire plusieurs fois la même chose

Rappelez-vous le module 4 ! Voici à nouveau l’énoncé de l’exercice :
"Afficher 3 fois le texte "Bienvenue dans l’univers de la BD" dans le document" (nom du fichier : repeter3fois.htm)
Vous allez encore améliorer le code de ce programme de manière à le rendre le plus concis possible.
Vous remarquez tout de suite qu’il y a une répétion (Afficher 3 fois un texte). Plutôt que d’écrire plusieurs fois document.write, vous allez créer un programme qui répète le traitement document.write(message).
Pour répéter un traitement, on utilise une structure itérative, on parle également de boucle.
Voici le code du programme qui effectue un répétition de traitement :

<html>

   <head>

      <title>

         Afficher 3 fois le texte "Bienvenue dans l’univers de la BD" dans le document

      </title>

      <script>

         var message;

         function Main(){

         message="Bienvenue dans l’univers de la BD !<br>";

            for(compteur=1;compteur<4;compteur=compteur+1){

               document.write(message);

      </script>

    </head>

   <body onload="Main()">

    </body>

 </html>

Voici la traduction en français du code for… :
"Pour un compteur valant 1, tant que le compteur est inférieur à 4, j’effectue le traitement document.write(message) et j’augmente le compteur de 1 à chaque tour"
Enregistrez ce code sous "repeter3fois.htm" et exécutez-le.

3. Conclusion

Lorsque l’on souhaite répéter plusieurs fois un traitement, on utilise une structure itérative (ou boucle).
Par exemple :

for(compteur=1;compteur<4;compteur=compteur+1){

   document.write(message);

Pour déterminer le nombre de répétitions, on utilise une variable qui va jouer le rôle de compteur (c’est pourquoi on appelle souvent cette variable "compteur". On peut la nommer également "i").
A chaque répétition, le compteur va augmenter automatiquement. On dit que le compteur s’incrémente automatiquement.

4. Appliquez : dire plusieurs fois la même chose

"Modifier le code du programme repeter3fois.htm de manière à afficher 5 fois le texte "La BD est à la fête !" dans le document".

Résultat

Solution

<html>

      <head>

            <title>Répéter 3 fois</title>

            <script>

                  var message;

                  function Main(){

                        message = "La BD est à la fête !<br>" ;

                        for(compteur=1 ;compteur<6 ;compteur=compteur+1){

                               document.write(message) ;

            </script>

      </head>

      <body onload="Main();">

      </body>

</html>

5. Quizz

Une structure itérative est également appelée

Boucle

Bloc

Structure

Une structure itérative permet :

D’effectuer un traitement en fonction d’une condition

D’effectuer plusieurs fois le(s) même(s) traitement(s)

6. Le squelette d’une boucle

Afin de n’oublier aucun paramètre, il est conseillé de toujours écrire le squelette d’une structure itérative :

for(valeur initiale;test de répétition;incrément){

// traitement

Pour effectuer le compte des répétitions, on donne 3 paramètres :
1. une valeur de départ du compteur (valeur initiale) :
compteur=1
2. une condition de fin de répétition (test de répétition) :
compteur<4 qui signifie : tant que le compteur est inférieur à 4, on continue la répétition
3. la façon dont le compteur va augmenter, s’incrémenter (incrément) :
compteur= compteur+1 qui signifie : le compteur s’augmente de 1 à chaque fois.
Ces 3 paramètres sont séparés par un point-virgule : ;
En résumé :
Valeur initiale : compteur=1Test de répétition : compteur < 4Incrément : compteur = compteur + 1
Il ne vous reste plus qu’à remplacer les commentaires en rouge par le contenu adéquat.

7. Répéter 5 fois un traitement

Comment créer une boucle qui répète 5 fois un traitement ?
Partons du squelette de la structure itérative "for" :

for(i=valeur initiale;test de répétition;incrément){

   // traitement

Pour commencer, on va initialiser le compteur à 1 :

for(i=1; test de répétition;incrément){
// traitement
}
Ensuite, on augmente le compteur i de 1 à chaque tour :

for(i=1;test de répétition;i=i+1){
traitement
}
Pour n’effectuer le traitement que 5 fois, la valeur du compteur doit rester inférieure à 6 :

for(i=1;i<6;i=i+1){
traitement
}
En résumé :
Valeur initiale : 1Test de répétition : i < 6Incrément : i = i + 1
Le compteur passera par les valeurs suivantes : 1,2,3,4,5,6 STOP

8. Quizz

Dans une boucle, le compteur permet de

Compter le nombre de répétitions à effectuer

Numéroter les traitements

Le paramètre qui permet au compteur d’augmenter automatiquement s’appelle

Le compteur

L’incrément

Le test

9. Exercice : compter jusqu’à 5

"Ecrire un programme qui énumère les nombres de 1 à 5 dans le document" (nom du fichier : compter.htm)

C’est facile ! Il vous suffit de créer une boucle qui affiche la valeur du compteur dans le document !

Un petit coup de pouce…

Valeur initiale : 1

Test de répétition : i < 6

Incrément : i = i + 1

for(i=valeur initiale ; test de répétition ; incrément){

document.write(i + " ");

// on ajoute un espace après pour ne pas coller les nombres

}

Enregistrez votre code sous "compter.htm" et exécutez-le. 10. Exercice : compter à rebours

"Ecrire un programme qui énumère les nombres de 5 à 0 dans le document" (nom du fichier : compteARebours.htm)
Remarquez qu’ici il faut compter "à l’envers".Valeur initiale : 5Test de répétition : i > -1Incrément : i = i - 1
Un petit coup de pouce…

for(i=valeur initiale ; test de répétition ; incrément){

   document.write(i + "&nbsp;");

    // on ajoute un espace après pour ne pas coller les nombres

Enregistrez votre code sous "compteARebours.htm" et exécutez-le.
Remarque : Le test de répétition aurait pu être i >= 0, il est équivalent à i > -1.

11. Quizz

Laquelle de ces boucles ne compte pas de 0 à 100 ?

for(i=0;i<101;i=i+1){document.write(i + " ") ; }

for(i=0;i<100;i=i+1){document.write(i + " ") ; }

for(i=0;i<=100;i=i+1){document.write(i + " ") ; }

12. Exemple : sauter des valeurs

Jusqu’à présent, on a incrémenté le compteur de 1. Voici un exemple qui incrémente le compteur de 5 :
"Ecrire un programme qui donne tous les multiples de 5 jusqu’à 100" (nom du fichier : tableDe5.htm)
Remarquez qu’ici, il faut compter en sautant des valeurs. C’est l’incrément qui va vous permettre de sauter des valeurs :
Un petit coup de pouce…
Valeur initiale : 5Test de répétition : i < 101 (ou i <= 100)Incrément : i = i + 5

for(i=valeur initiale ; test de répétition ; incrément){

   document.write(i + "&nbsp;");

    // on ajoute un espace après pour ne pas coller les nombres

Enregistrez votre code sous "tableDe5.htm" et exécutez-le.

13. Conclusion

Les paramètres d’une boucle permettent de personnaliser le compteur.
La valeur du compteur peut augmenter (compte) ou diminuer (décompte) selon la définition de l’incrément.
Faites très attention aux boucles infinies !
Exemple de boucle infinie :

for(i=1;i>0;i=i+1){

   document.write(i+"&nbsp;");

Ici, la condition i > 0 est toujours vraie : la répétition ne s’arrêtera jamais ! Le navigateur va se "planter" (comme on dit dans le jargon !) car cela lui prend trop de ressource d’écrire à l’infini !
Pour éviter les boucles infinies, il faut que la condition de répétition devienne, à un moment donné, fausse.

14. Quizz

La boucle for(i=0 ; i < 100 ; i = i - 1){…}

Est infinie

Se répète 100 fois

Se répète 101 fois

La boucle for(i=0; i < 5; i = i + 5){…} se répète

Une fois

Quatre fois

Cinq fois

15. Synthèse

Pour éviter d’écrire plusieurs fois le même traitement, on utilise une structure itérative (ou boucle) qui effectuera ce traitement plusieurs fois d’affilée.
La structure itérative "for" permet de répéter le même traitement plusieurs fois grâce à l’utilisation d’un compteur qui permet d’évaluer le nombre de répétitions à effectuer.
Dans ce module, vous avez appris à répéter plusieurs fois un traitement comme document.write(message) ou document.write(compteur). Dans le module suivant, vous apprendrez à utiliser la structure itérative for pour parcourir les données d’un tableau.

16. Mémo

Répéter une action

Les structures itératives (ou boucles) nous permettent de répéter un traitement automatiquement, en diminuant le risque d'erreurs et en rendant son programme plus concis.
Voici le code du programme qui effectue un répétition de traitement:
for(compteur=1 ;compteur<4 ;compteur=compteur+1){
document.write(message) ;
}
Ce qui pourrait être traduit par: "Pour un compteur valant 1, tant que le compteur est inférieurà 4, j’effectue le traitement document.write(message) et j’augmente le compteur de 1 à chaque tour"
Le rôle du compteur est de déterminer le nombre de répétitions. A chaque passage dans la boucle, celui-ci s'incrémente de 1 dans l'exemple ci-dessus. Sans lui, on ne sortirait jamais de la boucle.
Notez qu'on peut également décrémenter le compteur, lui additioner des valeurs 2 par 2, tant qu'on arrive à un moment à la valeur de sortie.
Dès que la valeur de sortie est atteinte (ici quand compteur<4 devient faux), on quitte la boucle sans effectuer le traitement.
Attention aux boucles infinies!

for(i=1;i>0;i=i+1){

   document.write(i+"&nbsp;");

Dans ce cas de figure, la condition sera toujours vraie, vous ne sortirez jamais de votre boucle, ce qui peut causer un plantage de votre navigateur.
Pour éviter les boucles infinies, il faut que la condition de répétition devienne, à un moment donné, fausse.

Syntaxe avancée

Pour incrémenter le compteur de 1, on effectue l’opération suivante :

i = i + 1;

On peut aussi l'écrire des façons suivantes:

i+=1;

 i++;

Ce sont trois syntaxes pour le même résultat. Vous pouvez remplacer le + par un - si vous souhaitez décrémenter votre compteur.

Combiner une répétition et une action

On peut très bien combiner une boucle for et une condition if:

for(i=1;i<= 50;i++){

   if(i/7==parseInt(i/7) ){

   document.write("<b>" + i + "</b>&nbsp;");

 }else{

   document.write(i + "&nbsp;");

parseInt() transforme une valeur décimale en entier.
Cet exemple compte de 1 à 50, et vérifie si le compteur divisé par 7 donne un entier, auquel cas il l'affiche en gras, sinon il l'affiche en normal.

Sortir d'une boucle

Pour sortir d’une boucle, il suffit d’utiliser l’instruction break ;
Break est un mot réservé qui permet de sortir d’une boucle:

for( ){

   if( ){

   break ; // on sort de l’instruction

}else{

// instruction

Compléments

Dans les compléments, vous découvrirez ce qu'est i++ et apprendrez à combiner boucles et conditions. Vous pourrez aussi mettre en pratique la matière de ce chapitre au travers de plusieurs exercices supplémentaires.

A. L’incrément

Pour incrémenter le compteur de 1, on effectue l’opération suivante :
i = i + 1 qui signifie que la variable i augmente de 1.
Voici d’autres opérations équivalentes à i = i + 1 :
i += 1
ou encore
i++
++ est un opérateur qui augmente automatiquement une variable de 1.
De même pour i = i + 5 :
i += 5
On retrouve les mêmes équivalences pour la soustraction :
i = i – 1 est équivalent à
i -= 1
i--

B. Quizz

Quelle opération n’est pas équivalente à i++ ?

i += 1

i = 1 + i

i = 1

Quelle opération est équivalente à i -= 5 ?

i = i - 5

i = 5 – i

i == 5

C. Une condition dans une boucle

"Ecrire un programme qui affiche tous les nombres de 1 à 50. A chaque fois que le nombre est un multiple de 7, il est écrit en gras." (nom du fichier : tableDe7V2.htm)
Voici le début du résultat affiché dans le document : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 …
Comment vérifier si un nombre est multiple de 7 ?
Il suffit de vérifier que le quotient de la division du nombre par 7 est bien un nombre entier :

if(nombre/7==parseInt(nombre/7)){

   // le nombre est un multiple de 7

nombre/7 : quotient en nombre décimal (à virgule)
parseInt(nombre/7) : prend uniquement le nombre entier du quotient

Par exemple, vérifions si 10 est un multiple de 7 :10/7 = 1,42857… (le quotient en nombre décimal)parseInt(10/7) = 1 (uniquement le nombre entier du quotient)
=> 1,42857… n’est pas égal à 1, donc le nombre 10 n’est pas divisible par 7 car le quotient n’est pas un nombre entier !
Vérifions si 14 est multiple de 7 :14/7 = 2parseInt(14/7) = 2
=> 2 est égal à 2, donc le nombre 14 est divisible par 7 car le quotient est un nombre entier !
Remarque : parseInt() est une commande qui convertit n’importe quel nombre en nombre entier.
Ex : parseInt(3,1415) = 3
parseInt(1234,56789) = 1234
Voici la boucle qui affiche tous les nombres de 1 à 50 :

for(i=1;i<= 50;i++){

   document.write(i + "&nbsp;");

Il reste à vérifier si le nombre est un multiple de 7 :

for(i=1;i<= 50;i++){

   if(i/7==parseInt(i/7)){

   document.write("<b>" + i + "</b>&nbsp;");

}else{

   document.write(i + "&nbsp;");

Complétez ce code et enregistrez votre programme sous "tableDe7V2.htm".

D. Conclusion

On peut imbriquer une structure conditionnelle if dans une boucle for.
Voici le squelette d’une structure conditionnelle imbriquée dans une boucle for :

for( ){

   if( ){

      // instruction

   }else{

      // instruction

}}

Soyez attentif ! Ne faites pas d’erreur de syntaxe en oubliant une parenthèse, une accolade ou un point-virgule.

E. Appliquez : un if dans un for

"Ecrire un programme qui affiche tous les nombres de 1 à 100. Tous les multiples de 9 doivent s’afficher en gras".

F. Sortir d’une boucle

"Ecrire un programme qui demande (via un formulaire) un nombre à l’utilisateur. Le programme se met à afficher tous les nombres de 1 à 100. S’il rencontre le nombre introduit par l’utilisateur, il s’arrête, sinon il continue jusqu’à 100." (Nom du fichier : arreteCompter.htm)
Pour sortir d’une boucle, il suffit d’utiliser l’instruction break ; .
Break est un mot réservé qui permet de sortir d’une boucle.

for( ){

   if( ){

      break; // on sort de l’instruction

   }else{

      // instruction

Essayez d’écrire le code de ce programme et enregistrez-le sous "arreteCompter.htm".

G. Défi ! Ecrire de plus en plus grand

Voici l’énoncé de ce défi :
"Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" 5 fois et de plus en plus grand."
Le résultat doit ressembler à ceci :

1. Objectifs

L’objectif de ce module est de stocker des collections de valeurs sous un seul nom de variable. Ce type de variable permettant de grouper plusieurs valeurs sous un même nom s’appelle tableau.
Dans ce module, vous apprendrez à créer des variables de type tableau, à stocker un ensemble de valeurs dans un tableau et à afficher les différentes valeurs d’une collection de données.

2. Une collection de bandes dessinées

"Ecrire un programme qui affiche le titre d’une BD du petit Spirou en fonction du numéro introduit par l’utilisateur dans un champ de formulaire". (nom du fichier : afficheBD.htm)
Comment s’y prendre ?
Il faudrait stocker tous les titres de la série BD dans le programme pour ensuite pouvoir les récupérer via leur numéro.
1re solution :
On stocke chaque titre dans une variable :

BD1="Dis Bonjour à la dame !";

BD2="Tu veux mon doigt ?";

// etc.

Ensuite, on récupère le numéro dans le champ du formulaire, sans oublier de convertir cette valeur en nombre :

numero=parseFloat(document.BD.numero.value);

Et on va chercher le titre correspondant au numéro :

if (numero==1){

   alert("Le titre correspondant au numéro est : "+BD1);

}else if (numero==2){

   alert("Le titre correspondant au numéro est : "+BD2);

3. 2e solution : utilisation d’un tableau

Les titres "Dis bonjour à la dame", "Tu veux mon doigt ?", … sont liés entre eux car ils font tous partie d’une même série de bandes dessinées. Groupons ces valeurs dans une seulevariable spirou de type tableau.
Un tableau est une variable qui permet de stocker plusieurs valeurs sous un même nom avec une indexation (numérotation) :

var spirou=new Array();

// déclaration de la variable spirou qui est de type tableau

spirou=["Dis Bonjour à la dame !","Tu veux mon doigt ?","Mais ! Qu’est-ce que tu fabriques ?","C’est pour ton bien !","Merci qui ?","N’oublie pas ta capuche !","Demande à ton père !","T’as qu’à t’retenir !","C’est pas de ton âge !","Tu comprendras quand tu seras grand !"];

 // assignation de l’ensemble des valeurs dans le tableau

Voici une représentation visuelle du tableau spirou :

Spirou
0	"Dis Bonjour à la dame !"
1	"Tu veux mon doigt ?"
2	"Mais ! Qu’est-ce que tu fabriques ?"
3	"C’est pour ton bien !"
4	"Merci qui ?"
5	"N’oublie pas ta capuche !"
6	"Demande à ton père !"
7	"T’as qu’à t’retenir !"
8	"C’est pas de ton âge !"
9	"Tu comprendras quand tu seras grand !"

Attention ! Remarquez que l’indexation d’un tableau commence à 0. Un tableau qui contient 10 valeurs a un indice qui va de 0 à 9 !

4. Atteindre une donnée d'un tableau

Pour accéder à un titre de BD, il suffit d’afficher la variable spirou avec l’indice souhaité.
ATTENTION ! Comme le premier album est positionné à l’indice 0, si on souhaite atteindre le titre correspondant au tome 3, il faudra demander la valeur correspondant à l’indice 2.
Il y a donc une petite astuce : pour atteindre le titre d’un album, il faut diminuer le numéro de 1 pour connaître son indice dans le tableau ;-)
Accédons par exemple au titre correspondant au tome 3 :
alert("Le titre correspondant au numéro est :" + spirou[2]) ;
Donne comme résultat :
Le titre correspondant au numéro est : "Mais ! Qu’est-ce que tu fabriques ?"
Pour afficher le titre correspondant à la valeur insérée par l’utilisateur dans le formulaire:

numero=parseFloat(document.BD.numero.value)–1;

// on diminue le nombre introduit pour connaître l’indice

alert("Le titre correspondant au numéro est : "+spirou[numero]);

Assemblez ces morceaux de code pour former le programme qui affiche le titre correspondant au numéro inséré par l’utilisateur dans le formulaire.
Enregistrez le code sous "AfficheBD.htm" et exécutez-le.

5. Conclusion

Lorsque l’on a un ensemble de valeurs qui forment une liste (comme la liste des mois, liste des membres d’un club, liste des tomes d’une BD, …), on les stocke ensemble dans une seule variable de type tableau.
On accède à différentes valeurs du tableau par un indice (position de l’élément dans le tableau).
L’indice d’un tableau commence toujours à 0. La 1re valeur d’un tableau a donc l’indice 0.

6. Quizz

L’indice minimum d’un tableau est :

Défini en fonction du nombre de valeurs se trouvant dans le tableau

Si on veut atteindre le titre du tome 3 du petit Spirou, quelle commande doit-on utiliser ?

spirou[2]

spirou["3"]

spirou[3]

7. La propriété "length"

La variable de type "tableau" présente la propriété length qui signifie longueur:

var spirou=new Array();

// déclaration de la variable spirou qui est de type tableau

var numero;

spirou=["Dis Bonjour à la dame !","Tu veux mon doigt ?","Mais ! Qu’est-ce que tu fabriques ?","C’est pour ton bien !","Merci qui ?","N’oublie pas ta capuche !","Demande à ton père !","T’as qu’à t’retenir !","C’est pas de ton âge !","Tu comprendras quand tu seras grand !"];

// assignation de l’ensemble des valeurs dans le tableau

alert(spirou.length);

La propriété length de la variable spirou renvoie la taille du tableau. Dans ce cas-ci, la valeur retournée est 10 car il y a 10 données dans le tableau.
Cette propriété permet de calculer l’indice maximum d’un tableau.
Voici le calcul qui permet de trouver cet indice maximum :
on prend la taille du tableau (10) et on lui retire 1 (10-1=9).
Règle générale :
Indice minimum : 0
Indice maximum : taille du tableau – 1
Vous allez voir maintenant à quoi sert cette propriété length d’une variable de type tableau.
Mais avant cela… un petit quizz !

8. Quizz

Soit un tableau contenant 12 valeurs, quelle est la valeur de l’indice maximum ?

var jour= new Array() ; jour = ["lundi","mardi","mercredi","jeudi","vendredi","samedi","dimanche"] ; Quelle est la taille de ce tableau ?

Quelle commande permet de trouver l’indice maximum d’un tableau ?

IndiceMax = tableau.length

IndiceMax = tableau.length - 1

IndiceMax = tableau.length + 1

9. Afficher toutes les valeurs d’un tableau

"Ecrire un programme qui affiche la collection complète des albums du Petit Spirou dans la page HTML." (nom du fichier : AfficheListe.htm)
Jusqu’à présent, vous n’avez fait qu’afficher une valeur du tableau à la fois. Il vous faut maintenant afficher TOUTES les valeurs du tableau spirou.
Pour cela, vous allez utiliser la structure itérative "for" pour parcourir le tableau et afficher toutes ses valeurs :Valeur initiale du compteur = indice minimum du tableau : i = 0Test de répétition de la boucle : i < longueurTableauIncrément : i = i + 1
Avec une telle boucle, le compteur de la boucle passera par les valeurs suivantes : 0,1,2,3,4,5,6,7,8,9,10
Ce qui correspond exactement aux différents indices du tableau !
Voici le code de la boucle qui parcourt le tableau spirou :

for( i=0;i<spirou.length;i=i+1){

   document.write(spirou[i]+"<br>");

Il ne reste plus qu’à mettre cette boucle dans la function Main() de votre programme et appeler la fonction principale au chargement de la page.
Enregistrez le code sous afficheListe.htm et exécutez votre programme.

Résultat attendu

10. Quizz

Pour parcourir toutes les données d’un tableau, on utilise

Une structure itérative

Une structure conditionnelle

Une structure indicative

Pour parcourir TOUTES les données d’un tableau, on utilise l’incrément :

i= i - 1

i= i + 1

i = i + 5

11. Synthèse

Grâce à l’utilisation des variables de type "tableau", vous pouvez grouper plusieurs données qui sont liées entre elles.
Cela vous évite la création d’un nombre important de variables de type "chaîne de caractères" ou de type "numérique".
Grâce à l’indexation des données dans un tableau, on peut aisément retrouver une donnée, il suffit de connaître sa position dans le tableau.
On peut connaître la taille d’un tableau grâce à la propriété length.
Pour parcourir TOUTES les valeurs d’un tableau, on utilise une structure itérative "for" dont le compteur vaut successivement les valeurs des indices du tableau.

12. Mémo

Les tableaux

Jusqu'ici, les variables permettaient de stocker une seule valeur à la fois.
Les tableaux permettent d'en grouper plusieurs en un seul endroit, afin d'alléger son code et de le rendre plus dynamique.
Voici la déclaration d'un tableau:

var spirou = new Array();

Et la façon de lui assigner des valeurs:

spirou=["Dis Bonjour à la dame !","Tu veux mon doigt ?","Mais ! Qu’est-ce que tu fabriques ?","C’est pour ton bien !","Merci qui ?","N’oublie pas ta capuche !","Demande à ton père !","T’as qu’à t’retenir !","C’est pas de ton âge !","Tu comprendras quand tu seras grand !"];

Voici deux autres façons de créer le même tableau:
La première:

var spirou=new Array("Dis Bonjour à la dame !","Tu veux mon doigt ?","Mais ! Qu’est-ce que tu fabriques ?","C’est pour ton bien !","Merci qui ?","N’oublie pas ta capuche !","Demande à ton père !","T’as qu’à t’retenir !","C’est pas de ton âge !","Tu comprendras quand tu seras grand !");

Et la seconde:

var spirou=new Array();

spirou[0]="Dis Bonjour à la dame !";

spirou[1]="Tu veux mon doigt ?";

spirou[2]="Mais ! Qu’est-ce que tu fabriques ?";

spirou[3]="C’est pour ton bien !";

// ...

spirou[9]="Tu comprendras quand tu seras grand !";

A vous de voir celle qui vous convient le mieux.

Afficher le contenu d'un tableau

Attention, les tableaux commencent à compter à 0, le 1er élément sera donc le 0, le second le 1, etc...
Un tableau de 10 éléments ira donc de 0 à 9, il faut donc diminuer le numéro de la ligne désirée d'une valeur pour connaître son indice dans le tableau.
Pour afficher le troisième titre "Mais ! Qu’est-ce que tu fabriques ?", nous utiliserons donc la syntaxe suivante:

document.write("Le troisième tome de Spirou est: "+spirou[2]);

Si on désire afficher le titre correspondant à la valeur insérée par l’utilisateur dans le formulaire:

numero=parseFloat(document.BD.numero.value)–1;

 // on diminue le nombre introduit pour connaître l’indice

 alert("Le titre correspondant au numéro est : "+spirou[numero]);

Connaître la taille d'un tableau

Les variables de type Array() bénéficient de la propriété length, qui permet de connaître la taille du tableau:

taille = spirou.length;

Vu que les indices des tableaux commencent à 0, le dernier élément du tableau aura pour indice la longueur du tableau - 1.

Afficher tous les éléments d'un tableau

Maintenant que l'on connaît la taille d'un tableau, nous pouvons en afficher tous les éléments grâce à une structure itérative "for".
Il suffit de déterminer la longueur du tableau, et de le parcourir tant qu'on est inférieur à cette longueur (ou qu'on est égal à cette longueur -1) vu que les indices commencent à 0 jusqu'à la longueur -1.

for(i=0;i<spirou.length;i=i+1){

   document.write(spirou[i]+"<br>");

Vous pouvez également vouloir trier vos valeurs avant leur affichage. Pour cela, il existe une méthode toute faite: sort()

spirou = spirou.sort() ;

Afficher la date

Il est possible d'utiliser une méthode affichant la date, par exemple pour créer un tableau contenant tous les mois de l'année:

var aujourdhui=new Date();

document.write(aujourdhui) ;

La date récupérée est au format "complet", on peut la formater pour n'en récupérer qu'une partie:
- aujourdhui.getDate() : Récupère le jour (ex : 24)
- aujourdhui.getMonth() : Récupère le numéro du mois, 0 correspondant à janvier, 11 correspondant à décembre (ex : 03)
- aujourdhui.getFullYear() : Récupère l’année en 4 chiffres (ex : 2003)
- aujourdhui.getDay() : Récupère le numéro du jour de la semaine, 0 correspondant à dimanche, 6 correspondant à samedi
De cette façon, la création de tableaux contenant des dates est simplifiée.

Compléments

En complément, vous découvrirez trois méthodes pour créer un tableau. Vous apprendrez aussi à trier des données et à afficher la date.

A. Trois manières de créer un tableau

Il existe différentes méthodes de création de tableau. Voici 3 méthodes équivalentes :

var jour=new Array();

jour=["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"];

var jour=new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");

var jour = new Array() ;jour[0] = "dimanche" ;jour[1] = "lundi" ;jour[2] = "mardi" ;jour[3] = "mercredi" ;jour[4] = "jeudi" ;jour[5] = "vendredi" ;jour[6] = "samedi" ;

La dernière méthode est la plus longue mais aussi la plus lisible. A vous de choisir la méthode qui vous convient le mieux

B. Trier un tableau

"Ecrire un programme qui affiche la liste des BD du Petit Spirou triées par ordre alphabétique." (nom du fichier : tri.htm)
Pour trier les éléments d’un tableau, il suffit de reprendre le tableau et d’appeler la méthode sort() :
spirou = spirou.sort() ;
Ensuite, il ne vous reste plus qu’à parcourir le tableau et à afficher chaque valeur dans le document.

C. Afficher la date

Avec le JavaScript, il est possible d’afficher la date du jour dans le document.

var aujourdhui=new Date();

document.write(aujourdhui);

Voici le résultat obtenu à l’écran :
Thu Apr 24 11:47:14 UTC+0200 2003
Comme vous pouvez le remarquer, le format de la date n’est pas très joli !
On peut néanmoins effectuer des traitements sur la date pour obtenir un format plus adéquat.
- aujourdhui.getDate() : Récupère le jour (ex : 24)
- aujourdhui.getMonth() : Récupère le numéro du mois, 0 correspondant à janvier, 11 correspondant à décembre (ex : 03)
- aujourdhui.getFullYear() : Récupère l’année en 4 chiffres (ex : 2003)
- aujourdhui.getDay() : Récupère le numéro du jour de la semaine, 0 correspondant à dimanche, 6 correspondant à samedi
1. "Ecrire un programme qui affiche la date au format suivant : Nous sommes le [libellé du jour] JJ [libellé du mois] AAAA (par exemple : Nous sommes le 31/12/1999). Les libellés des jours de la semaine et des mois seront stockés dans une variable de type tableau" (nom du fichier : date.htm)
Si votre programme ne tourne pas correctement, vous pouvez voir la solution en ligne.
2. "Ecrire un programme qui affiche la date au format suivant : Nous sommes le dimanche 31 décembre 1999)." (nom du fichier : dateV2.htm)
Pour ce faire, il vous faudra créer un tableau tabMois contenant tous les libellés des mois et un tableau tabSemaine contenant tous les libellés des jours de la semaine (conseil : commencez par dimanche car les calendriers anglais commencent les semaines à dimanche).
Si votre programme ne tourne pas correctement, vous pouvez voir la solution en ligne.

1. Objectifs

So far, so good ! Dans les modules précédents, vous avez appris les bases de la programmation à l’aide d’exemples et d’exercices. Dans ce module, vous apprendrez à grouper un traitement dans une fonction. Plus qu’un élément de base en programmation, les fonctions vont vous permettre d’avoir un code plus clair et réutilisable.
Dans ce but, vous allez reprendre des exercices existants pour les améliorer.

2. La fonction Main()

Depuis le début de ce cours, vous utilisez les fonctions !
La fonction Main() est une fonction créée par le programmeur dans le but de pouvoir exécuter un traitement au moment souhaité : onclick d’un bouton, onload de la page, …
Sans l’utilisation de fonctions, les instructions JavaScript seraient exécutées directement au moment de la lecture par le navigateur.
Comme il était dit dans le premier module, cette fonction n’est pas obligatoire mais juste utile.
Vous avez donc déjà une idée de ce que représente une fonction : elle regroupe un ensemble d’instructions.
Un des intérêts d’une fonction est qu’on peut l’appeler à certains moments bien précis grâce aux événements !

3. Créer une fonction

Voici le squelette d’une fonction :

function NomDeLaFonction(){

   // instructions de la fonction

function est un mot réservé qui doit être écrit en minuscules.
Les parenthèses sont obligatoires, elles ont un rôle important dans une fonction pour le passage de valeurs à une fonction.
Comme pour les noms de variables, le nom d’une fonction doit être :
· en un seul mot
· commencer par une lettre ou " _ "
Conseil : Evitez les mots réservés et des noms identiques pour une fonction et une variable, vous obtiendriez une erreur ! Généralement, on différencie un nom de fonction d'un nom de variable en le commençant par une majuscule. Ce n’est pas une obligation, c’est une convention de programmeur…

4. Quizz

Lequel de ces noms de fonction est incorrect ?

Fonction

function

fonction

5. Appeler une fonction

Pour appeler une fonction, il suffit de l’appeler par son nom (sans oublier les parenthèses) :

NomDeLaFonction();

Une fonction peut être appelée :
- dans un événement se trouvant dans une balise HTML

<img src="image.gif" onmouseover="Affiche();">

- dans le code Javascript

<script>

   function Main(){

      Affiche() ; // on a appelé la fonction Affiche()

   function Affiche(){

      alert("Bienvenue dans l’univers de la BD !");

</script>

Lequel de ces morceaux de code n’appelle pas la fonction "AfficheMessage" ?

6. Exemple : une collection de BD

"Ecrire un programme qui affiche le titre d’une BD du Petit Spirou en fonction du numéro introduit par l’utilisateur dans un champ de formulaire. Le programme affiche la collection complète des albums du Petit Spirou lorsque l’utilisateur clique sur le bouton "Affiche liste"". (nom du fichier : collectionBD.htm)
Ce programme réunit les deux exercices du module précédent.
Il y aura donc deux traitements différents correspondant à deux événements différents :
Action 1 : clic sur le bouton "Afficher le titre correspondant"
Traitement 1 : affichage du titre correspondant au numéro introduit dans le formulaire
Action 2 : clic sur le bouton "Afficher la liste complète"
Traitement 2 : affichage de la liste complète des albums du Petit Spirou
La page suivante explique comment séparer des traitements en utilisant plusieurs fonctions.

7. Un programme - Deux traitements

Comment séparer deux traitements différents ? En utilisant les fonctions !
Vous allez créer deux fonctions :
- RecupTitre()
- AfficheListe()
Chacune de ces fonctions effectuera un traitement bien précis : soit l’affichage d’un titre par rapport au tome, soit l’affichage de la liste complète des albums.
Vous pouvez essayer de faire l’exercice seul. Allez à la page suivante pour voir le détail du programme

8. Le code détaillé du programme

<html>

   <head>

      <title>

         Collection de BD "Le Petit Spirou"

      </title>

      <script>

         var spirou=new Array()

         // déclaration de la variable spirou qui est de type tableau

         spirou=["Dis Bonjour à la dame !","Tu veux mon doigt ?","Mais ! Qu'est-ce que tu fabriques ?","C'est pour ton bien !","Merci qui ?","N'oublie pas ta capuche !","Demande à ton père !","T'as qu'à t'retenir !","C'est pas de ton âge !","Tu comprendras quand tu seras grand !"] ;

         // assignation de l'ensemble des valeurs dans le tableau

         function RecupTitre(){

            var numero;

             numero=parseFloat(document.BD.numero.value)-1;

             // récupération du nombre introduit par l'utilisateur

            if((numero>=0)&&(numero<=9)){

               alert("Le titre correspondant au numéro est :" + spirou[numero]);

                // affichage du titre correspondant au numéro introduit dans le formulaire

            }else{

               alert("Il n'existe aucun titre correspondant au numéro : "+ numero);

                // affichage d'un message d'erreur

         function AfficheListe(){

            for(i=0;i<spirou.length;i=i+1){

               // parcours de toutes les valeurs du tableau

                document.write(spirou[i]+"<br>");

         </script>

      </head>

      <body>

         <form name="BD">

            <input type="text" name="numero">

               <input type="button" value="Afficher le titre correspondant" onclick="RecupTitre();">

                  <input type="button" value="Afficher la liste complète" onclick="AfficheListe();">

                  </form>

               </body>

            </html>

Enregistrez ce code sous CollectionBD.htm et exécutez le programme.

9. Variable locale

Remarquez que, dans cet exercice, on a déclaré la variable numero à l’intérieur de la fonction RecupTitre().
La variable numero est une variable locale (en opposition avec une variable globale), ce qui signifie que cette variable n’est déclarée que pour la fonction RecupTitre() et ne pourra pas être utilisée en dehors de celle-ci.
Une variable locale est définie à l’intérieur de la fonction dans laquelle elle va être utilisée (généralement au début de la fonction).
Une variable globale est une variable qui est accessible de partout. Pour définir une variable globale, il suffit de la déclarer en dehors de toute fonction (généralement en début de programme).
Important : si vous oubliez de déclarer une variable, la variable sera automatiquementdéclarée en tant que variable globale.

10. Quizz

Dans le code suivant : function Main(){var i = 0 ;…} La variable i …

N’est pas accessible en dehors de la fonction Main()

Est accessible de partout mais uniquement si on appelle la fonction Main()

Est accessible en dehors de la fonction Main()

Dans ce code, laquelle de ces variables n’est pas globale ?…eur = 40,3399 ; function Main(){var message ; message = "Bienvenue" ; message2 = "Au revoir ; "}…

message

eur

message2

11. Les parenthèses d’une fonction

Jusqu’ici, vous avez utilisé des fonctions sans jamais utiliser les parenthèses.
Par exemple :

function Main(){

   // instructions

Les parenthèses d’une fonction sont utilisées pour transmettre un ou plusieurs paramètres :
Exemple :

//définition de la fonction

function Affiche(message){

   alert(message);

//Appel de la fonction

Affiche("Bienvenue dans l’univers de la BD !");

Affiche("Comment allez-vous ?");

Grâce aux paramètres, on peut passer des informations différentes à la même fonction. Dans ce cas-ci, la fonction Affiche est appelée deux fois. La première fois, la variable message vaut "Bienvenue dans l’univers de la BD" et la deuxième fois, la variable message vaut "Comment allez-vous ?".
message est une variable locale de la fonction Affiche. La valeur de cette variable dépend de ce qui est transmis dans les parenthèses lors de l’appel de la fonction.

12. Conclusion

Les fonctions permettent de séparer des parties de code pour rendre le programme plus interactif.
Au lieu de grouper tout le code dans une seule fonction, on essaie de le séparer selon l’action à effectuer.

13. Appliquez : le jeu du bon numéro

"Reprendre le jeu du bon numéro. Ajouter un bouton permettant de recommencer le jeu : créer une fonction NouveauJeu() qui détermine un nombre au hasard entre 0 et 100. Cette fonction est appelée lorsque l’utilisateur clique sur le bouton "nouveau jeu"."

Résultat

Le jeu du bon numéro

Solution

<html>

<head>

      <title>Le jeu du bon numéro</title>

      <script>

            var nombre;

            var proposition ;

            function NouveauJeu(){

                  nombre = Math.round(Math.random()*100);

            function Main(){

                  proposition = parseFloat(document.jeu.prop.value);

                  if(proposition == "" || proposition > 100 || proposition < 0){

                        alert("Veuillez introduire un nombre entre 0 et 100") ;

                  }else{

                        if(proposition == nombre){

                               alert("gagné !") ;

                        }else if(proposition < nombre){

                               alert("Le nombre à trouver est plus grand !") ;

                        }else{

                               alert("Le nombre à trouver est plus petit ! ") ;

      </script>

</head>

<body onLoad="NouveauJeu();">

      <h1>Le jeu du bon numéro</h1>

      <form name="jeu">

            <input type="button" value="Nouveau jeu" onClick="NouveauJeu();"><br>

            <input type="Text" name="prop"> <input type="Button" value=" verifier!" onclick="Main();">

      </form>

</body>

</html>

14. Synthèse

Les fonctions sont utilisées pour séparer différents traitements d’un programme. Elles permettent également d’exécuter des instructions lors d’événements prédéfinis.
Une variable définie dans une fonction est appelée variable locale et n’existe que dans le contexte de la fonction.
Une variable définie en dehors de toute fonction est appelée variable globale et reste accessible dans tout le programme.

5. Quizz (partie 1)

Ce quizz vous permettra de tester vos connaissances sur les fonctions :

Lequel de ces noms de fonction est correct ?

_var

1var

var

Quelle balise appelle la fonction nommée "affiche" au chargement de la page ?

Comment déclare-t-on la variable message en tant que variable locale à la fonction NouveauJeu()?

var message à placer dans la fonction Main()

var message à placer dans la fonction NouveauJeu()

var message à placer en dehors de toute fonction

16. Quizz (partie 2)

Comment déclare-t-on la variable message en tant que variable globale?

var message à placer dans la fonction Main()

var message à placer dans la fonction NouveauJeu()

var message à placer en dehors de toute fonction

Si on oublie de déclarer une variable (oubli du mot-clé "var"), la variable non déclarée est de type :

Globale ou locale selon l’endroit où elle a été créée

Locale

Globale

17. Conclusion du cours

Et voilà! Nous arrivons au terme de ce parcours de formation.
Nous espérons que le chemin réalisé ensemble fut agréable et qu'il vous donnera envie d'aller plus loin...

18. Ce qu'on a vu

Tout au long des modules, vous avez appris à créer de simples programmes.
Grâce à ces exemples et exercices, vous êtes plus familier avec les notions de programme et de langage de programmation.
Vous avez vu que dans un langage de programmation, on trouve :
- des variables
- des opérateurs
- des fonctions
- des structures (itératives, conditionnelles)
- des mots réservés
Maintenant, vous êtes capables d’utiliser toutes ces notions dans un programme.
Vous avez vu comment créer des programmes en JavaScript et comment communiquer avec l’utilisateur.
Vous êtes capable de créer des programmes qui s’exécutent sur une page Web et qui communiquent avec l’utilisateur.
Principalement dans le module 3, vous avez rencontré les particularités du langage JavaScript et les messages d’erreur possibles.
Vous connaissez les particularités syntaxiques et environnementales du langage JavaScript et vous avec appris à retrouver les erreurs dans un programme.

19. Mémo

Utiliser des fonctions

Jusqu'ici, nous avons utilisé des fonctions sans le savoir, comme Main() ou les fonctions associées à des objets comme un bouton (onclick), une page (onload), ...
Voici comment créer nos propres fonctions, qui contiendront un ensemble d'instructions appelables n'importe où dans notre code:

function NomDeLaFonction(){

   // instructions

Encore une fois, attention aux majuscules. Vous devez également respecter les parenthèses, qui permettent de passer une valeur à la fonction, qui la traitera.
Les noms de fonctions sont soumis aux mêmes règles que ceux des variables.

Appeler une fonction

Il suffit de l'appeler par son nom:
- dans la partie HTML:

 <img src="image.gif" onmouseover="Affiche();">

- dans le code JavaScript:

Affiche(); // on a appelé la fonction Affiche()

La portée des variables

Plus tôt dans ce cours, nous avons parlé des variables locales et globales.
Une variable locale n'est utilisable que dans la fonction dans laquelle elle a été déclarée, on ne peut pas y accéder en dehors de cette fonction.
Une variable globale est utilisable partout dans le code, il suffit de la déclarer en dehors de la fonction.
Attention, si vous ne déclarez pas votre variable (vous vous souvenez de la déclaration implicite?), celle-ci aura une portée globale.

Les parenthèses

Dans votre fonction, les parenthèses servent à transmettre un ou plusieurs paramètres, afin de les traiter:

function Affiche(message){

   alert(message); //message est une variable locale

 //Appel de la fonction

Affiche("Comment allez-vous ?");

La fonction traitera la chaîne de caractères qui lui est envoyée, en l'affichant dans une popup. On peut appeler cette fonction autant de fois qu'on le désire, en lui passant des paramètres différents à chaque fois.

Compléments

En complément, nous vous proposons quelques ressources pour aller plus loin.

A. Quelques ressources

Si cela vous tente d'aller plus loin, il y a encore des sentiers à découvrir ou à approfondir ;-)
Avant tout, avez-vous entendu parler des formations qui se donnent en salle à Technofutur TIC?
Vous trouve rez le catalogue sur notre site :
http://www.technofuturtic.be
Vous voulez des références sur la programmation en général, sur la logique de programmation ?
http://www.netalya.com/fr/Algo-intro.asp
http://lwh.free.fr/
Vous voulez apprendre la programmation orientée objet ?
http://www.commentcamarche.net/poo/poointro.php3
http://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_objet

Vous voulez développer vos connaissances en JavaScript et ce que l’on appelle le DHTML (dynamic-HTML) ?

Aucun commentaire:

Enregistrer un commentaire

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.