Dynamisez vos sites web avec JavaScript !

Les objets sont une notion fondamentale en JavaScript. Dans ce chapitre, nous verrons comment les utiliser, ce qui nous permettra d'introduire l'utilisation des tableaux, un type d'objet bien particulier et très courant en JavaScript. Nous verrons comment créer des objets simples et des objets littéraux, qui vont se révéler rapidement indispensables.

Introduction aux objets

Il a été dit précédemment que le JavaScript est un langage orienté objet. Cela veut dire que le langage dispose d'objets.

Un objet est un concept, une idée ou une chose. Un objet possède une structure qui lui permet de pouvoir fonctionner et d'interagir avec d'autres objets. Le JavaScript met à notre disposition des objets natifs, c'est-à-dire des objets directement utilisables. Vous avez déjà manipulé de tels objets sans le savoir : un nombre, une chaîne de caractères ou même un booléen.

Si, mais en réalité, une variable contient surtout un objet. Par exemple, si nous créons une chaîne de caractères, comme ceci :

var myString = 'Ceci est une chaîne de caractères';

La variablemyStringcontient un objet, et cet objet représente une chaîne de caractères. C'est la raison pour laquelle on dit que le JavaScript n'est pas un langage typé, car les variables contiennent toujours la même chose : un objet. Mais cet objet peut être de nature différente (un nombre, un booléen…).

Outre les objets natifs, le JavaScript nous permet de fabriquer nos propres objets. Ceci fera toutefois partie d'un chapitre à part, car la création d'objets est plus compliquée que l'utilisation des objets natifs.

Que contiennent les objets ?

Les objets contiennent trois choses distinctes :

• un constructeur ;

• des propriétés ;

• des méthodes.

Le constructeur

Le constructeur est un code qui est exécuté quand on utilise un nouvel objet. Il permet d’effectuer des actions comme définir diverses variables au sein même de l'objet (comme le nombre de caractères d'une chaîne de caractères). Tout cela est fait automatiquement pour les objets natifs, nous en reparlerons quand nous aborderons l'orienté objet.

Les propriétés

Toute valeur va être placée dans une variable au sein de l'objet : c'est ce que l'on appelle une propriété. Une propriété est une variable contenue dans l'objet, elle contient des informations nécessaires au fonctionnement de l'objet.

Les méthodes

Enfin, il est possible de modifier l'objet. Cela se fait par l'intermédiaire des méthodes. Les méthodes sont des fonctions contenues dans l'objet, et qui permettent de réaliser des opérations sur le contenu de l'objet. Par exemple, dans le cas d'une chaîne de caractères, il existe une méthode qui permet de mettre la chaîne de caractères en majuscules.

Exemple d'utilisation

Nous allons créer une chaîne de caractères, pour ensuite afficher son nombre de caractères et la transformer en majuscules. Soit la mise en pratique de la partie théorique que nous venons de voir.

var myString = 'Ceci est une chaîne de caractères'; // On crée un objet String

alert(myString.length); // On affiche le nombre de caractères, au moyen de la propriété « length »

alert(myString.toUpperCase()); // On récupère la chaîne en majuscules, avec la méthode toUpperCase()

Essayer le code

On remarque quelque chose de nouveau dans ce code : la présence d'un point. Ce dernier permet d'accéder aux propriétés et aux méthodes d'un objet. Ainsi, quand nous écrivonsmyString.length, nous demandons au JavaScript de fournir le nombre de caractères contenus dansmyString. La propriétélengthcontient ce nombre, qui a été défini quand nous avons créé l'objet. Ce nombre est également mis à jour quand on modifie la chaîne de caractères :

var myString = 'Test';
alert(myString.length); // Affiche : « 4 »

myString = 'Test 2';
alert(myString.length); // Affiche : « 6 » (l'espace est aussi un caractère)

Essayer le code

