▼ 2. Variables ▼

Mystick Javascript  

• Les variables
• Déclaration/
  affectation
• String / nombre
• Vecteurs
• Grandeur d'un
  vecteur
• Vecteur en string
• Trier un vecteur
• Autres méthodes

     ◄ Retour accueil

Les variables

Type des variables

Les variables sont des conteneurs temporaires de valeurs. Il existe des variables constantes qui rendent le code plus lisible et facile à modifier. Si vous devez conserver dans la variable tauxTaxe le taux de la taxe en vigueur soit 7.5, il se peut que la variable tauxTaxe soit présente dans plusieurs calculs différents. Si le taux en vigueur venait à changer, vous n'auriez à changer le taux qu'à une seule place, soit à la déclaration de la variable.

Nommer une variable

Le nom d'une variable doit être descriptif pour faciliter le débug.
Le nom d'une variable peut être composé de lettres majuscules ou minuscules, de chiffres et du trait de soulignement ( _ ).
Les autres symboles ne doivent pas être utilisé et de plus le nom de la variable doit débuter par une lettre et ne pas contenir d'espaces.
Javascript est case sensitive, ce qui veut dire qu'il fait une différence entre les minuscules et les majuscules, ainsi ALLO et AllO sont différents, etc.

...~> pour faciliter le débug j'utilise un standard pour nommer les variables. Ainsi mes variables membres sont précédées de m_, paramètres de p_, etc. <~ ...

Type de variables
 

Les entiers (integer)

Nombres positifs ou négatifs entiers. Peut être utilisés pour des opérations arithmétiques. Ex : 2, -165

Les "virgules flottantes" (double)

Nombres décimaux. Décimales notées par un point et non une virgule !! Peut être utilisés pour des opérations arithmétiques.  Ex : 2.5, -78.999

Les chaînes de caractères (string)

Groupes de caractères (mots ou phrases). Peut conserver une seule lettre ou un texte entier. Chaînes sont écrites entre guillemets. Ex: "allo", "B", "La pomme est rouge."

Les booléens (bool)

Soit la valeur true [ce qui égale 1] (vrai) ou false [ce qui égale 0] (faux). Sert à tester des conditions.

Déclaration / affectation

Javascript est un langage faiblement typé. Ceci signifie qu'il n'est pas nécessaire de donner un type aux variables lors de leur déclaration. Le type d'une variable peut aussi changer tout au long de l'exécution et des variables de types différents peuvent être combinées sans erreurs.

Déclaration d'une variable
On utilise le mot réservé var pour déclarer une variable. var permet de créer des variables locales qui ont des noms de variables pareils dans différentes fonctions.
Si on déclare une variable avec var à l'extérieur d'une fonction, elle devient locale à la page au complet et peut être utilisée partout. [à l'image d'une variable globale.]

Affectation d'une valeur à une variable
Lorsque la variable a été déclarée, vous pouvez lui affecter une valeur grâce à l'opérateur d'affectation ( = ).
nomVariable= valeur;
Lorsqu'il s'agit d'affecter une string, il ne faut pas oublier de l'entourer de guillemets. Une chaîne sans guillemets est considérée comme une variable.

Exemple :

var venteLundi= 45;
var venteMardi= 6.77;
var totalVentes= venteLundi + venteMardi;
var message= "Nous avons effectué de bonnes ventes.";

String / nombre

Conversion de string en nombre

Si vous affectez un nombre à une variable, mais qu'il se trouve entre guillemets, la variable sera de type string. Javascript offre deux fonctions qui extraient les nombres au début d'une string et les convertit en valeurs numériques. Les string qui commencent par des chiffres peuvent être converties en valeur numérique avec parseInt() pour les entiers et parseFloat() pour les nombres à virgule. Le nom de la variable contenant le futur nombre doit être envoyée en paramètre.

Exemple :

var bottin= "9370707clan paneton";
document.write(parseInt(bottin));

