Les variables

Les variables de type number, string et boolean

Une variable est un espace de stockage sur l’ordinateur permettant d’enregistrer tout type de donnée.

Les types de données sont :

une chaîne de caractères (string) ;
une valeur numérique (number) ;
un booléen (boolean) ; un booléen ne peut prendre que deux valeurs, true ou false.

Une variable est constituée de 2 éléments :

une valeur : c'est la donnée qu'elle stocke (par exemple le nombre 5) ;
un nom : c'est ce qui permet de la reconnaître.

Le nom d'une variable s'écrit avec des lettres (non accentuées), des chiffres ou bien l'underscore _.
Le nom d'une variable ne doit pas commencer par un chiffre.
Le nom des variables est sensible à la casse (« a » est différent de « A »).

Pour déclarer une variable qui a pour nom x, il vous suffit d’écrire la ligne suivante :

var x ;

Une fois notre variable déclarée, nous pouvons lui attribuer une valeur :

x = 5.2 ;      // les nombres à virgule s'écrivent avec un point

Il est possible de simplifier le code en une seule ligne :

var x  = 5.2 ;

Pour déclarer une chaîne de caractères, vous pouvez utiliser des apostrophes (' ') ou des guillemets (“ “).
Vous pouvez déclarer et assigner des variables sur une seule et même ligne :

var variable1 = 'coucou', variable2  = "bonjour" ; / *   'coucou' et "bonjour" sont des chaînes de caractères (string)   */

A faire vous-même 1

JSFiddle ou Codepen

Dans JSFiddle ou dans Codepen, tester le script suivant :

var a = 5 ;   // ma variable est ici une valeur numérique (number)
var b = 3 ;
var resultat = a * b ;   // je crée une nouvelle variable qui est le produit des 2 variables précédentes
alert(resultat) ;    // j'affiche le résultat de ma multiplication.

La concaténation ou comment joindre deux chaînes de caractères

On peut concaténer (ou ajouter) des chaînes de caractères avec le symbole +.
Exemple :

var debut = 'j\'aime ' ;
var fin = 'le chocolat' ;
alert(debut + fin) ;

Dans le code précédent, le caractère \ placé dans le mot j'aime est un caractère d'échappement. L'apostrophe du mot j'aime pourrait être confondu avec l'apostrophe pour définir une chaîne de caractères. L'apostrophe qui suit le caractère \ n'est plus interprété comme le début ou la fin d'une chaine de caractères.

Quelques caractères d'échappement :

Caractères d'échappement	Signification
\'	Guillemet simple (')
\”	Guillemet double (”)
\n	Saut de ligne
\\	Barre oblique inverse (\)
\t	Tabulation

Exemple :
La synthase \n permet d'ajouter un retour à la ligne dans une chaîne :

alert('texte affiché sur \n deux lignes ')

A faire vous-même 2

JSFiddle ou Codepen

Ecrire un script qui effectuera la division de deux variables.
La première sera appelée var1 et prendra pour valeur 100, la seconde sera appelée var2 et prendra pour valeur 50.
Le résultat de cette opération devra être placé dans une troisième variable appelée resultat.
Votre programme devra afficher dans une boite d'alert :
Le résultat de la division de [var1] par [var2] est : [resultat]

Une boite de dialogue de saisie utilisateur : la fonction prompt()

La fonction prompt() affiche une boite de dialogue avec un champ texte qui permet de demander une valeur à l'utilisateur.

Exemple :

var prenomSaisi = prompt("Saisir votre prénom : ","Prénom");

La variable “prenomSaisi” contiendra le prénom saisi par l'utilisateur.

La fonction prompt() retourne une chaîne de caractères si le visiteur clique sur Ok et retourne null si le visiteur clique sur Annuler ou appuie sur la touche Echap.

A faire vous-même 3	JSFiddle ou Codepen
Ecrire un script demandant la saisie du prénom de l’utilisateur. Afficher ensuite sur deux lignes : Bonjour [prénom saisi], Bienvenue sur ce site.

A faire vous-même 4	JSFiddle ou Codepen
Ecrire un script demandant la saisie deux notes sur 10 puis afficher leur somme sous la forme : La note finale est de [resultat] / 20 Observer le résultat obtenu. N'y a-t-il pas un problème ?

La fonction prompt() retourne une chaîne de caractères. Si vous utilisez l’opérateur +, vous ne ferez pas une addition mais une concaténation.
Dans le code précédent si vous saisissez “8” et “2” alors la somme de “ 8 ” + “ 2 ” donnera “82” et non 10 !

Pour résoudre ce problème, il suffit de convertir la chaîne de caractères en nombre. Pour cela vous allez avoir besoin de la fonction parseInt().

Cette fonction convertit une chaîne de caractères en un nombre entier. Elle retourne le nombre si la conversion est possible et NaN (Not a Number) si la conversion est impossible.
Exemple :

nombre1 = prompt("Veuillez saisir un nombre :");   // la variable nombre1 est du type "**string**"
nombre1 = parseInt(nombre1);                       // la variable nombre1 est du type "**number**"

Même résultat en une seule ligne de code.

nombre1 = parseInt(prompt("Veuillez saisir un nombre :"));   // la variable nombre1 est du type "**number**"

A faire vous-même 5	JSFiddle ou Codepen
Corriger le script précédent pour obtenir la somme des deux notes.