diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-14 14:23:22 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-11-14 14:23:22 +0100 |
commit | d596e86a4f13b04981f51d327af257b07e6d21c3 (patch) | |
tree | 63473f4c84b99e13d900cdab5e5a844a1c359476 /files/fr/learn/javascript/objects/basics/index.html | |
parent | 55e694eab2e70941e979c2839aaca5c9ef8f3226 (diff) | |
download | translated-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/basics/index.html')
-rw-r--r-- | files/fr/learn/javascript/objects/basics/index.html | 58 |
1 files changed, 29 insertions, 29 deletions
diff --git a/files/fr/learn/javascript/objects/basics/index.html b/files/fr/learn/javascript/objects/basics/index.html index 6d7276b7b1..483ebba0fc 100644 --- a/files/fr/learn/javascript/objects/basics/index.html +++ b/files/fr/learn/javascript/objects/basics/index.html @@ -15,9 +15,9 @@ translation_of: Learn/JavaScript/Objects/Basics <div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> -<p class="summary">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.</p> +<p>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.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -38,15 +38,15 @@ translation_of: Learn/JavaScript/Objects/Basics <p>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 :</p> -<pre class="brush: js notranslate">var personne = {};</pre> +<pre class="brush: js">var personne = {};</pre> <p>Désormais ouvrez la <a href="/fr/docs/Outils/Console_JavaScript#Ouvrir_la_Console_du_navigateur">console JavaScript</a> de votre navigateur, saisissez <code>personne</code> à l'intérieur, et appuyez sur <kbd>Entrée</kbd>. Vous devriez obtenir le résultat suivant :</p> -<pre class="brush: js notranslate">[object Object]</pre> +<pre class="brush: js">[object Object]</pre> <p>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 :</p> -<pre class="brush: js notranslate">var personne = { +<pre class="brush: js">var personne = { nom: ['Jean', 'Martin'], age: 32, sexe: 'masculin', @@ -62,7 +62,7 @@ translation_of: Learn/JavaScript/Objects/Basics <p>Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie <code>input</code> :</p> -<pre class="brush: js notranslate">personne.nom +<pre class="brush: js">personne.nom personne.nom[0] personne.age personne.interets[1] @@ -79,7 +79,7 @@ personne.salutation()</pre> <p>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 :</p> -<pre class="brush: js notranslate">var monObjet = { +<pre class="brush: js">var monObjet = { nomDuMembre1: valeurDuMembre1, nomDuMembre2: valeurDuMembre2, nomDuMembre3: valeurDuMembre3 @@ -99,7 +99,7 @@ personne.salutation()</pre> <p>Le nom de l'objet (<code>personne</code>) agit comme un <strong>espace de noms</strong> (ou <em>namespace</em> en anglais) — il doit être entré en premier pour accéder aux membres <strong>encapsulés</strong> 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 :</p> -<pre class="brush: js notranslate">personne.age +<pre class="brush: js">personne.age personne.interets[1] personne.bio()</pre> @@ -107,28 +107,28 @@ personne.bio()</pre> <p>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é <code>nom</code> du membre et la faire passer de</p> -<pre class="brush: js notranslate">nom: ['Jean', 'Martin'],</pre> +<pre class="brush: js">nom: ['Jean', 'Martin'],</pre> <p>à</p> -<pre class="brush: js notranslate">nom : { +<pre class="brush: js">nom : { prenom: 'Jean', nomFamille: 'Martin' },</pre> <p>Ici, nous avons bien créé un <strong>sous-espace de noms</strong>. Ç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 :</p> -<pre class="brush: js notranslate">personne.nom.prenom +<pre class="brush: js">personne.nom.prenom personne.nom.nomFamille</pre> <p><strong>Important </strong>: à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de :</p> -<pre class="brush: js notranslate">nom[0] +<pre class="brush: js">nom[0] nom[1]</pre> <p>en</p> -<pre class="brush: js notranslate">nom.prenom +<pre class="brush: js">nom.prenom nom.nomFamille</pre> <p>sinon vos méthodes ne fonctionneront plus.</p> @@ -137,12 +137,12 @@ nom.nomFamille</pre> <p>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 :</p> -<pre class="brush: js notranslate">personne.age +<pre class="brush: js">personne.age personne.nom.prenom</pre> <p>Vous pouvez utiliser :</p> -<pre class="brush: js notranslate">personne['age'] +<pre class="brush: js">personne['age'] personne['nom']['prenom']</pre> <p>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.</p> @@ -151,42 +151,42 @@ personne['nom']['prenom']</pre> <p>Jusqu'ici, nous avons vu comment <strong>accéder</strong> aux membres d'un objet. Vous pouvez aussi <strong>modifier</strong> 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 :</p> -<pre class="brush: js notranslate">personne.age = 45 +<pre class="brush: js">personne.age = 45 personne['nom']['nomFamille'] = 'Rabuchon'</pre> <p>Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé :</p> -<pre class="brush: js notranslate">personne.age +<pre class="brush: js">personne.age personne['nom']['nomFamille']</pre> <p>Définir les membres ne s'arrête pas à mettre à jour la valeur de propriétés ou méthodes existantes; <strong>vous pouvez aussi créer de nouveaux membres</strong>. Essayez ceci :</p> -<pre class="brush: js notranslate">personne['yeux'] = 'noisette' +<pre class="brush: js">personne['yeux'] = 'noisette' personne.auRevoir = function() { alert("Bye bye tout le monde !"); }</pre> <p>Vous pouvez maintenant tester vos nouveaux membres :</p> -<pre class="brush: js notranslate">personne['yeux'] +<pre class="brush: js">personne['yeux'] personne.auRevoir()</pre> <p>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 <code>input</code>. On pourrait avoir ses valeurs comme ceci :</p> -<pre class="brush: js notranslate">var monNomDeDonnee = nomInput.value +<pre class="brush: js">var monNomDeDonnee = nomInput.value var maValeurDeDonnee = valeurNom.value</pre> <p>On peut alors ajouter le nom et la valeur du nouveau membre de l'objet <code>personne</code> comme ceci :</p> -<pre class="brush: js notranslate">personne[monNomDeDonnee] = maValeurDeDonnee</pre> +<pre class="brush: js">personne[monNomDeDonnee] = maValeurDeDonnee</pre> <p>Pour le tester, essayez d'ajouter les lignes ci-dessous dans votre code, juste après le crochet fermante de l'objet <code>personne</code> :</p> -<pre class="brush: js notranslate">var monNomDeDonnee = 'hauteur' +<pre class="brush: js">var monNomDeDonnee = 'hauteur' var maValeurDeDonnee = '1.75m' personne[monNomDeDonnee] = maValeurDeDonnee</pre> <p>Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément <code>input</code>) :</p> -<pre class="brush: js notranslate">personne.hauteur</pre> +<pre class="brush: js">personne.hauteur</pre> <p>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.</p> @@ -194,7 +194,7 @@ personne[monNomDeDonnee] = maValeurDeDonnee</pre> <p>Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple :</p> -<pre class="brush: js notranslate">salutation: function() { +<pre class="brush: js">salutation: function() { alert('Bonjour! Je suis ' + this.nom.prenom + '.'); }</pre> @@ -202,7 +202,7 @@ personne[monNomDeDonnee] = maValeurDeDonnee</pre> <p>Essayons d'illustrer nos propos par une paire d'objet <code>personne</code> simplifiée :</p> -<pre class="brush: js notranslate">var personne1 = { +<pre class="brush: js">var personne1 = { nom: 'Christophe', salutation: function() { alert('Bonjour ! Je suis ' + this.nom + '.'); @@ -224,13 +224,13 @@ var personne2 = { <p>Ainsi, quand vous utilisez une méthode comme :</p> -<pre class="brush: js notranslate">maChaineDeCaracteres.split(',');</pre> +<pre class="brush: js">maChaineDeCaracteres.split(',');</pre> <p>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 <code>String</code> et possède donc plusieurs méthodes/propriétés communes.</p> <p>Quand vous accédez au DOM (<em>Document Object Model</em> ou « modèle objet du document ») avec <code>document</code> et des lignes telles que :</p> -<pre class="brush: js notranslate">var monDiv = document.createElement('div'); +<pre class="brush: js">var monDiv = document.createElement('div'); var maVideo = document.querySelector('video');</pre> <p>Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de <code>Document</code> est créée, appelée <code>document</code> 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.</p> @@ -239,12 +239,12 @@ var maVideo = document.querySelector('video');</pre> <p>On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, <a href="/fr/docs/Web/API/Notifications_API">l'API Notifications</a> — 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 :</p> -<pre class="brush: js notranslate">var maNotification = new Notification('Bonjour !');</pre> +<pre class="brush: js">var maNotification = new Notification('Bonjour !');</pre> <p>Nous verrons les constructeurs dans un prochain article.</p> <div class="note"> -<p><strong>Note</strong> : On peut voir le mode de communication des objets comme un <strong>envoi de message</strong>. 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.</p> +<p><strong>Note :</strong> On peut voir le mode de communication des objets comme un <strong>envoi de message</strong>. 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.</p> </div> <h2 id="Résumé">Résumé</h2> |