From e26d24940b2234a1a5e63b19d19d298bf36354e2 Mon Sep 17 00:00:00 2001 From: julieng Date: Sun, 14 Nov 2021 14:30:32 +0100 Subject: move *.html to *.md --- .../adding_bouncing_balls_features/index.html | 209 ------------- .../adding_bouncing_balls_features/index.md | 209 +++++++++++++ .../fr/learn/javascript/objects/basics/index.html | 258 ---------------- files/fr/learn/javascript/objects/basics/index.md | 258 ++++++++++++++++ files/fr/learn/javascript/objects/index.html | 70 ----- files/fr/learn/javascript/objects/index.md | 70 +++++ .../javascript/objects/inheritance/index.html | 261 ---------------- .../learn/javascript/objects/inheritance/index.md | 261 ++++++++++++++++ files/fr/learn/javascript/objects/json/index.html | 338 --------------------- files/fr/learn/javascript/objects/json/index.md | 338 +++++++++++++++++++++ .../objects/object-oriented_js/index.html | 279 ----------------- .../javascript/objects/object-oriented_js/index.md | 279 +++++++++++++++++ .../objects/object_building_practice/index.html | 317 ------------------- .../objects/object_building_practice/index.md | 317 +++++++++++++++++++ .../objects/object_prototypes/index.html | 245 --------------- .../javascript/objects/object_prototypes/index.md | 245 +++++++++++++++ 16 files changed, 1977 insertions(+), 1977 deletions(-) delete mode 100644 files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html create mode 100644 files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md delete mode 100644 files/fr/learn/javascript/objects/basics/index.html create mode 100644 files/fr/learn/javascript/objects/basics/index.md delete mode 100644 files/fr/learn/javascript/objects/index.html create mode 100644 files/fr/learn/javascript/objects/index.md delete mode 100644 files/fr/learn/javascript/objects/inheritance/index.html create mode 100644 files/fr/learn/javascript/objects/inheritance/index.md delete mode 100644 files/fr/learn/javascript/objects/json/index.html create mode 100644 files/fr/learn/javascript/objects/json/index.md delete mode 100644 files/fr/learn/javascript/objects/object-oriented_js/index.html create mode 100644 files/fr/learn/javascript/objects/object-oriented_js/index.md delete mode 100644 files/fr/learn/javascript/objects/object_building_practice/index.html create mode 100644 files/fr/learn/javascript/objects/object_building_practice/index.md delete mode 100644 files/fr/learn/javascript/objects/object_prototypes/index.html create mode 100644 files/fr/learn/javascript/objects/object_prototypes/index.md (limited to 'files/fr/learn/javascript/objects') diff --git a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html deleted file mode 100644 index 70f35b3642..0000000000 --- a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: Ajouter des fonctionnalités à notre exercice des balles rebondissantes -slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features -tags: - - Apprentissage - - CodingScripting - - Débutant - - Evaluation - - JavaScript - - OOJS - - Objet - - Orienté objet -translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features -original_slug: >- - Learn/JavaScript/Objects/Ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
- -

Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.

- - - - - - - - - - - - -
Prérequis:Avant de vous lancer dans cet exercice, il est fortement conseillé d'avoir vus et compris tous les précédents articles de ce module.
Objectifs:Tester votre connaissance du Javascript orienté objet en conception et en pratique.
- -

Pour commencer

- -

Pour commencer, faite une copie locale de index-finished.html, style.css, et main-finished.js de l'article précédent, dans un nouveau dossier.

- -
-

Note : Vous pouvez utiliser un site comme JSBin ou Thimble. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <script>/<style> dans votre code HTML.

-
- -

Le projet en bref

- -

Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur controlé par l'utilisateur, qui va détruire une balle si il l'a touche. Nous voulons aussi testé votre capacité en programmation orienté objet en créant un object Shape() dont le viseur et les balles peuvent hériter. Pour terminer nous voulons créer un compteur qui permet d'afficher combien de balle il nous reste encore à détruire.

- -

Ce screenshot vous donne une idée du résultat final:

- -

- - - -

Si vous voulez en savoir plus regardez l'exemple finit finished example (N'en profitez pas pour récupérer le code source !)

- -

Vos objectifs

- -

Cette section décrit ce que vous aurez à faire.

- -

Créons nos nouveaux objets

- -

Pour commencer, modifions le constructeur de l'objet Ball() pour qu'il devienne le constructeur de Shape() puis créons en un nouveau pour Ball() :

- -
    -
  1. Le constructeur Shape() devra définir les propriétés x, y, velX, et velY de la même manière que le constructeur Ball() auparavent, mais sans les propriétés color et size.
    2. -
  2. Shape() doit aussi définir une nouvelle propriété exists, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'on pas encore été détruites). Elle doit retourner un booléen (true/false).
    3. -
  3. Le constructeur Ball() doit hériter des propriétés x, y, velX, velY, et exists du constructeur Shape().
    4. -
  4. Ball() doit aussi définir les propriétés color et size, comme à l'origine.
    5. -
  5. N'oubliez pas de définir le prototype de Ball() et son constructeur de manière approprié.
    6. -
- -

Les méthodes draw(), update(), et collisionDetect() doivent fonctionnées comme avant, sans être modifiées.

- -

Vous devrez ajouter un nouveau paramètre au constructeur new Ball() ( ... ) — le paramètre exists doit être le 5ème et être égal à  true.

- -

Vous pouvez recharger la page — Tout doit fonctionner comme avant même après les modifications que vous avez effectuées sur les objets.

- -

Définition du EvilCircle() (viseur)

- -

Il est temps de vous équipez ! — le EvilCircle()! Dans notre jeu nous allons créer un viseur, mais nous allons nous servir de l'objet Shape() pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment !

- -

Le constructeur du EvilCircle() doit hériter des propriétés x, y, velX, velY, et exists de Shape(), mais velX et velY doivent toujours être égales à 20.

- -

Vous devriez utiliser quelque chose comme Shape.call(this, x, y, 20, 20, exists);

- -

Le constructeur doit aussi définir ses propres propriétés:

- - - -

Une fois de plus, souvenez vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée.

- -

Définir les méthodes du EvilCircle() (viseur)

- -

EvilCircle() doit avoir quatre méthodes, comme définie en dessous.

- -

draw()

- -

Cette méthode doit avoir la même fonction que celle de Ball(): soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction Ball.prototype.draw. Puis appliquez les modifications suivantes:

- - - -

checkBounds()

- -

Cette méthode à la même fonction que la première partie de Ball() update() — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode Ball.prototype.update, mais en effectuant quelques changements:

- - - -

setControls()

- -

Cette méthode ajoute un écouteur d'évènement onkeydown à l'objet window ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode:

- -
var _this = this;
-window.onkeydown = function(e) {
-    if (e.keyCode === 65) {
-      _this.x -= _this.velX;
-    } else if (e.keyCode === 68) {
-      _this.x += _this.velX;
-    } else if (e.keyCode === 87) {
-      _this.y -= _this.velY;
-    } else if (e.keyCode === 83) {
-      _this.y += _this.velY;
-    }
-  }
- -

Quand une touche est enfoncée, la propriété keyCode de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.

- - - -

collisionDetect()

- -

Cette méthode fonctionne d'une manière similaire à Ball() collisionDetect(), copier celle-ci pour vous en servir comme base. Il y a deux différences:

- - - -

Insérer le viseur dans notre programme

- -

Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction loop().

- - - -

Implémenter le compteur de score

- -

Pour implémenter le compteur de score, suivez les étapes suivantes:

- -
    -
  1. Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} .
    2. -
  2. Dans votre fichier CSS, ajouter les règlesz suivantes: - 
    p {
-  position: absolute;
-  margin: 0;
-  top: 35px;
-  right: 5px;
-  color: #aaa;
-}
    -
    3. -
  3. Dans votre JavaScript, effectuez les modifications suivante: -
      -
    • Créez une variable qui contiendra la référence vers le paragraphe.
      • -
    • Stocker et afficher le nombre de balle présentent à l'écran.
      • -
    • Incrémentez le compteur de balle à chaque fois qu'une balle apparait à l'écran.
      • -
    • Décrementez le compteur à chaque fois qu'une balle est détruite par le viseur.
      • -
    -
    4. -
- -

Conseils et astuces

- - - -

Evaluation

- -

Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur discussion thread for this exercise, ou sur #mdn IRC channel sur Mozilla IRC. Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant !

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

- -

Dans ce Module

- - diff --git a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md new file mode 100644 index 0000000000..70f35b3642 --- /dev/null +++ b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md @@ -0,0 +1,209 @@ +--- +title: Ajouter des fonctionnalités à notre exercice des balles rebondissantes +slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features +tags: + - Apprentissage + - CodingScripting + - Débutant + - Evaluation + - JavaScript + - OOJS + - Objet + - Orienté objet +translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +original_slug: >- + Learn/JavaScript/Objects/Ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
+ +

Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.

+ + + + + + + + + + + + +
Prérequis:Avant de vous lancer dans cet exercice, il est fortement conseillé d'avoir vus et compris tous les précédents articles de ce module.
Objectifs:Tester votre connaissance du Javascript orienté objet en conception et en pratique.
+ +

Pour commencer

+ +

Pour commencer, faite une copie locale de index-finished.html, style.css, et main-finished.js de l'article précédent, dans un nouveau dossier.

+ +
+

Note : Vous pouvez utiliser un site comme JSBin ou Thimble. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <script>/<style> dans votre code HTML.

+
+ +

Le projet en bref

+ +

Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur controlé par l'utilisateur, qui va détruire une balle si il l'a touche. Nous voulons aussi testé votre capacité en programmation orienté objet en créant un object Shape() dont le viseur et les balles peuvent hériter. Pour terminer nous voulons créer un compteur qui permet d'afficher combien de balle il nous reste encore à détruire.

+ +

Ce screenshot vous donne une idée du résultat final:

+ +

+ + + +

Si vous voulez en savoir plus regardez l'exemple finit finished example (N'en profitez pas pour récupérer le code source !)

+ +

Vos objectifs

+ +

Cette section décrit ce que vous aurez à faire.

+ +

Créons nos nouveaux objets

+ +

Pour commencer, modifions le constructeur de l'objet Ball() pour qu'il devienne le constructeur de Shape() puis créons en un nouveau pour Ball() :

+ +
    +
  1. Le constructeur Shape() devra définir les propriétés x, y, velX, et velY de la même manière que le constructeur Ball() auparavent, mais sans les propriétés color et size.
    2. +
  2. Shape() doit aussi définir une nouvelle propriété exists, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'on pas encore été détruites). Elle doit retourner un booléen (true/false).
    3. +
  3. Le constructeur Ball() doit hériter des propriétés x, y, velX, velY, et exists du constructeur Shape().
    4. +
  4. Ball() doit aussi définir les propriétés color et size, comme à l'origine.
    5. +
  5. N'oubliez pas de définir le prototype de Ball() et son constructeur de manière approprié.
    6. +
+ +

Les méthodes draw(), update(), et collisionDetect() doivent fonctionnées comme avant, sans être modifiées.

+ +

Vous devrez ajouter un nouveau paramètre au constructeur new Ball() ( ... ) — le paramètre exists doit être le 5ème et être égal à  true.

+ +

Vous pouvez recharger la page — Tout doit fonctionner comme avant même après les modifications que vous avez effectuées sur les objets.

+ +

Définition du EvilCircle() (viseur)

+ +

Il est temps de vous équipez ! — le EvilCircle()! Dans notre jeu nous allons créer un viseur, mais nous allons nous servir de l'objet Shape() pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment !

+ +

Le constructeur du EvilCircle() doit hériter des propriétés x, y, velX, velY, et exists de Shape(), mais velX et velY doivent toujours être égales à 20.

+ +

Vous devriez utiliser quelque chose comme Shape.call(this, x, y, 20, 20, exists);

+ +

Le constructeur doit aussi définir ses propres propriétés:

+ + + +

Une fois de plus, souvenez vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée.

+ +

Définir les méthodes du EvilCircle() (viseur)

+ +

EvilCircle() doit avoir quatre méthodes, comme définie en dessous.

+ +

draw()

+ +

Cette méthode doit avoir la même fonction que celle de Ball(): soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction Ball.prototype.draw. Puis appliquez les modifications suivantes:

+ + + +

checkBounds()

+ +

Cette méthode à la même fonction que la première partie de Ball() update() — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode Ball.prototype.update, mais en effectuant quelques changements:

+ + + +

setControls()

+ +

Cette méthode ajoute un écouteur d'évènement onkeydown à l'objet window ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode:

+ +
var _this = this;
+window.onkeydown = function(e) {
+    if (e.keyCode === 65) {
+      _this.x -= _this.velX;
+    } else if (e.keyCode === 68) {
+      _this.x += _this.velX;
+    } else if (e.keyCode === 87) {
+      _this.y -= _this.velY;
+    } else if (e.keyCode === 83) {
+      _this.y += _this.velY;
+    }
+  }
+ +

Quand une touche est enfoncée, la propriété keyCode de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.

+ + + +

collisionDetect()

+ +

Cette méthode fonctionne d'une manière similaire à Ball() collisionDetect(), copier celle-ci pour vous en servir comme base. Il y a deux différences:

+ + + +

Insérer le viseur dans notre programme

+ +

Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction loop().

+ + + +

Implémenter le compteur de score

+ +

Pour implémenter le compteur de score, suivez les étapes suivantes:

+ +
    +
  1. Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} .
    2. +
  2. Dans votre fichier CSS, ajouter les règlesz suivantes: + 
    p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}
    +
    3. +
  3. Dans votre JavaScript, effectuez les modifications suivante: +
      +
    • Créez une variable qui contiendra la référence vers le paragraphe.
      • +
    • Stocker et afficher le nombre de balle présentent à l'écran.
      • +
    • Incrémentez le compteur de balle à chaque fois qu'une balle apparait à l'écran.
      • +
    • Décrementez le compteur à chaque fois qu'une balle est détruite par le viseur.
      • +
    +
    4. +
+ +

Conseils et astuces

+ + + +

Evaluation

+ +

Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur discussion thread for this exercise, ou sur #mdn IRC channel sur Mozilla IRC. Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant !

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

+ +

Dans ce Module

+ + diff --git a/files/fr/learn/javascript/objects/basics/index.html b/files/fr/learn/javascript/objects/basics/index.html deleted file mode 100644 index 483ebba0fc..0000000000 --- a/files/fr/learn/javascript/objects/basics/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: 'Les bases de JavaScript, orienté objet' -slug: Learn/JavaScript/Objects/Basics -tags: - - API - - Apprendre - - Débutant - - JavaScript - - Objet - - Syntaxe - - this -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des objets JavaScript ainsi que quelques fonctionnalités JavaScript déjà aperçues dans les cours précédents, rappelant que beaucoup de fonctionnalités que vous utilisez sont en fait des objets.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, connaissances basiques concernant HTML et CSS, bonnes connaissances des bases de JavaScript (cf. les premiers pas et les briques de construction).
Objectifs :Comprendre les théories de base derrière la programmation orientée objet, comment l'appliquer à JavaScript, et comment travailler avec des objets JavaScript.
- -

Les bases de l'objet

- -

Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble.

- -

Pour commencer, faites une copie locale de notre fichier oojs.html. Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir la console JavaScript des outils de développement ouverte et prête, pour y saisir des commandes.

- -

Comme souvent dans JavaScript, pour créer un objet, on commence avec la définition et l'initialisation d'une variable. Essayez de mettre le code ci-dessous sous le code déjà écrit de votre fichier JavaScript, puis sauvegardez et rafraichissez la page :

- -
var personne = {};
- -

Désormais ouvrez la console JavaScript de votre navigateur, saisissez personne à l'intérieur, et appuyez sur Entrée. Vous devriez obtenir le résultat suivant :

- -
[object Object]
- -

Félicitations, vous avez créé votre premier objet ! Mais c'est un objet vide, on ne peut pas faire grand-chose avec. Modifions notre objet pour qu'il ressemble à ceci :

