Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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 :

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

Exemple de script

Script sans les balises SCRIPT début et fin.
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 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 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) :

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)

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.

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

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.

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 (dans l'onglet 'console') de syntaxe du script qui a "planté".
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. Dans une deuxième étape, les entrées/sorties seront effectuées via un formulaire.

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

Le code d'une page web

Créez une nouvelle page web (extension .htm) avec l'éditeur de texte NotePad et nommez le fichier (prog_bug.htm).
Code à saisir:

Débogage

Lancez l'exécution par le navigateur ; commande à partir de l'éditeur : Exécution/launch in Chrome
La page web est vide !!!
Faites un clic droit et sélectionnez "inspecter"
La console du navigateur apparait ; cliquez sur l'onglet "console".
Texte en caractères rouges qui est affiché : 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 s'affichent et l'onglet "console" est vide.

Utiliser la console en guise de calculatrice

la console est interactive.
Ne saisir que ce qui suit ">"
Tout ce qui suit "<" correspond aux réponses de la console.

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

Se familiariser avec la syntaxe JS

Obervez que l'on peut exprimer un nombre en notation scientifique.
Et que les fonctions parseFloat / Number convertissent en flottant.

Notez l'autocomplétion dans la console, ainsi si vous tapez "parse" il propose "parseFloat"

La console ne comprend pas la commande premiers[0] car j'ai mal défini le tableau : emploi de parenthèses alors qu'il faut utiliser des crochets ...

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 méthodes et propriétés d'un objet natif : console.dir(objet).

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

Testez la page contenant ce script

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