Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédenteDernière révisionLes deux révisions suivantes | ||
web:javascript:fondamentaux:objets [2021/08/11 10:41] – phil | web:javascript:fondamentaux:objets [2021/08/11 10:47] – phil | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | [[|{{ : | + | [[web: |
- | ===== JavaScript - Programmation objet et JSON ===== | + | ==== JavaScript - Programmation objet et JSON ==== |
- | [Mise à jour le 2/5/2019] | + | [Mise à jour le 11/8/2021] |
* **Sources** et compléments sur **MDN Web Docs** | * **Sources** et compléments sur **MDN Web Docs** | ||
Ligne 14: | Ligne 14: | ||
---- | ---- | ||
- | Les objets sont des ensembles de **paires clé-valeur**. La clé est une chaîne de caractères permettant d' | + | < |
- | ==== 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 " | Pour créer un objet, il faut insérer des accolades (**{ }**). La **clé** se place avant les " | ||
// | // | ||
- | <code javascript> | + | <code javascript |
var objet = {}; // Objet vide | var objet = {}; // Objet vide | ||
Ligne 32: | Ligne 32: | ||
</ | </ | ||
- | > __Remarque__ : les clés étant obligatoirement des chaînes de caractères, | + | <note tip>Les clés étant obligatoirement des chaînes de caractères, |
- | ==== 2. Accéder aux valeurs | + | |
- | Il suffit de placer la clé entre des guillemets et dans des crochets ou de la **lier** avec un **point**. | + | === 2. Valeurs |
+ | 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**. | ||
// | // | ||
Ligne 50: | Ligne 51: | ||
</ | </ | ||
- | > __Remarque__ : pour extraire la liste complète des clés d'un objet : appliquer la méthode // | + | <note tip>Pour extraire la liste complète des clés d'un objet : appliquer la méthode // |
//Exemple// | //Exemple// | ||
- | <code javascript> | + | <code javascript |
Object.keys(voiture); | Object.keys(voiture); | ||
</ | </ | ||
- | + | === 3. Ajouter des valeurs dans un objet === | |
- | + | ||
- | ==== 3. Ajouter des valeurs dans un objet ==== | + | |
// | // | ||
- | <code javascript> | + | <code javascript |
var voiture = {}; // Première possibilité : même principe que les tableaux | var voiture = {}; // Première possibilité : même principe que les tableaux | ||
voiture[" | voiture[" | ||
Ligne 72: | Ligne 71: | ||
voiture.type = " | voiture.type = " | ||
voiture.couleur = " | voiture.couleur = " | ||
- | |||
</ | </ | ||
- | ==== 4. Combiner des tableaux et des objets | + | === 4. Combiner des tableaux et des objets === |
Il est possible d' | Il est possible d' | ||
// | // | ||
- | <code javascript> | + | <code javascript |
var voitures = [ // Tableau d' | var voitures = [ // Tableau d' | ||
{ marque : " | { marque : " | ||
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. | ||
{{ : | {{ : | ||
// | // | ||
- | <code javascript> | + | <code javascript |
var amis = [ | var amis = [ | ||
| | ||
Ligne 107: | Ligne 105: | ||
</ | </ | ||
- | ==== 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' | Il n'est pas possible de parcourir un objet littéral avec une boucle **for**. Normal, puisqu' | ||
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: | ||
// | // | ||
- | <code javascript> | + | <code javascript |
var posX = { | var posX = { | ||
x1 : 12, | x1 : 12, | ||
Ligne 129: | Ligne 127: | ||
</ | </ | ||
- | ==== 7. Pour aller plus loin... | + | === 7. Pour aller plus loin... === |
< | < | ||
" target=" | " target=" | ||