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 10:42] – philweb:javascript:fondamentaux:objets [2021/08/11 10:47] (Version actuelle) – [3. Ajouter des valeurs dans un objet] phil
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}}]]
  
-===== JavaScript - Programmation objet et JSON =====+==== JavaScript - Programmation objet et JSON ====
  
 [Mise à jour le 11/8/2021] [Mise à jour le 11/8/2021]
Ligne 16: Ligne 16:
 <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> <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 32: 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 50: 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 72: 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 93: 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 107: 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 115: Ligne 113:
  
 //Exemples// //Exemples//
-<code javascript>+<code javascript *.js>
 var posX = { var posX = {
     x1 : 12,      x1 : 12, 
Ligne 129: 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.1628671325.txt.gz
  • Dernière modification : 2021/08/11 10:42
  • de phil