Ceci écrira «9370707» à l'endroit voulu. Si la variable ne débute pas par un nombre, la fonction parseInt() retourne la valeur NaN qui signifie «Not a Number».
Il est possible d'affecter une valeur numérique à une variable qui contenait avant une string. Javascript est tellement faiblement typé, que le type de ses variables peut changer à tout moment.

Conversion de nombre en string

Nous verrons plus loin les fonctions membres des strings. Vous pouvez maintenant savoir qu'il y a deux moyens de convertir une variable de valeur numérique en string. La première s'agit d'affecter "", une paire de guillemets vides, à la variable et de concaténer la variable numérique, grâce à l'opérateur de concaténation de string ( + ). La seconde s'agit d'utiliser la fonction membre de la classe String ,  toString().

Exemples :

var nombre= 45;
var string= "" + nombre;

// ou bien la seconde méthode :

var string= nombre.toString();

Si vous vous demandez qu'elle méthode serait la meilleure pour vous, sachez que la seconde qui emploie le toString() est celle utilisée par les programmeurs. Elle est beaucoup plus claire et permet de voir rapidement où les changements de type de la variable ont été effectués. Utiliser les fonctions des librairies de Javascript est une bonne habitude à prendre, vous en serez assurément gagnants.

Vecteurs

Déclarer un vecteur

Il est possible de regrouper un ensemble de variables sous le nom d'une seule en utilisant un vecteur ou tableau indexé. Chaque variable storée sous le nom du vecteur peut être accédée en utilisant son index, sa clé. Ce dernier est placé après le nom du vecteur entre crochets ( [] ). Pour créer un tableau on doit appeler le constructeur Array() qui crée un objet de la classe Vecteur. Mais puisque les vecteurs sont des instances, on doit, un peu comme en C++, les déclarer avec new.  Tous les objets en Javascript peuvent être crées avec un new. Entre les parenthèses il est possible de déterminer le nombre d'éléments que contiendra le vecteur. Il est aussi possible de lister entre les parenthèses directement les valeurs que contiendra le vecteur.

~> Array est le terme anglais de vecteur <~

On peut déclarer les vecteurs de trois manières principales :

1. donner la liste des éléments que contiendra le vecteur       
   ex : var tabCouleurs= new Array("rouge", "bleu", "vert");            // la grandeur du vecteur sera 3
    
2. donner le nombre d'éléments que contiendra le vecteur     
   ex : var tabJours= new Array(7);
    
3. le déclarer vide
    
4. ex : var tabPlanetes= new Array();

Les éléments d'une page Internet sont tous des objets. Si on a plusieurs images dans la page, elles sont mises dans un vecteur pour le compilateur. Si on ne connaît pas le nom de notre image, mais qu'on sait où elle se trouve dans l'ordre de la page, on peut l'accéder ainsi : document.image[2] , par exemple.

Accès aux éléments d'un vecteur

Pour faire référence aux éléments d'un vecteur, on doit indiquer le nom du vecteur suivi du numéro de l'indice entre crochets. Il est aussi possible d'utiliser des strings (mots) à la place de nombres. (sauf les anciennes versions comme Javascript 1.0 qui n'acceptent que les chiffres) Cependant, lorsqu'on utilise des mots, il n'y a pas d'ordre dans notre vecteur et il est impossible de faire des boucles grâce à son indice.  

Le premier élément d'un vecteur est à l'indice 0. Il est possible de stocker dans un vecteur des variables de type différents.
Javascript permet de créer des vecteurs multidimensionnels, c'est à dire des vecteurs qui contiennent des vecteurs.

Exemple :

var vecteurJours= new Array(7);

vecteurJours[0]= "dimanche";
vecteurJours[1]= "lundi";
vecteurJours[2]= "mardi";
vecteurJours[3]= "mercredi";
vecteurJours[4]= "jeudi";
vecteurJours[5]= "vendredi";
vecteurJours[6]= "samedi";