- -
var personne = {
-  nom: ['Jean', 'Martin'],
-  age: 32,
-  sexe: 'masculin',
-  interets: ['musique', 'skier'],
-  bio: function() {
-    alert(this.nom[0] + ' ' + this.nom[1] + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
-  },
-  salutation: function() {
-    alert('Bonjour ! Je suis ' + this.nom[0] + '.');
-  }
-};
-
- -

Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie input :

- -
personne.nom
-personne.nom[0]
-personne.age
-personne.interets[1]
-personne.bio()
-personne.salutation()
- -

Vous avez désormais des données et des fonctionnalités dans votre objet, et vous pouvez y accéder avec une une syntaxe simple et claire !

- -
-

Note : Si vous avez des difficultés pour le faire fonctionner, comparez votre code avec notre version — voir oojs-finished.html (ou voir en action). Une erreur courante, quand on commence avec les objets, est de mettre une virgule après la dernière propriété — ce qui provoque une erreur.

-
- -

Alors, comment ça fonctionne ? Un objet est fait de plusieurs membres, qui ont chacun un nom (par exemple nom et age ci-dessus) et une valeur (par exemple. ['Jean', 'Martin'] et 32).

- -

Chaque paire de nom/valeur doit être séparée par une virgule, et le nom et la valeur de chaque membre sont séparés par deux points. La syntaxe suit ce schéma :

- -
var monObjet = {
-  nomDuMembre1: valeurDuMembre1,
-  nomDuMembre2: valeurDuMembre2,
-  nomDuMembre3: valeurDuMembre3
-}
- -

La valeur d'un membre dans un objet peut être n'importe quoi — dans notre objet personne, nous avons du texte, un nombre, deux tableaux et deux fonctions. Les quatre premières éléments sont des données appelées propriétés de l'objet, et les deux derniers éléments sont des fonctions qui utilisent les données de l'objet pour faire quelque chose, et sont appelées des méthodes de l'objet.

- -

Dans cet exemple, l'objet est créé grâce à un objet littéral : on écrit littéralement le contenu de l'objet pour le créer. On distinguera cette structure des objets instanciés depuis des classes, que nous verrons plus tard.

- -

C'est une pratique très courante de créer un objet en utilisant un objet littéral :  par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données.

- -

Envoyer un seul objet est bien plus efficace que d'envoyer ses membres de manière individuelle, et c'est bien plus simple de travailler avec un tableau quand on veut identifier des membres par leur nom.

- -

Notation avec un point

- -

Ci-dessus, on accède aux membres de l'objet en utilisant la notation avec un point.

- -

Le nom de l'objet (personne) agit comme un espace de noms (ou namespace en anglais) — il doit être entré en premier pour accéder aux membres encapsulés dans l'objet. Ensuite, on écrit un point, puis le membre auquel on veut accéder — que ce soit le nom d'une propriété, un élément d'un tableau, ou un appel à une méthode de l'objet. Par exemple :

- -
personne.age
-personne.interets[1]
-personne.bio()
- -

Sous-espaces de noms

- -

Il est même possible de donner un autre objet comme valeur d'un membre de l'objet. Par exemple, on peut essayer de changer la propriété nom du membre et la faire passer de

- -
nom: ['Jean', 'Martin'],
- -

à

- -
nom : {
-  prenom: 'Jean',
-  nomFamille: 'Martin'
-},
- -

Ici, nous avons bien créé un sous-espace de noms. Ça a l'air compliqué, mais ça ne l'est pas. Pour accéder à ces élements, il suffit de chaîner une étape de plus avec un autre point. Essayez ceci :

- -
personne.nom.prenom
-personne.nom.nomFamille
- -

Important : à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de :

- -
nom[0]
-nom[1]
- -

en

- -
nom.prenom
-nom.nomFamille
- -

sinon vos méthodes ne fonctionneront plus.

- -

Notation avec les crochets

- -

Il y a une autre façon d'accéder aux membres de l'objet : la notation avec les crochets. Plutôt que d'utiliser ceci :

- -
personne.age
-personne.nom.prenom
- -

Vous pouvez utiliser :

- -
personne['age']
-personne['nom']['prenom']
- -

Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose  — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs.

- -

Définir les membres d'un objet

- -

Jusqu'ici, nous avons vu comment accéder aux membres d'un objet. Vous pouvez aussi modifier la valeur d'un membre de l'objet en déclarant simplement le membre que vous souhaitez modifier(en utilisant la notation avec le point ou par crochet), comme ceci :

- -
personne.age = 45
-personne['nom']['nomFamille'] = 'Rabuchon'
- -

Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé :

- -
personne.age
-personne['nom']['nomFamille']
- -

Définir les membres ne s'arrête pas à mettre à jour la valeur de propriétés ou méthodes existantes; vous pouvez aussi créer de nouveaux membres. Essayez ceci :

- -
personne['yeux'] = 'noisette'
-personne.auRevoir = function() { alert("Bye bye tout le monde !"); }
- -

Vous pouvez maintenant tester vos nouveaux membres :

- -
personne['yeux']
-personne.auRevoir()
- -

Un des aspects pratiques de la notation par crochet est qu'elle peut être utilisée pour définir dynamiquement les valeurs des membres, mais aussi pour définir les noms. Imaginons que nous voulions que les utilisateurs puissent saisir des types de valeurs personnalisées pour les données des personnes, en entrant le nom du membre et sa valeur dans deux champs input. On pourrait avoir ses valeurs comme ceci :

- -
var monNomDeDonnee = nomInput.value
-var maValeurDeDonnee = valeurNom.value
- -

On peut alors ajouter le nom et la valeur du nouveau membre de l'objet personne comme ceci :

- -
personne[monNomDeDonnee] = maValeurDeDonnee
- -

Pour le tester, essayez d'ajouter les lignes ci-dessous dans votre code, juste après le crochet fermante de l'objet personne :

- -
var monNomDeDonnee = 'hauteur'
-var maValeurDeDonnee = '1.75m'
-personne[monNomDeDonnee] = maValeurDeDonnee
- -

Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément input) :

- -
personne.hauteur
- -

Nous n'aurions pas pu construire ce membre avec la notation avec un point, car celle-ci n'accepte qu'un nom et pas une variable pointant vers un nom.

- -

Qu'est-ce que « this » ?

- -

Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple :

- -
salutation: function() {
-  alert('Bonjour! Je suis ' + this.nom.prenom + '.');
-}
- -

Vous vous demandez probablement ce que signifie « this ». Le mot-clé this se réfère à l'objet courant dans lequel le code est écrit —  dans notre cas, this est l'équivalent de personne.  Alors, pourquoi ne pas écrire personne à la place ? Comme vous le verrez dans l'article la programmation JavaScript orientée objet pour les débutants, this est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents).

- -

Essayons d'illustrer nos propos par une paire d'objet personne simplifiée :

- -
var personne1 = {
-  nom: 'Christophe',
-  salutation: function() {
-    alert('Bonjour ! Je suis ' + this.nom + '.');
-  }
-}
-
-var personne2 = {
-  nom: 'Bruno',
-  salutation: function() {
-    alert('Bonjour ! Je suis ' + this.nom + '.');
-  }
-}
- -

Dans ce cas,  personne1.salutation() affichera "Bonjour ! Je suis Christophe.", tandis que personne2.salutation() affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, this est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple).

- -

Vous utilisiez des objets depuis le début !

- -

Tout au long de ces exemples, vous vous êtes probablement dit que la notation avec un point vous était très familière. C'est parce que vous l'avez utilisée tout au long du cours ! À chaque fois que vous avez travaillé avec un exemple qui utilise une API ou un objet JavaScript natif, nous avons utilisé des objets. Ces fonctionnalités sont construites exactement comme les objets que nous avons manipulés ici, mais sont parfois plus complexes que dans nos exemples.

- -

Ainsi, quand vous utilisez une méthode comme :

- -
maChaineDeCaracteres.split(',');
- -

Vous utilisez une méthode disponible dans une instance du type {{jsxref("String")}}. Dès que vous créez une chaîne de caractères dans votre code, cette chaîne est automatiquement créée comme une instance de String et possède donc plusieurs méthodes/propriétés communes.

- -

Quand vous accédez au DOM (Document Object Model ou « modèle objet du document ») avec document et des lignes telles que :

- -
var monDiv = document.createElement('div');
-var maVideo = document.querySelector('video');
- -

Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de Document est créée, appelée document et qui représente la structure entière de la page, son contenu et d'autres caractéristiques telles que son URL. Encore une fois, cela signifie qu'elle possède plusieurs méthodes/propriétés communes.

- -

C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé  — {{jsxref("Array")}}, {{jsxref("Math")}}, etc.

- -

On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, l'API Notifications — qui permet aux navigateurs modernes de déclencher leurs propres notifications — vous demande d'instancier vous-même une nouvelle instance d'objet en utilisant le constructeur pour chaque notification que vous souhaitez lancer. Essayez d'entrer le code ci-dessous dans la console JavaScript :

- -
var maNotification = new Notification('Bonjour !');
- -

Nous verrons les constructeurs dans un prochain article.

- -
-

Note : On peut voir le mode de communication des objets comme un envoi de message. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.

-
- -

Résumé

- -

Félicitations, vous avez terminé notre premier article sur les objets JavaScript  — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet personne, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom.

- -

Les objets permettent de conserver les informations de façon sûre, enfermées dans leur propre « paquet », hors de danger.

- -

Dans le prochain article, nous commencerons à voir la théorie de la programmation orientée objet (POO) et comment utiliser ces techniques en JavaScript.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/basics/index.md b/files/fr/learn/javascript/objects/basics/index.md new file mode 100644 index 0000000000..483ebba0fc --- /dev/null +++ b/files/fr/learn/javascript/objects/basics/index.md @@ -0,0 +1,258 @@ +--- +title: 'Les bases de JavaScript, orienté objet' +slug: Learn/JavaScript/Objects/Basics +tags: + - API + - Apprendre + - Débutant + - JavaScript + - Objet + - Syntaxe + - this +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des objets JavaScript ainsi que quelques fonctionnalités JavaScript déjà aperçues dans les cours précédents, rappelant que beaucoup de fonctionnalités que vous utilisez sont en fait des objets.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, connaissances basiques concernant HTML et CSS, bonnes connaissances des bases de JavaScript (cf. les premiers pas et les briques de construction).
Objectifs :Comprendre les théories de base derrière la programmation orientée objet, comment l'appliquer à JavaScript, et comment travailler avec des objets JavaScript.
+ +

Les bases de l'objet

+ +

Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble.

+ +

Pour commencer, faites une copie locale de notre fichier oojs.html. Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir la console JavaScript des outils de développement ouverte et prête, pour y saisir des commandes.

+ +

Comme souvent dans JavaScript, pour créer un objet, on commence avec la définition et l'initialisation d'une variable. Essayez de mettre le code ci-dessous sous le code déjà écrit de votre fichier JavaScript, puis sauvegardez et rafraichissez la page :

+ +
var personne = {};
+ +

Désormais ouvrez la console JavaScript de votre navigateur, saisissez personne à l'intérieur, et appuyez sur Entrée. Vous devriez obtenir le résultat suivant :

+ +
[object Object]
+ +

Félicitations, vous avez créé votre premier objet ! Mais c'est un objet vide, on ne peut pas faire grand-chose avec. Modifions notre objet pour qu'il ressemble à ceci :

+ +
var personne = {
+  nom: ['Jean', 'Martin'],
+  age: 32,
+  sexe: 'masculin',
+  interets: ['musique', 'skier'],
+  bio: function() {
+    alert(this.nom[0] + ' ' + this.nom[1] + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
+  },
+  salutation: function() {
+    alert('Bonjour ! Je suis ' + this.nom[0] + '.');
+  }
+};
+
+ +

Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie input :

+ +
personne.nom
+personne.nom[0]
+personne.age
+personne.interets[1]
+personne.bio()
+personne.salutation()
+ +

Vous avez désormais des données et des fonctionnalités dans votre objet, et vous pouvez y accéder avec une une syntaxe simple et claire !

+ +
+

Note : Si vous avez des difficultés pour le faire fonctionner, comparez votre code avec notre version — voir oojs-finished.html (ou voir en action). Une erreur courante, quand on commence avec les objets, est de mettre une virgule après la dernière propriété — ce qui provoque une erreur.

+
+ +

Alors, comment ça fonctionne ? Un objet est fait de plusieurs membres, qui ont chacun un nom (par exemple nom et age ci-dessus) et une valeur (par exemple. ['Jean', 'Martin'] et 32).

+ +

Chaque paire de nom/valeur doit être séparée par une virgule, et le nom et la valeur de chaque membre sont séparés par deux points. La syntaxe suit ce schéma :

+ +
var monObjet = {
+  nomDuMembre1: valeurDuMembre1,
+  nomDuMembre2: valeurDuMembre2,
+  nomDuMembre3: valeurDuMembre3
+}
+ +

La valeur d'un membre dans un objet peut être n'importe quoi — dans notre objet personne, nous avons du texte, un nombre, deux tableaux et deux fonctions. Les quatre premières éléments sont des données appelées propriétés de l'objet, et les deux derniers éléments sont des fonctions qui utilisent les données de l'objet pour faire quelque chose, et sont appelées des méthodes de l'objet.

+ +

Dans cet exemple, l'objet est créé grâce à un objet littéral : on écrit littéralement le contenu de l'objet pour le créer. On distinguera cette structure des objets instanciés depuis des classes, que nous verrons plus tard.

+ +

C'est une pratique très courante de créer un objet en utilisant un objet littéral :  par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données.

+ +

Envoyer un seul objet est bien plus efficace que d'envoyer ses membres de manière individuelle, et c'est bien plus simple de travailler avec un tableau quand on veut identifier des membres par leur nom.

+ +

Notation avec un point

+ +

Ci-dessus, on accède aux membres de l'objet en utilisant la notation avec un point.

+ +

Le nom de l'objet (personne) agit comme un espace de noms (ou namespace en anglais) — il doit être entré en premier pour accéder aux membres encapsulés dans l'objet. Ensuite, on écrit un point, puis le membre auquel on veut accéder — que ce soit le nom d'une propriété, un élément d'un tableau, ou un appel à une méthode de l'objet. Par exemple :

+ +
personne.age
+personne.interets[1]
+personne.bio()
+ +

Sous-espaces de noms

+ +

Il est même possible de donner un autre objet comme valeur d'un membre de l'objet. Par exemple, on peut essayer de changer la propriété nom du membre et la faire passer de

+ +
nom: ['Jean', 'Martin'],
+ +

à

+ +
nom : {
+  prenom: 'Jean',
+  nomFamille: 'Martin'
+},
+ +

Ici, nous avons bien créé un sous-espace de noms. Ça a l'air compliqué, mais ça ne l'est pas. Pour accéder à ces élements, il suffit de chaîner une étape de plus avec un autre point. Essayez ceci :

+ +
personne.nom.prenom
+personne.nom.nomFamille
+ +

Important : à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de :

+ +
nom[0]
+nom[1]
+ +

en

+ +
nom.prenom
+nom.nomFamille
+ +

sinon vos méthodes ne fonctionneront plus.

+ +

Notation avec les crochets

+ +

Il y a une autre façon d'accéder aux membres de l'objet : la notation avec les crochets. Plutôt que d'utiliser ceci :

+ +
personne.age
+personne.nom.prenom
+ +

Vous pouvez utiliser :

+ +
personne['age']
+personne['nom']['prenom']
+ +

Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose  — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs.

+ +

Définir les membres d'un objet

+ +

Jusqu'ici, nous avons vu comment accéder aux membres d'un objet. Vous pouvez aussi modifier la valeur d'un membre de l'objet en déclarant simplement le membre que vous souhaitez modifier(en utilisant la notation avec le point ou par crochet), comme ceci :

+ +
personne.age = 45
+personne['nom']['nomFamille'] = 'Rabuchon'
+ +

Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé :

+ +
personne.age
+personne['nom']['nomFamille']
+ +

Définir les membres ne s'arrête pas à mettre à jour la valeur de propriétés ou méthodes existantes; vous pouvez aussi créer de nouveaux membres. Essayez ceci :

+ +
personne['yeux'] = 'noisette'
+personne.auRevoir = function() { alert("Bye bye tout le monde !"); }
+ +

Vous pouvez maintenant tester vos nouveaux membres :

+ +
personne['yeux']
+personne.auRevoir()
+ +

Un des aspects pratiques de la notation par crochet est qu'elle peut être utilisée pour définir dynamiquement les valeurs des membres, mais aussi pour définir les noms. Imaginons que nous voulions que les utilisateurs puissent saisir des types de valeurs personnalisées pour les données des personnes, en entrant le nom du membre et sa valeur dans deux champs input. On pourrait avoir ses valeurs comme ceci :

+ +
var monNomDeDonnee = nomInput.value
+var maValeurDeDonnee = valeurNom.value
+ +

On peut alors ajouter le nom et la valeur du nouveau membre de l'objet personne comme ceci :

+ +
personne[monNomDeDonnee] = maValeurDeDonnee
+ +

Pour le tester, essayez d'ajouter les lignes ci-dessous dans votre code, juste après le crochet fermante de l'objet personne :

+ +
var monNomDeDonnee = 'hauteur'
+var maValeurDeDonnee = '1.75m'
+personne[monNomDeDonnee] = maValeurDeDonnee
+ +

Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément input) :

+ +
personne.hauteur
+ +

Nous n'aurions pas pu construire ce membre avec la notation avec un point, car celle-ci n'accepte qu'un nom et pas une variable pointant vers un nom.

+ +

Qu'est-ce que « this » ?

+ +

Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple :

+ +
salutation: function() {
+  alert('Bonjour! Je suis ' + this.nom.prenom + '.');
+}
+ +

Vous vous demandez probablement ce que signifie « this ». Le mot-clé this se réfère à l'objet courant dans lequel le code est écrit —  dans notre cas, this est l'équivalent de personne.  Alors, pourquoi ne pas écrire personne à la place ? Comme vous le verrez dans l'article la programmation JavaScript orientée objet pour les débutants, this est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents).

+ +

Essayons d'illustrer nos propos par une paire d'objet personne simplifiée :

+ +
var personne1 = {
+  nom: 'Christophe',
+  salutation: function() {
+    alert('Bonjour ! Je suis ' + this.nom + '.');
+  }
+}
+
+var personne2 = {
+  nom: 'Bruno',
+  salutation: function() {
+    alert('Bonjour ! Je suis ' + this.nom + '.');
+  }
+}
+ +

Dans ce cas,  personne1.salutation() affichera "Bonjour ! Je suis Christophe.", tandis que personne2.salutation() affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, this est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple).

+ +

Vous utilisiez des objets depuis le début !

+ +

Tout au long de ces exemples, vous vous êtes probablement dit que la notation avec un point vous était très familière. C'est parce que vous l'avez utilisée tout au long du cours ! À chaque fois que vous avez travaillé avec un exemple qui utilise une API ou un objet JavaScript natif, nous avons utilisé des objets. Ces fonctionnalités sont construites exactement comme les objets que nous avons manipulés ici, mais sont parfois plus complexes que dans nos exemples.

+ +

Ainsi, quand vous utilisez une méthode comme :

+ +
maChaineDeCaracteres.split(',');
+ +

Vous utilisez une méthode disponible dans une instance du type {{jsxref("String")}}. Dès que vous créez une chaîne de caractères dans votre code, cette chaîne est automatiquement créée comme une instance de String et possède donc plusieurs méthodes/propriétés communes.

+ +

Quand vous accédez au DOM (Document Object Model ou « modèle objet du document ») avec document et des lignes telles que :

+ +
var monDiv = document.createElement('div');
+var maVideo = document.querySelector('video');
+ +

Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de Document est créée, appelée document et qui représente la structure entière de la page, son contenu et d'autres caractéristiques telles que son URL. Encore une fois, cela signifie qu'elle possède plusieurs méthodes/propriétés communes.

+ +

C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé  — {{jsxref("Array")}}, {{jsxref("Math")}}, etc.

+ +

On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, l'API Notifications — qui permet aux navigateurs modernes de déclencher leurs propres notifications — vous demande d'instancier vous-même une nouvelle instance d'objet en utilisant le constructeur pour chaque notification que vous souhaitez lancer. Essayez d'entrer le code ci-dessous dans la console JavaScript :

+ +
var maNotification = new Notification('Bonjour !');
+ +

Nous verrons les constructeurs dans un prochain article.

+ +
+

Note : On peut voir le mode de communication des objets comme un envoi de message. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.

+
+ +

Résumé

+ +

Félicitations, vous avez terminé notre premier article sur les objets JavaScript  — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet personne, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom.

+ +

Les objets permettent de conserver les informations de façon sûre, enfermées dans leur propre « paquet », hors de danger.

+ +

Dans le prochain article, nous commencerons à voir la théorie de la programmation orientée objet (POO) et comment utiliser ces techniques en JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/index.html b/files/fr/learn/javascript/objects/index.html deleted file mode 100644 index 5c7aed54cd..0000000000 --- a/files/fr/learn/javascript/objects/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Introduction aux objets JS -slug: Learn/JavaScript/Objects -tags: - - Apprendre - - Article - - Auto-évaluation - - Débutant - - Guide - - JavaScript - - Objets - - Tutoriel -translation_of: Learn/JavaScript/Objects ---- -
-
{{JsSidebar}}
- -
{{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}}
-
- -

En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.     

- -

Prérequis

- -

Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules Introduction au HTML et Introduction au CSS avant de commencer avec le JavaScript.

