JavaScript : les variables et constantes

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

Attention la dernière version de JavaScript introduit des nouveautés importantes en matière de variables et constantes.
Voir fin de ce chapitre.

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).
En fait demander le type d'une variable c'est demander le type de son contenu actuel !

Le code de la page (partie BODY) : <h3>Les types de données : <br> <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> </h3>

Le rendu de ce 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 donnée contenue 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 résultats dans la page (objet : document pour JS).
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

Code erroné

<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) ; 
</script>

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.

Test du programme

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 !
Faites le test !

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 flottant) puis de procéder à l'addition.

Le script corrigé (extraits)

	...
var vsomme = parseInt(vpremier) + parseInt(vdeuxieme) ; // addition des deux termes après conversion
	...
alert('somme des deux entiers est égale à  : ' + vsomme) ;

Testez ce code 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.

Addition de nombres décimaux

Nous savons désormais additionner des nombres entiers mais quid 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 !

Il serait souhaitable qu'il y ait un contrôle de saisie : tant que la saisie n'est pas au format numérique il faut resaisir.
Nous verrons cela plus tard.

Utilisation de la console du navigateur

Tous les navigateurs modernes proposent aux développeurs web des outils d'aide à la programmation et au débogage. On parle souvent de "console JS" (ou "console web" pour Firefox).

La console affiche les erreurs de syntaxe dans l'onglet 'console'.
La console affiche (dans l'onglet "éléments") le code source de la page.
La console peut faire fonction de calculatrice scientifique.
Mais la console est aussi un très bon outil pour se familiariser avec la syntaxe.
En phase de développement d'une page contenant un script, les sorties peuvent être affichées provisoirement dans la console avant l'utilisation d'un formulaire HTML. Il suffit d'utiliser la méthode log() de l'objet console : console.log(expression).

Détecter les erreurs de syntaxe grâce à la console du navigateur

Le code d'une page web

Créez une nouvelle page web et nommez le fichier (prog_bug.htm).
Code à saisir (extrait) : ... <body> <h3>Somme de deux nombres</h3> <script> var nombre1 = parseint(prompt('Saisir un entier')); var nombre2 =parseint(prompt('Saisir un entier')); var somme = nombre1 + nombre2; var puissance = nombre1**nombre2; alert('somme des deux : ' + somme); alert('nombre1 à la puissance du second : '+ puissance); </script> ...

La fonction de conversion "parseInt" est mal écrite (oubli de la majuscule).

Débogage

Lancez l'exécution par le navigateur ; commande à partir de l'éditeur : Exécution/launch in Chrome
La page web affiche seulement : "somme de deux nombres".
Faites un clic droit et sélectionnez "inspecter" dans la liste puis cliquez sur l'onglet "console".
Libellé du message d'erreur (en rouge) : Uncaught ReferenceError: parseint is not defined
Donc faites attention. Le "i" majuscule dans "parseInt" c'est pas pour faire joli. C'est indispensable !

Corrigez le code dans l'éditeur de textes ; enregistrez les modifications puis relancer l'exécution.
Cette fois les boîtes de dialogue alert() s'affichent.

Le programme buggé

Utiliser la console en guise de calculatrice

La console est interactive.
Pour afficher la console : ouvrir le navigateur puis clic droit ; sélectionnez "inspecter" puis cliquer sur l'onglet "console". > 12**5 < 248832 >10%3 < 1

j'ai élevé 12 à la puissance 5 ce qui donne 248832
j'ai fait la division entière de 10 par 3 ; le reste est 1

Afficher les résultats des traitements dans la console

L'objet console donne accès à la console de débogage du navigateur.
Cet objet comprend plusieurs méthodes et en particulier la méthode log(expression).
Plutôt que d'employer la boite de dialogue alert(expression) pour les sorties, utilisez console.log(expression)
Pour vider la console : console.clear()

Exemple : le code d'une page web (extrait) contenant un script basé sur l'objet console

...
<h3>Eléver A à la puissance N </h3>
...
<script>
var A =parseFloat(prompt('saisir A')); 
var N =parseFloat(prompt('saisir N')); 

console.clear(); // vide la console
console.log(Math.pow(A, N));  // résultat de A à la puissance N
console.dir(Array) 	// affiche méthodes & propriétés de l'objet Array
</script></body></html>

Rendu du code

La page web affiche seulement : "Elever A à la puissance N"
Pour afficher la console faites un clic droit dans cette page ; sélectionnez "inspecter" ; cliquez sur l'onglet "console".

Nouveautés avec la dernière version de JavaScript

ECMAScript 6 propose deux nouveaux mots clés pour définir respectivement les variables et les constantes : let & const

Déclarer une variable avec let

Depuis la version 6 de JavaScript, il est préconisé de déclarer des variables avec le mot clé let.
Avec le mot-clé let une variable a comme portée le bloc où elle est déclarée.

Exemple : soit le script suivant : let g = 10; for (let i=1; i < 6 ; i++) { console.log( i + " au carré donne : " + i*i) ; var chaine = "bonjour"; } console.log(g); console.log(chaine); console.log(i);

Les résultats sont affichés dans la console !

Le rendu dans un nouvel onglet :
A vous de jouer !
Pour afficher la console : faites un clic droit ; sélectionnez "inspecter" puis cliquez sur l'onglet "console".

La dernière instruction plante ! La console retourne le message "i is undefined".
En effet comme cette variable a été déclarée avec le mot "let" dans la boucle "for" ; elle n'existe que dans ce bloc.
Par contre g est déclarée en dehors de tout bloc donc elle est globale.
Quant à "chaine" déclarée avec "var" elle est aussi globale alors qu'elle est déclarée dans le bloc ...

La déclaration de variables avec le mot clé "let" est beaucoup plus rigoureuse qu'avec "var".
Il faut donc privilégier cette solution désormais.

Les constantes

Une constante est définie désormais avec le mot clé "const".
Il faut obligatoirement affecter une valeur lors de la création de cette donnée.
Toute donnée définie avec le mot clé const ne peut être modifié par le code.
Syntaxe : const nom_constante = valeur ;

Soit le script ci-dessous : console.clear(); const pi = 3.14; let rayon = 5; console.log("pi : " + pi); rayon +=2; console.log(rayon); pi = pi += 0.00116; console.log(pi);

La première instruction vide la console.

Le rendu dans un nouvel onglet :
A vous de jouer !
Le programme "plante" à l'avant dernière ligne : "on n'a pas le droit de modifier la valeur de pi.

La déclaration de constantes via "const" est donc très rigoureuse ; à utiliser sans modération.

Traduction

Tutoriel JavaScript & jQuery - sommaire

JavaScript natif

JavaScript-jQuery

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville