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 [2020/09/25 16:02] – adminweb:javascript:fondamentaux:objets [2025/06/19 19:30] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 +[[web:javascript|{{ :iconemaison.jpg?nolink&25|Accueil JavaScript}}]]
 +
 +==== JavaScript - Programmation objet et JSON ====
 +
 +[Mise à jour le 11/8/2021]
 +
 +  * **Sources** et compléments sur **MDN Web Docs**
 +    * <html><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS" target="_blank">Le JavaScript orienté objet pour débutants</a></html>
 +    * <html><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON" target="_blank">JSON</a></html>
 +
 +  * ** Lectures connexes**
 +    * Wikis WebPEM : [[:outils:vscode:web|"Préparer un projet de site Web avec l'IDE VSCode"]]
 +
 +----
 +
 +<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 ===
 +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//
 +<code javascript *.js>
 +var objet = {}; // Objet vide
 +
 +var voiture = { // Objet littéral, car voiture est définie en une seule fois
 +    marque :"Peugeot",
 +    type : "3008",
 +    couleur: "rouge",
 +    nombre: 2,
 +    "En vente " : "oui"
 +};
 +</code>
 +
 +<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. 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//
 +<code javascript>
 +var voiture = {
 +    marque :"Peugeot",
 +    type : "3008",
 +    couleur : "rouge",
 +    nombre : 2,
 +    "En vente " : true
 +};
 +// Première possibilité (même principe que les tableaux) ou deuxième possibilité (en utilisant un lien : le point)
 +voiture["marque"]; // résultat dans la console : "Peugeot"
 +voiture.marque; // résultat dans la console : "Peugeot"
 +</code>
 +
 +<note tip>Pour extraire la liste complète des clés d'un objet :  appliquer la méthode //**Object.keys(**//nomObjet//**)**//.</note>
 +
 +//Exemple//
 +<code javascript *.js>
 +Object.keys(voiture); // résultat dans la console : Array(5) ["marque", "type", "couleur", "nombre", "En vente "]
 +</code>
 +
 +=== 3. Ajout de valeurs ===
 +
 +//Exemples//
 +<code javascript *.js>
 +var voiture = {}; // Première possibilité : même principe que les tableaux
 +voiture["marque "] = "Peugeot";
 +voiture["type "]= "3008";
 +voiture["couleur"]= "rouge";
 + // ou
 +var voiture = {};
 +voiture.marque = "Peugeot"; // Deuxième possibilité : (en utilisant un lien : le point)
 +voiture.type = "3008";
 +voiture.couleur = "rouge";
 +</code>
 +
 +=== 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.
 +
 +//Exemples//
 +<code javascript *.js>
 +var voitures = [ // Tableau d'objets
 +    { marque : "Peugeot", type : "3008", couleur : "rouge"},
 +    { marque : "Renault", type : "Captur", couleur : "bleu"},
 +    { marque : "Ford", type : "C-max", couleur : "gris"}
 +];
 +// Accès aux éléments du tableau
 +voitures[0]; // résultat dans la console : Object {marque: "Peugeot", type: "3008", couleur: "rouge"}
 +voitures[1]["marque"]; // résultat dans la console : "Renault"
 +voitures[2].type; // résultat dans la console : "C-max"
 +
 +</code>
 +
 +
 +=== 5. Explorer des objets 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|}}
 +//Exemples//
 +<code javascript *.js>
 +var amis = [
 +     {prenom:"Célestin", age: 25, ville:"Bourges"},
 +     {prenom:"Nina", age: 30, ville:"Tours"}
 +];
 +
 +amis; // résultat dans la console : 
 +</code>
 +
 +=== 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. \\
 +En revanche, la boucle **for in** se révèle très intéressante !
 +
 +La boucle for in est l'équivalent de la boucle **foreach du PHP** : elle est très simple et **ne sert qu'à une seule chose : parcourir un objet**. \\
 +Le fonctionnement est quasiment le même que pour un tableau, excepté qu'ici il suffit de fournir une « **variable clé** » qui reçoit un identifiant (au lieu d'un index) et de spécifier l'objet à parcourir :
 +
 +//Exemples//
 +<code javascript *.js>
 +var posX = {
 +    x1 : 12, 
 +    x2 : 14, 
 +    x3 : 16
 +};
 +
 +for (var id in posX) { // On stocke l'identifiant dans « id » pour parcourir l'objet « posX »
 +
 +    console.log(posX[id]);
 +}
 +// résultat dans la console : 12    14   16
 +</code>
 +
 +=== 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
 +" target="_blank">MDN web docs : </a></html>