C'est pareil pour les méthodes : avecmyString.toUpperCase(), je demande au JavaScript de changer la casse de la chaîne, ici, tout mettre en majuscules. À l'inverse, la méthodetoLowerCase()permet de tout mettre en minuscules.

Objets natifs déjà rencontrés

Nous en avons déjà rencontré trois :

1. Number: l'objet qui gère les nombres ;

2. Boolean: l'objet qui gère les booléens ;

3. String: l'objet qui gère les chaînes de caractères.

Nous allons maintenant découvrir l'objetArrayqui, comme son nom l'indique, gère les tableaux (array signifie « tableau » en anglais) !

Les tableaux

Souvenez-vous : dans le chapitre sur les boucles, il était question de demander à l'utilisateur les prénoms de ses frères et sœurs. Les prénoms étaient concaténés dans une chaîne de caractères, puis affichés. À cause de cette méthode de stockage, à part réafficher les prénoms tels quels, on ne sait pas faire grand-chose.

C'est dans un tel cas que les tableaux entrent en jeu. Un tableau, ou plutôt un array en anglais, est une variable qui contient plusieurs valeurs, appelées items. Chaque item est accessible au moyen d'un indice (index en anglais) et dont la numérotation commence à partir de 0. Voici un schéma représentant un tableau, qui stocke cinq items :

Les indices

Comme vous le voyez dans le tableau, la numérotation des items commence à 0 ! C'est très important, car il y aura toujours un décalage d'une unité : l'item numéro 1 porte l'indice 0, et donc le cinquième item porte l'indice 4. Vous devrez donc faire très attention à ne pas vous emmêler les pinceaux, et à toujours garder cela en tête, sinon ça vous posera problème.

Déclarer un tableau

On utilise bien évidemmentvarpour déclarer un tableau, mais la syntaxe pour définir les valeurs est spécifique :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

Le contenu du tableau se définit entre crochets, et chaque valeur est séparée par une virgule. Les valeurs sont introduites comme pour des variables simples, c'est-à-dire qu'il faut des guillemets ou des apostrophes pour définir les chaînes de caractères :

var myArray_a = [42, 12, 6, 3];
var myArray_b = [42, 'Sébastien', 12, 'Laurence'];

On peut schématiser le contenu du tableaumyArrayainsi :

L'index numéro0contient « Sébastien », tandis que le2contient « Ludovic ».

La déclaration par le biais de crochets est la syntaxe courte. Il se peut que vous rencontriez un jour une syntaxe plus longue qui est vouée à disparaître. Voici à quoi ressemble cette syntaxe :

var myArray = new Array('Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume');

Le mot-clénewde cette syntaxe demande au JavaScript de définir un nouvel array dont le contenu se trouve en paramètre (un peu comme une fonction). Vous verrez l'utilisation de ce mot-clé plus tard. En attendant il faut que vous sachiez que cette syntaxe est dépréciée et qu'il est conseillé d'utiliser celle avec les crochets.

Récupérer et modifier des valeurs

Comment faire pour récupérer la valeur de l'index 1 de mon tableau ? Rien de plus simple, il suffit de spécifier l'index voulu, entre crochets, comme ceci :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

alert(myArray[1]); // Affiche : « Laurence »

Sachant cela, il est facile de modifier le contenu d'un item du tableau :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

myArray[1] = 'Clarisse';

alert(myArray[1]); // Affiche : « Clarisse »

Essayer le code

Opérations sur les tableaux

Ajouter et supprimer des items

La méthodepush()permet d'ajouter un ou plusieurs items à un tableau :

var myArray = ['Sébastien', 'Laurence'];

myArray.push('Ludovic'); // Ajoute « Ludovic » à la fin du tableau
myArray.push('Pauline', 'Guillaume'); // Ajoute « Pauline » et « Guillaume » à la fin du tableau

Comme dit dans la partie théorique sur les objets, les méthodes sont des fonctions, et peuvent donc recevoir des paramètres. Ici,push()peut recevoir un nombre illimité de paramètres, et chaque paramètre représente un item à ajouter à la fin du tableau.

