Nous allons passer en revue certains objets natifs qu’il convient de connaitre dans les prochaines leçons. Avant tout, il est important de bien comprendre comment fonctionnent les objets et de savoir comment créer et manipuler un objet.
Nous pouvons créer des objets de 4 manières différentes en JavaScript. On va pouvoir :
- Créer un objet littéral ;
- Utiliser le constructeur
Object(); - Utiliser une fonction constructeur personnalisée ;
- Utiliser la méthode
create().
Ces différents moyens de procéder vont être utilisés dans des contextes différents, selon ce que l’on souhaite réaliser.
Dans cette leçon, nous allons commencer par créer un objet littéral et nous en servir pour expliquer en détail de quoi est composé un objet et comment manipuler ses membres. Nous verrons les autres techniques de création d’objet dans la leçon suivante.
Création d’un objet littéral
Dans la leçon précédente, nous avons créé un premier objet nommé utilisateur. Pour être tout à fait précis, nous avons créé un objet littéral :
See the Pen
Cours JavaScript 5.2.1 by Pierre (@pierregiraud)
on CodePen.
On parle ici d’objet « littéral » car nous avons défini chacune de ses propriétés et de ses méthodes lors de la création, c’est-à-dire littéralement.
Pour créer un objet littéral, on utilise une syntaxe utilisant une paire d’accolades { … } qui indique au JavaScript que nous créons un objet.
Nos objets vont généralement être stockés dans des variables. Par abus de langage, on confondra alors souvent la variable et l’objet et on parlera donc « d’objet » pour faire référence à notre variable stockant une valeur de type objet. Dans l’exemple ci-dessus, on dira donc qu’on a créé un objet nommé « utilisateur ».
Un objet est composé de différents couples de « nom : valeur » qu’on appelle membres. Chaque nom d’un membre doit être séparé de sa valeur par un caractère deux-points : et les différents membres d’un objet doivent être séparés les uns des autres par une virgule.
La partie « nom » de chaque membre suit les mêmes règles que le nommage d’une variable. La partie valeur d’un membre peut être n’importe quel type de valeur : une chaine de caractère, un nombre, une fonction, un tableau ou même un autre objet littéral.
Les membres d’un objet qui ne servent qu’à stocker des données sont appelés des propriétés tandis que ceux qui manipulent des données (c’est-à-dire ceux qui contiennent des fonctions en valeur) sont appelés des méthodes.
Utiliser le point pour accéder aux membres d’un objet, les modifier ou en définir de nouveaux
Pour accéder aux propriétés et aux méthodes d’un objet, on utilise le caractère point . qu’on appelle également un accesseur. On va ici commencer par préciser le nom de l’objet puis l’accesseur puis enfin le membre auquel on souhaite accéder.
Cet accesseur va nous permettre non seulement d’accéder aux valeurs de nos différents membres mais également de modifier ces valeurs. Regardez plutôt le code ci-dessous :
See the Pen
Cours JavaScript 5.2.2 by Pierre (@pierregiraud)
on CodePen.
Ici, on commence par accéder aux propriétés nom et age de notre objet pierre en utilisant les notations pierre.nom et pierre.age. Cela nous permet de récupérer les valeurs des propriétés.
Dans le cas présent, on se contente d’afficher ces valeurs au sein de deux paragraphes de notre page HTML. Pour cela, on utilise la notation document.getElementById('{p1,p2}').innerHTML qu’on a déjà vu précédemment dans ce cours.
A ce niveau, vous devriez avoir remarqué qu’on utilise également des points pour accéder au contenu HTML de nos paragraphes et y placer les données souhaitées. En fait, c’est tout simplement parce que document est également un objet prédéfini d’une API (interface de programmation) appelée « DOM » (Document Object Model) que nous allons étudier dans la partie suivante.
Cet objet possède notamment une méthode getElementById() qui nous permet d’accéder à un élément HTML en fonction de son attribut id et une propriété innerHTML qui nous permet d’insérer du contenu entre les balises d’un élément HTML. Ici, on accède donc à nos paragraphes possédant les id='p1' et id='p2' et on place la valeur des propriétés nom et age de l’objet pierre entre les balises de ceux-ci.
En dessous, on utilise notre accesseur avec l’opérateur d’affectation = pour cette fois-ci modifier la valeur de la propriété age de notre objet pierre, et on affiche ensuite la nouvelle valeur pour bien montrer que la propriété a été modifiée.
Finalement, on utilise notre accesseur pour exécuter la méthode bonjour() de l’objet pierre. Pour faire cela, on procède de la même façon que pour exécuter une fonction anonyme placée dans une variable.
Enfin, on va encore pouvoir utiliser notre accesseur pour créer de nouveaux membres pour notre objet. Pour cela, il suffit de définir un nouveau nom de membre et de lui passer une valeur comme cela :
See the Pen
Cours JavaScript 5.2.3 by Pierre (@pierregiraud)
on CodePen.
Ici, on ajoute une propriété taille et une méthode prez() à notre objet pierre. On invoque ensuite notre nouvelle méthode pour s’assurer qu’elle fonctionne bien.
Utiliser les crochets pour accéder aux propriétés d’un objet, les modifier ou en définir de nouvelles
On va également pouvoir utiliser des crochets plutôt que le point pour accéder aux propriétés de nos objets, mettre à jour leur valeur ou en définir de nouvelles. Cela ne va en revanche pas fonctionner pour les méthodes.
Les crochets vont être particulièrement utiles avec les valeurs de type tableau (qui sont des objets particuliers qu’on étudiera plus tard dans ce cours) puisqu’ils vont nous permettre d’accéder à une valeur en particulier dans notre tableau.
Dans le code précédent, la valeur de la propriété nom par exemple est un tableau. Notez qu’on utilise également ces mêmes crochets pour définir un tableau (encore une fois, nous reviendrons plus tard là-dessus).
En programmation, un tableau correspond à un ensemble de valeurs auxquelles vont être associées des index ou des clefs. On appelle l’ensemble clef + valeur un élément du tableau.
La plupart des langages de programmation gèrent deux types de tableaux : les tableaux numérotés et les tableaux associatifs. Le principe des tableaux numérotés est que les clefs associées aux valeurs vont être des chiffres. Par défaut, la première valeur va recevoir la clef 0, la deuxième valeur sera associée à la clef 1 et etc. Les tableaux associatifs vont eux avoir des clefs textuelles qui vont être définies manuellement.
Pour accéder à une valeur en particulier dans un tableau, on utilise la syntaxe « nom_du_tableau[clef] ».
Le JavaScript est un langage qui ne supporte que l’utilisation de tableaux numérotés. Dans le cas présent, notre propriété nom contient un tableau qui possède deux éléments : la valeur du premier élément est « Pierre » et la clef associée par défaut est 0. La valeur du deuxième élément est « Giraud » est la clef associée par défaut est 1.
Ainsi, pour accéder à la valeur « Pierre » de notre propriété nom de l’objet pierre, on écrira pierre.nom[0]. Pour accéder à la valeur « Giraud », on écrira pierre.nom[1].
Comme je l’ai dit plus haut, on va pouvoir en JavaScript utiliser cette même syntaxe pour accéder à n’importe quelle propriété d’un objet, pour modifier la valeur d’une propriété ou encore pour définir de nouvelles propriétés.
Pour faire cela, on va faire « comme si » notre objet était un tableau associatif composés d’éléments dont les clefs sont les noms des propriétés et les valeurs sont les valeurs associées.
Pour accéder à la valeur complète de la propriété nom de l’objet pierre, on pourra ainsi écrire pierre['nom']. Pour accéder à la valeur de mail, on écrira pierre['mail']. Si on souhaite accéder à la valeur du premier élément de notre tableau nom, on pourra encore écrire pierre['nom'][0].
See the Pen
Cours JavaScript 5.2.4 by Pierre (@pierregiraud)
on CodePen.
Notez que le fait qu’on puisse utiliser ce genre d’écriture fait qu’on a souvent tendance à comparer les objets en JavaScript à des tableaux associatifs justement.
Une nouvelle fois, nous étudierons les tableaux plus en détail dans une prochaine leçon. Pour le moment, concentrez-vous sur les façons d’accéder aux membres d’un objet et de les modifier.
L’utilisation du mot clef this
Il nous reste une dernière partie de notre objet à définir : le mot clef this qu’on utilise au sein de notre méthode bonjour().
Le mot clef this est un mot clef qui apparait fréquemment dans les langages orientés objets. Dans le cas présent, il sert à faire référence à l’objet qui est couramment manipulé.
Pour le dire très simplement, c’est un prête nom qui va être remplacé par le nom de l’objet actuellement utilisé lorsqu’on souhaite accéder à des membres de cet objet.
En l’occurrence, lorsqu’on écrit pierre.bonjour(), le mot clef this va être remplacé par pierre.
Quel intérêt d’utiliser this plutôt que directement pierre ? Dans le cas de la création d’un objet littéral, il n’y en a strictement aucun.
Cependant, vous allez voir qu’il va vite devenir indispensable d’utiliser this dès qu’on va commencer à créer des objets à la chaine de façon dynamique en utilisant par exemple un constructeur. Nous allons illustrer tout cela dès la prochaine leçon !
Bonjour Pierre,
Le premier exemple ne marche pas chez moi. J’ai l’impression qu’il manque pierre.bonjour();
Bonne journée
Bonjour,
Oui le premier exemple était simplement un exemple de présentation et n’avait pas pour but d’être fonctionnel.
Cordialement,
L’idiot que je suis n’avait pas compris qu’il fallait décommenter..