// D'autres exemples de déclarations :
var vectPlanetes= new Array();
var vectFleurs= new Array("tulipe", "rose", "muguet", "lilas");

// Exemple d'index avec un mot, puis d'une affectation de valeur
// (ici c'est semblable aux maps)
vectPlanetes["jupiter"]= 77;

Si on ne donne pas de grosseur spécifiée au départ, on peut initialiser à des indices plus grand que ce qu'on a déjà ce qui a pour effet de l'agrandir.

Grandeur d'un vecteur

Trouver le nombre d'éléments d'un vecteur

Il est possible d'ajouter et enlever des éléments dans un vecteur tout au long de l'exécution. Il se peut alors qu'à un moment donné vous ayez besoin du nombre d'éléments que contient le vecteur. Pour pouvoir faire un traitement sur l'ensemble des données contenues dans un vecteur ordonné (index de nombres qui se suivent), il faut avoir recours à une boucle et savoir le nombre d'éléments du vecteur pour calculer l'arrêt de la boucle. Un vecteur est un objet et les objets ont des fonctions et des variables membres. La variable membre length contient le nombre d'éléments d'un objet vecteur. Comme toutes les fonctions et variables membres, on peut y avoir accès en ayant recours à la syntaxe suivante : objet.variableMembre .

La grandeur maximale qu'on peut allouer à un vecteur est 4,294,967,295.
On peut aussi se servir de length() pour tronquer un vecteur.

Exemple :

var vectAmis= new Array(5);
document.write(vectAmis.length);

Ceci écrira 5.

Si le tableau n'est pas ordonné

C'est dont qu'il y a des «trous» dans le vecteur. Les éléments n'y sont pas contigus. Si le vecteur a été déclaré en spécifiant sa taille à la déclaration en mettant la grandeur entre les paranthèses, length retourne toujours ce nombre. Il s'agit du nombre d'emplacement réservés au vecteur dans la mémoire de l'ordinateur.

Si la grandeur n'avait pas été spécifiée, length retourne la valeur de l'index le plus grand.

Vecteur en String

Pour afficher le contenu d'un vecteur, qui peut parfois être très grand, il est plus recommandé de convertir le vecteur en string. L'objet vecteur possède une fonction membre pour réunir en une string les différents éléments du vecteur. join() reçoit en paramètre une chaîne qui sera utilisée comme séparateur entre les éléments. Si on ne le spécifie pas, le séparateur par défaut virgule ( , ) sera utilisé.

Exemple :

var vectLivres= new Array(4);

vectLivres[0]= "Dictionnaire";
vectLivres[1]= "Bible";
vectLivres[2]= "Atlas";
vectLivres[3]= "Beschrelle";

// à ce niveau contenu contient : Dictionnaire,Bible,Atlas,Beschrelle
var contenu= vectLivres.join();
// à ce niveau contenu contient : Dictionnaire-Bible-Atlas-Beschrelle
var contenu2= vectLivres.join("-");
// à ce niveau contenu contient : Dictionnaire Bible Atlas Beschrelle
var contenu3= vectLivres.join(" ");

toString();

Vecteur possède aussi une méthode appelée toString(); qui retourne en une string les éléments du vecteur séparés les uns des autres par des virgules. Javascript utilise automatiquement cette fonction membre lorsqu'il doit afficher le contenu d'un vecteur ou le concaténer.

Trier un vecteur

L'objet vecteur possède une fonction membre, une méthode, nommée sort() qui permet de trier les éléments du vecteur par ordre alphabétique ascendant puis de retourner une string de ces éléments triés mis bout à bout. Cet ordre alphabétique tri d'abord les string commençant par des majuscules, puis celles avec des minuscules. Lorsqu'on emploie sort() sur un vecteur de nombres, ces derniers sont triés par ordre alphabétique.

Exemple :