- -

Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur Premiers pas avec JavaScript et Les blocs de construction en JavaScript.

- -
-

Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme JSBin ou Thimble.

-
- -

Guides

- -
-
Les bases de JavaScript orienté objet
-
Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets.
-
- -
-
JavaScript orienté objet pour les débutants
-
-

Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.

-
-
Objets prototypes
-
-

Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.

-
-
L’héritage au sein de JavaScript
-
-

Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.

-
-
Manipuler des données JSON
-
-

JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.

-
-
Pratiques sur la construction d’objet
-
-

Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.

-
-
- -

Auto-évaluation

- -
-
Ajoutez des fonctionnalités  à notre  démo des ballons bondissants
-
Dans cette évaluation, vous devrez utiliser la démo des balles bondissantes de l’article précédent comme un point de départ et y ajouter quelques nouvelles et intéressantes fonctionnalités.
-
- -

{{PreviousNext("Apprendre/JavaScript/Building_blocks", "JavaScript/Guide")}} 

diff --git a/files/fr/learn/javascript/objects/index.md b/files/fr/learn/javascript/objects/index.md new file mode 100644 index 0000000000..5c7aed54cd --- /dev/null +++ b/files/fr/learn/javascript/objects/index.md @@ -0,0 +1,70 @@ +--- +title: Introduction aux objets JS +slug: Learn/JavaScript/Objects +tags: + - Apprendre + - Article + - Auto-évaluation + - Débutant + - Guide + - JavaScript + - Objets + - Tutoriel +translation_of: Learn/JavaScript/Objects +--- +
+
{{JsSidebar}}
+ +
{{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}}
+
+ +

En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.     

+ +

Prérequis

+ +

Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules Introduction au HTML et Introduction au CSS avant de commencer avec le JavaScript.

+ +

Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur Premiers pas avec JavaScript et Les blocs de construction en JavaScript.

+ +
+

Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +
+
Les bases de JavaScript orienté objet
+
Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets.
+
+ +
+
JavaScript orienté objet pour les débutants
+
+

Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.

+
+
Objets prototypes
+
+

Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.

+
+
L’héritage au sein de JavaScript
+
+

Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.

+
+
Manipuler des données JSON
+
+

JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.

+
+
Pratiques sur la construction d’objet
+
+

Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.

+
+
+ +

Auto-évaluation

+ +
+
Ajoutez des fonctionnalités  à notre  démo des ballons bondissants
+
Dans cette évaluation, vous devrez utiliser la démo des balles bondissantes de l’article précédent comme un point de départ et y ajouter quelques nouvelles et intéressantes fonctionnalités.
+
+ +

{{PreviousNext("Apprendre/JavaScript/Building_blocks", "JavaScript/Guide")}} 

diff --git a/files/fr/learn/javascript/objects/inheritance/index.html b/files/fr/learn/javascript/objects/inheritance/index.html deleted file mode 100644 index ededf06c2e..0000000000 --- a/files/fr/learn/javascript/objects/inheritance/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: L'héritage au sein de JavaScript -slug: Learn/JavaScript/Objects/Inheritance -tags: - - Apprendre - - Article - - Débutant - - Héritage - - JS Orienté Objet - - JavaScript - - Objet - - Programmation orientée objet - - Prototype -translation_of: Learn/JavaScript/Objects/Inheritance -original_slug: Learn/JavaScript/Objects/Heritage ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

- -

Les présentations ayant été faites pour les concepts du JavaScript orienté objet, cet article détaille comment il est possible de créer une classe fille qui hérite des propriétés de sa classe mère. Nous verrons ensuite quelques conseils quant à l'utilisation du JavaScript orienté objet.

- - - - - - - - - - - - -
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectif :Comprendre comment implémenter l'héritage en JavaScript.
- -

Héritage prototypique

- -

Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ?

- -

Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir C++ inheritance en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un héritage prototypique).

- -

Voyons comment cela se passe avec un exemple concret.

- -

Pour commencer

- -

Tout d'abord, faites une copie du fichier oojs-class-inheritance-start.html (voir la démo). Vous y trouverez le constructeur Personne() que nous avons utilisé jusque là dans l'ensemble des modules, néanmoins il y a un léger changement : nous n'avons défini que les attributs au sein du constructeur.

- -
function Personne(prenom, nom, age, genre, interets) {
-  this.nom = {
-    prenom,
-    nom
-  };
-  this.age = age;
-  this.genre = genre;
-  this.interets = interets;
-};
- -

L'ensemble des méthodes est défini dans le prototype :

- -
Personne.prototype.saluer = function() {
-  alert('Salut! Je suis ' + this.nom.prenom + '.');
-};
- -

Essayons de créer une classe Professeur similaire à celle que nous avons utilisée jusqu'ici dans les autres modules d'initiations à l'approche objet. Ainsi, cette classe hérite de Personne mais possède aussi :

- -
    -
  1. Un nouvel attribut matière — qui contiendra la matière que le professeur enseigne.
    2. -
  2. Une méthode saluer un peu plus élaborée, qui sera un peu plus formelle que la méthode de base, cela sera plus approprié, lorsque le professeur s'adrressera à des étudiants, par exemple.
    3. -
- -

Définissons le constructeur Professeur()

- -

La première chose à faire est de créer le constructeur Professeur() via l'ajout du code suivant :

- -
function Professeur(prenom, nom, age, genre, interets, matiere) {
-  Personne.call(this, prenom, nom, age, genre, interets);
-
-  this.matiere = matiere;
-}
- -

Cela ressemble beaucoup au constructeur Personne mais il y a quelque chose que nous n'avons pas encore vu : la fonction call(). Cette fonction permet d'appeler une fonction définie ailleurs dans le contexte actuel. Le premier paramètre spécifie la valeur de this que l'on souhaite utiliser lors que l'on utilisera la fonction, les paramètres suivants seront les paramètres qui pourront être passés en arguments lorsqu'elle sera appelée.

- -

Nous voulons que le constructeur Professeur() aie les mêmes attributs que Personne(), nous les spécifions donc dans l'appel fait via la fonction call().

- -

La dernière ligne au sein du constructeur sert simplement à définir l'attribut matière que les professeurs enseignent, ce qui n'est pas valable pour les personnes génériques.

- -

Notez que nous aurions très bien pu écrire tout simplement ceci :

- -
function Professeur(prenom, nom, age, genre, interets, matiere) {
-  this.nom_complet = {
-    prenom,
-    nom
-  };
-  this.age = age;
-  this.genre = genre;
-  this.interets = interets;
-  this.matiere = matiere;
-}
- -

Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans les hériter de Personne(), ce qui n'est pas vraiment le but que nous voulons atteindre lorsque l'on parle de l'héritage, cela rajoute aussi des lignes de code inutiles.

- -

 

- -

Hériter d'un constructeur sans paramètres

- -

Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction call(). Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :

- -
function Brick() {
-  this.width = 10;
-  this.height = 20;
-}
- -

Vous pouvez hériter des propriétés width et height en procédant comme ceci (Mais  également en suivant bien sûr les différentes étapes décrites ci dessous) :

- -
function BlueGlassBrick() {
-  Brick.call(this);
-
-  this.opacity = 0.5;
-  this.color = 'blue';
-}
- -

Notez que nous n'avons spécifié que this au sein de call() — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.  

- -

Définir le prototype de Professeur() et son constructeur référent.

- -

Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un  nouveau constructeur et ce dernier possède une propriété prototype, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété prototype du constructeur Personne(). Pour le constater, vous pouvez par exemple entrer Professeur.prototype.constructor dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de Personne.prototype.saluer et de Professeur.prototype.saluer

- -

Notre classe Professeur() doit hériter des méthodes définies dans le prototype de Personne(). Aussi comment procéder pour obtenir ce résultat ?

- -

Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter :

- -
Professeur.prototype = Object.create(Personne.prototype);
- -
    -
  1. Ici, notre ami create() vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à Professeur.prototype. Le nouvel objet possède Personne.prototype désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur Personne.prototype. 
    2. -
  2. Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de Professeur() est désormais équivalent à celui de Personne(), parce que nous avons défini Professeur.prototype pour référencer un objet qui hérite ses propriétés de  Personne.prototype ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer Professeur.prototype.constructor dans la console pour vérifier.
    3. -
  3. Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin : - 
    Professeur.prototype.constructor = Professeur;
    -
    4. -
  4. -

    A présent, si vous sauvegardez et rafraichissez après avoir écrit Professeur.prototype.constructor, cela devrait retourner Professeur(), et en plus nous héritons maintenant de Personne() !

    -
    5. -
- -

Donner au prototype de Professeur() une nouvelle fonction saluer()

- -

Pour terminer notre code, nous devons définir une nouvelle fonction saluer() sur le constructeur de Professeur().

- -

La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code :

- -
Professeur.prototype.saluer = function() {
-  var prefix;
-
-  if (this.genre === 'mâle' || this.genre === 'Mâle' || this.genre === 'm' || this.genre === 'M') {
-    prefix = 'M.';
-  } else if (this.genre === 'femelle' || this.genre === 'Femelle' || this.genre === 'f' || this.genre === 'F') {
-    prefix = 'Mme';
-  } else {
-    prefix = '';
-  }
-
-  alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.');
-};
- -

Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle.

- -

 

- -

Exécuter l'exemple

- -

Une fois tout le code saisi, essayez de créer une instance d'objet Professeur() en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) :

- -
var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques');
- -

Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet professeur1, par exemple :

- -
professeur1.nom_complet.nom;
-professeur1.interets[0];
-professeur1.bio();
-professeur1.matiere;
-professeur1.saluer();Ffa
- -

Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3  et 6 accèdent à des membres hérités de la classe générique Personne() via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée Professeur().

- -

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

- -

La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.

- -

Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir Classes). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.

- -

Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.

- -

CoffeeScript par exemple fournit les fonctionnalités class, extends, etc.

- -

Un exercice plus complexe.

- -

Dans notre section sur la programmation orientée objet nous avons également inclus  une classe Etudiant comme un concept qui hérite de toutes les fonctionnalités de la classe Personne, et qui a également une méthode saluer() differente de celle de Personne qui est beaucoup moins formelle que la méthode saluer() de Professeur(). Jetez un oeil à ce à quoi ressemble la méthode saluer() de la classe Etudiant dans cette section et essayez d'implémenter votre propre constructeur Etudiant() qui hérite de toutes les fonctionnalités de Personne() et la fonction saluer() différente.

- -

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

- -

Résumé sur les membres de l'Objet

- -

Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte :

- -
    -
  1. Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme this.x = x ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé new, exemple : var myInstance = new myConstructor()).
    2. -
  2. Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, Object.keys().
    3. -
  3. Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : myConstructor.prototype.x().
    4. -
- -

Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique.

- -

Quand devez-vous utiliser  l'héritage en JavaScript?

- -

Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. 

- -

D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut  sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. 

- -

En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. 

- -

Note: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée délégation — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique.

- -

Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. 

- -

En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage.

- -

Résumé

- -

Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. 

- -

Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON),  un format commun d'échange de données écrit en utilisant les objets JavaScript.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

- -

 

- -

Dans ce module

- - - -

 

-
- -

 

diff --git a/files/fr/learn/javascript/objects/inheritance/index.md b/files/fr/learn/javascript/objects/inheritance/index.md new file mode 100644 index 0000000000..ededf06c2e --- /dev/null +++ b/files/fr/learn/javascript/objects/inheritance/index.md @@ -0,0 +1,261 @@ +--- +title: L'héritage au sein de JavaScript +slug: Learn/JavaScript/Objects/Inheritance +tags: + - Apprendre + - Article + - Débutant + - Héritage + - JS Orienté Objet + - JavaScript + - Objet + - Programmation orientée objet + - Prototype +translation_of: Learn/JavaScript/Objects/Inheritance +original_slug: Learn/JavaScript/Objects/Heritage +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

Les présentations ayant été faites pour les concepts du JavaScript orienté objet, cet article détaille comment il est possible de créer une classe fille qui hérite des propriétés de sa classe mère. Nous verrons ensuite quelques conseils quant à l'utilisation du JavaScript orienté objet.

+ + + + + + + + + + + + +
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectif :Comprendre comment implémenter l'héritage en JavaScript.
+ +

Héritage prototypique

+ +

Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ?

+ +

Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir C++ inheritance en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un héritage prototypique).

+ +

Voyons comment cela se passe avec un exemple concret.

+ +

Pour commencer

+ +

Tout d'abord, faites une copie du fichier oojs-class-inheritance-start.html (voir la démo). Vous y trouverez le constructeur Personne() que nous avons utilisé jusque là dans l'ensemble des modules, néanmoins il y a un léger changement : nous n'avons défini que les attributs au sein du constructeur.

+ +
function Personne(prenom, nom, age, genre, interets) {
+  this.nom = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+};
+ +

L'ensemble des méthodes est défini dans le prototype :

+ +
Personne.prototype.saluer = function() {
+  alert('Salut! Je suis ' + this.nom.prenom + '.');
+};
+ +

Essayons de créer une classe Professeur similaire à celle que nous avons utilisée jusqu'ici dans les autres modules d'initiations à l'approche objet. Ainsi, cette classe hérite de Personne mais possède aussi :

+ +
    +
  1. Un nouvel attribut matière — qui contiendra la matière que le professeur enseigne.
    2. +
  2. Une méthode saluer un peu plus élaborée, qui sera un peu plus formelle que la méthode de base, cela sera plus approprié, lorsque le professeur s'adrressera à des étudiants, par exemple.
    3. +
+ +

Définissons le constructeur Professeur()

+ +

La première chose à faire est de créer le constructeur Professeur() via l'ajout du code suivant :

+ +
function Professeur(prenom, nom, age, genre, interets, matiere) {
+  Personne.call(this, prenom, nom, age, genre, interets);
+
+  this.matiere = matiere;
+}
+ +

Cela ressemble beaucoup au constructeur Personne mais il y a quelque chose que nous n'avons pas encore vu : la fonction call(). Cette fonction permet d'appeler une fonction définie ailleurs dans le contexte actuel. Le premier paramètre spécifie la valeur de this que l'on souhaite utiliser lors que l'on utilisera la fonction, les paramètres suivants seront les paramètres qui pourront être passés en arguments lorsqu'elle sera appelée.

+ +

Nous voulons que le constructeur Professeur() aie les mêmes attributs que Personne(), nous les spécifions donc dans l'appel fait via la fonction call().

+ +

La dernière ligne au sein du constructeur sert simplement à définir l'attribut matière que les professeurs enseignent, ce qui n'est pas valable pour les personnes génériques.

+ +

Notez que nous aurions très bien pu écrire tout simplement ceci :

+ +
function Professeur(prenom, nom, age, genre, interets, matiere) {
+  this.nom_complet = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+  this.matiere = matiere;
+}
+ +

Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans les hériter de Personne(), ce qui n'est pas vraiment le but que nous voulons atteindre lorsque l'on parle de l'héritage, cela rajoute aussi des lignes de code inutiles.

+ +

 

+ +

Hériter d'un constructeur sans paramètres

+ +

Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction call(). Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :

+ +
function Brick() {
+  this.width = 10;
+  this.height = 20;
+}
+ +

Vous pouvez hériter des propriétés width et height en procédant comme ceci (Mais  également en suivant bien sûr les différentes étapes décrites ci dessous) :

+ +
function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}
+ +

Notez que nous n'avons spécifié que this au sein de call() — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.  

+ +

Définir le prototype de Professeur() et son constructeur référent.

+ +

Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un  nouveau constructeur et ce dernier possède une propriété prototype, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété prototype du constructeur Personne(). Pour le constater, vous pouvez par exemple entrer Professeur.prototype.constructor dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de Personne.prototype.saluer et de Professeur.prototype.saluer

+ +

Notre classe Professeur() doit hériter des méthodes définies dans le prototype de Personne(). Aussi comment procéder pour obtenir ce résultat ?

+ +

Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter :

+ +
Professeur.prototype = Object.create(Personne.prototype);
+ +
    +
  1. Ici, notre ami create() vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à Professeur.prototype. Le nouvel objet possède Personne.prototype désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur Personne.prototype. 
    2. +
  2. Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de Professeur() est désormais équivalent à celui de Personne(), parce que nous avons défini Professeur.prototype pour référencer un objet qui hérite ses propriétés de  Personne.prototype ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer Professeur.prototype.constructor dans la console pour vérifier.
    3. +
  3. Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin : + 
    Professeur.prototype.constructor = Professeur;
    +
    4. +
  4. +

    A présent, si vous sauvegardez et rafraichissez après avoir écrit Professeur.prototype.constructor, cela devrait retourner Professeur(), et en plus nous héritons maintenant de Personne() !

    +
    5. +
+ +

Donner au prototype de Professeur() une nouvelle fonction saluer()

+ +

Pour terminer notre code, nous devons définir une nouvelle fonction saluer() sur le constructeur de Professeur().

+ +

La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code :

+ +
Professeur.prototype.saluer = function() {
+  var prefix;
+
+  if (this.genre === 'mâle' || this.genre === 'Mâle' || this.genre === 'm' || this.genre === 'M') {
+    prefix = 'M.';
+  } else if (this.genre === 'femelle' || this.genre === 'Femelle' || this.genre === 'f' || this.genre === 'F') {
+    prefix = 'Mme';
+  } else {
+    prefix = '';
+  }
+
+  alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.');
+};
+ +

Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle.

+ +

 

+ +

Exécuter l'exemple

+ +

Une fois tout le code saisi, essayez de créer une instance d'objet Professeur() en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) :

+ +
var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques');
+ +

Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet professeur1, par exemple :

+ +
professeur1.nom_complet.nom;
+professeur1.interets[0];
+professeur1.bio();
+professeur1.matiere;
+professeur1.saluer();Ffa
+ +

Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3  et 6 accèdent à des membres hérités de la classe générique Personne() via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée Professeur().

+ +

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

+ +

La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.

+ +

Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir Classes). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.

+ +

Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.

+ +

CoffeeScript par exemple fournit les fonctionnalités class, extends, etc.

+ +

Un exercice plus complexe.

+ +

Dans notre section sur la programmation orientée objet nous avons également inclus  une classe Etudiant comme un concept qui hérite de toutes les fonctionnalités de la classe Personne, et qui a également une méthode saluer() differente de celle de Personne qui est beaucoup moins formelle que la méthode saluer() de Professeur(). Jetez un oeil à ce à quoi ressemble la méthode saluer() de la classe Etudiant dans cette section et essayez d'implémenter votre propre constructeur Etudiant() qui hérite de toutes les fonctionnalités de Personne() et la fonction saluer() différente.

+ +

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

+ +

Résumé sur les membres de l'Objet

+ +

Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte :

+ +
    +
  1. Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme this.x = x ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé new, exemple : var myInstance = new myConstructor()).
    2. +
  2. Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, Object.keys().
    3. +
  3. Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : myConstructor.prototype.x().
    4. +