La méthodeunshift()fonctionne commepush(), excepté que les items sont ajoutés au début du tableau. Cette méthode n'est pas très fréquente mais peut être utile.

Les méthodesshift()etpop()retirent respectivement le premier et le dernier élément du tableau.

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

myArray.shift(); // Retire « Sébastien »
myArray.pop(); // Retire « Guillaume »

alert(myArray); // Affiche « Laurence,Ludovic,Pauline »

Essayer le code

Chaînes de caractères et tableaux

Les chaînes de caractères possèdent une méthodesplit()qui permet de les découper en un tableau, en fonction d'un séparateur. Prenons l'exemple suivant :

var cousinsString = 'Pauline Guillaume Clarisse',
    cousinsArray = cousinsString.split(' ');

alert(cousinsString);
alert(cousinsArray);

La méthodesplit()va couper la chaîne de caractères à chaque fois qu'elle va rencontrer une espace. Les portions ainsi découpées sont placées dans un tableau, icicousinsArray.

L'inverse desplit(), c'est-à-dire créer une chaîne de caractères depuis un tableau, se nommejoin():

var cousinsString_2 = cousinsArray.join('-');

alert(cousinsString_2);

Essayer le code complet !

Ici, une chaîne de caractères va être créée, et les valeurs de chaque item seront séparées par un tiret. Si vous ne spécifiez rien comme séparateur, les chaînes de caractères seront collées les unes aux autres.

Parcourir un tableau

Soyez attentifs, il s'agit ici d'un gros morceau ! Parcourir un tableau est quelque chose que vous allez faire très fréquemment en JavaScript, surtout plus tard, quand nous verrons comment interagir avec les éléments HTML.

Dans le chapitre sur les boucles nous avons étudié la bouclefor. Celle-ci va nous servir à parcourir les tableaux. La bouclewhilepeut aussi être utilisée, maisforest la plus adaptée pour cela. Nous allons voir aussi une variante defor: la bouclefor in.

Parcourir avecfor

Reprenons le tableau avec les prénoms :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

Le principe pour parcourir un tableau est simple : il faut faire autant d'itérations qu'il y a d'items. Le nombre d'items d'un tableau se récupère avec la propriétélength, exactement comme pour le nombre de caractères d'une chaîne de caractères. À chaque itération, on va avancer d'un item dans le tableau, en utilisant la variable de bouclei: à chaque itération, elle s'incrémente, ce qui permet d'avancer dans le tableau item par item. Voici un exemple :

for (var i = 0; i < myArray.length; i++) {
    
    alert(myArray[i]);
        
}

Essayer le code complet !

On commence par définir la variable de bouclei. Ensuite, on règle la condition pour que la boucle s'exécute tant que l'on n'a pas atteint le nombre d'items.myArray.lengthreprésente le nombre d'items du tableau, c'est-à-dire cinq.

Attention à la condition