var tab= new Array(4);
tab[0]= 3;
tab[1]= 10;
tab[2]= 20;
tab[3]= 2;
document.write(tab.sort());                // Affiche : 10,2,20,3

Tri avec une fonction de comparaison (prédicat)

Il est possible de donner un prédicat à sort() pour qu'il tri d'une manière qu'on a définie. Un prédicat est une fonction de comparaison qu'on peut écrire et envoyer à une fonction de tri. Le tri se fait alors en comparant les éléments ensemble grâce au code de la fonction de comparaison. Voici un exemple qui permet de trier d'une manière numérique :

Exemple :

// Fonction de comparaison que j'ai mise dans mon <head>
function triNumerique(p_nombre1, p_nombre2)
    {
    return p_nombre1 - p_nombre2;
    }

// Appel dans le code de ma page avec le vecteur de l'exemple précédent (tab)
var stringEnOrdre= tab.sort(triNumerique);

Lorsque sort() est exécuté, triNumerique est appelé. Cette fonction reçoit deux paramètres et retourne la différence entre les deux. Ce résultat est utilisé par sort() pour trier les nombres par ordre numérique.

L'objet Array (vecteur) possède aussi la méthode reverse() qui permet d'afficher en ordre à l'envers de l'ordre alphabétique. Finalement il s'agit du contraire de sort().

Autres méthodes

Slice()

L'objet Array possède la méthode slice() qui sert à extraire une section d'un vecteur afin d'en créer un nouveau. Cette méthode reçoit deux paramètres, le premier est l'index du premier élément à extraire et le second est l'index du dernier élément à sélectionner.  Si on omets le paramètre de fin, slice() extraira jusqu'au dernier élément du vecteur.   Si on donne un nombre négatif comme paramètre de fin, par exemple slice(0, -3); , JavaScript l'interprètte comme " la fin est le troisième élément à partir de la fin ". 

slice() ne modifie pas le vecteur original il ne fait qu'en créer un nouveau en copiant la partie voulue.

Exemple :

var tab= new Array(4);
tab[0]= "kiwi";
tab[1]= "zucchini";
tab[2]= "okra";
tab[3]= "vanille";

var tableau2= tab.slice(1,2);

tableau2 contient donc : zucchini et Okra

Concat()

Cette méthode joint deux vecteurs et retourne le nouveau vecteur ainsi créé. concat() ne change pas les vecteurs en cause, mais en crée un nouveau contenant des copies des vecteurs concaténés.

Exemple :

var tabNoms= new Array("Julie", "Sophie", "Marie");
var tabAges= new Array(18, 23, 26);
var tabGroupes= tabNoms.concat(tabAges);                // tabGroupes= Julie,Sophie,Marie,18,23,26

pop()
Cette méthode bien utile enlève le dernier élément d'un vecteur et le retourne en paramètre de sorti au code. Il est ainsi possible de le conserver dans une variable.

shift()
Cette méthode enlève le premier élément d'un vecteur et le retourne en paramètre au code.

push()
Cette méthode reçoit en paramètre un ou plusieurs éléments qu'on souhaite ajouter au vecteur. push() ajoutera ces éléments à la fin du vecteur puis retourne en paramètre sa nouvelle grandeur.

unshift(éléments)
Ajoute un ou plusieurs éléments au début d'un vecteur et retourne la nouvelle grandeur du vecteur. On lui donne en paramètre les valeurs des éléments qu'on désire ajouter au vecteur.

splice(début, nombre, éléments)
Cette méthode a pour effet de changer le contenu d'un vecteur en remplaçant des anciens éléments par des nouveaux.

En se référant aux "paramètres" indiqué dans l'entête de cette section

splice() retourne l'élément enlevé si il n'en avait qu'un à enlever (nombre = 1) sinon, il retourne un vecteur contenant les éléments enlevés. Si on met un nombre différent d'éléments à enlever et à ajouter, la grandeur du vecteur sera modifiée.