+ +

Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique.

+ +

Quand devez-vous utiliser  l'héritage en JavaScript?

+ +

Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. 

+ +

D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut  sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. 

+ +

En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. 

+ +

Note: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée délégation — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique.

+ +

Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. 

+ +

En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage.

+ +

Résumé

+ +

Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. 

+ +

Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON),  un format commun d'échange de données écrit en utilisant les objets JavaScript.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

 

+ +

Dans ce module

+ + + +

 

+
+ +

 

diff --git a/files/fr/learn/javascript/objects/json/index.html b/files/fr/learn/javascript/objects/json/index.html deleted file mode 100644 index 8fa5a7e935..0000000000 --- a/files/fr/learn/javascript/objects/json/index.html +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Manipuler des données JSON -slug: Learn/JavaScript/Objects/JSON -tags: - - Apprendre - - Article - - Débutant - - JSON - - JavaScript - - Manuel - - Objets - - Tutoriel -translation_of: Learn/JavaScript/Objects/JSON ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
- -

Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.

- - - - - - - - - - - - -
Prérequis :Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir Premiers pas et Les blocs) et en Javascript orienté objets (voir Introduction aux objets).
Objectif :Comprendre comment utiliser les données stockées dans un objet JSON, et créer vos propres objets JSON.
- -

Plus sérieusement, qu'est ce que le JSON ?

- -

{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par Douglas Crockford. Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer.

- -

Le JSON se présente sous la forme  d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global JSON disposant des méthodes pour assurer la conversion entre les deux.

- -
-

Note : Convertir une chaîne de caractères en un objet natif se nomme analyse syntaxique (parsage) tandis que le contraire porte le nom  de la linéarisation (stringification).

-
- -

Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension .json et le {{glossary("MIME type")}} application/json.

- -

Structure du JSON

- -

Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci :

- -
{
-  "squadName": "Super hero squad",
-  "homeTown": "Metro City",
-  "formed": 2016,
-  "secretBase": "Super tower",
-  "active": true,
-  "members": [
-    {
-      "name": "Molecule Man",
-      "age": 29,
-      "secretIdentity": "Dan Jukes",
-      "powers": [
-        "Radiation resistance",
-        "Turning tiny",
-        "Radiation blast"
-      ]
-    },
-    {
-      "name": "Madame Uppercut",
-      "age": 39,
-      "secretIdentity": "Jane Wilson",
-      "powers": [
-        "Million tonne punch",
-        "Damage resistance",
-        "Superhuman reflexes"
-      ]
-    },
-    {
-      "name": "Eternal Flame",
-      "age": 1000000,
-      "secretIdentity": "Unknown",
-      "powers": [
-        "Immortality",
-        "Heat Immunity",
-        "Inferno",
-        "Teleportation",
-        "Interdimensional travel"
-      ]
-    }
-  ]
-}
- -

Si nous chargeons cet objet dans un fichier Javascript au sein d'une variable appelée superHeroes par exemple, nous pouvons accéder à ses données de la même façon que nous l'avons fait dans l'article Les bases de JavaScript orienté objets à l'aide de la notation point / crochets. Par exemple :

- -
superHeroes.hometown
-superHeroes['active']
- -

Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste :

- -
superHeroes['members'][1]['powers'][2]
- -
    -
  1. D'abord, nous partons de la variable — superHeroes
    2. -
  2. À l'intérieur de laquelle nous désirons accéder à la propriété members, donc, nous tapons ["members"].
    3. -
  3. members contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons [1].
    4. -
  4. À l'intérieur de cet objet, nous souhaitons accéder à la propriété powers, donc, nous utilisons ["powers"].
    5. -
  5. Enfin, à l'intérieur de cette propriété powers nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héros. Nous désirons obtenir le troisième, donc nous tapons [2].
    6. -
- -
-

Note : L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple JSONTest.html (voir le code source). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.

-
- -

Des tableaux en tant que JSON

- -

Un peu plus haut, nous avons dit qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. La raison pour laquelle nous avons dit "généralement le cas" est qu'un tableau peut également être un objet JSON valide, par exemple :

- -
[
-  {
-    "name": "Molecule Man",
-    "age": 29,
-    "secretIdentity": "Dan Jukes",
-    "powers": [
-      "Radiation resistance",
-      "Turning tiny",
-      "Radiation blast"
-    ]
-  },
-  {
-    "name": "Madame Uppercut",
-    "age": 39,
-    "secretIdentity": "Jane Wilson",
-    "powers": [
-      "Million tonne punch",
-      "Damage resistance",
-      "Superhuman reflexes"
-    ]
-  }
-]
- -

Le code ci dessus est une notation JSON parfaitement valide. Vous n'aurez qu'à accéder aux éléments de votre tableau en commençant avec un index, par exemple : [0]["powers"][0].

- -

Notes diverses

- - - -

Activité : Manipuler le JSON au travers d'un exemple

- -

Allez ! Un petit exemple pour voir comment nous pouvons nous servir de données JSON sur un site web.

- -

Lançons nous

- -

Pour commencer, faites une copie locale de nos fichiers heroes.html et style.css. Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base :

- -
<header>
-</header>
-
-<section>
-</section>
- -

Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables :

- -
var header = document.querySelector('header');
-var section = document.querySelector('section');
- -

Nos données JSON sont disponibles sur notre GitHub ici : https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

- -

Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :

- -

- -

Chargeons notre JSON

- -

Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment XHR). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails.

- -
    -
  1. Donc, pour commencer, nous allons charger l'URL du fichier JSON que nous voulons récupérer dans une variable. Aussi, ajouter la ligne suivante à votre code Javascript : - 
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    -
    2. -
  2. Afin de créer une requête, nous avons besoin d'instancier un nouvel objet XMLHttpRequest à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script : - 
    var request = new XMLHttpRequest();
    -
    3. -
  3. Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode open(). Ajoutez la ligne suivante : - 
    request.open('GET', requestURL);
    - -

    Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles.  Deux suffiront pour notre exemple :

    - -
      -
    • La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode GET est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
      • -
    • L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure.
      • -
    -
    4. -
  4. Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur 'json' à  responseType, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode send() : - 
    request.responseType = 'json';
-request.send();
    -
    5. -
  5. La dernière partie de cette section concerne la réponse du serveur et son traitement. Ajoutez les lignes suivantes à la fin de votre code : - 
    request.onload = function() {
-  var superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
    -
    6. -
- -

Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété response) dans la variable superHeroes ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <header> avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la <section>.

- -

Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir onload) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété request.response sera disponible au moment où nous essayerons d'en faire quelque chose.

- -

Remplissage de l'en-tête

- -

Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code :

- -
function populateHeader(jsonObj) {
-  var myH1 = document.createElement('h1');
-  myH1.textContent = jsonObj['squadName'];
-  header.appendChild(myH1);
-
-  var myPara = document.createElement('p');
-  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + jsonObj['formed'];
-  header.appendChild(myPara);
-}
- -

Nous avons appelé le paramètre de cette fonction jsonObj  afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de createElement(), nous fixons son textContent à la valeur de la propriété squadName de l'objet, puis nous l'ajoutons à l'en-tête en utilisant appendChild(). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère homeTown et la propriété formed de l'objet.

- -

Création des fiches des héros

- -

Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code :

- -
function showHeroes(jsonObj) {
-  var heroes = jsonObj['members'];
-
-  for (var i = 0; i < heroes.length; i++) {
-    var myArticle = document.createElement('article');
-    var myH2 = document.createElement('h2');
-    var myPara1 = document.createElement('p');
-    var myPara2 = document.createElement('p');
-    var myPara3 = document.createElement('p');
-    var myList = document.createElement('ul');
-
-    myH2.textContent = heroes[i].name;
-    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
-    myPara2.textContent = 'Age: ' + heroes[i].age;
-    myPara3.textContent = 'Superpowers:';
-
-    var superPowers = heroes[i].powers;
-    for (var j = 0; j < superPowers.length; j++) {
-      var listItem = document.createElement('li');
-      listItem.textContent = superPowers[j];
-      myList.appendChild(listItem);
-    }
-
-    myArticle.appendChild(myH2);
-    myArticle.appendChild(myPara1);
-    myArticle.appendChild(myPara2);
-    myArticle.appendChild(myPara3);
-    myArticle.appendChild(myList);
-
-    section.appendChild(myArticle);
-  }
-}
- -

Pour commencer, on stocke la propriété members de l'objet JavaScript dans une nouvelle variable. Ce tableau contient plusieurs objets contenant les informations relatives à chaque héros.

- -

Maintenant, on utilise une boucle for pour parcourir chaque object du tableau. Pour chaque cas, il faut :

- -
    -
  1. Créer plusieurs nouveaux éléments : un <article>, un <h2>, trois <p>s, et un <ul>.
    2. -
  2. Mettre le name du héros actuel dans le <h2>.
    3. -
  3. Remplir les trois paragraphes avec leur secretIdentity, leur age, et une ligne nommée "Superpowers:" pour présenter la liste des super-pouvoirs.
    4. -
  4. Stocker la propriété powers dans une nouvelle variable nommée superPowers contenant un tableau listant les super-pouvoirs du héros actuel.
    5. -
  5. Utiliser une autre boucle for pour parcourir les super-pouvoirs du héros actuel — créer pour chacun d'entre eux un élément <li>, y placer le super-pouvoir et placer le listItem dans l'élément <ul> (myList) en utilisant appendChild().
    6. -
  6. Pour finir, on ajoute <h2>, les <p>s et <ul> à <article> (myArticle), et on ajoute <article> à <section>. L'ordre d'ajout est important, c'est l'ordre dans lequel les éléments seront affichés dans le HTML.
    7. -
- -
-

Note : Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source heroes-finished.html (ou regardez-le en action.)

-
- -
-

Note : Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier superheroes.json dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article Les bases du JavaScript orienté objet pour obtenir plus de détails sur la notation avec un point et avec une accolade.

-
- -

Conversion entre objets et textes

- -

Dans l'exemple ci-dessus, accéder au JSON est simple, il suffit de définir la requête XHR pour renvoyer la réponse au format JSON en écrivant :

- -
request.responseType = 'json';
- -

Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet JSON interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :

- - - -

Vous pouvez voir la première méthode en action dans notre exemple heroes-finished-json-parse.html (voir le code source) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode parse() pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :

- -
request.open('GET', requestURL);
-request.responseType = 'text'; // now we're getting a string!
-request.send();
-
-request.onload = function() {
-  var superHeroesText = request.response; // get the string from the response
-  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -

Comme vous pouvez le deviner, stringify() fait exactement le contraire. Essayez d'entrer les lignes ci-dessous une par une dans la console Javascript de votre navigateur pour voir la méthode en action :

- -
var myJSON = { "name": "Chris", "age": "38" };
-myJSON
-var myString = JSON.stringify(myJSON);
-myString
- -

On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec stringify() — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu.

- -

Résumé

- -

Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de  création et d'analyse syntaxique (parsage)  du JSON  et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/json/index.md b/files/fr/learn/javascript/objects/json/index.md new file mode 100644 index 0000000000..8fa5a7e935 --- /dev/null +++ b/files/fr/learn/javascript/objects/json/index.md @@ -0,0 +1,338 @@ +--- +title: Manipuler des données JSON +slug: Learn/JavaScript/Objects/JSON +tags: + - Apprendre + - Article + - Débutant + - JSON + - JavaScript + - Manuel + - Objets + - Tutoriel +translation_of: Learn/JavaScript/Objects/JSON +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+ +

Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.

+ + + + + + + + + + + + +
Prérequis :Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir Premiers pas et Les blocs) et en Javascript orienté objets (voir Introduction aux objets).
Objectif :Comprendre comment utiliser les données stockées dans un objet JSON, et créer vos propres objets JSON.
+ +

Plus sérieusement, qu'est ce que le JSON ?

+ +

{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par Douglas Crockford. Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer.

+ +

Le JSON se présente sous la forme  d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global JSON disposant des méthodes pour assurer la conversion entre les deux.

+ +
+

Note : Convertir une chaîne de caractères en un objet natif se nomme analyse syntaxique (parsage) tandis que le contraire porte le nom  de la linéarisation (stringification).

+
+ +

Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension .json et le {{glossary("MIME type")}} application/json.

+ +

Structure du JSON

+ +

Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci :

+ +
{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}
+ +

Si nous chargeons cet objet dans un fichier Javascript au sein d'une variable appelée superHeroes par exemple, nous pouvons accéder à ses données de la même façon que nous l'avons fait dans l'article Les bases de JavaScript orienté objets à l'aide de la notation point / crochets. Par exemple :

+ +
superHeroes.hometown
+superHeroes['active']
+ +

Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste :

+ +
superHeroes['members'][1]['powers'][2]
+ +
    +
  1. D'abord, nous partons de la variable — superHeroes
    2. +
  2. À l'intérieur de laquelle nous désirons accéder à la propriété members, donc, nous tapons ["members"].
    3. +
  3. members contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons [1].
    4. +
  4. À l'intérieur de cet objet, nous souhaitons accéder à la propriété powers, donc, nous utilisons ["powers"].
    5. +
  5. Enfin, à l'intérieur de cette propriété powers nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héros. Nous désirons obtenir le troisième, donc nous tapons [2].
    6. +
+ +
+

Note : L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple JSONTest.html (voir le code source). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.

+
+ +

Des tableaux en tant que JSON

+ +

Un peu plus haut, nous avons dit qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. La raison pour laquelle nous avons dit "généralement le cas" est qu'un tableau peut également être un objet JSON valide, par exemple :

+ +
[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]
+ +

Le code ci dessus est une notation JSON parfaitement valide. Vous n'aurez qu'à accéder aux éléments de votre tableau en commençant avec un index, par exemple : [0]["powers"][0].

+ +

Notes diverses

+ + + +

Activité : Manipuler le JSON au travers d'un exemple

+ +

Allez ! Un petit exemple pour voir comment nous pouvons nous servir de données JSON sur un site web.

+ +

Lançons nous

+ +

Pour commencer, faites une copie locale de nos fichiers heroes.html et style.css. Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base :

+ +
<header>
+</header>
+
+<section>
+</section>
+ +

Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables :

+ +
var header = document.querySelector('header');
+var section = document.querySelector('section');
+ +

Nos données JSON sont disponibles sur notre GitHub ici : https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

+ +

Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :

+ +

+ +

Chargeons notre JSON

+ +

Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment XHR). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails.

+ +
    +
  1. Donc, pour commencer, nous allons charger l'URL du fichier JSON que nous voulons récupérer dans une variable. Aussi, ajouter la ligne suivante à votre code Javascript : + 
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    +
    2. +
  2. Afin de créer une requête, nous avons besoin d'instancier un nouvel objet XMLHttpRequest à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script : + 
    var request = new XMLHttpRequest();
    +
    3. +
  3. Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode open(). Ajoutez la ligne suivante : + 
    request.open('GET', requestURL);
    + +

    Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles.  Deux suffiront pour notre exemple :

    + +
      +
    • La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode GET est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
      • +
    • L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure.
      • +
    +
    4. +
  4. Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur 'json' à  responseType, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode send() : + 
    request.responseType = 'json';
+request.send();
    +
    5. +
  5. La dernière partie de cette section concerne la réponse du serveur et son traitement. Ajoutez les lignes suivantes à la fin de votre code : + 
    request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
    +
    6. +
+ +

Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété response) dans la variable superHeroes ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <header> avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la <section>.

+ +

Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir onload) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété request.response sera disponible au moment où nous essayerons d'en faire quelque chose.

+ +

Remplissage de l'en-tête

+ +

Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code :

+ +
function populateHeader(jsonObj) {
+  var myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  var myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + jsonObj['formed'];
+  header.appendChild(myPara);
+}
+ +

Nous avons appelé le paramètre de cette fonction jsonObj  afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de createElement(), nous fixons son textContent à la valeur de la propriété squadName de l'objet, puis nous l'ajoutons à l'en-tête en utilisant appendChild(). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère homeTown et la propriété formed de l'objet.

+ +

Création des fiches des héros

+ +

Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code :

