Objets JavaScript

Introduction

Bienvenue dans le laboratoire sur les objets JavaScript. Les objets sont des éléments fondamentaux en JavaScript, utilisés pour stocker des collections de données connexes et des entités plus complexes. Ils se composent de paires clé-valeur, où les clés sont des chaînes de caractères (ou des Symboles) et les valeurs peuvent être de n'importe quel type de données, y compris d'autres objets ou fonctions.

Dans ce laboratoire, vous apprendrez à :

• Créer un objet JavaScript en utilisant la syntaxe des littéraux d'objet (object literal syntax).
• Ajouter des propriétés (paires clé-valeur) à un objet.
• Accéder et mettre à jour les valeurs des propriétés d'un objet.
• Ajouter de nouvelles propriétés à un objet existant.

Vous effectuerez tout votre travail dans le fichier script.js. Pour voir la sortie de votre code, vous devrez ouvrir la console du développeur du navigateur. Vous pouvez le faire en naviguant vers l'onglet Web 8080 et en ouvrant les outils de développement (généralement en faisant un clic droit et en sélectionnant "Inspecter", puis en cliquant sur l'onglet "Console").

Commençons !

Créer un littéral d'objet avec des accolades

Dans cette étape, vous allez créer votre premier objet JavaScript. La manière la plus simple de créer un objet est d'utiliser la syntaxe des littéraux d'objet (object literal syntax), qui consiste en une paire d'accolades {}.

Tout d'abord, localisez le fichier script.js dans l'explorateur de fichiers sur le côté gauche de votre WebIDE. Cliquez dessus pour l'ouvrir dans l'éditeur.

Maintenant, ajoutez le code suivant à script.js pour déclarer une variable constante nommée car et lui assigner un objet vide. Nous utiliserons également console.log() pour imprimer l'objet dans la console afin de vérifier sa création.

const car = {};

console.log(car);

Après avoir ajouté le code, enregistrez le fichier. Pour voir le résultat, cliquez sur l'onglet Web 8080. Ouvrez la console du développeur (Clic droit -> Inspecter -> Console). Vous devriez voir un objet vide {} imprimé dans la console.

Ajouter des paires clé-valeur à l'objet

Un objet vide n'est pas très utile. Les objets sont destinés à contenir des données, que nous ajoutons sous forme de propriétés. Une propriété est une paire clé-valeur. La clé est le nom de la propriété (une chaîne de caractères), et la valeur est la donnée associée à cette clé.

Dans cette étape, vous allez ajouter des propriétés à l'objet car directement entre les accolades lors de sa création. Définissons quelques propriétés pour notre voiture : sa marque, son modèle et son année.

Modifiez le code dans script.js pour qu'il ressemble à ceci :

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

Ici, make, model et year sont les clés, tandis que 'Toyota', 'Camry' et 2021 sont leurs valeurs correspondantes. Notez que les valeurs de type chaîne de caractères sont entourées d'apostrophes.

Enregistrez le fichier et vérifiez à nouveau la console du développeur dans l'onglet Web 8080. Vous verrez maintenant l'objet imprimé avec ses propriétés.

Accéder à une propriété avec la notation par points

Une fois que vous avez un objet avec des propriétés, vous aurez souvent besoin de récupérer la valeur d'une propriété spécifique. La manière la plus courante de le faire est d'utiliser la notation par points (.). La syntaxe est nomObjet.nomPropriété.

Dans cette étape, vous allez accéder au model de l'objet car et l'imprimer dans la console.

Ajoutez la ligne suivante à la fin de votre fichier script.js. Votre code existant doit rester.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

// Accéder et afficher la propriété model
console.log(car.model);

Enregistrez le fichier et actualisez l'onglet Web 8080. Dans la console du développeur, vous verrez maintenant deux lignes de sortie : l'objet car complet, suivi de la chaîne de caractères Camry.

Mettre à jour l'affectation de la valeur d'une propriété

Les données d'un objet ne sont pas figées. Vous pouvez facilement modifier la valeur d'une propriété existante en utilisant l'opérateur d'affectation (=). Cela se fait de la même manière que vous affecteriez une valeur à une variable ordinaire.

Dans cette étape, mettons à jour l'year de notre car de 2021 à 2022.

Ajoutez les lignes suivantes à la fin de votre fichier script.js. Nous allons mettre à jour la propriété, puis afficher à nouveau l'objet entier pour voir le changement.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

// Mettre à jour la propriété year
car.year = 2022;

console.log(car);

Pour plus de clarté, vous pouvez supprimer les instructions console.log précédentes, mais ce n'est pas obligatoire. Après avoir enregistré le fichier, vérifiez la console dans l'onglet Web 8080. La sortie affichera maintenant l'objet car avec year mis à jour à 2022.

Ajouter une nouvelle propriété à un objet existant

Les objets en JavaScript sont dynamiques, ce qui signifie que vous pouvez leur ajouter de nouvelles propriétés à tout moment après leur création. La syntaxe est la même que pour la mise à jour d'une propriété : utilisez la notation par points avec le nom de la nouvelle propriété et affectez-lui une valeur.

Dans cette dernière étape, vous allez ajouter une nouvelle propriété color à l'objet car.

Ajoutez les lignes suivantes à la fin de votre fichier script.js. Cela ajoutera la nouvelle propriété, puis affichera l'objet pour confirmer l'ajout.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

car.year = 2022;

// Ajouter une nouvelle propriété color
car.color = "blue";

console.log(car);

Enregistrez le fichier et vérifiez la console du développeur une dernière fois. L'objet car sera maintenant affiché avec quatre propriétés : make, model, year, et le color nouvellement ajouté.

Résumé

Félicitations pour avoir terminé le laboratoire sur les objets JavaScript ! Vous avez maîtrisé les opérations essentielles pour travailler avec l'une des structures de données les plus importantes en JavaScript.

Dans ce laboratoire, vous avez pratiqué :

• La création d'un objet en utilisant la syntaxe littérale ({}).
• Le peuplement d'un objet avec des paires clé-valeur initiales.
• L'accès aux valeurs des propriétés en utilisant la notation par points (object.property).
• La mise à jour de la valeur d'une propriété existante.
• L'ajout d'une nouvelle propriété à un objet dynamique.

Comprendre les objets est crucial pour tout développeur JavaScript, car ils sont utilisés partout, du simple stockage de données à l'architecture d'applications complexes. Continuez à pratiquer ces concepts pour bâtir une base solide en programmation JavaScript.