Tutoriel sur JS natif & Vue.js & jQuery.js & Node.js

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; vtest = 'bonjour' ; document.write(typeof vtest + "<br>"); vtest = 3.14 ; document.write(typeof vtest+ "<br>" ); vtest = true ; document.write(typeof vtest + "<br>"); var liste = [1,2,3,4]; document.write(typeof liste + "<br>"); var contact = {nom : 'dupont', prenom : 'jules',mail : 'dupontjules@free.fr'}; document.write(typeof contact + "<br>"); function carre(value) {return value * value; } document.write(typeof carre + "<br>"); const pi =3.14; pi =3.14116; document.write(typeof pi + "<br>"); </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 il faut utiliser l'opérateur typeof.

liste est de type "object" et plus précisément il s'agit d'un tableau indicé.
contact est de type "object".
carre est de type "function".

L'instruction document.write(expression) permet d'afficher l'expression passée en argument dans la page web. Pour créer des sauts de ligne, il suffit d'insérer la balise HTML BR dans l'expression. N'oubliez pas les chevrons pour bien préciser qu'il s'agit d'un élément HTML

Pour l'instant ne vous préoccupez que des types string, number et boolean. Les autres types feront l'objet de chapitres respectifs plus tard.

En déclarant la variable pi avec le mot clé "const" (et non pas "var") le contenu de cette variable ne peut être modifié par le programme.
Donc l'avant dernière instruction est incorrecte et le script "plante"
Aussi la dernière instruction n'est pas exécutée.
Voir la console du navigateur pour connaitre le type d'erreur !

JS ne fait pas la différence entre les entiers et les nombres décimaux ; ce sont des "number".

Les opérateurs arithmétiques

Les caractères utilisés

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

Notation compacte de l'incrémentation

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 *=

La conversion de types

Code erroné

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)

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 : camelCase.

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 qui est le séparateur décimal mais surtout pas une virgule.

Le script

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 aussi de "console JS" (ou "console web" pour Firefox).

Intérêt de la console

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 fait deux calculs :
• 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()
Pour afficher le contenu d'un tableau indicé : console.log(nomTableau)

Exemple de page affichant les résultats dans la console

Dans le cadre de certains calculs (multiplication, division, puissance) la conversion de type est automatique. C'est la cas ici.

Rendu du code

La page web affiche seulement l'élément H3 et des boites de dialogue pour saisir A & N.
Saisissez 10 puis 5.

Pour afficher la console faites un clic droit dans cette page ; sélectionnez "inspecter" ; cliquez sur l'onglet "console".
Celle-ci affiche "100 000" puis "(5) [1,3,5,7,11]" donc le résultat de 10 à la puissance 5 ; le nombre item et le contenu de la liste indicée.

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, certaines variables peuvent être déclaréée 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 reconnue dans tout le script.
Quant à "chaine" déclarée avec "var" dans la boucle elle est aussi reconnue dans tout le script.

Vous verrez plus loin que les variables déclarées (avec var) dans le cadre d'une fonction ne sont connues que dans cette fonction ; elles sont locales.

Création de constantes avec le mot clé "const"

Cette nouveauté a déjà été évoquée plus haut.
Attention il faut forcément affecter une valeur à une constante. Ainsi l'instruction const pi; génère une erreur.

Les entiers BigInt

JS était faiblement typé : tous les nombres étaient de type number.

La capacité maximale de stockage d'un nombre était limitée.
Désormais il y a deux types de nombres : number & BigInt

Commandes à saisir dans la console du navigateur

La première commande indique la capacité maximale d'une variable de type Number.

Pour déclarer un entier BigInt il faut utiliser le constructeur BigInt().
J'ai défini deux entiers BigInt et à chaque j'ai affecté une valeur très grande via la notation scientifique.
2e64 signifie 2 à la puissance 64 (problème des grains de riz ; voir ci-dessous).
10e18 signifie 10 à la puissance &_ (Un milliard de milliards représente un trillion, c'est-à-dire 10 puissance 18, soit 1 000 000 000 000 000 000).
Notez que le nombre BigInt affiche le suffixe "n" pour préciser qu'il s'agit d'un BigInt.
Les opérations mathématiques sont possibles à condition que tous les nombres utilisés soient de type BigInt.
Il est possible de convertir un BigInt en "number" avec le constructeur Number(). Mais il s'agit d'une opération risquée...