Classes et objets

Introduction aux objets en JavaScript

En JavaScript, un objet est une entité indépendante avec des propriétés et des types. C'est une collection non ordonnée de paires clé-valeur. En d'autres termes, un objet est une collection de données et/ou de fonctionnalités qui sont regroupées en un seul endroit.

Un objet peut être créé avec des accolades {} avec une liste optionnelle de propriétés. Une propriété est une paire "clé:valeur", où la clé (aussi appelée "nom de propriété") est une chaîne (ou un symbole) et la valeur peut être n'importe quoi. Nous pouvons penser à un objet comme une boîte avec des objets à l'intérieur, ou encore, comme un coffre de rangement où chaque valeur est associée à une clé unique.

Voici un exemple d'un objet en JavaScript :

const voiture = {
  marque: "Toyota",
  modele: "Corolla",
  annee: 2005
};

Dans cet exemple, voiture est un objet avec les propriétés marque, modele et annee. Chaque propriété a une valeur associée, qui peut être de n'importe quel type en JavaScript.

Les objets en JavaScript sont extrêmement utiles et sont fondamentaux dans la programmation orientée objet. Ils permettent de structurer le code de manière plus efficace et plus lisible, et de regrouper les données et les fonctionnalités logiquement liées.

Travailler avec des objets

Maintenant que nous avons une compréhension de base de ce qu'est un objet en JavaScript, nous allons voir comment nous pouvons travailler avec les objets.

Accéder aux propriétés d'un objet

Pour accéder aux propriétés d'un objet, nous pouvons utiliser la notation point (.) ou la notation crochets ([]). Voici comment nous pouvons le faire en utilisant l'objet voiture que nous avons créé précédemment :

let marque = voiture.marque; // "Toyota"
let modele = voiture["modele"]; // "Corolla"

Dans la notation crochets, la clé est une chaîne. Cela signifie que nous pouvons également utiliser des variables pour accéder aux propriétés, comme ceci :

let propriete = "annee";
let annee = voiture[propriete]; // 2005

Modifier les propriétés d'un objet

Nous pouvons modifier les propriétés d'un objet en utilisant la notation point ou la notation crochets, comme ceci :

voiture.marque = "Honda";
voiture["modele"] = "Civic";

Maintenant, voiture.marque est "Honda" et voiture.modele est "Civic".

Utilisation des méthodes d'un objet

Les méthodes sont des fonctions qui sont stockées en tant que propriétés d'un objet. Voici comment nous pouvons définir une méthode dans notre objet voiture :

voiture.afficher = function() {
  return this.marque + " " + this.modele;
}

Maintenant, nous pouvons appeler cette méthode comme ceci :

let affichage = voiture.afficher(); // "Honda Civic"

Itération sur les propriétés d'un objet

Pour itérer sur les propriétés d'un objet, nous pouvons utiliser la boucle for...in, comme ceci :

for (let propriete in voiture) {
  console.log(propriete + ": " + voiture[propriete]);
}

Ceci affichera :

marque: Honda
modele: Civic
annee: 2005
afficher: function() { ... }

Les objets et les fonctions

En JavaScript, les fonctions et les objets sont étroitement liés. En réalité, en JavaScript, une fonction est un type d'objet. Nous avons déjà vu comment nous pouvons définir des méthodes (qui sont des fonctions) dans un objet. Maintenant, nous allons voir comment nous pouvons utiliser this dans le contexte d'un objet.

Utilisation de this dans le contexte d'un objet

Le mot-clé this est utilisé dans les méthodes pour se référer à l'objet propriétaire de la méthode. Par exemple, dans notre méthode afficher, nous pouvons utiliser this pour accéder aux propriétés marque et modele de l'objet voiture :

voiture.afficher = function() {
  return this.marque + " " + this.modele;
}

Dans ce cas, this fait référence à l'objet voiture. C'est très utile, car cela signifie que notre méthode peut accéder aux propriétés de l'objet sans avoir besoin de savoir le nom de l'objet.

Les objets intégrés en JavaScript

JavaScript dispose d'une multitude d'objets intégrés qui fournissent des fonctionnalités utiles. Voici quelques exemples :

L'objet Date

L'objet Date est utilisé pour travailler avec des dates et des heures. Par exemple, nous pouvons créer un nouvel objet Date qui représente la date et l'heure actuelles :

let maintenant = new Date();
console.log(maintenant); // affiche la date et l'heure actuelles

L'objet Math

L'objet Math fournit des propriétés et des méthodes pour les constantes et les fonctions mathématiques. Par exemple, nous pouvons utiliser Math.random pour générer un nombre aléatoire entre 0 (inclus) et 1 (exclus) :