+ +
function showHeroes(jsonObj) {
+  var heroes = jsonObj['members'];
+
+  for (var i = 0; i < heroes.length; i++) {
+    var myArticle = document.createElement('article');
+    var myH2 = document.createElement('h2');
+    var myPara1 = document.createElement('p');
+    var myPara2 = document.createElement('p');
+    var myPara3 = document.createElement('p');
+    var myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    var superPowers = heroes[i].powers;
+    for (var j = 0; j < superPowers.length; j++) {
+      var listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}
+ +

Pour commencer, on stocke la propriété members de l'objet JavaScript dans une nouvelle variable. Ce tableau contient plusieurs objets contenant les informations relatives à chaque héros.

+ +

Maintenant, on utilise une boucle for pour parcourir chaque object du tableau. Pour chaque cas, il faut :

+ +
    +
  1. Créer plusieurs nouveaux éléments : un <article>, un <h2>, trois <p>s, et un <ul>.
    2. +
  2. Mettre le name du héros actuel dans le <h2>.
    3. +
  3. Remplir les trois paragraphes avec leur secretIdentity, leur age, et une ligne nommée "Superpowers:" pour présenter la liste des super-pouvoirs.
    4. +
  4. Stocker la propriété powers dans une nouvelle variable nommée superPowers contenant un tableau listant les super-pouvoirs du héros actuel.
    5. +
  5. Utiliser une autre boucle for pour parcourir les super-pouvoirs du héros actuel — créer pour chacun d'entre eux un élément <li>, y placer le super-pouvoir et placer le listItem dans l'élément <ul> (myList) en utilisant appendChild().
    6. +
  6. Pour finir, on ajoute <h2>, les <p>s et <ul> à <article> (myArticle), et on ajoute <article> à <section>. L'ordre d'ajout est important, c'est l'ordre dans lequel les éléments seront affichés dans le HTML.
    7. +
+ +
+

Note : Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source heroes-finished.html (ou regardez-le en action.)

+
+ +
+

Note : Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier superheroes.json dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article Les bases du JavaScript orienté objet pour obtenir plus de détails sur la notation avec un point et avec une accolade.

+
+ +

Conversion entre objets et textes

+ +

Dans l'exemple ci-dessus, accéder au JSON est simple, il suffit de définir la requête XHR pour renvoyer la réponse au format JSON en écrivant :

+ +
request.responseType = 'json';
+ +

Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet JSON interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :

+ + + +

Vous pouvez voir la première méthode en action dans notre exemple heroes-finished-json-parse.html (voir le code source) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode parse() pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :

+ +
request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  var superHeroesText = request.response; // get the string from the response
+  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +

Comme vous pouvez le deviner, stringify() fait exactement le contraire. Essayez d'entrer les lignes ci-dessous une par une dans la console Javascript de votre navigateur pour voir la méthode en action :

+ +
var myJSON = { "name": "Chris", "age": "38" };
+myJSON
+var myString = JSON.stringify(myJSON);
+myString
+ +

On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec stringify() — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu.

+ +

Résumé

+ +

Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de  création et d'analyse syntaxique (parsage)  du JSON  et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/object-oriented_js/index.html b/files/fr/learn/javascript/objects/object-oriented_js/index.html deleted file mode 100644 index a264d9063b..0000000000 --- a/files/fr/learn/javascript/objects/object-oriented_js/index.html +++ /dev/null @@ -1,279 +0,0 @@ ---- -title: Le JavaScript orienté objet pour débutants -slug: Learn/JavaScript/Objects/Object-oriented_JS -tags: - - Apprendre - - Débutant - - Guide - - JavaScript - - OOJS - - OOP - - POO -translation_of: Learn/JavaScript/Objects/Object-oriented_JS -original_slug: Learn/JavaScript/Objects/JS_orienté-objet ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.

- - - - - - - - - - - - -
Pré-requis :Connaissances de base en informatique et compréhension des notions HTML et CSS, notions de JavaScript (voir Premiers pas et Blocs de construction)
Objectif :Comprendre les concepts de base derrière la programmation orientée objet et comment ils s'appliquent à JavaScript ( « tout est objet » ) et comment créer des constructeurs et instancier des objets.
- -

La programmation orientée objet de loin

- -

Pour commencer, donnons une vue simplifiée et de haut niveau de ce qu'est la programmation orientée objet (POO). On parle d'une vision simplifiée étant donnée que la POO peut devenir très vite complexe et qu'être exhaustif rendrait probablement la découverte plus confuse et difficile qu'autre chose. L'idée de base de la POO consiste à utiliser des objets pour modéliser les objets du monde réel que l'on souhaite représenter dans nos programmes et/ou de fournir un moyen simple d'accéder à une fonctionnalité qu'il serait difficile d'utiliser autrement.

- -

Les objets peuvent contenir des données et du code représentant de l'information au sujet de la chose que l'on essaie de modéliser ainsi que des fonctionnalités ou un comportement que l'on souhaite lui appliquer. Les données (et bien souvent les fonctions) associées à un objet peuvent être stockées (le terme officiel est encapsulé) à l'intérieur d'un paquet objet. Il est possible de donner un nom spécifique à un paquet objet afin  d'y faire référence, on parle alors d'espace de noms ou namespace, il sera ainsi plus facile de le manipuler et d'y accéder. Les objets peuvent aussi servir pour stocker des données et les transférer facilement sur un réseau.

- -

Définissons un modèle objet

- -

Nous allons voir un programme simple qui affiche des informations à propos des élèves et des professeurs d'une école. Nous allons aborder la théorie de la programmation orientée objet de manière générale sans l'appliquer à un langage particulier.

- -

Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre premier article, il définit un ensemble de données et actions d'une personne. Il existe tout un tas de choses que nous pourrions savoir au sujet d'une personne (son adresse, sa taille, sa pointure, son ADN, son numéro de passeport, ses traits particuliers significatifs… ). En l'occurrence, nous souhaitons uniquement afficher son nom, son âge, ses passions, écrire une petite introduction à son sujet en utilisant ces données et lui apprendre à se présenter. On parle alors d'abstraction : créer un modèle simplifié de quelque chose de complexe mais qui ne contient que les aspects qui nous intéressent. Il sera alors plus simple de manipuler ce modèle objet simplifié dans le cadre de notre programme.

- -

Classe Personne avec attributs élémentaires

- -

Dans plusieurs langages de POO, la définition d'un objet est appelé une classe (comme on le verra ci-après, JavaScript se base sur un mécanisme et une terminologie différente). En réalité ce n'est pas vraiment un objet mais plutôt un modèle qui définit les propriétés que notre objet doit avoir.

- -

Créons des objets

- -

À partir de notre classe, nous pouvons créer des objets, on parle alors d'instancier des objets, une classe objet a alors une instance. Il s'agit d'objets qui contiennent les données et attributs définis dans une classe. À partir de notre classe Personne, nous pouvons modéliser des personnes réelles :

- -

Instantiation on a Personn Class for JS examples (fr)

- -

Lorsque l'instance d'un objet est créée, on appelle la fonction constructeur de la classe pour la créer. On parle d'instanciation d'un objet — l'objet ainsi créé est instancié à partir de la classe.

- -

Classes filles

- -

Pour notre exemple, nous n'allons pas nous contenter de personnes génériques — nous pourrions utiliser des professeurs, des étudiants, qui sont des types un peu plus spécifiques de personnes. En POO, il est possible de créer de nouvelles classes à partir d'autres classes — ces classes filles nouvellement créées peuvent hériter des propriétés et des attributs de leur classe mère. Il est donc possible d'avoir des attributs partagés à l'ensemble des classes plutôt que de les dupliquer. Si besoin, il est possible d'ajouter des fonctions et attributs spécifiques sur chaque classe fille.

- -

Inheritance principle with French text for JS example

- -

Cela s'avère très utile puisque les étudiants et les professeurs se ressemblent sur de nombreux aspects : ils ont un nom, un genre, un âge, il est donc utile de ne définir ces attributs qu'une seule fois. Il est aussi possible de redéfinir le même attribut dans différentes classes étant donné que l'attribut appartiendra à chaque fois à un nom d'espace différent. On pourra ainsi avoir différentes formes de salutations : « Hey, je m'appelle [prénom] » pour les étudiants ( « Hey je m'appelle Sam » ) tandis que les professeurs pourront dire quelque chose d'un peu plus formel comme « Bonjour, mon nom est [Titre][Nom] et j'enseigne [matière] » par exemple « Bonjour mon nom est M. Griffiths et j'enseigne la chimie ».

- -
-

Note : On parle de polymorphisme, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.

-
- -

Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :

- -

Professor instantiation example for JS fr

- -

Dans la suite de l'article, nous nous intéresserons à la mise en œuvre de la programmation orientée objet (POO) au sein de JavaScript.

- -

Constructeurs et instances d'objet

- -

Certains disent que le JavaScript n'est pas vraiment un langage de programmation orienté objet — Il n'existe pas, en JavaScript d'élément class pour créer des classes alors que c'est le cas dans plusieurs langages orientés objet. JavaScript quant à lui, utilise des fonctions spéciales appelées constructeurs pour définir les objets et leurs propriétés. Ces constructeurs s'avèrent utiles, puisque bien souvent, nous ne savons pas combien d'objets nous allons définir, les constructeurs nous permettent de créer autant d'objets que nécessaire et d'y associer des données et des fonctions au fur et à mesure.

- -

Lorsqu'un objet est instancié à partir d'une fonction constructeur, les fonctions de la classe ne sont pas copiées directement dans l'objet comme dans la plupart des langages orientés objet (OO). En JavaScript, les fonctions sont liées grâce à une chaîne de référence appelée chaîne prototype (voir Prototypes Objet). Il ne s'agit donc pas d'une véritable instanciation au sens strict puisque JavaScript utilise un mécanisme différent pour partager des fonctionnalités entre les objets.

- -
-

Note : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.

-
- -

Voyons comment créer des classes via les constructeurs et les utiliser pour instancier des objets en JavaScript. Nous allons commencer par faire une copie locale du fichier oojs.html que nous avons vu dans notre premier article sur les objets.

- -

Un exemple simple

- -
    -
  1. Tout d'abord ; voyons comment définir une personne au travers d'une fonction classique. Vous pouvez ajouter l'exemple ci-dessous dans votre code existant : - 
    function creerNouvellePersonne(nom) {
-  var obj = {};
-  obj.nom = nom;
-  obj.salutation = function() {
-    alert('Salut ! Je m\'appelle ' + this.nom + '.');
-  };
-  return obj;
-}
    -
    2. -
  2. Vous pouvez désormais créer une personne en appelant cette fonction, essayez en copiant les lignes suivantes dans la console JavaScript de votre navigateur : - 
    var salva = creerNouvellePersonne('Salva');
-salva.nom;
-salva.salutation();
    - Ça fonctionne bien, mais on peut améliorer notre exemple. Si l'on sait que l'on va créer un objet, pourquoi créer un objet vide pour l'utiliser ensuite ? Heureusement, JavaScript est là et possède des fonctions adaptées comme les constructeurs. À l'abordage !
    3. -
  3. Remplacez la fonction précédente par celle-ci : - 
    function Personne(nom) {
-  this.nom = nom;
-  this.salutation = function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  };
-}
    -
    4. -
- -

Le constructeur est l'équivalent JavaScript d'une classe. Il possède l'ensemble des fonctionnalités d'une fonction, cependant il ne renvoie rien et ne crée pas d'objet explicitement. Il se contente de définir les propriétés et les méthodes associées. Il y a aussi l'utilisation du mot-clé this, ce mot-clé sert au sein d'une instance qui sera créée à y faire référence, ainsi l'attribut nom sera, pour l'instance, égal au nom passé en argument de la fonction constructrice, la méthode salutation() retournera elle aussi le nom passé en argument de la fonction constructrice.

- -
-

Note : Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.

-
- -

Comment pouvons-nous utiliser un constructeur ?

- -
    -
  1. Ajoutez les lignes suivantes au code déjà existant : - 
    var personne1 = new Personne('Bob');
-var personne2 = new Personne('Sarah');
    -
    2. -
  2. Enregistrez votre code et relancez le dans votre navigateur puis essayez d'entrer les lignes suivantes dans la console : - 
    personne1.nom
-personne1.salutation()
-personne2.nom
-personne2.salutation()
    -
    3. -
- -

Pas mal ! Vous voyez désormais que nous avons deux nouveaux objets sur cette page, chaque objet étant stocké dans un espace de nom différent, pour y accéder il faut utiliser personne1 et personne2 pour préfixer les fonctions et attributs. Ce rangement permet de ne pas tout casser et de ne pas rentrer en collision avec d'autres fonctionnalités. Cependant les objets disposent du même attribut nom et de la même méthode salutation(). Heureusement, les attributs et les méthodes utilisent this ce qui leur permet d'utiliser les valeurs propres à chaque instance et de ne pas les mélanger.

- -

Revoyons l'appel au constructeur :

- -
var personne1 = new Personne('Bob');
-var personne2 = new Personne('Sarah');
- -

Dans chaque cas, le mot clé new est utilisé pour dire au navigateur que nous souhaitons définir une nouvelle instance, il est suivi du nom de la fonction que l'on utilise et de ses paramètres fournis entre parenthèses, le résultat est stocké dans une variable. Chaque instance est créée à partir de cette définition :

- -
function Personne(nom) {
-  this.nom = nom;
-  this.salutation = function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  };
-}
- -

Une fois les objets créés, les variables personne1 et personne2 contiennent les objets suivants :

- -
{
-  nom: 'Bob',
-  salutation: function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  }
-}
-
-{
-  nom: 'Sarah',
-  salutation: function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  }
-}
- -

On peut remarquer qu'à chaque appel de notre fonction constructrice nous définissons salutation() à chaque fois. Cela peut être évité via la définition de la fonction au sein du prototype, ce que nous verrons plus tard.

- -

Créons une version finalisée de notre constructeur

- -

L'exemple que nous avons utilisé jusqu'à présent était destiné à aborder les notions de base des constructeurs. Créons un constructeur digne de ce nom pour notre fonction constructrice Personne().

- -
    -
  1. Vous pouvez retirer le code que vous aviez ajouté précédemment pour le remplacer par le constructeur suivant, c'est la même fonction, ça reste un constructeur, nous avons juste ajouté quelques détails : - 
    function Personne(prenom, nom, age, genre, interets) {
-  this.nom = {
-    prenom,
-    nom
-  };
-  this.age = age;
-  this.genre = genre;
-  this.interets = interets;
-  this.bio = function() {
-    alert(this.nom.prenom + ' ' + this.nom.nom + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
-  };
-  this.salutation = function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom.prenom + '.');
-  };
-};
    -
    2. -
  2. Vous pouvez ajouter la ligne ci-dessous pour créer une instance à partir du constructeur : - 
    var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
    -
    3. -
- -

Vous pouvez accéder aux fonctions des objets instanciés de la même manière qu'avant :

- -
personne1['age']
-personne1.interets[1]
-personne1.bio()
-// etc.
- -
-

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir oojs-class-finished.html (vous pouvez aussi jeter un œil à la démo)

-
- -

Exercices

- -

Vous pouvez démarrer en instanciant de nouveaux objets puis en essayant de modifier et d'accéder à leurs attributs respectifs.

- -

D'autre part, il y a quelques améliorations possibles pour notre méthode bio(). En effet elle affiche systématiquement le pronom 'il', même si votre personne est une femme ou bien préfère se définir par un autre genre. De plus, la biographie n'inclut que deux passions, même s'il y en a plus dans la liste. Essayez d'améliorer cette méthode. Vous pourrez mettre votre code à l'intérieur du constructeur (vous aurez probablement besoin de quelques structures conditionnelles et d'une boucle). Réflechissez à la syntaxe des phrases qui devra s'adapter en fonction du genre et du nombre de passions listées.

- -
-

Note : Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt GitHub (la démo) —tentez d'abord l'aventure avant d'aller regarder la réponse !

-
- -

D'autres manières d'instancier des objets

- -

Jusque là nous n'avons abordé que deux manières différentes pour créer une instance d'objet, la déclarer de manière explicite et en utilisant le constructeur.

- -

Elles sont toutes les deux valables, mais il en existe d'autres. Afin que vous les reconnaissiez lorsque vous vous baladez sur le Web, nous en avons listées quelques unes.

- -

Le constructeur Object()

- -

Vous pouvez en premier lieu utiliser le constructeur Object() pour créer un nouvel objet. Oui, même les objets génériques ont leur propre constructeur, qui génère un objet vide.

- -
    -
  1. Essayez la commande suivante dans la console JavaScript de votre navigateur : - 
    var personne1 = new Object();
    -
    2. -
  2. On stocke ainsi un objet vide dans la variable personne1. Vous pouvez ensuite ajouter des attributs et des méthodes à cet objet en utilisant la notation point ou parenthèses comme vous le souhaitez. - 
    personne1.nom = 'Chris';
-personne1['age'] = 38;
-personne1.salutation = function() {
-  alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-};
    -
    3. -
  3. Vous pouvez aussi passer un objet en paramètre du constructeur Object(), afin de prédéfinir certains attributs et méthodes. - 
    var personne1 = new Object({
-  nom: 'Chris',
-  age: 38,
-  salutation: function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  }
-});
    -
    4. -
- -

Via la méthode create()

- -

Les constructeurs permettent de structurer le code : vous pouvez avoir l'ensemble de vos constructeurs au même endroit et ensuite créer les instances suivant vos besoins, en identifiant clairement leur origine.  

- -

Cependant, on peut vouloir créér des instances d'un objet, sans forcément définir un constructeur au préalable. (Particulierement si l'on a peu d'instances de cet object). JavaScript intègre directement une méthode appelée create() qui rend cela possible. Elle permet d'instancier un objet à partir d'un objet existant  .

- -
    -
  1. Essayez d'ajouter la ligne suivante dans votre console JavaScript : - 
    var personne2 = Object.create(personne1);
    -
    2. -
  2. Maintenant : - 
    personne2.nom
-personne2.salutation()
    -
    3. -
- -

personne2 a été créée à partir de personne1 — et elle possède les mêmes propriétés. 

- -

L'inconvénient de create() est qu'elle n'est pas supportée par IE8. Ainsi, utiliser les constructeurs peut s'avérer plus judicieux lorsqu'il s'agit de supporter les anciens navigateurs Web.

- -

Nous verrons les détails et les effets de create() plus tard.

- -

Résumé

- -

Cet article vous a donné un aperçu simplifié de la programmation orientée objet. Tout n'y a pas été détaillé mais ça vous permet de vous faire une idée. Nous avons vu comment JavaScript s'appuyait sur un certain nombre de principes orienté objet tout en ayant un certain nombre de particularités. Nous avons aussi vu comment implémenter des classes en JavaScript via la fonction constructeur ainsi que les différentes manières de générer des instances d'objets.

- -

Dans le prochain article, nous explorerons le monde des objets prototypes en JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/object-oriented_js/index.md b/files/fr/learn/javascript/objects/object-oriented_js/index.md new file mode 100644 index 0000000000..a264d9063b --- /dev/null +++ b/files/fr/learn/javascript/objects/object-oriented_js/index.md @@ -0,0 +1,279 @@ +--- +title: Le JavaScript orienté objet pour débutants +slug: Learn/JavaScript/Objects/Object-oriented_JS +tags: + - Apprendre + - Débutant + - Guide + - JavaScript + - OOJS + - OOP + - POO +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +original_slug: Learn/JavaScript/Objects/JS_orienté-objet +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
+ +

Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.

+ + + + + + + + + + + + +
Pré-requis :Connaissances de base en informatique et compréhension des notions HTML et CSS, notions de JavaScript (voir Premiers pas et Blocs de construction)
Objectif :Comprendre les concepts de base derrière la programmation orientée objet et comment ils s'appliquent à JavaScript ( « tout est objet » ) et comment créer des constructeurs et instancier des objets.
+ +

La programmation orientée objet de loin

+ +

Pour commencer, donnons une vue simplifiée et de haut niveau de ce qu'est la programmation orientée objet (POO). On parle d'une vision simplifiée étant donnée que la POO peut devenir très vite complexe et qu'être exhaustif rendrait probablement la découverte plus confuse et difficile qu'autre chose. L'idée de base de la POO consiste à utiliser des objets pour modéliser les objets du monde réel que l'on souhaite représenter dans nos programmes et/ou de fournir un moyen simple d'accéder à une fonctionnalité qu'il serait difficile d'utiliser autrement.

+ +

Les objets peuvent contenir des données et du code représentant de l'information au sujet de la chose que l'on essaie de modéliser ainsi que des fonctionnalités ou un comportement que l'on souhaite lui appliquer. Les données (et bien souvent les fonctions) associées à un objet peuvent être stockées (le terme officiel est encapsulé) à l'intérieur d'un paquet objet. Il est possible de donner un nom spécifique à un paquet objet afin  d'y faire référence, on parle alors d'espace de noms ou namespace, il sera ainsi plus facile de le manipuler et d'y accéder. Les objets peuvent aussi servir pour stocker des données et les transférer facilement sur un réseau.

+ +

Définissons un modèle objet

+ +

Nous allons voir un programme simple qui affiche des informations à propos des élèves et des professeurs d'une école. Nous allons aborder la théorie de la programmation orientée objet de manière générale sans l'appliquer à un langage particulier.

