JavaScript : les variables

Une variable simple permet de stocker une donnée dans le cadre d'un script .
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 une instruction avec 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 JavaScript. Ainsi une variable ne peut pas être nommée function, var, break, for, try, etc..

Attention JavaScript 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" à condition de séparer chaque déclaration par une virgule.
Exemple : var vsurface, vperimetre ;

Souvent dans la même instruction une variable est déclarée et initialisée.
Exemple : var vcompteur = 0, vtotal = 0; // déclaration et initialisation de deux variables

Les constantes

Une constante est identique à une variable (conteneur pour une valeur). Cependant à la différence d'une variable le contenu d'une constante ne peut être changée.
Une constante est définie avec le mot clé "const". Il faut obligatoirement affecter une valeur lors de la création de cette donnée.
Syntaxe : const nom_constante = valeur ;
Soit le script ci-dessous :

		const pi = 3.14;
		alert("pi : "  + pi); 
		const pi = 22/7 ;

Si vous demandez l'exécution, la console JavaScript indique une erreur : "identifier pi has been already declared".
Donc pour que ce script soit correct il suffit de supprimer la troisième instruction.

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.
JavaScript est beaucoup plus permissif ; une variable n'est pas typée ; la même variable pourra stocker successivement un numérique puis une chaîne et enfin une valeur logique (booléen).

Exemple

Le code de la partie BODY :

... <h1>Les types de données</h1> <script> var vtest ; // création d'une variable // vtest contient successivement une donnée string puis number et enfin boolean vtest = 'bonjour' ; document.write(vtest + " est de type " +typeof vtest) document.write("<br>"); vtest = 3.14 ; document.write(vtest + " est de type " + typeof vtest) document.write("<br>"); vtest = true ; document.write(vtest + " est de type " + typeof vtest) </script> ...
Testez cette page

Exécution du code

Le contenu de la variable vtest est successivement de type string puis de type number et enfin de type boolean.
Pour connaitre le type de contenu d'une variable (ou constante) il faut utiliser l'opérateur typeof.
Attention typof est bien un opérateur JS et non pas une fonction native sinon la syntaxe serait différente !

La méthode write de l'objet document est une façon d'écrire les sorties dans la fenêtre d'exécution du script (le document).
Pour créer des sauts de ligne il faut insérer des balises BR. On peut donc manipuler avec document.write des variables, des littéraux (entre guillemets) et des balises (entre guillemets et chevrons).

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 l'un des termes est 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

Le script (sans les balises SCRIPT) : var vpremier = prompt('tapez un entier') ; var vdeuxieme = prompt('tapez un entier') ; document.write("type de la première saisie : " + typeof vpremier + "<br>" ); document.write("type de la deuxième saisie : " + typeof vdeuxieme + "<br>" ); 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 !

Notez que les sorties sont affichées soit dans une boite de dialogue (emploi de la fonction alert) soit affichage dans la fenêtre d'exécution (document.write).
Les "alert" sont exécutées avant les "document.write" !!!

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.
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 JavaScript 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 après conversion
	...
	alert('somme des deux entiers est égale à  : ' + vsomme) ; 

Testez le script corrigé !

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 JavaScript 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 !
Retour menu