From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: 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 --- .../fr/learn/javascript/objects/basics/index.html | 58 +++++++++++----------- 1 file changed, 29 insertions(+), 29 deletions(-) (limited to 'files/fr/learn/javascript/objects/basics/index.html') 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
{{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.

+

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.

- +
@@ -38,15 +38,15 @@ translation_of: Learn/JavaScript/Objects/Basics

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 = {};
+
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]
+
[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 = {
+
var personne = {
   nom: ['Jean', 'Martin'],
   age: 32,
   sexe: 'masculin',
@@ -62,7 +62,7 @@ translation_of: Learn/JavaScript/Objects/Basics
 
 
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
 personne.nom[0]
 personne.age
 personne.interets[1]
@@ -79,7 +79,7 @@ personne.salutation()

 
 
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 = {
+
var monObjet = {
   nomDuMembre1: valeurDuMembre1,
   nomDuMembre2: valeurDuMembre2,
   nomDuMembre3: valeurDuMembre3
@@ -99,7 +99,7 @@ personne.salutation()

 
 
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.age
 personne.interets[1]
 personne.bio()

 
@@ -107,28 +107,28 @@ personne.bio()

 
 
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: ['Jean', 'Martin'],

 
 
à

 
-
nom : {
+
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.prenom
 personne.nom.nomFamille

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

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

 
 
en

 
-
nom.prenom
+
nom.prenom
 nom.nomFamille

 
 
sinon vos méthodes ne fonctionneront plus.

@@ -137,12 +137,12 @@ nom.nomFamille

 
 
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.age
 personne.nom.prenom

 
 
Vous pouvez utiliser :

 
-
personne['age']
+
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.

@@ -151,42 +151,42 @@ personne['nom']['prenom']

 
 
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.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.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['yeux'] = 'noisette'
 personne.auRevoir = function() { alert("Bye bye tout le monde !"); }

 
 
Vous pouvez maintenant tester vos nouveaux membres :

 
-
personne['yeux']
+
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 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

+
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 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

+
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.

 
@@ -194,7 +194,7 @@ personne[monNomDeDonnee] = maValeurDeDonnee

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

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

 
@@ -202,7 +202,7 @@ personne[monNomDeDonnee] = maValeurDeDonnee

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

 
-
var personne1 = {
+
var personne1 = {
   nom: 'Christophe',
   salutation: function() {
     alert('Bonjour ! Je suis ' + this.nom + '.');
@@ -224,13 +224,13 @@ var personne2 = {
 
 
Ainsi, quand vous utilisez une méthode comme :

 
-
maChaineDeCaracteres.split(',');

+
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 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.

@@ -239,12 +239,12 @@ var maVideo = document.querySelector('video');

 
 
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 !');

+
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.

+
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é

-- 
cgit v1.2.3-54-g00ecf
Prérequis :