Nous avons volontairement mal rédigé le code précédent. En effet, dans le chapitre sur les boucles, nous avons dit que le deuxième bloc d'une bouclefor, le bloc de condition, était exécuté à chaque itération. Ici ça veut donc dire quemyArray.lengthest utilisé à chaque itération, ce qui, à part ralentir la boucle, n'a que peu d'intérêt puisque le nombre d'items du tableau ne change normalement pas (dans le cas contraire, n'utilisez pas la solution qui suit).

L'astuce est de définir une seconde variable, dans le bloc d'initialisation, qui contiendra la valeur delength. On utilisera cette variable pour la condition :

for (var i = 0, c = myArray.length; i < c; i++) {
    
    alert(myArray[i]);
        
}

Nous utilisonsccomme nom de variable, qui signifie count (compter), mais vous pouvez utiliser ce que vous voulez.

Les objets littéraux

S'il est possible d'accéder aux items d'un tableau via leur indice, il peut être pratique d'y accéder au moyen d'un identifiant. Par exemple, dans le tableau des prénoms, l'item appelésisterpourrait retourner la valeur « Laurence ».

Pour ce faire, nous allons créer nous-mêmes un tableau sous la forme d'un objet littéral. Voici un exemple :

var family = {
    self: 'Sébastien',
    sister: 'Laurence',
    brother: 'Ludovic',
    cousin_1: 'Pauline',
    cousin_2: 'Guillaume'
};

Cette déclaration va créer un objet analogue à un tableau, excepté le fait que chaque item sera accessible au moyen d'un identifiant, ce qui donne schématiquement ceci :

La syntaxe d'un objet

Quelques petites explications s'imposent sur les objets, et tout particulièrement sur leur syntaxe. Précédemment dans ce chapitre vous avez vu que pour créer un array vide il suffisait d'écrire :

var myArray = [];

Pour les objets c'est à peu près similaire sauf que l'on met des accolades à la place des crochets :

var myObject = {};

Pour définir dès l'initialisation les items à ajouter à l'objet, il suffit d'écrire :

var myObject = {
    item1: 'Texte 1',
    item2: 'Texte 2'
};

Comme l'indique ce code, il suffit de taper l'identifiant souhaité suivi de deux points et de la valeur à lui attribuer. La séparation des items se fait comme pour un tableau, avec une virgule.

Accès aux items

Revenons à notre objet littéral : ce que nous avons créé est un objet, et les identifiants sont en réalité des propriétés, exactement comme la propriétélengthd'un tableau ou d'une chaîne de caractères. Donc, pour récupérer le nom de la sœur, il suffit de faire :

family.sister;

Il existe une autre manière, semblable à celle qui permet d'accéder aux items d'un tableau en connaissant l'indice, sauf qu'ici on va simplement spécifier le nom de la propriété :

family['sister'];

Cela va nous être particulièrement utile si l'identifiant est contenu dans une variable, comme ce sera le cas avec la boucle que nous allons voir après. Exemple :

var id = 'sister';

alert(family[id]); // Affiche : « Laurence »

Ajouter des items

Ici, pas de méthodepush()car elle n'existe tout simplement pas dans un objet vide, il faudrait pour cela un tableau. En revanche, il est possible d'ajouter un item en spécifiant un identifiant qui n'est pas encore présent. Par exemple, si nous voulons ajouter un oncle dans le tableau :

family['uncle'] = 'Didier'; // « Didier » est ajouté et est accessible via l'identifiant « uncle »

Ou bien sous cette forme :

family.uncle = 'Didier'; // Même opération mais d'une autre manière

Parcourir un objet avecfor in

Il n'est pas possible de parcourir un objet littéral avec une bouclefor. Normal, puisqu'une boucleforest surtout capable d'incrémenter une variable numérique, ce qui ne nous est d'aucune utilité dans le cas d'un objet littéral puisque nous devons posséder un identifiant. En revanche, la bouclefor inse révèle très intéressante !

La bouclefor inest l'équivalent de la boucleforeachdu PHP : elle est très simple et ne sert qu'à une seule chose : parcourir un objet.

Le fonctionnement est quasiment le même que pour un tableau, excepté qu'ici il suffit de fournir une « variable clé » qui reçoit un identifiant (au lieu d'un index) et de spécifier l'objet à parcourir :

for (var id in family) { // On stocke l'identifiant dans « id » pour parcourir l'objet « family »
    
    alert(family[id]);
        
}

Essayer le code complet !

Parce que les tableaux se voient souvent attribuer des méthodes supplémentaires par certains navigateurs ou certains scripts tiers utilisés dans la page, ce qui fait que la bouclefor inva vous les énumérer en même temps que les items du tableau.

Il y a aussi un autre facteur important à prendre en compte : la bouclefor inest plus gourmande qu'une boucleforclassique.

Utilisation des objets littéraux

