Premiers pas en JavaScript

3.2 Variables - emploi
cuy copyleft
  See You Why?  

 


variables comparaison (3.1) | | variables syntaxe (3.3)

Contenu

 

 

I. Comparaison

voir <<<séquence précédente

 

 

II. Emploi des variables...

Dans la séquence précédente, la notion de variable en programmation vous a été donnée. Nous développerons un peu plus cette approche.

Nous avons vu dans un chapitre précédent (voir introduction, section intro), que le caractère dynamique d'une page Web est le fait qu'elle varie selon des informations reçues au moment de sa consultation et non de sa création.
Il en est de même pour un programme informatique : pour qu’il ne donne pas toujours le même résultat, il a constamment besoin de stocker des valeurs. Ces valeurs peuvent être récupérées grâce au clavier, grâce à des fichiers, grâce au réseau… Bref, quel que soit l’origine de la valeur, le programme ou la page Web a besoin de les stocker pour pouvoir les utiliser.
Le mot variable est donc utilisé pour représenter tout ce que l’utilisateur va « donner » à l’ordinateur comme informations. Pour employer une métaphore, on peut dire que déclarer une variable dans un programme revient à réserver une place (tiroir, boîte, case...) en mémoire, et le nom de la variable serait l'étiquette collée sur ce tiroir.

 

A. quelques emplois...

En programmation, en général, on distingue trois "moments" d'utilisation des variables :

Ainsi, imaginons un programme qui demande à un utilisateur, la valeur de deux nombres et qui renvoie leur produit (ou qui calcule la surface d'un rectangle après avoir demandé ses dimensions).
Nous allons devoir créer trois boites : deux (valeur1 et valeur2) pour les nombres entrés par l'utilisateur, et une troisième (produit) pour retenir le produit des deux nombres. C'est la déclaration des variables.
Nous devrons ensuite demander à l'utilisateur de donner les valeurs dont il veut obtenir le produit... c'est l'affectation des 2 premières variables. Quelles sont les valeurs à mettre dans les 2 premières boites ?
L'ordinateur devra calculer le produit de ces 2 valeurs et le stocker dans la troisième boite... affectation de la 3e variable.
L'ordinateur devra afficher le contenu de cette dernière boite... c'est l'affichage ou usage.

L'exemple ci dessous illustre la démarche décrite ici :

 

Exemple

<html>
<head><title>produit de 2 nombres</title></head>
<body>
<script type="text/javascript">

   //déclaration
   var valeur1;
   var valeur2;
   var produit;
 
   //affectation
   valeur1 = prompt( "Première valeur : ");
   valeur2 = prompt( "Deuxième valeur : ");
 
   produit = valeur1 * valeur2;

   //usage
   document.write(produit);
 
</script>
</body>
</html>

Ci-après une analyse du programme développé ici.

 

 

B. en JavaScript...

Le lecteur aura remarqué qu'en JavaScript, on peut, mais on ne doit pas déclarer les variables.

En JavaScript, on ne stipule pas le type des variables utilisées (la grandeur de la boite), le programme s'en rendra compte lui-même.

Les variables sont déclarées par une instruction commençant par le mot var.
Ces lignes auraient donc pu ne pas apparaitre. Nous verrons cependant plus loin que de noter ou ne pas noter var aura des conséquences sur la portée des variables.

Nous avions déjà abordé trois fonctions prédéfinies en JavaScript, à savoir :

alert()
qui affiche une boîte de dialogue avec un message d’avertissement et un bouton OK ;
document.write()
qui retourne une ou plusieurs expressions HTML dans un document de la fenêtre spécifiée ;
prompt()
qui affiche une boîte de dialogue avec un message, une zone de saisie pour introduire une réponse et deux boutons "OK" et "annuler".

nous retrouvons ici cette fonction prédéfinie :

prompt()
qui affiche une boîte de dialogue avec un message, une zone de saisie pour introduire une réponse et deux boutons "OK" et "annuler" ;

Le lecteur attentif aura remarqué que la fonction prompt est en JS ce que la ligne de saisie (balise <input>) est au HTML. Il aurait été possible d'utiliser cette balise HTML, mais nous aurions dû vous expliquer comment récupérer la réponse en JS... ce qui ne sera fait qu'à partir du chapitre 36.

 

C. la fonction JavaScript   prompt()

La fonction PROMPT affiche une boîte de dialogue avec un message (éventuellement une question), une zone de saisie pour répondre, un bouton "annuler" et un bouton "OK".

N'abusez pas de cette méthode, nous verrons plus loin comment faire usage des formulaires HTML pour l’usager et comment récupérer ses réponses (chap. 36).

La syntaxe en est :

prompt("la question");

où l'on observe le point-virgule en fin d'instruction,
les parenthèses qui suivent le nom de la fonction appelée et entre lesquelles on place un (ou plusieurs) éventuel(s) attribut(s), ici
un texte (une chaîne de caractères) placé soit entre guillemets (double quote), soit entre apostrophes (single quote), mais surtout sans mélanger les 'single' et 'double' quotes, ce texte apparaîtra dans la boîte de dialogue qui s'affichera ;
puisque PROMPT est une instruction qui affiche une boite de dialogue avec un message, il faut lui transmettre un attribut (un paramètre) qui précisera le message (généralement la question) à afficher et que l'on place dans les parenthèses.
On n'oubliera évidemment pas la balise <script type="text/javascript"> qui doit précéder les instructions JVS et la balise fermante </script> qui les suit.

Quelques autres précisions à propos de la fonction prédéfinie prompt() :

Dans la séquence suivante, nous développerons la syntaxe des noms à donner aux variables, puis de l'affectation d'une valeur à une variable.

Cependant, nous signalerons rapidement :

      1. var suivi du nom d'une variable
        est la déclaration de la variable ;
      2. le nom de la variable suivi du signe '=' suivi d'une valeur
        est l'affectation de la variable ;
      3. JS permet la déclaration et l'affectation
        dans une même instruction (sur une même ligne) ;

L'instruction produit = valeur1 * valeur2; devrait se lire
« la variable produit prend comme valeur
le contenu de la variable valeur1
multiplié par le contenu de la variable valeur2. »

L'instruction document.write(produit); devrait se lire
« écris dans le document en cours (la page web)
le contenu de la variable produit. »

 

III. Syntaxe

voir suite >>>

 

IV. Remarques

voir suite >>>

 

 

 

VIII. Exercices relatifs aux variables

voir suite >>>

 

IX. Test relatif aux variables

voir suite >>>

 


variables comparaison (3.1) | | variables syntaxe (3.3)