+ +

Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre premier article, il définit un ensemble de données et actions d'une personne. Il existe tout un tas de choses que nous pourrions savoir au sujet d'une personne (son adresse, sa taille, sa pointure, son ADN, son numéro de passeport, ses traits particuliers significatifs… ). En l'occurrence, nous souhaitons uniquement afficher son nom, son âge, ses passions, écrire une petite introduction à son sujet en utilisant ces données et lui apprendre à se présenter. On parle alors d'abstraction : créer un modèle simplifié de quelque chose de complexe mais qui ne contient que les aspects qui nous intéressent. Il sera alors plus simple de manipuler ce modèle objet simplifié dans le cadre de notre programme.

+ +

Classe Personne avec attributs élémentaires

+ +

Dans plusieurs langages de POO, la définition d'un objet est appelé une classe (comme on le verra ci-après, JavaScript se base sur un mécanisme et une terminologie différente). En réalité ce n'est pas vraiment un objet mais plutôt un modèle qui définit les propriétés que notre objet doit avoir.

+ +

Créons des objets

+ +

À partir de notre classe, nous pouvons créer des objets, on parle alors d'instancier des objets, une classe objet a alors une instance. Il s'agit d'objets qui contiennent les données et attributs définis dans une classe. À partir de notre classe Personne, nous pouvons modéliser des personnes réelles :

+ +

Instantiation on a Personn Class for JS examples (fr)

+ +

Lorsque l'instance d'un objet est créée, on appelle la fonction constructeur de la classe pour la créer. On parle d'instanciation d'un objet — l'objet ainsi créé est instancié à partir de la classe.

+ +

Classes filles

+ +

Pour notre exemple, nous n'allons pas nous contenter de personnes génériques — nous pourrions utiliser des professeurs, des étudiants, qui sont des types un peu plus spécifiques de personnes. En POO, il est possible de créer de nouvelles classes à partir d'autres classes — ces classes filles nouvellement créées peuvent hériter des propriétés et des attributs de leur classe mère. Il est donc possible d'avoir des attributs partagés à l'ensemble des classes plutôt que de les dupliquer. Si besoin, il est possible d'ajouter des fonctions et attributs spécifiques sur chaque classe fille.

+ +

Inheritance principle with French text for JS example

+ +

Cela s'avère très utile puisque les étudiants et les professeurs se ressemblent sur de nombreux aspects : ils ont un nom, un genre, un âge, il est donc utile de ne définir ces attributs qu'une seule fois. Il est aussi possible de redéfinir le même attribut dans différentes classes étant donné que l'attribut appartiendra à chaque fois à un nom d'espace différent. On pourra ainsi avoir différentes formes de salutations : « Hey, je m'appelle [prénom] » pour les étudiants ( « Hey je m'appelle Sam » ) tandis que les professeurs pourront dire quelque chose d'un peu plus formel comme « Bonjour, mon nom est [Titre][Nom] et j'enseigne [matière] » par exemple « Bonjour mon nom est M. Griffiths et j'enseigne la chimie ».

+ +
+

Note : On parle de polymorphisme, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.

+
+ +

Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :

+ +

Professor instantiation example for JS fr

+ +

Dans la suite de l'article, nous nous intéresserons à la mise en œuvre de la programmation orientée objet (POO) au sein de JavaScript.

+ +

Constructeurs et instances d'objet

+ +

Certains disent que le JavaScript n'est pas vraiment un langage de programmation orienté objet — Il n'existe pas, en JavaScript d'élément class pour créer des classes alors que c'est le cas dans plusieurs langages orientés objet. JavaScript quant à lui, utilise des fonctions spéciales appelées constructeurs pour définir les objets et leurs propriétés. Ces constructeurs s'avèrent utiles, puisque bien souvent, nous ne savons pas combien d'objets nous allons définir, les constructeurs nous permettent de créer autant d'objets que nécessaire et d'y associer des données et des fonctions au fur et à mesure.

+ +

Lorsqu'un objet est instancié à partir d'une fonction constructeur, les fonctions de la classe ne sont pas copiées directement dans l'objet comme dans la plupart des langages orientés objet (OO). En JavaScript, les fonctions sont liées grâce à une chaîne de référence appelée chaîne prototype (voir Prototypes Objet). Il ne s'agit donc pas d'une véritable instanciation au sens strict puisque JavaScript utilise un mécanisme différent pour partager des fonctionnalités entre les objets.

+ +
+

Note : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.

+
+ +

Voyons comment créer des classes via les constructeurs et les utiliser pour instancier des objets en JavaScript. Nous allons commencer par faire une copie locale du fichier oojs.html que nous avons vu dans notre premier article sur les objets.

+ +

Un exemple simple

+ +
    +
  1. Tout d'abord ; voyons comment définir une personne au travers d'une fonction classique. Vous pouvez ajouter l'exemple ci-dessous dans votre code existant : + 
    function creerNouvellePersonne(nom) {
+  var obj = {};
+  obj.nom = nom;
+  obj.salutation = function() {
+    alert('Salut ! Je m\'appelle ' + this.nom + '.');
+  };
+  return obj;
+}
    +
    2. +
  2. Vous pouvez désormais créer une personne en appelant cette fonction, essayez en copiant les lignes suivantes dans la console JavaScript de votre navigateur : + 
    var salva = creerNouvellePersonne('Salva');
+salva.nom;
+salva.salutation();
    + Ça fonctionne bien, mais on peut améliorer notre exemple. Si l'on sait que l'on va créer un objet, pourquoi créer un objet vide pour l'utiliser ensuite ? Heureusement, JavaScript est là et possède des fonctions adaptées comme les constructeurs. À l'abordage !
    3. +
  3. Remplacez la fonction précédente par celle-ci : + 
    function Personne(nom) {
+  this.nom = nom;
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  };
+}
    +
    4. +
+ +

Le constructeur est l'équivalent JavaScript d'une classe. Il possède l'ensemble des fonctionnalités d'une fonction, cependant il ne renvoie rien et ne crée pas d'objet explicitement. Il se contente de définir les propriétés et les méthodes associées. Il y a aussi l'utilisation du mot-clé this, ce mot-clé sert au sein d'une instance qui sera créée à y faire référence, ainsi l'attribut nom sera, pour l'instance, égal au nom passé en argument de la fonction constructrice, la méthode salutation() retournera elle aussi le nom passé en argument de la fonction constructrice.

+ +
+

Note : Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.

+
+ +

Comment pouvons-nous utiliser un constructeur ?

+ +
    +
  1. Ajoutez les lignes suivantes au code déjà existant : + 
    var personne1 = new Personne('Bob');
+var personne2 = new Personne('Sarah');
    +
    2. +
  2. Enregistrez votre code et relancez le dans votre navigateur puis essayez d'entrer les lignes suivantes dans la console : + 
    personne1.nom
+personne1.salutation()
+personne2.nom
+personne2.salutation()
    +
    3. +
+ +

Pas mal ! Vous voyez désormais que nous avons deux nouveaux objets sur cette page, chaque objet étant stocké dans un espace de nom différent, pour y accéder il faut utiliser personne1 et personne2 pour préfixer les fonctions et attributs. Ce rangement permet de ne pas tout casser et de ne pas rentrer en collision avec d'autres fonctionnalités. Cependant les objets disposent du même attribut nom et de la même méthode salutation(). Heureusement, les attributs et les méthodes utilisent this ce qui leur permet d'utiliser les valeurs propres à chaque instance et de ne pas les mélanger.

+ +

Revoyons l'appel au constructeur :

+ +
var personne1 = new Personne('Bob');
+var personne2 = new Personne('Sarah');
+ +

Dans chaque cas, le mot clé new est utilisé pour dire au navigateur que nous souhaitons définir une nouvelle instance, il est suivi du nom de la fonction que l'on utilise et de ses paramètres fournis entre parenthèses, le résultat est stocké dans une variable. Chaque instance est créée à partir de cette définition :

+ +
function Personne(nom) {
+  this.nom = nom;
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  };
+}
+ +

Une fois les objets créés, les variables personne1 et personne2 contiennent les objets suivants :

+ +
{
+  nom: 'Bob',
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+}
+
+{
+  nom: 'Sarah',
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+}
+ +

On peut remarquer qu'à chaque appel de notre fonction constructrice nous définissons salutation() à chaque fois. Cela peut être évité via la définition de la fonction au sein du prototype, ce que nous verrons plus tard.

+ +

Créons une version finalisée de notre constructeur

+ +

L'exemple que nous avons utilisé jusqu'à présent était destiné à aborder les notions de base des constructeurs. Créons un constructeur digne de ce nom pour notre fonction constructrice Personne().

+ +
    +
  1. Vous pouvez retirer le code que vous aviez ajouté précédemment pour le remplacer par le constructeur suivant, c'est la même fonction, ça reste un constructeur, nous avons juste ajouté quelques détails : + 
    function Personne(prenom, nom, age, genre, interets) {
+  this.nom = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+  this.bio = function() {
+    alert(this.nom.prenom + ' ' + this.nom.nom + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
+  };
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom.prenom + '.');
+  };
+};
    +
    2. +
  2. Vous pouvez ajouter la ligne ci-dessous pour créer une instance à partir du constructeur : + 
    var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
    +
    3. +
+ +

Vous pouvez accéder aux fonctions des objets instanciés de la même manière qu'avant :

+ +
personne1['age']
+personne1.interets[1]
+personne1.bio()
+// etc.
+ +
+

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir oojs-class-finished.html (vous pouvez aussi jeter un œil à la démo)

+
+ +

Exercices

+ +

Vous pouvez démarrer en instanciant de nouveaux objets puis en essayant de modifier et d'accéder à leurs attributs respectifs.

+ +

D'autre part, il y a quelques améliorations possibles pour notre méthode bio(). En effet elle affiche systématiquement le pronom 'il', même si votre personne est une femme ou bien préfère se définir par un autre genre. De plus, la biographie n'inclut que deux passions, même s'il y en a plus dans la liste. Essayez d'améliorer cette méthode. Vous pourrez mettre votre code à l'intérieur du constructeur (vous aurez probablement besoin de quelques structures conditionnelles et d'une boucle). Réflechissez à la syntaxe des phrases qui devra s'adapter en fonction du genre et du nombre de passions listées.

+ +
+

Note : Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt GitHub (la démo) —tentez d'abord l'aventure avant d'aller regarder la réponse !

+
+ +

D'autres manières d'instancier des objets

+ +

Jusque là nous n'avons abordé que deux manières différentes pour créer une instance d'objet, la déclarer de manière explicite et en utilisant le constructeur.

+ +

Elles sont toutes les deux valables, mais il en existe d'autres. Afin que vous les reconnaissiez lorsque vous vous baladez sur le Web, nous en avons listées quelques unes.

+ +

Le constructeur Object()

+ +

Vous pouvez en premier lieu utiliser le constructeur Object() pour créer un nouvel objet. Oui, même les objets génériques ont leur propre constructeur, qui génère un objet vide.

+ +
    +
  1. Essayez la commande suivante dans la console JavaScript de votre navigateur : + 
    var personne1 = new Object();
    +
    2. +
  2. On stocke ainsi un objet vide dans la variable personne1. Vous pouvez ensuite ajouter des attributs et des méthodes à cet objet en utilisant la notation point ou parenthèses comme vous le souhaitez. + 
    personne1.nom = 'Chris';
+personne1['age'] = 38;
+personne1.salutation = function() {
+  alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+};
    +
    3. +
  3. Vous pouvez aussi passer un objet en paramètre du constructeur Object(), afin de prédéfinir certains attributs et méthodes. + 
    var personne1 = new Object({
+  nom: 'Chris',
+  age: 38,
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+});
    +
    4. +
+ +

Via la méthode create()

+ +

Les constructeurs permettent de structurer le code : vous pouvez avoir l'ensemble de vos constructeurs au même endroit et ensuite créer les instances suivant vos besoins, en identifiant clairement leur origine.  

+ +

Cependant, on peut vouloir créér des instances d'un objet, sans forcément définir un constructeur au préalable. (Particulierement si l'on a peu d'instances de cet object). JavaScript intègre directement une méthode appelée create() qui rend cela possible. Elle permet d'instancier un objet à partir d'un objet existant  .

+ +
    +
  1. Essayez d'ajouter la ligne suivante dans votre console JavaScript : + 
    var personne2 = Object.create(personne1);
    +
    2. +
  2. Maintenant : + 
    personne2.nom
+personne2.salutation()
    +
    3. +
+ +

personne2 a été créée à partir de personne1 — et elle possède les mêmes propriétés. 

+ +

L'inconvénient de create() est qu'elle n'est pas supportée par IE8. Ainsi, utiliser les constructeurs peut s'avérer plus judicieux lorsqu'il s'agit de supporter les anciens navigateurs Web.

+ +

Nous verrons les détails et les effets de create() plus tard.

+ +

Résumé

+ +

Cet article vous a donné un aperçu simplifié de la programmation orientée objet. Tout n'y a pas été détaillé mais ça vous permet de vous faire une idée. Nous avons vu comment JavaScript s'appuyait sur un certain nombre de principes orienté objet tout en ayant un certain nombre de particularités. Nous avons aussi vu comment implémenter des classes en JavaScript via la fonction constructeur ainsi que les différentes manières de générer des instances d'objets.

+ +

Dans le prochain article, nous explorerons le monde des objets prototypes en JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.html b/files/fr/learn/javascript/objects/object_building_practice/index.html deleted file mode 100644 index 7028077f88..0000000000 --- a/files/fr/learn/javascript/objects/object_building_practice/index.html +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: La construction d'objet en pratique -slug: Learn/JavaScript/Objects/Object_building_practice -tags: - - Apprendre - - Article - - Canvas - - Débutant - - JavaScript - - Manuel - - Objets - - Tutoriel -translation_of: Learn/JavaScript/Objects/Object_building_practice -original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
- -

Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.

- - - - - - - - - - - - -
Pré-requis : -

Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec  les bases du JavaScript (voir Premiers pas et Les blocs de construction) et les bases de la programmation objet en JavaScript (voir Introduction aux objets). 

-
Objectif : -

Acquérir plus de pratique dans l'utilisation des objets et des techniques orientées objet dans un contexte "monde réel".

-
- -

Faisons bondir quelques balles

- -

Dans cet article, nous écrirons une démo classique de "balles bondissantes", pour vous montrer à quel point les objets peuvent être utiles en JavaScript. Nos petites balles bondiront partout sur notre écran et changeront de couleurs lorsqu'elles se toucheront. L'exemple finalisé ressemblera un peu à ceci : 

- -

- -
    -
- -

Cet exemple utilise l'API Canvas  pour dessiner les balles sur l'écran, et l'API requestAnimationFrame  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation détection de collision).

- -

Pour commencer, faites des copies locales de nos fichiers index.html, style.css, et main.js. Ces fichiers contiennent respectivement :

- -
    -
  1. Un document  HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements  pour appliquer notre CSS et notre JavaScript à notre HTML ;
    2. -
  2. Quelques styles très simples qui servent principalement à mettre en forme et placer le <h1>, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ;
    3. -
  3. Un peu de JavaScript qui sert à paramétrer l'élément  <canvas> et fournir les fonctions globalles que nous utiliserons.
    4. -
- -

La première partie du script ressemble à ceci :

- -
const canvas = document.querySelector('canvas');
-
-const ctx = canvas.getContext('2d');
-
-const width = canvas.width = window.innerWidth;
-const height = canvas.height = window.innerHeight;
- -

Ce script prend une référence à l'élément  <canvas> et ensuite invoque la méthode  getContext() sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (ctx)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. 

- -

Après, nous configurons  les variables width (largeur) et height(hauteur),  et la largeur et la hauteur de l'élément canvas (représentés par les propriétés  canvas.width et canvas.height ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).

- -

Vous verrez qu'ici nous enchaînons les assignations des valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé.

- -

Le dernier morceau du script ressemble à ceci :

- -
function random(min, max) {
-  var num = Math.floor(Math.random() * (max - min + 1)) + min;
-  return num;
-}
- -

Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris entre les deux. 

- -

Modéliser une balle dans notre programme

- -

Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code.

- -
function Ball(x, y, velX, velY, color, size) {
-  this.x = x;
-  this.y = y;
-  this.velX = velX;
-  this.velY = velY;
-  this.color = color;
-  this.size = size;
-}
- -

Ici, nous incluons des paramètres qui définissent  des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme :

- - - -

Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous voulons maintenant amener nos balles à faire quelque chose dans notre programme.

- -

Dessiner la balle

- -

En premier lieu ajoutez la méthode draw() au prototype de Ball() :

- -
Ball.prototype.draw = function() {
-  ctx.beginPath();
-  ctx.fillStyle = this.color;
-  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
-  ctx.fill();
-}
- -

En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt  (ctx). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :

- - - -

Vous pouvez déjà commencer à tester votre objet.

- -
    -
  1. Sauvegardez le code et chargez le fichier html dans un navigateur.
    2. -
  2. Ouvrez la console JavaScript du navigateur et actualisez la page afin que la taille du canvas change et prenne la petite taille restante de la fenêtre lorsque la console est ouverte.
    3. -
  3. Tapez dans la console ce qui suit afin de créer une nouvelle instance de balle : - 
    let testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    -
    4. -
  4. Essayez d'appeler ses membres : - 
    testBall.x
-testBall.size
-testBall.color
-testBall.draw()
    -
    5. -
  5. Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas.
    6. -
- -

Mettre à jour les données de la balle

- -

Nous pouvons dessiner la balle dans n'importe quelle position, mais actuellement pour commencer à la bouger nous aurons besoin d'une sorte de fonction de mise à jour. Insérez donc le code suivant à la fin de votre fichier JavaScript pour ajouter une méthode update() au prototype de Ball():

- -
Ball.prototype.update = function() {
-  if ((this.x + this.size) >= width) {
-    this.velX = -(this.velX);
-  }
-
-  if ((this.x - this.size) <= 0) {
-    this.velX = -(this.velX);
-  }
-
-  if ((this.y + this.size) >= height) {
-    this.velY = -(this.velY);
-  }
-
-  if ((this.y - this.size) <= 0) {
-    this.velY = -(this.velY);
-  }
-
-  this.x += this.velX;
-  this.y += this.velY;
-}
- -

Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord  du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif velY) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif velY).

- -

Dans les quatre cas nous :

- - - -

Dans chaque cas, nous incluons la taille size de la balle dans les calculs parce que les coordonnées  x/y  sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord  — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière.

- -

Les deux dernières lignes ajoutent la valeur velX à la coordonnée x et la valeur velY à la coordonnée y — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.

- -

Cela suffira pour l'instant, passons à l'animation !

- -

Animer la balle

- -

Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.

- -
    -
  1. Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant : - - 
    let balls = [];