let aleatoire = Math.random();
console.log(aleatoire); // affiche un nombre aléatoire entre 0 et 1

L'objet Array

L'objet Array est utilisé pour stocker plusieurs valeurs dans une seule variable. Par exemple, nous pouvons créer un tableau de nombres comme ceci :

let nombres = [1, 2, 3, 4, 5];

JSON et JavaScript

JSON, qui signifie JavaScript Object Notation, est un format de données standard utilisé pour représenter des données structurées de manière syntaxique similaire à celle des objets JavaScript. Il est couramment utilisé pour transmettre des données sur le web et pour stocker des informations.

Introduction au format JSON

Un objet JSON ressemble beaucoup à un objet JavaScript. Il contient des paires clé-valeur, mais tout est une chaîne. Voici à quoi ressemble un objet JSON :

{
  "marque": "Honda",
  "modele": "Civic",
  "annee": "2005"
}

Utilisation de JSON pour stocker et échanger des données

JSON est souvent utilisé pour transmettre des données entre le serveur et le navigateur web dans les applications web. Les données sont stockées en tant que texte JSON sur le serveur, puis converties en un objet JavaScript une fois qu'elles atteignent le navigateur.

Conversion des objets JavaScript en JSON et vice versa

JavaScript fournit les méthodes JSON.stringify et JSON.parse pour convertir les objets en JSON et vice versa.

JSON.stringify prend un objet JavaScript et le convertit en une chaîne JSON :

let voiture = {
  marque: "Honda",
  modele: "Civic",
  annee: 2005
};

let voitureJSON = JSON.stringify(voiture);
console.log(voitureJSON); // '{"marque":"Honda","modele":"Civic","annee":2005}'

JSON.parse fait l'inverse : il prend une chaîne JSON et la convertit en un objet JavaScript :

let voitureJSON = '{"marque":"Honda","modele":"Civic","annee":2005}';
let voiture = JSON.parse(voitureJSON);
console.log(voiture.marque); // 'Honda'

Bien sûr, voici quelques exemples de structures JSON plus complexes :

Tableaux dans JSON

En JSON, vous pouvez avoir un tableau de valeurs. Par exemple :

{
  "nombres": [1, 2, 3, 4, 5]
}

Dans cet exemple, la clé "nombres" est associée à un tableau de nombres.

Objets imbriqués dans JSON

En JSON, vous pouvez également avoir des objets imbriqués, c'est-à-dire des objets à l'intérieur d'autres objets. Par exemple :

{
  "voiture": {
    "marque": "Honda",
    "modele": "Civic",
    "annee": 2005
  }
}

Dans cet exemple, la clé "voiture" est associée à un autre objet JSON.

Tableaux d'objets dans JSON

Vous pouvez également avoir un tableau d'objets en JSON. Par exemple :

{
  "voitures": [
    {
      "marque": "Honda",
      "modele": "Civic",
      "annee": 2005
    },
    {
      "marque": "Toyota",
      "modele": "Corolla",
      "annee": 2008
    }
  ]
}

Dans cet exemple, la clé "voitures" est associée à un tableau contenant deux objets JSON.

Valeurs mixtes dans JSON

En JSON, les valeurs peuvent être de différents types : nombres, chaînes, booléens, objets, tableaux, ou null. Par exemple :

{
  "marque": "Honda",
  "modele": "Civic",
  "annee": 2005,
  "options": {
    "climatisation": true,
    "gps": false
  },
  "proprietaires": ["Jean", "Marie"],
  "vendue": null
}

Dans cet exemple, nous avons des chaînes ("marque", "modele"), un nombre ("annee"), un objet ("options"), un tableau ("proprietaires"), et null ("vendue").

Ces exemples montrent la flexibilité et la puissance du format JSON pour représenter des structures de données complexes.

Exercices de lecture

Exercice 1

Considérez l'objet JavaScript suivant :

let personne = {
  nom: "Dupont",
  prenom: "Jean",
  age: 25,
  adresse: {
    rue: "5 rue de la Paix",
    ville: "Paris",
    pays: "France"
  },
  hobbies: ["cinéma", "lecture", "sport"]
};

1. Comment accéderiez-vous au prénom de la personne ?
2. Comment accéderiez-vous à la ville de l'adresse de la personne ?
3. Comment accéderiez-vous au premier hobby de la personne ?

Exercice 2

Considérez la chaîne JSON suivante :

let personneJSON = '{"nom":"Dupont","prenom":"Jean","age":25,"adresse":{"rue":"5 rue de la Paix","ville":"Paris","pays":"France"},"hobbies":["cinéma","lecture","sport"]}';

