Les variables en JavaScript

Une variable simple permet de stocker le temps du programme une donnée. .

Dans le chapitre précédent nous avons déjà utilisé des variables : vsurface, vperimetre, etc.

Déclaration d'une variable

Pour déclarer une variable il faut utiliser dans l'instruction le mot clé var suivi du nom de la variable. Le nom de la variable ne peut comprendre que des lettres, des chiffres, l'underscore (tiret bas) et le symbole $. Les autres caractères sont interdits !
La première lettre ne peut être un chiffre.
Le nom de la variable ne peut être un mot clé (ou mot réservé) du langage JS. Ainsi une variable ne peut être nommée function, var, break, for, try, etc..

J'ai pour habitude de préfixer les variables de la lettre v (v comme variable) et d'utiliser des mots français

Attention JS est sensible à la casse. vsurface et Vsurface sont deux variables différentes !
Si vous devez déclarer plusieurs variables vous pouvez le faire en une seule instruction "var".
Exemple : var vsurface, vperimetre ;

Les types de données

Dans beaucoup de langage la déclaration d'une variable consiste à donner un nom et un type à la variable.
Dans ce type de langage une variable de type integer, par exemple, ne pourra stocker que des numériques entiers.
JS est beaucoup plus permissif. Une même variable pourra stocker successivement un numérique puis une chaîne et enfin une valeur logique.

Exemple

Le code de la partie BODY de la page ci-dessous :

<body> <h1>Les types de données</h1> <script> var vtest ; // vtest contient successivement une donnée string puis number et enfin boolean vtest = 'bonjour' ; alert(vtest + " est de type " +typeof vtest) vtest = 3.14 ; alert(vtest + " est de type " + typeof vtest) vtest = true ; alert(vtest + "est de type " + typeof vtest) </script> </body>
Testez cette page

Exécution du code

Commentaire

La variable vtest est successivement de type string puis de type number et enfin de type boolean. Donc en JS le type d'une variable est fonction du type de son contenu.
Remarquez que grâce à l'opérateur de concaténation (+) utilisé dans la fonction alert on peut construire de véritables phrases .

Les opérateurs arithmétiques

Les caractères utilisés

On utilise les caractères +, -, *, /, %
% (modulo) : reste de la division entiere
+ : Attention ! + Signifie addition si les termes sont de type number ; concaténation si les termes sont de type string.

Les simplifications syntaxiques

Exemple 1 : vous voulez ajouter 2 à la variable vcompteur:
vcompteur = vcompteur + 2 ; // première solution
ou : vcompteur+=2 ; // deuxième solution

Exemple 2 : vous voulez retirer 2 à la variable vrebours:
vrebours = vrebours -2 ;
ou : vrebours -= 2 ;

Nous avons aussi les opérateurs : /= et *= pour simplifier l'écriture des divisions et multiplications.

La conversion de types

Exemple

		 var vpremier = prompt('tapez un entier') ; // saisie et affectation premier nombre 
		 var vdeuxieme = prompt('tapez un entier') ; // saisie et affectation deuxième nombre
		 alert("type de la première saisie : " + typeof(vpremier));
		 alert("type de la deuxième saisie : " + typeof(vdeuxieme));
		 var vsomme = vpremier + vdeuxieme ; // addition des deux termes
		 alert('somme des deux entiers est égale à : ' + vsomme) ; 

La fonction prompt permet à l'utilisateur de saisir une donnée qui est ensuite affectée à la variable déclarée dans la même instruction.
Testez ce script !

Exécution :
Saisissez 12 puis 12 !
Le script affiche 1212 ... et non pas 24 !
Il y a eu concaténation et non pas addition !

En effet toute saisie avec la fonction native prompt est de type string même s'il s'agit d'une suite de chiffres.
D'ailleurs les instructions alert indiquent bien que les variables sont de type string.
Ici nous avons saisi la chaine "12" puis la chaine "12" donc le "+" pour deux chaines provoque une concaténation !

N'en concluez pas qu'il est impossible en JS d'additionner deux données saisies au clavier !
Il suffit de convertir chaque chaine en un entier (ou réel) puis de procéder à l'addition.

Script corrigé (extrait) :

	...
	var vsomme = parseInt(vpremier) + parseInt(vdeuxieme) ; // addition des deux termes
	...
Testez le script corrigé !

Seule la troisième instruction a été modifiée !
Nous employons la fonction parseInt() pour convertir une chaine en un numérique entier. Il faut bien sûr que la chaîne soit une suite de chiffres.
Notez que le "i" de parseInt est en majuscule !
parseInt est un mot composé (le mot parse suivi du mot int).

En JS lorsqu'un nom de fonction native est un mot composé la première lettre de chaque mot est en majuscule mais seulement à partir du deuxième mot seulement.

Et si on oublie de mettre en majuscule le i de parseInt ?
Et bien le script "plante" et la console JS du navigateur indique une erreur :
Uncaught ReferenceError: parseint is not defined
Donc faites attention. Le "i" majuscule dans parseInt c'est pas pour faire joli. C'est indispensable !

Exemple2

Et si on veut additionner des nombres décimaux ?
Il suffit d'utiliser la fonction Number(chaine) ou ParseFloat(chaine)

La chaine peut être convertie en nombre décimal que si elle est composée d'une suite de chiffres séparés par un point (le séparateur décimal et surtout pas une virgule !).

Le script

var vpremier = prompt('tapez un décimal, séparateur est .') ; // saisie et affectation premier décimal var vdeuxieme = prompt('tapez un décimal, séparateur est .') ; // saisie et affectation deuxième décimal var vsomme = Number(vpremier) + Number(vdeuxieme) ; // addition des deux termes alert('somme des deux décimal est égale à : ' + vsomme) ;

Tests

Testez ce code une première fois en saisissant : 12,15 et 14,25 ; le programme retourne NaN (Not a Numeric). En effet les conversion n'ont pas été possibles.
Puis testez en saisissant 12.15 et 14.25 le programme retourne 26.40. Les conversions ont été effectuées. A vous de jouer !

Suite

Nous venons de traiter les variables simples contenant une seule valeur.
Nous aurons l'occasion de revenir sur la notion de variable qui est en fait beaucoup plus complexe qu'il y parait ici.
Sachez cependant qu'une variable peut aussi faire référence à un objet (par exemple un élément HTML). On parle de variable objet.
Sachez aussi que certaines variables peuvent contenir plusieurs données on parle alors de "tableaux".
Retour menu