Les différentes variables - Cours Javascript

Introduction

Définition

Une variable peut être considérée comme un conteneur. C'est à dire pour schématiser un lieu de stockage d'informations.
Imaginons que j'ai besoin à plusieurés reprises d'afficher un long texte. Au lieu de le réécrire à chaque fois, je le définis une fois dans une variable
Exemple de code :
var texte ="le texte en question";
et Hop! , je n'ai plus qu'à utiliser le nom de la variable.

Le nom de la variable ne doit pas contenir d'accents, de guillemets, d'apostrophes ou des caractères de type %, *, ., ?, §, !, -, etc....

Une variable est déclarée au départ par :
Exemple de code :
var nom_variable = new Type de la variable;
ou par :
Exemple de code :
var nom_variable;
Si vous appelez une variable dont la valeur n'a pas été définite (comme c'est le cas dans l'exemple précèdent) sa valeur est par défaut "undefined".

La valeur d'une variable peut être redéfinie à tout moment.

Pour donner une nouvelle valeur à une variable :
Exemple de code :
nom_variable = nouvelle valeur;
La valeur peut être d'un type différent.

La variable de type Boolean.

Définition

Une variable javascript est de type Boolean si sa valeur est de type :
- true ou 1 (vrai)
- false ou 0 (faux).

On déclare la variable comme ceci :
Exemple de code :
var test=new Boolean(true);
test=new Boolean(1);
ou
Exemple de code :
var test = true;

Exercice

Etape 1 :
Ouvrez le générateur de code HTML (Voir le menu à droite de la page).

Etape 2 :
Dans le générateur, déclarez une variable de type Boolean.
Puis mettez ce texte :
Exemple de code :
alert(nom_de_votre_variable);
Visualisez.

La variable de type String

Définition

Une variable javascript est de type String si sa valeur est une chaîne de caractères. Une phrase par exemple.

On déclare la variable comme ceci :
Exemple de code :
var test = new String("je suis parti à la mer");
A noter, la chaîne de caractère est entre guillemets.

D'où le problème quand dans ma variable j'ai des guillemets, si je les mets cela crée une erreur.
Voici le moyen de détourner le problème.
Exemple de code :
var test = new String("vacance d\"été");

CONVENTION SIGNIFICATION
\b espace arrière
\f saut de page
\n saut de ligne
\r retour chariot
\t tabulation
\' apostrophe
\" guillemet
\\ slache à gauche

Il est possible que lorsque vous concaténez (mettre bout à bout) plusieurs variables non déclarées en type String(), cela vous renvoie des chiffres additionnés :

Exemple :
si vous avez :
Exemple de code :
var g="";
var m="32";
var r="35";
g=m+r;
alert(g);
On obtient 3235. mais si vous obtenez 67 alors c'est qu'il considère que les variables m et r sont de type Number.

Il faut donc écrire :
Exemple de code :
g=String(m+r);

Exercice

Etape 1 :
Ouvrez le générateur de code HTML (Voir le menu à droite de la page).

Etape 2 :
Dans le générateur, déclarez une variable de type String contenant du texte.
Puis mettez ce texte :
Exemple de code :
alert(nom_de_votre_variable);
Visualisez.

Exercice

Etape 1 :
Ouvrez le générateur de code HTML (Voir le menu à droite de la page).

Etape 2 :
Nous allons concaténer (mettre bout à bout) deux variables
Dans le générateur, déclarez deux variables de type String.
Le code à taper :
Exemple de code :
var test0 = new String("DMC");
var test1 = new String("Mon nom est : ");

Puis mettez ce texte :
Exemple de code :
alert(test1+test0);
Visualisez.

La variable de type Number

Définition

Une variable javascript est de type Number si sa valeur est une valeur numérique (123 par exemple).

On déclare la variable comme ceci :
Exemple de code :
var test=new Number(-2569);

Attention, si votre valeur n'est pas de type Number pas d'opération possible.

Il est possible que l'addition de plusieurs variables non déclarées en type Number(), vous renvoie des chiffres côte à côte.

Exemple :
si vous avez :
Exemple de code :
var g="";
var m=32;
var r=35;
g=m+r;
alert(g);

On obtient 67. mais si vous obtenez 3235 alors c'est qu'il considère que les variables m et r sont de type String.

Il faut donc écrire :
Exemple de code :
g=Number(m+r);

Exercice

Etape 1 :
Ouvrez le générateur de code HTML (Voir le menu à droite de la page).

Etape 2 :
Dans le générateur, déclarez une variable de type Number.
Puis mettez ce texte :
Exemple de code :
alert(nom_de_votre_variable);
Visualisez.

Exercice

Etape 1 :
Ouvrez le générateur de code HTML (Voir le menu à droite de la page).

Etape 2 :
Dans le générateur, déclarez une variable de type String dont la chaîne de caractère sera "2".
Déclarez une variable de type Number dont la chaîne de caractère sera 2 et une autre égale à 3.
Le code à taper :
Exemple de code :
var test0=new String("2");
var test1=new Number(2);
var test2=new Number(3);
Nous allons faire une addition entre test1 et test2:
Exemple de code :
alert(test1+test2);
Visualisez, nous obtenons 5, 2+3=5 normal.
Maintenant remplacez le alert() par :
Exemple de code :
alert(test0+test2);
Visualisez, nous obtenons 23 ???.
Que s'est-il passé?. Comme test0 est de type string, il ne peut pas faire de calcul, donc il les met bout à bout.

La variable de type Array

Définition

Le tableau est pour schématiser une variable qui permet de stocker d'autres variables.
Un tableau peut stocker tous types de variables à la fois.

On déclare la variable comme ceci :
Exemple de code :
var test=new Array(5);
Le chiffre 5 précise qu'il y a 5 éléments dans le tableau, il n'est pas nécessaire de le préciser.
Le premier élément du tableau à un index de 0.

Plusieurs façons d'affecter une variable aux éléments.
Exemple de code :
var test =[false,2,"test"];
ou :
Exemple de code :
var test=new Array(5);
test[0]=false;
test[1]=2;
test[2]="test";

On accède à une valeur du tableau en spécifiant sa position :
Exemple de code :
alert(test[5]);


Je développe plus dans le chapitre "Propriétés de variables"

Exercice

Etape 1 :
Ouvrez le générateur de code HTML (Voir menu en haut de la page).

Etape 2 :
Nous allons créer un tableau :
Exemple de code :
var test =[false,2,"test"];
Puis mettez ce texte :
Exemple de code :
alert(test[2]);
Visualisez.

Un tableau peu contenir un autre tableau.

On déclare la variable comme ceci :
Exemple de code :
var test=new Array(4);
var test[0]=["a"];
var test[1]=new Array(2);
var test[1][0]=["b"];
var test[1][1]=["b"];
var test[2]=["a"];
var test[3]=["a"];
Ici, on a un tableau de 4 valeurs et la seconde valeur comporte un tableau de 2 valeurs.

La variable de type Object

Définition

L'objet est comparable au tableau à la seule différence que chaque variables stockées ne sont pas appellées par un index (mavariavle[9]), mais par un nom.

On déclare la variable comme ceci :
Exemple de code :
var test = new Object();
var test = {};

Plusieurs façons d'affecter une variable aux éléments.
Exemple de code :
var test = new Object();
test.mom0 = "alias";
test.mom1 = "dmc";

ou
Exemple de code :
var test = {mom0 : "alias",mom1 : "dmc};

Exercices

Etape 1 :
Ouvrez le générateur de code HTML (Voir menu en haut de la page).
Etape 2 :
Nous allons créer un Object:
Exemple de code :
var test ={momo0:"alias",momo1 :"dmc"};

Puis mettez ce texte :
Exemple de code :
alert(test["momo0"]+test["momo1"]);
//revient à
alert(test.momo0+test.momo1);

Visualisez.

Déclaration implicite

Info

Cependant, vous n'êtes pas obligé de déclarer le type de la variable javascript.

Si vous mettez :
Exemple de code :
var test=true;
Javascript va déduire que "test" est de type Booleean.
Par contre si vous mettez :
Exemple de code :
var test="true";
Javascript va déduire que "test" est de type String.

Si vous mettez :
Exemple de code :
var test=12;
Javascript va déduire que "test" est de type Number.
Par compte si vous mettez :
Exemple de code :
var test="2";
Javascript va déduire que "test" est de type String.

Connaître le type de la variable

Info

L'opérateur typeof(nom_de_la_variable) permet de connaître le type de la variable si vous ne les avez pas déclarez.
Exemple de code :
var dmc = "momo";
alert(typeof dmc);

Pour une variable de type Boolean il renvoie : boolean
Pour une variable de type Number il renvoie : number
Pour une variable de type String il renvoie : string
Pour une variable de type Object il renvoie : object
Pour une variable de type Function il renvoie : function
Pour une variable sans valeur il renvoie : undefined

Connaître le nombre de caractère d'une variable

Info

Il est possible de connaître le nombre de caractères d'une variable grâce à :nom_de_la_variable.length. Un espace compte un caractère.

Exemple :
Exemple de code :
var m1="mlkj";
var m2=321456;
alert("m1 : "+m1.length+"nm2 : "+String(m2).length);
Chapitre avant propos
Chapitre string