1. Comment convertiriez-vous cette chaîne JSON en un objet JavaScript ?
2. Une fois l'objet JavaScript créé, comment accéderiez-vous au prénom de la personne ?
3. Comment accéderiez-vous à la ville de l'adresse de la personne ?
4. Comment accéderiez-vous au premier hobby de la personne ?

Exercice 3

Considérez l'objet JavaScript suivant :

let voiture = {
  marque: "Honda",
  modele: "Civic",
  annee: 2005,
  afficher: function() {
    return this.marque + " " + this.modele;
  }
};

1. Comment appelleriez-vous la méthode afficher de l'objet voiture ?
2. Qu'est-ce que la méthode afficher retourne ?

Exercice 4

Considérez l'objet JavaScript suivant :

let equipe = {
  nom: "Les bleus",
  sport: "Football",
  membres: [
    { nom: "Dupont", prenom: "Jean", numero: 10 },
    { nom: "Durand", prenom: "Paul", numero: 20 },
    { nom: "Martin", prenom: "Jacques", numero: 30 }
  ]
};

1. Comment accéderiez-vous au sport de l'équipe ?
2. Comment accéderiez-vous au prénom du deuxième membre de l'équipe ?
3. Comment accéderiez-vous au numéro du dernier membre de l'équipe ?

Exercice 5

Considérez l'objet JavaScript suivant :

let magasin = {
  nom: "Supermarché du coin",
  produits: [
    { nom: "Pommes", prix: 1.5, enStock: true },
    { nom: "Oranges", prix: 2.0, enStock: false },
    { nom: "Bananes", prix: 1.2, enStock: true }
  ],
  estOuvert: function(jour) {
    let joursOuverture = ["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"];
    return joursOuverture.includes(jour);
  }
};

1. Comment accéderiez-vous au prix des oranges ?
2. Comment vérifieriez-vous si les bananes sont en stock ?
3. Comment utiliseriez-vous la méthode estOuvert pour vérifier si le magasin est ouvert le dimanche ?

Exercices

Exercice 1 : Création d'un objet

Objectif : L'objectif de cet exercice est de vous familiariser avec la création d'objets en JavaScript.

Énoncé :

1. Créez un objet JavaScript nommé livre.

2. Ajoutez les propriétés suivantes à l'objet livre :

   • titre : Le titre du livre. Vous pouvez choisir le titre que vous voulez.
   • auteur : Le nom de l'auteur du livre. Vous pouvez choisir le nom que vous voulez.
   • nombrePages : Le nombre de pages du livre. Vous pouvez choisir le nombre que vous voulez.

3. Ajoutez une méthode à l'objet livre nommée description. Cette méthode doit retourner une chaîne de caractères qui décrit le livre, en utilisant les propriétés titre, auteur et nombrePages. Par exemple, la méthode pourrait retourner une chaîne comme "Le livre 'titre' a été écrit par 'auteur' et contient 'nombrePages' pages."

Exercice 2 : Modification d'un objet

Objectif : L'objectif de cet exercice est de vous familiariser avec la modification d'objets en JavaScript.

Énoncé :

1. Prenez l'objet livre que vous avez créé dans l'exercice précédent.
2. Modifiez la propriété nombrePages de l'objet livre pour qu'elle ait une nouvelle valeur.
3. Ajoutez une nouvelle propriété à l'objet livre nommée lu. Cette propriété doit être un booléen qui représente si vous avez lu ou non le livre.

Exercice 3 : Travailler avec des objets et des tableaux

Objectif : L'objectif de cet exercice est de vous familiariser avec l'utilisation des objets et des tableaux en JavaScript.

Énoncé :

1. Créez un tableau d'objets JavaScript, où chaque objet représente une voiture. Chaque objet doit avoir des propriétés pour la marque, le modèle et l'année.
2. Écrivez une fonction qui prend le tableau de voitures et un argument pour l'année. La fonction doit renvoyer un nouveau tableau contenant seulement les voitures de cette année.

Exercice 4 : Conversion d'objets en JSON

Objectif : L'objectif de cet exercice est de vous familiariser avec la conversion entre les objets JavaScript et JSON.

Énoncé :

1. Prenez l'objet livre de l'exercice 1 et convertissez-le en une chaîne JSON.
2. Prenez la chaîne JSON que vous avez créée et convertissez-la en un nouvel objet JavaScript.

Exercice 5 : Création d'un objet avec des méthodes

Objectif : L'objectif de cet exercice est de vous familiariser avec la création d'objets qui ont des méthodes en JavaScript.

Énoncé :

1. Créez un objet JavaScript qui représente un rectangle. L'objet doit avoir des propriétés pour la largeur et la hauteur.
2. Ajoutez des méthodes à l'objet pour calculer l'aire et le périmètre du rectangle.