-
    - - 
    while (balls.length < 25) {
-  let size = random(10,20);
-  let ball = new Ball(
-    // ball position always drawn at least one ball width
-    // away from the edge of the canvas, to avoid drawing errors
-    random(0 + size,width - size),
-    random(0 + size,height - size),
-    random(-7,7),
-    random(-7,7),
-    'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
-    size
-  );
-
-  balls.push(ball);
-}
    - Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
    2. -
  2. Ajoutez ce qui suit au bas de votre code maintenant : - 
    function loop() {
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
-  ctx.fillRect(0, 0, width, height);
-
-  for (let i = 0; i < balls.length; i++) {
-    balls[i].draw();
-    balls[i].update();
-  }
-
-  requestAnimationFrame(loop);
-}
    - -

    Notre fonction loop() fonctionne comme suit :

    - -
      -
    • On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant fillRect() (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, rgba (0,0,0,.25), pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
      • -
    • On crée un nouvel objet Ball() avec des attributs générées aléatoirement grâce à la fonction random(), puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans balls.length <25 pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
      • -
    • Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction draw() et update() pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.
      • -
    • Exécute à nouveau la fonction à l'aide de la méthode requestAnimationFrame() — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
      • -
    -
    3. -
  3. Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation. - 
    loop();
    -
    4. -
- -

Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!

- -

Ajouter la détection de collision

- -

Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.

- -
    -
  1. Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode update() (c'est-à-dire le bloc Ball.prototype.update). - - 
    Ball.prototype.collisionDetect = function() {
-  for (let j = 0; j < balls.length; j++) {
-    if (!(this === balls[j])) {
-      const dx = this.x - balls[j].x;
-      const dy = this.y - balls[j].y;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-
-      if (distance < this.size + balls[j].size) {
-        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
-      }
-    }
-  }
-}
    - -

    Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :

    - -
      -
    • Pour chaque balle b, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec b. Pour ce faire, on inspecte toutes les balles du tableau balls[] dans une boucle for.
      • -
    • Immédiatement à l'intérieur de cette boucle for, une instruction if vérifie si la balle courante  b' , inspectée dans la boucle, n'est égale à la balle b. Le code correspondant est :  b'!== b. En effet, nous ne voulons pas vérifier si une balle b est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle b—dont la méthode collisionDetect() est invoquée—est distincte de la balle b' inspectée dans la boucle. Ainsi le bloc de code venant après l'instruction if ne s'exécutera que si les balles b et b' ne sont pas identiques.
      • -
    • Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans 2D collision detection.
      • -
    • Si une collision est détectée, le code à l'intérieur de l'instruction interne if est exécuté. Dans ce cas, nous définissons simplement la propriété color des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que PhysicsJS, matter.js, Phaser, etc.
      • -
    -
    2. -
  2. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous  juste après la ligne balls[i].update();: - 
    balls[i].collisionDetect();
    -
    3. -
  3. Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !
    4. -
- -
-

Note : Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre version finale (voir également la démo en ligne).

-
- -

Résumé

- -

Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.

- -

C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.md b/files/fr/learn/javascript/objects/object_building_practice/index.md new file mode 100644 index 0000000000..7028077f88 --- /dev/null +++ b/files/fr/learn/javascript/objects/object_building_practice/index.md @@ -0,0 +1,317 @@ +--- +title: La construction d'objet en pratique +slug: Learn/JavaScript/Objects/Object_building_practice +tags: + - Apprendre + - Article + - Canvas + - Débutant + - JavaScript + - Manuel + - Objets + - Tutoriel +translation_of: Learn/JavaScript/Objects/Object_building_practice +original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
+ +

Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.

+ + + + + + + + + + + + +
Pré-requis : +

Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec  les bases du JavaScript (voir Premiers pas et Les blocs de construction) et les bases de la programmation objet en JavaScript (voir Introduction aux objets). 

+
Objectif : +

Acquérir plus de pratique dans l'utilisation des objets et des techniques orientées objet dans un contexte "monde réel".

+
+ +

Faisons bondir quelques balles

+ +

Dans cet article, nous écrirons une démo classique de "balles bondissantes", pour vous montrer à quel point les objets peuvent être utiles en JavaScript. Nos petites balles bondiront partout sur notre écran et changeront de couleurs lorsqu'elles se toucheront. L'exemple finalisé ressemblera un peu à ceci : 

+ +

+ +
    +
+ +

Cet exemple utilise l'API Canvas  pour dessiner les balles sur l'écran, et l'API requestAnimationFrame  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation détection de collision).

+ +

Pour commencer, faites des copies locales de nos fichiers index.html, style.css, et main.js. Ces fichiers contiennent respectivement :

+ +
    +
  1. Un document  HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements  pour appliquer notre CSS et notre JavaScript à notre HTML ;
    2. +
  2. Quelques styles très simples qui servent principalement à mettre en forme et placer le <h1>, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ;
    3. +
  3. Un peu de JavaScript qui sert à paramétrer l'élément  <canvas> et fournir les fonctions globalles que nous utiliserons.
    4. +
+ +

La première partie du script ressemble à ceci :

+ +
const canvas = document.querySelector('canvas');
+
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width = window.innerWidth;
+const height = canvas.height = window.innerHeight;
+ +

Ce script prend une référence à l'élément  <canvas> et ensuite invoque la méthode  getContext() sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (ctx)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. 

+ +

Après, nous configurons  les variables width (largeur) et height(hauteur),  et la largeur et la hauteur de l'élément canvas (représentés par les propriétés  canvas.width et canvas.height ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).

+ +

Vous verrez qu'ici nous enchaînons les assignations des valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé.

+ +

Le dernier morceau du script ressemble à ceci :

+ +
function random(min, max) {
+  var num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}
+ +

Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris entre les deux. 

+ +

Modéliser une balle dans notre programme

+ +

Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code.

+ +
function Ball(x, y, velX, velY, color, size) {
+  this.x = x;
+  this.y = y;
+  this.velX = velX;
+  this.velY = velY;
+  this.color = color;
+  this.size = size;
+}
+ +

Ici, nous incluons des paramètres qui définissent  des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme :

+ + + +

Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous voulons maintenant amener nos balles à faire quelque chose dans notre programme.

+ +

Dessiner la balle

+ +

En premier lieu ajoutez la méthode draw() au prototype de Ball() :

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+}
+ +

En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt  (ctx). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :

+ + + +

Vous pouvez déjà commencer à tester votre objet.

+ +
    +
  1. Sauvegardez le code et chargez le fichier html dans un navigateur.
    2. +
  2. Ouvrez la console JavaScript du navigateur et actualisez la page afin que la taille du canvas change et prenne la petite taille restante de la fenêtre lorsque la console est ouverte.
    3. +
  3. Tapez dans la console ce qui suit afin de créer une nouvelle instance de balle : + 
    let testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    +
    4. +
  4. Essayez d'appeler ses membres : + 
    testBall.x
+testBall.size
+testBall.color
+testBall.draw()
    +
    5. +
  5. Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas.
    6. +
+ +

Mettre à jour les données de la balle

+ +

Nous pouvons dessiner la balle dans n'importe quelle position, mais actuellement pour commencer à la bouger nous aurons besoin d'une sorte de fonction de mise à jour. Insérez donc le code suivant à la fin de votre fichier JavaScript pour ajouter une méthode update() au prototype de Ball():

+ +
Ball.prototype.update = function() {
+  if ((this.x + this.size) >= width) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.x - this.size) <= 0) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.y + this.size) >= height) {
+    this.velY = -(this.velY);
+  }
+
+  if ((this.y - this.size) <= 0) {
+    this.velY = -(this.velY);
+  }
+
+  this.x += this.velX;
+  this.y += this.velY;
+}
+ +

Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord  du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif velY) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif velY).

+ +

Dans les quatre cas nous :

+ + + +

Dans chaque cas, nous incluons la taille size de la balle dans les calculs parce que les coordonnées  x/y  sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord  — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière.

+ +

Les deux dernières lignes ajoutent la valeur velX à la coordonnée x et la valeur velY à la coordonnée y — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.

+ +

Cela suffira pour l'instant, passons à l'animation !

+ +

Animer la balle

+ +

Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.

+ +
    +
  1. Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant : + + 
    let balls = [];
+
    + + 
    while (balls.length < 25) {
+  let size = random(10,20);
+  let ball = new Ball(
+    // ball position always drawn at least one ball width
+    // away from the edge of the canvas, to avoid drawing errors
+    random(0 + size,width - size),
+    random(0 + size,height - size),
+    random(-7,7),
+    random(-7,7),
+    'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+    size
+  );
+
+  balls.push(ball);
+}
    + Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
    2. +
  2. Ajoutez ce qui suit au bas de votre code maintenant : + 
    function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  for (let i = 0; i < balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+  }
