aboutsummaryrefslogtreecommitdiff
path: root/files/fr/learn/javascript/objects/object-oriented_js
diff options
context:
space:
mode:
authorSphinxKnight <SphinxKnight@users.noreply.github.com>2021-11-14 14:23:22 +0100
committerGitHub <noreply@github.com>2021-11-14 14:23:22 +0100
commitd596e86a4f13b04981f51d327af257b07e6d21c3 (patch)
tree63473f4c84b99e13d900cdab5e5a844a1c359476 /files/fr/learn/javascript/objects/object-oriented_js
parent55e694eab2e70941e979c2839aaca5c9ef8f3226 (diff)
downloadtranslated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.gz
translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.bz2
translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.zip
Prepare Learning Area section for Markdown conversion (#2738)
* Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area
Diffstat (limited to 'files/fr/learn/javascript/objects/object-oriented_js')
-rw-r--r--files/fr/learn/javascript/objects/object-oriented_js/index.html22
1 files changed, 11 insertions, 11 deletions
diff --git a/files/fr/learn/javascript/objects/object-oriented_js/index.html b/files/fr/learn/javascript/objects/object-oriented_js/index.html
index 1671769acb..a264d9063b 100644
--- a/files/fr/learn/javascript/objects/object-oriented_js/index.html
+++ b/files/fr/learn/javascript/objects/object-oriented_js/index.html
@@ -16,9 +16,9 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet
<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div>
-<p class="summary">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.</p>
+<p>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.</p>
-<table class="learn-box standard-table">
+<table class="standard-table">
<tbody>
<tr>
<th scope="row">Pré-requis :</th>
@@ -43,7 +43,7 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet
<p>Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre <a href="/fr/docs/Learn/JavaScript/Objects/Basics">premier article</a>, 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'<strong>abstraction </strong>: 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.</p>
-<p><img alt="Classe Personne avec attributs élémentaires" src="https://mdn.mozillademos.org/files/14867/ClassePersonne.png" style="height: 216px; width: 604px;"></p>
+<p><img alt="Classe Personne avec attributs élémentaires" src="ClassePersonne.png"></p>
<p>Dans plusieurs langages de POO, la définition d'un objet est appelé une <strong>classe </strong>(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.</p>
@@ -51,7 +51,7 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet
<p>À partir de notre classe, nous pouvons créer des objets, on parle alors d'<strong>instancier des objets</strong>, une classe objet a alors <strong>une instance</strong>. 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 :</p>
-<p><img alt="Instantiation on a Personn Class for JS examples (fr)" src="https://mdn.mozillademos.org/files/14869/InstancePersonne.png" style="height: 716px; width: 699px;"></p>
+<p><img alt="Instantiation on a Personn Class for JS examples (fr)" src="InstancePersonne.png"></p>
<p>Lorsque l'instance d'un objet est créée, on appelle la <strong>fonction</strong> <strong>constructeur </strong>de la classe pour la créer. On parle d'<strong>instanciation</strong> d'un objet — l'objet ainsi créé est <strong>instancié</strong> à partir de la classe.</p>
@@ -59,17 +59,17 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet
<p>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 <strong>classes filles</strong> nouvellement créées peuvent <strong>hériter</strong> des propriétés et des attributs de leur <strong>classe mère</strong>. 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.</p>
-<p><img alt="Inheritance principle with French text for JS example" src="https://mdn.mozillademos.org/files/14887/HeritageClasse.PNG" style="height: 709px; width: 696px;"></p>
+<p><img alt="Inheritance principle with French text for JS example" src="HeritageClasse.PNG"></p>
<p>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 ».</p>
<div class="note">
-<p><strong>Note </strong>: On parle de <strong>polymorphisme</strong>, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.</p>
+<p><strong>Note :</strong> On parle de <strong>polymorphisme</strong>, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.</p>
</div>
<p>Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :</p>
-<p><img alt="Professor instantiation example for JS fr" src="https://mdn.mozillademos.org/files/14889/InstanceProf.png" style="height: 703px; width: 696px;"></p>
+<p><img alt="Professor instantiation example for JS fr" src="InstanceProf.png"></p>
<p>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.</p>
@@ -80,7 +80,7 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet
<p>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 <a href="/fr/docs/Learn/JavaScript/Objects/Object_prototypes">Prototypes Objet</a>). 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.</p>
<div class="note">
-<p><strong>Note</strong> : 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.</p>
+<p><strong>Note :</strong> 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.</p>
</div>
<p>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 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> que nous avons vu dans notre premier article sur les objets.</p>
@@ -116,7 +116,7 @@ salva.salutation();</pre>
<p>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é <code>this</code>, 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 <code>salutation</code><code>()</code> retournera elle aussi le nom passé en argument de la fonction constructrice.</p>
<div class="note">
-<p><strong>Note </strong>: 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.</p>
+<p><strong>Note :</strong> 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.</p>
</div>
<p>Comment pouvons-nous utiliser un constructeur ?</p>
@@ -203,7 +203,7 @@ personne1.bio()
// etc.</pre>
<div class="note">
-<p><strong>Note</strong> : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (vous pouvez aussi jeter un œil à la <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">démo</a>)</p>
+<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (vous pouvez aussi jeter un œil à la <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">démo</a>)</p>
</div>
<h3 id="Exercices">Exercices</h3>
@@ -213,7 +213,7 @@ personne1.bio()
<p>D'autre part, il y a quelques améliorations possibles pour notre méthode <code>bio().</code> 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.</p>
<div class="note">
-<p><strong>Note</strong>: Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">GitHub </a>(<a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">la démo</a>) —tentez d'abord l'aventure avant d'aller regarder la réponse !</p>
+<p><strong>Note :</strong> Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">GitHub </a>(<a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">la démo</a>) —tentez d'abord l'aventure avant d'aller regarder la réponse !</p>
</div>
<h2 id="Dautres_manières_dinstancier_des_objets">D'autres manières d'instancier des objets</h2>