web:javascript:fondamentaux:objets

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:javascript:fondamentaux:objets [2021/08/11 09:19] – modification externe 127.0.0.1web:javascript:fondamentaux:objets [2025/06/19 19:30] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
-[[|{{ :suivant.png?nolink&30|}}]] [[|{{ :retour.png?nolink&30|}}]][[web:javascript|{{ :iconemaison.jpg?nolink&30|Accueil JavaScript}}]]+[[web:javascript|{{ :iconemaison.jpg?nolink&25|Accueil JavaScript}}]]
  
-===== Les objets =====+==== JavaScript - Programmation objet et JSON ====
  
-[Mise à jour le 2/5/2019] +[Mise à jour le 11/8/2021]
-{{ :web:javascript.jpg?nolink&150|}} {{  :web:web.png?nolink&100|}}+
  
   * **Sources** et compléments sur **MDN Web Docs**   * **Sources** et compléments sur **MDN Web Docs**
Ligne 15: Ligne 14:
 ---- ----
  
-Les objets sont des ensembles de **paires clé-valeur**. La clé est une chaîne de caractères permettant d'accéder à la valeur. Il est ainsi possible d'enregistrer plusieurs informations pour un même objet. Les accolades et leur contenu sont appelés **objet littéral**.+<note>Les objets sont des ensembles de **paires clé-valeur**. La clé est une chaîne de caractères permettant d'accéder à la valeur. Il est ainsi possible d'enregistrer plusieurs informations pour un même objet. Les accolades et leur contenu sont appelés **objet littéral**.</note>
  
-==== 1. Créer un objet ====+=== 1. Créer un objet ===
 Pour créer un objet, il faut insérer des accolades (**{ }**). La **clé** se place avant les "**:**" (qui signifient = ) et la valeur après. La **valeur** est assignée à la clé. Les différentes paires de //**clés-valeur**// sont séparées par des "**,**". Pour créer un objet, il faut insérer des accolades (**{ }**). La **clé** se place avant les "**:**" (qui signifient = ) et la valeur après. La **valeur** est assignée à la clé. Les différentes paires de //**clés-valeur**// sont séparées par des "**,**".
  
 //Exemples// //Exemples//
-<code javascript>+<code javascript *.js>
 var objet = {}; // Objet vide var objet = {}; // Objet vide
  
Ligne 33: Ligne 32:
 </code> </code>
  
-> __Remarque__ : les clés étant obligatoirement des chaînes de caractères, il n'est pas nécessaire de les placer entre guillemets sauf si on souhaite qu'elles contiennent des **caractères spéciaux** comme l'espace. +<note tip>Les clés étant obligatoirement des chaînes de caractères, il n'est pas nécessaire de les placer entre guillemets sauf si on souhaite qu'elles contiennent des **caractères spéciaux** comme l'espace.</note> 
-==== 2. Accéder aux valeurs d'un objet ==== + 
-Il suffit de placer la clé entre des guillemets et dans des crochets ou de la **lier** avec un **point**.+=== 2. Valeurs d'un objet === 
 +Pour accéder aux valeurs d'un objet, il suffit de placer la clé entre des guillemets et dans des crochets ou de la **lier** avec un **point**.
  
 //Exemples// //Exemples//
Ligne 51: Ligne 51:
 </code> </code>
  
-> __Remarque__ : pour extraire la liste complète des clés d'un objet :  appliquer la méthode //**Object.keys(**//nomObjet//**)**//.+<note tip>Pour extraire la liste complète des clés d'un objet :  appliquer la méthode //**Object.keys(**//nomObjet//**)**//.</note>
  
 //Exemple// //Exemple//
-<code javascript>+<code javascript *.js>
 Object.keys(voiture); // résultat dans la console : Array(5) ["marque", "type", "couleur", "nombre", "En vente "] Object.keys(voiture); // résultat dans la console : Array(5) ["marque", "type", "couleur", "nombre", "En vente "]
 </code> </code>
  
- +=== 3. Ajout de valeurs ===
- +
-==== 3. Ajouter des valeurs dans un objet ====+
  
 //Exemples// //Exemples//
-<code javascript>+<code javascript *.js>
 var voiture = {}; // Première possibilité : même principe que les tableaux var voiture = {}; // Première possibilité : même principe que les tableaux
 voiture["marque "] = "Peugeot"; voiture["marque "] = "Peugeot";
Ligne 73: Ligne 71:
 voiture.type = "3008"; voiture.type = "3008";
 voiture.couleur = "rouge"; voiture.couleur = "rouge";
- 
 </code> </code>
  
-==== 4. Combiner des tableaux et des objets ====+=== 4. Combiner des tableaux et des objets ===
 Il est possible d'utiliser un tableau ou un objet comme valeur dans un tableau ou un objet. Il est possible d'utiliser un tableau ou un objet comme valeur dans un tableau ou un objet.
  
 //Exemples// //Exemples//
-<code javascript>+<code javascript *.js>
 var voitures = [ // Tableau d'objets var voitures = [ // Tableau d'objets
     { marque : "Peugeot", type : "3008", couleur : "rouge"},     { marque : "Peugeot", type : "3008", couleur : "rouge"},
Ligne 94: Ligne 91:
  
  
-==== 5. Explorer des objets dans la console ====+=== 5. Explorer des objets dans la console ===
 Le navigateur permet de connaître le détail des objets qu'il affiche dans la console. Le navigateur permet de connaître le détail des objets qu'il affiche dans la console.
  
 {{ :web:javascript:fondamentaux:objetcons.png?nolink|}} {{ :web:javascript:fondamentaux:objetcons.png?nolink|}}
 //Exemples// //Exemples//
-<code javascript>+<code javascript *.js>
 var amis = [ var amis = [
      {prenom:"Célestin", age: 25, ville:"Bourges"},      {prenom:"Célestin", age: 25, ville:"Bourges"},
Ligne 108: Ligne 105:
 </code> </code>
  
-==== 6. Parcourir un objet avec une boucle for in ====+=== 6. Parcourir un objet avec une boucle for in ===
 Il n'est pas possible de parcourir un objet littéral avec une boucle **for**. Normal, puisqu'une boucle for est surtout capable d'incrémenter une variable numérique, ce qui ne nous est d'aucune utilité dans le cas d'un objet littéral puisque nous devons posséder un identifiant. \\ Il n'est pas possible de parcourir un objet littéral avec une boucle **for**. Normal, puisqu'une boucle for est surtout capable d'incrémenter une variable numérique, ce qui ne nous est d'aucune utilité dans le cas d'un objet littéral puisque nous devons posséder un identifiant. \\
 En revanche, la boucle **for in** se révèle très intéressante ! En revanche, la boucle **for in** se révèle très intéressante !
Ligne 116: Ligne 113:
  
 //Exemples// //Exemples//
-<code javascript>+<code javascript *.js>
 var posX = { var posX = {
     x1 : 12,      x1 : 12, 
Ligne 130: Ligne 127:
 </code> </code>
  
-==== 7. Pour aller plus loin... ====+=== 7. Pour aller plus loin... ===
 <html><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Basics" title="Les bases de Java​Script, orienté objet <html><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Basics" title="Les bases de Java​Script, orienté objet
 " target="_blank">MDN web docs : </a></html> " target="_blank">MDN web docs : </a></html>
  
  • web/javascript/fondamentaux/objets.1628666368.txt.gz
  • Dernière modification : 2025/06/19 19:30
  • (modification externe)