• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 16/10/2020

Définissez des objets et leurs attributs avec des classes

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vous avez probablement entendu auparavant le terme objet dans un contexte de programmation. Mais qu'est-ce que cela signifie vraiment ? Commençons par nous intéresser à quelques objets du monde réel, comme les stylos, les livres, les smartphones, les ordinateurs, etc.

Un stylo est un type d'objet
Un stylo est un type d'objet

Vous reconnaissez tous les stylos — à piston, à bille, feutre, gel, etc. — comme faisant partie du type d'objet : stylos. Vous pouvez écrire avec, ils utilisent de l'encre et peuvent se tenir à une main.

C'est la même chose pour les livres : ils ont une couverture, un certain nombre de pages, un titre, et un ou plusieurs auteurs.

Vous remarquez des points communs entre différents objets et vous notez ces informations pour créer une représentation mentale d'une catégorie d'objets.

Cette liste mentale d'attributs sert de modèle pour cet objet. En programmation, on l'appelle une classe. Pour créer une classe, vous pouvez choisir le nom de votre choix. C'est pour cela qu'on l'appelle un type nommé. Vous le verrez, les classes permettent aussi de regrouper beaucoup de détails ; c'est pourquoi elles s'appellent aussi des types complexes.

Avant de plonger dans les classes, observons un type JavaScript complexe : l'objet.

Découvrez les objets

Les objets JavaScript sont écrits en JSON (JavaScript Object Notation). Ce sont des séries de paires clés/valeurs séparées par des virgules, entre des accolades. Les objets peuvent être enregistrés dans une variable :

let myBook = {
title: 'The Story of Tau',
author: 'Will Alexander',
numberOfPages: 250,
isAvailable: true
};

Chaque clé est une chaîne (title, author, numberOfPages...), et les valeurs associées peuvent avoir tout type de données (nombre, chaîne, etc).

Construire des objets présente un avantage essentiel : cela permet de regrouper les attributs d'une chose unique à un même emplacement, que ce soit un livre, un profil d'utilisateur ou la configuration d'une application, par exemple.

Pratiquez : créez un objet

Dans un exercice précédent, vous avez créé trois variables pour décrire l'épisode d'une série. On dirait la situation parfaite pour créer un seul objet episode : créons-le maintenant !

Rendez-vous sur cet exercice CodePen.

  1. Créez un objet (Object, en anglais) et stockez-le dans une variable appelée  episode  . Utilisez bien des accolades  {}  et mettez les trois attributs suivants :

    • title : le titre de l'épisode

    • duration  : la durée de l'épisode

    • hasBeenWatched  : si l'épisode a été visionné ou non

  2. Associez des valeurs appropriées à chaque attribut.

N'oubliez pas d'utiliser des paires clé: valeur séparées par des virgules. Votre code ira entre les commentaires "===" sur l'exercice.

Si vous n'y arrivez pas du premier coup, ne vous découragez pas, poursuivez vos efforts ! L'apprentissage de la programmation se fait en pratiquant et en apprenant de ses erreurs. 😎

Solution :

Voici un nouveau CodePen avec une solution à l’exercice.

Accédez aux données d'un objet

Maintenant que vous savez comment créer un objet en JavaScript, voyons comment accéder aux données dans un objet avec la notation pointée (dot notation), expliquée ci-dessous.

Une fois qu'un objet est enregistré dans une variable, vous pouvez accéder à ses données comme dans l'exemple ci-dessous.

let myBook = {
title: "L'Histoire de Tao",
author: "Will Alexander",
numberOfPages: 250,
isAvailable: true
};
let bookTitle = myBook.title; // "L'Histoire de Tao"
let bookPages = myBook.numberOfPages // 250

Pour cela, utilisez le nom de la variable qui contient l'objet, un point (  .  ), puis le nom de la clé dont vous souhaitez récupérer la valeur.

Pratiquez : récupérez des valeurs depuis un object

Voici une occasion de mettre en pratique la notation dot. Rendez-vous sur cet éditeur CodePen.

