Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
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.
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) :
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).
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.
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 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.
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.
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.
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 !).
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.
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).
Créez une nouvelle page web et nommez le fichier (prog_bug.htm).
Code à saisir (extrait) :
La fonction de conversion "parseInt" est mal écrite (oubli de la majuscule).
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.
La console est interactive.
Pour afficher la console : ouvrir le navigateur puis clic droit ; sélectionnez "inspecter" puis cliquer sur l'onglet "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()