Traduction
Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js
Tutoriel JavaScript - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans ce chapitre j'évoque les types de données, le stockage de ces données dans des variables ou constantes.
Je vous montre aussi que la console du navigateur est un outil intéressant pour tester du code JS.
J'évoque aussi des nouvautés apportées par les dernières versions de ECMAScript : les mots clés let & const, le type BigInt.
Pour déclarer une variable il faut une instruction avec le mot clé var (ou le mot clé let) 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.
La différence entre la déclaration d'une variable avec var et celle avec let sera traitée en fin de page.
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
Deux nouveaux mots clés pour définir respectivement les variables et les constantes : let & const
Les variables peuvent désormais ê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 alors qu'avec le mot clé var
la variable créée est toujours globale.
Une variable déclarée par let en dehors de tout bloc est aussi globale.
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 du code 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 pour ce bloc.
Par contre g est déclarée en dehors de tout bloc donc elle est reconnue dans tout le script : globale.
Quant à "chaine" déclarée avec "var", elle est aussi reconnue dans tout le script : toujours globale.
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 même variable pourra avoir différents types en fonction de son contenu.
Cette absence de typage des variables peut être source d'erreurs d'exécution ... Aussi MicroSoft a imaginé une variante de JS intitulée TypeScript. Dans ce langage il faut typer une variable au moment de sa déclaration.
Ce script doit être à l'intérieur du conteneur script dans une page web.
Ci-dessous le code complet de la page web avec son script.
Dans une page web (un fichier .htm ou .html) le code JS doit être à l'intérieur du conteneur SCRIPT et de préférence dans la partie BODY.
La commande typeof nomVariable permet de connaitre le type de la variable qui, je le rappelle, est fonction
du type du contenu.
Si aucune valeur n'a été affectée à la variable, la commande typeof nomVariable retourne "undefined"
Les sorties sont en gras et centrées conformément à la règle de style correspondant à la balise H3 qui
encadre le script.
Attention , si vtest contient 5000 le type est number ; par contre si vtest contient '5000' (ou "5000") le Type
de la variable est string.
Le contenu de la variable vtest est successivement de type : undefined, string, number, string, number, boolean.
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 cette expression.
Pour l'instant ne vous préoccupez que des types string, number et boolean. Les autres types seront évoqués 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". Voir la console du navigateur.
Faites un clic droit et sélectionnez "inspecter" pour accéder à la console.
Le message d'erreur : Uncaught TypeError: Assignment to constant variable ...
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
L'ajout du type "bigInt" est recent et date de la version 11 (ou 2000) de ECMAScript.
>console.log(Number.MIN_SAFE_INTEGER); 9007199254740991 >var enorme = BigInt(2e64) >console.log(enorme) 20000000000000000426408380189087937446025157425359298935486676992n >var beaucoup = BigInt(10e18) >console.log(beaucoup) 10000000000000000000n >enorme + beaucoup 20000000000000000426408380189087937446025157435359298935486676992n >console.log(typeof(beaucoup)) bigint >var beaucoup2 = Number(beaucoup) >beaucoup2 10000000000000000000
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...
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.
Exemple 1 : vous voulez ajouter 2 à la variable vcompteur:
Écrivez vcompteur = vcompteur + 2 ; // première solution
OU : vcompteur+=2 ; // deuxième solution
Exemple 2 : vous voulez retirer 2 à la variable vrebours:
Écrivez vrebours = vrebours -2 ;
OU : vrebours -= 2 ;
Il existe aussi les opérateurs moins courants : /= et *=
var vpremier = prompt('tapez un entier') ;
var vdeuxieme = prompt('tapez un entier') ;
var vsomme = vpremier + vdeuxieme ; // addition des deux termes
alert('somme des deux entiers est égale à : ' + vsomme) ;
document.write("Type de la première saisie : " + typeof vpremier + "
" );
document.write("Type de la deuxième saisie : " + typeof vdeuxieme + "
" );
La fonction prompt permet à l'utilisateur de saisir une donnée qui est l'affecter à la variable déclarée dans la même instruction.
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 !
Attention la fonction alert() affiche un message dans une boite de dialogue alors que la méthode document.write() affiche un texte dans la page web ; prévoyez des balises BR pour des sauts de ligne.
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 comme je fais
dans le script qui suit.
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 : notation camelCase.
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 et d'un point intercallé (qui est le séparateur décimal). Mais jamais par une virgule !
var vpremier = prompt('tapez un décimal, séparateur est .') ;
// saisie premier décimal
var vdeuxieme = prompt('tapez un décimal, séparateur est .') ;
// saisie deuxième décimal
var vsomme = Number(vpremier) + Number(vdeuxieme) ;
// addition des deux termes
alert('somme des deux décimal est égale à : ' + vsomme) ;
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 comment boucler tant que la saisie est invalide.
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).
La console affiche les éventuelles 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 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. Il suffit d'utiliser la méthode log() de l'objet console : console.log(expression).
Mais dans la version définitive du programme les entrées-sorties se feront via un formulaire HTML afin de réaliser une
application en ligne ergonomique.
La fonction de conversion "parseInt" est mal écrite (le I doit être en majuscule).
Le programme buggé
La page web affiche seulement : "somme de deux nombres".
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 !
Pour accéder rapidement à la console JS à partir d'une page web :
Faites un clic droit avec la souris et sélectionnez l'item "inspecter" dans la liste qui s'est affiché.
L'écran est alors divisé en deux parties : la page web à gauche et la fenêtre "outils de développement" à droite.
Cliquez alors sur l'onglet "console" pour afficher les éventuels messages d'erreur.
La console est interactive.
Saisir dans la console les expressions précédées du chevron :
> 12**5 248832 >10%3 1 >parseInt(10/3) 3
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)
Dans le cadre de certains calculs (multiplication, division, puissance) la conversion de type est automatique. C'est la cas ici.
La page web affiche seulement les boites de dialogue pour saisir A & N.
Saisissez 10 puis 5.
La console est un précieux outil pour apprendre la syntaxe de JavaScript.
> chaine ="abcdefgh "
'abcdefgh '
> chaine.toUpperCase().trim()
'ABCDEFGH'
> chaine.toUpperCase
toUpperCase() { [native code] }
La console propose l'autocomplétion. Si vous tapez "chaine.tou" il vous propose le nom correct de la méthode : toUpperCase.
Si vous oubliez les parenthèses il indique la syntaxe correcte.