Regardons l'exercice précédent depuis l'autre côté. Quand vous avez construit l'Object  episode  , le code de votre collègue en a extrait les données pour les afficher dans son composant. Maintenant, c'est à vous d'extraire les informations pour les fournir au composant avec la notation  .  ou "dot".

  1. Créez les trois variables suivantes :

    • episodeTitle  : le titre de l'épisode (string)

    • episodeDuration  : la durée de l'épisode (number)

    • episodeHasBeenWatched  : si l'épisode a été regardé ou non (boolean)

  2. Assignez-y les valeurs correspondantes de l'objet episode en utilisant la notation "dot".

Solution :

Voici un nouveau CodePen avec une solution à l’exercice.

Manipulez des classes

La construction d'un objet à la main, par la notation à accolades vue précédemment, convient bien à des objets simples et uniques. Mais vous aurez souvent besoin de beaucoup d'objets du même type. C'est là que les classes sont utiles.

La classe est comme un plan
La classe est comme un plan

Comme expliqué précédemment, une classe est un modèle pour un objet dans le code. Elle permet de construire plusieurs objets du même type (appelés instances de la même classe) plus facilement, rapidement et en toute fiabilité.

Voyons comment construire une classe dans le code.

Pour créer une classe dans JavaScript, utilisez le mot clé  class, suivi par un nom. Encadrez ensuite le code de la classe entre accolades :

class Book {
}

Pour cette classe, nous souhaitons que chaque  Book  ait un titre, un auteur et un nombre de pages. Pour cela, vous utilisez ce qu'on appelle un constructor.

class Book {
constructor(title, author, pages) {
}
}

Il y a un ensemble d'instructions à suivre à l'intérieur du  constructor  pour créer une instance de la classe  Book. Pour attribuer le titre, l'auteur et le nombre de pages reçus à cette instance, utilisez le mot clé  this  et la notation dot.

class Book {
constructor(title, author, pages) {
this.title = title;
this.author = author;
this.pages = pages;
}
}

Ici, le mot clé  this  fait référence à la nouvelle instance. Donc, il utilise la notation dot pour attribuer les valeurs reçues aux clés correspondantes.

Maintenant que la classe est terminée, vous pouvez créer des instances par le mot clé  new  :

let myBook = new Book("L'Histoire de Tao", "Will Alexander", 250);

Cette ligne crée l'objet suivant :

{
title: "L'Histoire de Tao",
author: "Will Alexander",
pages: 250
}

Avec une classe  Book, vous pouvez créer facilement et rapidement de nouveaux objets  Book.

Pratiquez : les classes

La meilleure façon d'apprendre les classes est d'en créer une vous-même. Rendez-vous sur cet éditeur CodePen.

Maintenant que vous savez créer des classes, il est temps d'en profiter pour notre composant épisode. Cette fois-ci, il y a trois composants épisodes, donc la manière logique de procéder serait de créer une classe  Episode  , et puis en créer trois instances — une pour chaque épisode.

  1. Créez une classe  Episode  avec le mot-clé class.

  2. Créez un constructor pour votre classe Episode qui devra accepter trois arguments :

  • title  : le titre de l'épisode (string)

  • duration  : la durée de l'épisode (number)

  • hasBeenWatched  : si l'épisode a été regardé ou non (boolean)

Avec le mot-clé  this  , assurez-vous que le constructor assigne correctement les arguments reçus aux champs correspondants de chaque nouvelle instance. Avec le mot-clé  new  , créez trois instances de la classe  Episode  et stockez-les dans les trois variables :

  • firstEpisode

  • secondEpisode

  • thirdEpisode

N'oubliez pas de passer des arguments appropriés à chaque instance.

Solution :

Vous avez terminé ? Voici un nouveau CodePen avec une solution à l’exercice. 

En résumé

Vous avez fait beaucoup de chemin dans ce chapitre ! Vous avez découvert :

  • les objets avec les paires clés/valeurs en notation JSON. Ils permettent d'enregistrer plusieurs éléments de données associés dans une même variable ;

  • la notation pointée (dot) qui donne accès aux valeurs d'un objet et la possibilité de les modifier ;

  • les classes, et comment l'utilisation de classes peut vous permettre de créer des objets plus facilement et de façon plus lisible.

Nous allons maintenant voir comment regrouper plusieurs variables avec les collections.

Exemple de certificat de réussite
Exemple de certificat de réussite