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 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.
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
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).
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 ou dans une fichier d'extension .js
La commande typeof variable permet de connaitre le type de donnée contenu dans la variable.
Le contenu de la variable vtest contient successivement un string un number et enfin un 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 l'expression.
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"
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 *=
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 !
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 avant l'utilisation d'un formulaire HTML. Il suffit d'utiliser la méthode log() de l'objet console : console.log(expression).
On se focalise donc d'abord sur le traitement puis dès que celui-ci est correct on aborde l'interface utilisateur.
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 :
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.
ECMAScript 6 propose deux nouveaux mots clés pour définir respectivement les variables et les constantes : let & const
Depuis la version 6 de JavaScript, les 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 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 globale.
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 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.
Il est conseillé de ne plus utiliser le mot clé var dans les nouveaux scripts mais let qui permet de mieux gérer la portée des variables.
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.
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.
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...