+
+  requestAnimationFrame(loop);
+}
    + +

    Notre fonction loop() fonctionne comme suit :

    + +
      +
    • On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant fillRect() (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, rgba (0,0,0,.25), pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
      • +
    • On crée un nouvel objet Ball() avec des attributs générées aléatoirement grâce à la fonction random(), puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans balls.length <25 pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
      • +
    • Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction draw() et update() pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.
      • +
    • Exécute à nouveau la fonction à l'aide de la méthode requestAnimationFrame() — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
      • +
    +
    3. +
  3. Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation. + 
    loop();
    +
    4. +
+ +

Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!

+ +

Ajouter la détection de collision

+ +

Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.

+ +
    +
  1. Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode update() (c'est-à-dire le bloc Ball.prototype.update). + + 
    Ball.prototype.collisionDetect = function() {
+  for (let j = 0; j < balls.length; j++) {
+    if (!(this === balls[j])) {
+      const dx = this.x - balls[j].x;
+      const dy = this.y - balls[j].y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance < this.size + balls[j].size) {
+        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+      }
+    }
+  }
+}
    + +

    Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :

    + +
      +
    • Pour chaque balle b, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec b. Pour ce faire, on inspecte toutes les balles du tableau balls[] dans une boucle for.
      • +
    • Immédiatement à l'intérieur de cette boucle for, une instruction if vérifie si la balle courante  b' , inspectée dans la boucle, n'est égale à la balle b. Le code correspondant est :  b'!== b. En effet, nous ne voulons pas vérifier si une balle b est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle b—dont la méthode collisionDetect() est invoquée—est distincte de la balle b' inspectée dans la boucle. Ainsi le bloc de code venant après l'instruction if ne s'exécutera que si les balles b et b' ne sont pas identiques.
      • +
    • Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans 2D collision detection.
      • +
    • Si une collision est détectée, le code à l'intérieur de l'instruction interne if est exécuté. Dans ce cas, nous définissons simplement la propriété color des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que PhysicsJS, matter.js, Phaser, etc.
      • +
    +
    2. +
  2. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous  juste après la ligne balls[i].update();: + 
    balls[i].collisionDetect();
    +
    3. +
  3. Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !
    4. +
+ +
+

Note : Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre version finale (voir également la démo en ligne).

+
+ +

Résumé

+ +

Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.

+ +

C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.html b/files/fr/learn/javascript/objects/object_prototypes/index.html deleted file mode 100644 index 95663a0f7b..0000000000 --- a/files/fr/learn/javascript/objects/object_prototypes/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Prototypes Objet -slug: Learn/JavaScript/Objects/Object_prototypes -tags: - - Constructeur - - JavaScript - - Prototype -translation_of: Learn/JavaScript/Objects/Object_prototypes -original_slug: Learn/JavaScript/Objects/Prototypes_Objet ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
- -

Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.

- - - - - - - - - - - - -
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectifs :Comprendre le concept de prototype en JavaScript, comprendre comment fonctionne une chaîne de prototypage et comment ajouter de nouvelles méthodes aux propriétés d'un prototype.
- -

Un langage basé sur des prototypes ?

- -

JavaScript est souvent décrit comme un langage basé sur les prototypes, chaque objet pouvant avoir un prototype objet d'où il hérite des méthodes et des attributs. Un prototype peut lui aussi avoir son prototype objet duquel il héritera des méthodes et des attributs et ainsi de suite. On parle alors de chaîne de prototypage (ou prototype chain en anglais). Cela permet d'expliquer pourquoi différents objets possèdent des attributs et des méthodes définis à partir d'autres objets.

- -

En réalité, les méthodes et attributs sont définis dans l'attribut prototype , la fonction constructrice de l'objet et non pas dans les instances des objets elles-mêmes.

- -

En programmation orientée objet classique, les classes sont définies, puis lorsque des instances sont créées, l'ensemble des attributs et des méthodes sont copiés dans l'instance. En JavaScript en revanche, tout n'est pas copié : on établit un lien entre l'objet instancié et son constructeur (c'est un lien dans la chaîne de prototypage). On détermine alors les méthodes et les attributs en remontant la chaîne.

- -
-

Note: Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via Object.getPrototypeOf(obj), ou via la propriété dépréciée  __proto__ ) et l' attribut prototyped'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, Object.getPrototypeOf(new Foobar()) renvoie au même object queFoobar.prototype.

-
- -

Prenons un exemple afin de rendre cela un peu plus clair.

- -

Comprendre les prototypes objet

- -

Reprenons notre exemple dans lequel nous avions écrit notre constructeur Personne(). Chargez cet exemple dans votre navigateur, si vous ne l'avez plus, vous pouvez utiliser notre exemple oojs-class-further-exercises.html example (voir aussi le code source).

- -

Dans cet exemple, nous avons défini un constructeur comme suit :

- -
function Personne(prenom, nom, age, genre, interets) {
-
-  // property and method definitions
-
-};
- -

Nous avons ensuite instancié des objets comme ceci :

- -
var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
- -

Si vous entrez  « personne1 » dans votre console JavaScript, vous devriez voir que le navigateur essaie de faire de l'auto-complétion avec les attributs de cet objet.

- -

- -

Dans cette liste vous verrez les membres définis au niveau du constructeur de personne1 qui n'est autre  Personne(). On y trouve les valeurs suivantes : nom, age, genre, interets, bio, et salutation. On peut voir aussi d'autres membres tels que watch, valueOf …  Ces membres particuliers sont définis au niveau du prototype objet du constructeur Personne(), qui est Object. On voit ici une mise en œuvre de la chaine de prototypage.

- -

- -

Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour Object en l'appliquant à Personne1 ? Par exemple :

- -
personne1.valueOf()
- -

Cette méthode renvoie simplement la valeur de l'objet pour lequel elle est appelée. Vous pouvez essayer dans votre console ! Lorsque l'on effectue cet appel, il se produit les choses suivantes :

- - - -
-

Note : Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont pas copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.

-
- -
-

Note : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée [[prototype]] définie dans la spécification de JavaScript. (voir ECMAScript). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut __proto__   (deux tirets soulignés ou underscore de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter personne1.__proto__ et personne1.__proto__.__proto__ pour voir à quoi ressemble une chaine de prototypage dans la console !

-
- -

L'attribut prototype : là où l'on définit les éléments héritables

- -

Mais alors, où définissons-nous les attributs et méthodes qui seront hérités au long de la chaîne de prototypage ? En effet, s'il on regarde à la page de documentation Object on peut voir un large éventail d'attributs et de méthodes qui sont définis, une liste bien plus longue que celle disponible pour notre objet Personne1. Pourquoi Personne1 hérite de certains de ces éléments mais pas de tous ?

- -

Cela vient du fait que les éléments hérités sont ceux définis au niveau de l'attribut prototype d'Object (on peut voir cet attribut comme un sous espace de noms). Ainsi, les éléments listés sont ceux sous Object.prototype. et pas ceux situés juste sous Object. La valeur de l'attribut prototype est un objet qui rassemble les attributs et méthodes que l'on souhaite appliquer aux objets tout au long de la chaine de prototypage.

- -

Ainsi Object.prototype.watch(), Object.prototype.valueOf() …  sont disponibles pour n'importe quel objet qui hérite de Object.prototype ce qui inclus les nouvelles instances créées à partir du constructeur Personne().

- -

Object.is(), Object.keys(), ainsi que d'autres membres non définis dans prototype ne sont pas hérités par les instances d'objet ou les objets qui héritent de Object.prototype. Ces méthodes et attributs sont disponibles uniquement pour le constructeur Object().

- -
-

Note : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un  œil à la documentation du constructeur Function() si vous ne nous croyez pas.

-
- -
    -
  1. Vous pouvez vérifier les attributs du prototype en reprenant l'exemple précédent et en entrant le code suivant dans la console JavaScript : - 
    Personne.prototype
    -
    2. -
  2. Il n'y a pas grand chose renvoyé par le navigateur. En même temps, nous n'avons rien défini dans l'attribut prototype de notre constructeur, et par défaut l'attribut prototype d'un constructeur est toujours vide. Voyons ce que renvoie le code suivant : - 
    Object.prototype
    -
    3. -
- -

On observe que plusieurs méthodes sont définies au niveau de l'attribut prototype d'Object, qui seront alors disponibles pour les objets qui héritent d'Object, comme nous l'avons vu plus haut.

- -

Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs prototype des objets globeaux comme String,  Date, Number, et  Array. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci :

- -
var maChaine = 'Ceci est ma chaine de caracteres.';
- -

maChaine possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que split(), indexOf(), replace()…

- -
-

Attention : L'attribut prototype est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via __proto__). L'attribut prototype est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.

-
- -

Revenons sur create()

- -

Nous avons vu précedemment que la méthode Object.create() pouvait être utilisée pour instancier des objets.

- -
    -
  1. Par exemple, vous pouvez essayer le code suivant dans la console JavaScript : - 
    var personne2 = Object.create(personne1);
    -
    2. -
  2. En réalité create() se contente de créer un nouvel objet à partir d'un prototype spécifique. Dans cet exemple, personne2 est créé à partir de personne1 qui agit en tant que prototype. Vous pouvez le vérifier via : - 
    person2.__proto__
    -
    3. -
- -

Cela renverra l'objet personne1.

- -

L'attribut constructor

- -

Chaque fonction possède un attribut prototype dont la valeur est un objet contenant un attribut constructor. L'attribut constructor renvoie vers la méthode constructrice utilisée. Nous allons le voir dans la section suivante, les attributs définis dans l'attribut Personne.prototype deviennent disponibles pour toutes les instances créées à partir du constructeur Personne(). De cette manière, l'attribut constructor est aussi disponible au sein de personne1 et personne2.

- -
    -
  1. Par exemple, vous pouvez tester le code suivant : - 
    personne1.constructor
-personne2.constructor
    - -

    Chaque commande devrait renvoyer le constructeur Personne() étant donné qu'il a permis d'instancier ces objets.

    - -

    Une astuce qui peut s'avérer utile est d'ajouter des parenthèses à la fin de l'attribut constructor pour le transformer en méthode. Après tout, le constructeur est une fonction que l'on peut appeler si besoin. Il faut juste utiliser le mot-clé new pour signifier que l'on souhaite construire un objet.

    -
    2. -
  2. Par exemple : - 
    var personne3 = new personne1.constructor('Karen', 'Stephenson', 26, 'femme', ['jouer de la batterie', 'escalade']);
    -
    3. -
  3. Vous pouvez désormais essayer d'accéder aux propriétés de personne3 : - 
    personne3.prenom
-personne3.age
-personne3.bio()
    -
    4. -
- -

Ça fonctionne bien. A priori, ce n'est pas la manière la plus simple de créer un objet et vous n'aurez pas à l'utiliser souvent. En revanche, ça peut vous débloquer quand vous devez créer une nouvelle instance et que vous ne disposez pas facilement du constructeur d'origine.

- -

L'attribut constructor possède d'autres intérêts. Par exemple, si vous disposez du nom d'une instance objet vous pouvez utiliser le code suivant pour renvoyer le nom de son constructeur :

- -
instanceName.constructor.name
- -

Vous pouvez essayer :

- -
personne1.constructor.name
- -

Modifions les prototypes

- -

Voyons au travers d'un exemple comment modifier l'attribut prototype d'un constructeur (les méthodes ajoutées au prototype seront alors disponibles pour toutes les instances créées à partir du constructeur).

- -
    -
  1. Revenons à notre exemple oojs-class-further-exercises.html et faisons une copie local du code source. En dessous du JavaScript existant, vous pouvez ajouter le code suivant, ce qui aura pour effet d'ajouter une nouvelle méthode à l'attribut prototype du constructeur : - - 
    Personne.prototype.aurevoir = function() {
-  alert(this.nom.prenom + ' est sorti. Au revoir !');
-}
    -
    2. -
  2. Enregistrez vos modifications et chargez la page dans votre navigateur. Vous pouvez ensuite entrer le code suivant dans la console : - 
    personne1.aurevoir();
    -
    3. -
- -

Vous devriez voir une fenêtre s'afficher avec un message contenant le nom de la personne. Cette fonctionalité est utile, mais là où ça devient plus intéressant c'est que la chaine de prototypage a été mis à jour dynamiquement, rendant automatiquement cette méthode disponible à l'ensemble des instances existantes.

- -

Revoyons en détail ce qui s'est passé : tout d'abord, nous avons défini le constructeur. Ensuite, nous avons instancié un objet à partir du constructeur. Enfin, nous avons ajouté une nouvelle méthode au prototype du construceur :

- -
function Personne(prenom, nom, age, genre, interets) {
-
-  // définition des attrbuts et des méthodes
-
-};
-
-var personne1 = new Personne('Tammi', 'Smith', 32, 'neutre', ['musique', 'ski', 'kickboxing']);
-
-Personne.prototype.aurevoir= function() {
-  alert(this.nom.prenom + ' est sorti. Au revoir !');
-}
- -

Même si nous l'avons déclaré après, la méthode aurevoir() est disponible pour l'instance personne1. Son existence a mis à jour dynamiquement les méthodes de l'instance. Cela démontre ce que nous expliquions plus haut au sujet de la chaine de prototypage : le navigateur la parcourt de manière ascendante. Ainsi, il est possible de trouver directement les méthodes qui n'ont pas été définies au niveau de l'instance, plutôt que de les recopier au sein de l'instance. Cela nous permet de bénéficier d'un système extensible de manière simple et élégante.

- -
-

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (oojs-class-prototype.html, voir la démo)

-
- -

Vous verrez peu d'attributs définis au sein de l'attribut prototype, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir :

- -
Personne.prototype.nomComplet = 'Bob Smith';
- -

Mais ce n'est pas très pratique, étant donné qu'une personne ne sera peut-être pas appelée de cette manière. Il est plus cohérent de construire le nom entier en combinant le nom et le prénom :

- -
Personne.prototype.nomComplet = this.nom.prenom + ' ' + this.nom.nom;
- -

Ça ne fonctionnera toujours pas. En effet, this aura une portée globale et ne sera pas dans le contexte de la fonction. En appelant cet attribut, nous aurions alors undefined undefined. Dans les exemples précédents sur le prototype, nous arrivions à obtenir quelque chose de fonctionnel puisque nous étions au sein d'une méthode, qui sera utilisée par l'instance. Il est donc possible de définir des attributs invariables au niveau du prototype mais de manière générale, il est préférable de les définir au sein du constructeur.

- -

En fait, on retrouve généralement la chose suivante : les attributs sont définis dans le constructeur, tandis que les méthodes sont définies au niveau du prototype. Cela rend le code plus simple à lire puisque les attributs sont groupés et les méthodes structurées en blocs distincts. Par exempe :

- -
// Constructeur avec définition des attributs
-
-function Test(a, b, c, d) {
-  // définition des attributs
-};
-
-// Définition de la première méthode
-
-Test.prototype.x = function() { ... }
-
-// Définition de la seconde méthode
-
-Test.prototype.y = function() { ... }
-
-// etc...
- -

Ce type d'implémentation peut être observée dans l'appli plan d'école de Piotr Zalewa par exemple.

- -

Résumé

- -

Cet article a traité des prototypes objet en JavaScript, en incluant la chaine de prototypage qui permet aux objets d'hériter des propriétés d'un autre objet. Nous avons aussi vu l'attribut prototype et comment nous pouvons l'utiliser pour ajouter des méthodes au constructeur.

- -

Dans le prochain article, nous verrons comment appliquer l'héritage entre deux de nos propres objets.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.md b/files/fr/learn/javascript/objects/object_prototypes/index.md new file mode 100644 index 0000000000..95663a0f7b --- /dev/null +++ b/files/fr/learn/javascript/objects/object_prototypes/index.md @@ -0,0 +1,245 @@ +--- +title: Prototypes Objet +slug: Learn/JavaScript/Objects/Object_prototypes +tags: + - Constructeur + - JavaScript + - Prototype +translation_of: Learn/JavaScript/Objects/Object_prototypes +original_slug: Learn/JavaScript/Objects/Prototypes_Objet +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
+ +

Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.

+ + + + + + + + + + + + +
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectifs :Comprendre le concept de prototype en JavaScript, comprendre comment fonctionne une chaîne de prototypage et comment ajouter de nouvelles méthodes aux propriétés d'un prototype.
+ +

Un langage basé sur des prototypes ?

+ +

JavaScript est souvent décrit comme un langage basé sur les prototypes, chaque objet pouvant avoir un prototype objet d'où il hérite des méthodes et des attributs. Un prototype peut lui aussi avoir son prototype objet duquel il héritera des méthodes et des attributs et ainsi de suite. On parle alors de chaîne de prototypage (ou prototype chain en anglais). Cela permet d'expliquer pourquoi différents objets possèdent des attributs et des méthodes définis à partir d'autres objets.

+ +

En réalité, les méthodes et attributs sont définis dans l'attribut prototype , la fonction constructrice de l'objet et non pas dans les instances des objets elles-mêmes.

+ +

En programmation orientée objet classique, les classes sont définies, puis lorsque des instances sont créées, l'ensemble des attributs et des méthodes sont copiés dans l'instance. En JavaScript en revanche, tout n'est pas copié : on établit un lien entre l'objet instancié et son constructeur (c'est un lien dans la chaîne de prototypage). On détermine alors les méthodes et les attributs en remontant la chaîne.

+ +
+

Note: Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via Object.getPrototypeOf(obj), ou via la propriété dépréciée  __proto__ ) et l' attribut prototyped'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, Object.getPrototypeOf(new Foobar()) renvoie au même object queFoobar.prototype.

+
+ +

Prenons un exemple afin de rendre cela un peu plus clair.

+ +

Comprendre les prototypes objet

+ +

Reprenons notre exemple dans lequel nous avions écrit notre constructeur Personne(). Chargez cet exemple dans votre navigateur, si vous ne l'avez plus, vous pouvez utiliser notre exemple oojs-class-further-exercises.html example (voir aussi le code source).

+ +

Dans cet exemple, nous avons défini un constructeur comme suit :

+ +
function Personne(prenom, nom, age, genre, interets) {
+
+  // property and method definitions
+
+};
+ +

Nous avons ensuite instancié des objets comme ceci :

+ +
var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
+ +

Si vous entrez  « personne1 » dans votre console JavaScript, vous devriez voir que le navigateur essaie de faire de l'auto-complétion avec les attributs de cet objet.

+ +

+ +

Dans cette liste vous verrez les membres définis au niveau du constructeur de personne1 qui n'est autre  Personne(). On y trouve les valeurs suivantes : nom, age, genre, interets, bio, et salutation. On peut voir aussi d'autres membres tels que watch, valueOf …  Ces membres particuliers sont définis au niveau du prototype objet du constructeur Personne(), qui est Object. On voit ici une mise en œuvre de la chaine de prototypage.

+ +

+ +

Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour Object en l'appliquant à Personne1 ? Par exemple :

+ +
personne1.valueOf()
+ +

Cette méthode renvoie simplement la valeur de l'objet pour lequel elle est appelée. Vous pouvez essayer dans votre console ! Lorsque l'on effectue cet appel, il se produit les choses suivantes :

+ + + +
+

Note : Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont pas copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.

+
+ +
+

Note : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée [[prototype]] définie dans la spécification de JavaScript. (voir ECMAScript). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut __proto__   (deux tirets soulignés ou underscore de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter personne1.__proto__ et personne1.__proto__.__proto__ pour voir à quoi ressemble une chaine de prototypage dans la console !

+
+ +

L'attribut prototype : là où l'on définit les éléments héritables

+ +

Mais alors, où définissons-nous les attributs et méthodes qui seront hérités au long de la chaîne de prototypage ? En effet, s'il on regarde à la page de documentation Object on peut voir un large éventail d'attributs et de méthodes qui sont définis, une liste bien plus longue que celle disponible pour notre objet Personne1. Pourquoi Personne1 hérite de certains de ces éléments mais pas de tous ?

+ +

Cela vient du fait que les éléments hérités sont ceux définis au niveau de l'attribut prototype d'Object (on peut voir cet attribut comme un sous espace de noms). Ainsi, les éléments listés sont ceux sous Object.prototype. et pas ceux situés juste sous Object. La valeur de l'attribut prototype est un objet qui rassemble les attributs et méthodes que l'on souhaite appliquer aux objets tout au long de la chaine de prototypage.

+ +

Ainsi Object.prototype.watch(), Object.prototype.valueOf() …  sont disponibles pour n'importe quel objet qui hérite de Object.prototype ce qui inclus les nouvelles instances créées à partir du constructeur Personne().

+ +

Object.is(), Object.keys(), ainsi que d'autres membres non définis dans prototype ne sont pas hérités par les instances d'objet ou les objets qui héritent de Object.prototype. Ces méthodes et attributs sont disponibles uniquement pour le constructeur Object().

+ +
+

Note : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un  œil à la documentation du constructeur Function() si vous ne nous croyez pas.

+
+ +
    +
  1. Vous pouvez vérifier les attributs du prototype en reprenant l'exemple précédent et en entrant le code suivant dans la console JavaScript : + 
    Personne.prototype
    +
    2. +
  2. Il n'y a pas grand chose renvoyé par le navigateur. En même temps, nous n'avons rien défini dans l'attribut prototype de notre constructeur, et par défaut l'attribut prototype d'un constructeur est toujours vide. Voyons ce que renvoie le code suivant : + 
    Object.prototype
    +
    3. +
+ +

On observe que plusieurs méthodes sont définies au niveau de l'attribut prototype d'Object, qui seront alors disponibles pour les objets qui héritent d'Object, comme nous l'avons vu plus haut.

+ +

Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs prototype des objets globeaux comme String,  Date, Number, et  Array. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci :

+ +
var maChaine = 'Ceci est ma chaine de caracteres.';
+ +

maChaine possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que split(), indexOf(), replace()…

+ +
+

Attention : L'attribut prototype est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via __proto__). L'attribut prototype est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.

+
+ +

Revenons sur create()

+ +

Nous avons vu précedemment que la méthode Object.create() pouvait être utilisée pour instancier des objets.

+ +
    +
  1. Par exemple, vous pouvez essayer le code suivant dans la console JavaScript : + 
    var personne2 = Object.create(personne1);
    +
    2. +
  2. En réalité create() se contente de créer un nouvel objet à partir d'un prototype spécifique. Dans cet exemple, personne2 est créé à partir de personne1 qui agit en tant que prototype. Vous pouvez le vérifier via : + 
    person2.__proto__
    +
    3. +
+ +

Cela renverra l'objet personne1.

+ +

L'attribut constructor

+ +

Chaque fonction possède un attribut prototype dont la valeur est un objet contenant un attribut constructor. L'attribut constructor renvoie vers la méthode constructrice utilisée. Nous allons le voir dans la section suivante, les attributs définis dans l'attribut Personne.prototype deviennent disponibles pour toutes les instances créées à partir du constructeur Personne(). De cette manière, l'attribut constructor est aussi disponible au sein de personne1 et personne2.

+ +
    +
  1. Par exemple, vous pouvez tester le code suivant : + 
    personne1.constructor
+personne2.constructor
    + +

    Chaque commande devrait renvoyer le constructeur Personne() étant donné qu'il a permis d'instancier ces objets.

    + +

    Une astuce qui peut s'avérer utile est d'ajouter des parenthèses à la fin de l'attribut constructor pour le transformer en méthode. Après tout, le constructeur est une fonction que l'on peut appeler si besoin. Il faut juste utiliser le mot-clé new pour signifier que l'on souhaite construire un objet.

    +
    2. +
  2. Par exemple : + 
    var personne3 = new personne1.constructor('Karen', 'Stephenson', 26, 'femme', ['jouer de la batterie', 'escalade']);
    +
    3. +
  3. Vous pouvez désormais essayer d'accéder aux propriétés de personne3 : + 
    personne3.prenom
+personne3.age
+personne3.bio()
    +
    4. +
+ +

Ça fonctionne bien. A priori, ce n'est pas la manière la plus simple de créer un objet et vous n'aurez pas à l'utiliser souvent. En revanche, ça peut vous débloquer quand vous devez créer une nouvelle instance et que vous ne disposez pas facilement du constructeur d'origine.

+ +

L'attribut constructor possède d'autres intérêts. Par exemple, si vous disposez du nom d'une instance objet vous pouvez utiliser le code suivant pour renvoyer le nom de son constructeur :

+ +
instanceName.constructor.name
+ +

Vous pouvez essayer :

+ +
personne1.constructor.name
+ +

Modifions les prototypes

+ +

Voyons au travers d'un exemple comment modifier l'attribut prototype d'un constructeur (les méthodes ajoutées au prototype seront alors disponibles pour toutes les instances créées à partir du constructeur).

+ +
    +
  1. Revenons à notre exemple oojs-class-further-exercises.html et faisons une copie local du code source. En dessous du JavaScript existant, vous pouvez ajouter le code suivant, ce qui aura pour effet d'ajouter une nouvelle méthode à l'attribut prototype du constructeur : + + 
    Personne.prototype.aurevoir = function() {
+  alert(this.nom.prenom + ' est sorti. Au revoir !');
+}
    +
    2. +
  2. Enregistrez vos modifications et chargez la page dans votre navigateur. Vous pouvez ensuite entrer le code suivant dans la console : + 
    personne1.aurevoir();
    +
    3. +
+ +

Vous devriez voir une fenêtre s'afficher avec un message contenant le nom de la personne. Cette fonctionalité est utile, mais là où ça devient plus intéressant c'est que la chaine de prototypage a été mis à jour dynamiquement, rendant automatiquement cette méthode disponible à l'ensemble des instances existantes.

+ +

Revoyons en détail ce qui s'est passé : tout d'abord, nous avons défini le constructeur. Ensuite, nous avons instancié un objet à partir du constructeur. Enfin, nous avons ajouté une nouvelle méthode au prototype du construceur :

+ +
function Personne(prenom, nom, age, genre, interets) {
+
+  // définition des attrbuts et des méthodes
+
+};
+
+var personne1 = new Personne('Tammi', 'Smith', 32, 'neutre', ['musique', 'ski', 'kickboxing']);
+
+Personne.prototype.aurevoir= function() {
+  alert(this.nom.prenom + ' est sorti. Au revoir !');
+}
+ +

Même si nous l'avons déclaré après, la méthode aurevoir() est disponible pour l'instance personne1. Son existence a mis à jour dynamiquement les méthodes de l'instance. Cela démontre ce que nous expliquions plus haut au sujet de la chaine de prototypage : le navigateur la parcourt de manière ascendante. Ainsi, il est possible de trouver directement les méthodes qui n'ont pas été définies au niveau de l'instance, plutôt que de les recopier au sein de l'instance. Cela nous permet de bénéficier d'un système extensible de manière simple et élégante.

+ +
+

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (oojs-class-prototype.html, voir la démo)

+
+ +

Vous verrez peu d'attributs définis au sein de l'attribut prototype, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir :

+ +
Personne.prototype.nomComplet = 'Bob Smith';
+ +

Mais ce n'est pas très pratique, étant donné qu'une personne ne sera peut-être pas appelée de cette manière. Il est plus cohérent de construire le nom entier en combinant le nom et le prénom :

+ +
Personne.prototype.nomComplet = this.nom.prenom + ' ' + this.nom.nom;
+ +

Ça ne fonctionnera toujours pas. En effet, this aura une portée globale et ne sera pas dans le contexte de la fonction. En appelant cet attribut, nous aurions alors undefined undefined. Dans les exemples précédents sur le prototype, nous arrivions à obtenir quelque chose de fonctionnel puisque nous étions au sein d'une méthode, qui sera utilisée par l'instance. Il est donc possible de définir des attributs invariables au niveau du prototype mais de manière générale, il est préférable de les définir au sein du constructeur.

+ +

En fait, on retrouve généralement la chose suivante : les attributs sont définis dans le constructeur, tandis que les méthodes sont définies au niveau du prototype. Cela rend le code plus simple à lire puisque les attributs sont groupés et les méthodes structurées en blocs distincts. Par exempe :

+ +
// Constructeur avec définition des attributs
+
+function Test(a, b, c, d) {
+  // définition des attributs
+};
+
+// Définition de la première méthode
+
+Test.prototype.x = function() { ... }
+
+// Définition de la seconde méthode
+
+Test.prototype.y = function() { ... }
+
+// etc...
+ +

Ce type d'implémentation peut être observée dans l'appli plan d'école de Piotr Zalewa par exemple.

+ +

Résumé

+ +

Cet article a traité des prototypes objet en JavaScript, en incluant la chaine de prototypage qui permet aux objets d'hériter des propriétés d'un autre objet. Nous avons aussi vu l'attribut prototype et comment nous pouvons l'utiliser pour ajouter des méthodes au constructeur.

+ +

Dans le prochain article, nous verrons comment appliquer l'héritage entre deux de nos propres objets.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

-- cgit v1.2.3-54-g00ecf