Les objets littéraux ne sont pas souvent utilisés mais peuvent se révéler très utiles pour ordonner un code. On les utilise aussi dans les fonctions : les fonctions, avecreturn, ne savent retourner qu'une seule variable. Si on veut retourner plusieurs variables, il faut les placer dans un tableau et retourner ce dernier. Mais il est plus commode d'utiliser un objet littéral.

L'exemple classique est la fonction qui calcule des coordonnées d'un élément HTML sur une page Web. Il faut ici retourner les coordonnéesxety.

function getCoords() {
    /* Script incomplet, juste pour l'exemple */

    return {
        x: 12,
        y: 21
    };
}

var coords = getCoords();

alert(coords.x); // 12
alert(coords.y); // 21

La valeur de retour de la fonctiongetCoords()est mise dans la variablecoords, et l'accès àxetyen est simplifié.

Exercice récapitulatif

Le chapitre suivant contient un TP, c'est-à-dire un travail pratique. Cela dit, avant de le commencer, nous vous proposons un petit exercice qui reprend de manière simple ce que nous avons vu dans ce chapitre.

Énoncé

Dans le chapitre sur les boucles, nous avions utilisé un script pour demander à l'utilisateur les prénoms de ses frères et sœurs. Les prénoms étaient alors stockés dans une chaîne de caractères. Pour rappel, voici ce code :

var nicks = '',
    nick;

while (true) {
    nick = prompt('Entrez un prénom :');

    if (nick) {
        nicks += nick + ' '; // Ajoute le nouveau prénom ainsi qu'une espace juste après
    } else {
        break; // On quitte la boucle
    }
}

alert(nicks); // Affiche les prénoms à la suite

Ce que nous vous demandons ici, c'est de stocker les prénoms dans un tableau. Pensez à la méthodepush(). À la fin, il faudra afficher le contenu du tableau, avecalert(), seulement si le tableau contient des prénoms ; en effet, ça ne sert à rien de l'afficher s'il ne contient rien. Pour l'affichage, séparez chaque prénom par une espace. Si le tableau ne contient rien, faites-le savoir à l’utilisateur, toujours avecalert().

Correction

var nicks = [], // Création du tableau vide
    nick;

while (nick = prompt('Entrez un prénom :')) { // Si la valeur assignée à la variable « nick » est valide (différente de « null ») alors la boucle s'exécute
    nicks.push(nick); // Ajoute le nouveau prénom au tableau
}

if (nicks.length > 0) { // On regarde le nombre d'items
    alert(nicks.join(' ')); // Affiche les prénoms à la suite
} else {
    alert('Il n\'y a aucun prénom en mémoire !');
}

Essayer le code

Nous avons donc repris le code donné dans l'énoncé, et l'avons modifié pour y faire intervenir un tableau :nicks. À la fin, nous vérifions si le tableau contient des items, avec la conditionnicks.length > 0. Le contenu du tableau est alors affiché avec la méthodejoin(), qui permet de spécifier le séparateur. Car en effet, si nous avions faitalert(nicks), les prénoms auraient été séparés par une virgule.

En résumé

• Un objet contient un constructeur, des propriétés et des méthodes.

• Les tableaux sont des variables qui contiennent plusieurs valeurs, chacune étant accessible au moyen d'un indice.

• Les indices d'un tableau sont toujours numérotés à partir de 0. Ainsi, la première valeur porte l'indice 0.

• Des opérations peuvent être réalisées sur les tableaux, comme ajouter des items ou en supprimer.

• Pour parcourir un tableau, on utilise généralement une bouclefor, puisqu'on connaît, grâce à la propriétélength, le nombre d'items du tableau.

• Les objets littéraux sont une variante des tableaux où chaque item est accessible via un identifiant et non un indice.

• Q.C.M.
  

• Questionnaire didactique
  

• Écrire une boucle for pour parcourir un tableau
  

• Écrire un objet littéral et le parcourir avec for in