Mis à jour le 16/01/2018
  • 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Créez vos premiers objets

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

Peut-être avez-vous déjà entendu parler de "programmation orientée objet", de "classe" ou encore "d'héritage". Ce chapitre et le suivant vont vous expliquer ce qui se cache derrière tous ces noms mystérieux.

Introduction

C'est quoi, un objet ?

Prenons un exemple très concret : pensez à un stylo, ou regardez celui qui est peut-être devant vous. Etudions ce stylo : quelles sont ses caractéristiques ? Sa couleur d'écriture (bleu, noir, rouge...), son type (à encre, à bille, à mine...), son fabricant... Sans oublier le plus important : il permet d'écrire ! Notre stylo possède un certain nombre de propriétés qui le caractérisent.

Revenons à nos programmes : qu'est-ce qu'un objet informatique ? Tout comme ce stylo, un objet informatique est une entité qui possède des propriétés. Chaque propriété définit une caractéristique de l'objet. Une propriété peut être une information associée à l'objet (exemple : la couleur du stylo) ou une action (exemple : la capacité du stylo à écrire).

Quel rapport avec la programmation ?

La programmation orientée objet (en abrégé POO) est une manière d'écrire des programmes en utilisant des objets. Quand on utilise la POO, on cherche à représenter le domaine étudié sous la forme d'objets informatiques. Chaque objet informatique modélisera un élément de ce domaine.

La POO modifie la manière dont un programme est écrit et organisé. Jusqu'ici, vous avez appris à créer des programmes plutôt basés sur des fonctions : c'est ce que l'on appelle parfois la programmation procédurale. Vous allez découvrir comment les écrire en utilisant des objets.

JavaScript et les objets

Comme de nombreux autres langages, JavaScript permet de programmer en utilisant des objets : on dit que ce langage est orienté objet. Il vous fournit un certain nombre d'objets prédéfinis tout en vous permettant de créer les vôtres.

Création d'un objet littéral

Voici la représentation JavaScript d'un stylo à bille Bic qui écrit en bleu.

var stylo = {
    type: "bille",
    couleur: "bleu",
    marque: "Bic"
};

En JavaScript, on peut créer un objet en définissant ses propriétés à l'intérieur d'une paire d'accolades :  { ... };. Cette manière de créer des objets est appelée syntaxe littérale.

Le code ci-dessus définit une variable nommée stylo dont la valeur est un objet : on dit aussi que stylo est un objet. Cet objet possède trois propriétés : type, couleur et marque. Chaque propriété possède un nom et une valeur, et est séparée des autres par une virgule , (sauf la dernière). Une propriété peut être vue comme une sorte de variable attachée à un objet. 

Création d'un objet à l'aide d'un constructeur

Une autre possibilité pour créer des objets JavaScript consiste à utiliser un constructeur. Un constructeur est une fonction particulière dont le rôle est d'initialiser un nouvel objet. Son nom commence souvent par une lettre majuscule, mais ce n'est pas une obligation.‌

La création de l'objet à partir du constructeur est appelée l'instanciation. Elle s'effectue à l'aide du mot-clé new.

// Constructeur MonObjet
function MonObjet() {
    // Initialisation de l'objet
    // ...
}
// Instanciation d'un objet à partir du constructeur
var monObj = new MonObjet();

Utilisation d'un objet

Une fois l'objet créé, on peut accéder à la valeur d'une de ses propriétés en utilisant la notation pointée nomObjet.nomPropriete : on utilise un point (.) entre l'objet et la propriété dont on veut obtenir la valeur.

Voici comment afficher les propriétés de notre stylo.

console.log(stylo.type); // Affiche "bille"
console.log(stylo.couleur); // Affiche "bleu"
console.log(stylo.marque); // Affiche "Bic"

Tapez les deux exemples précédents, ainsi que tous les suivants, dans le fichier cours.js situé dans le répertoire chapitre_7/js (à créer). Créez ensuite le fichier cours.html associé dans chapitre_7/html, puis ouvrez ce fichier dans Firefox. Vous obtenez le résultat suivant.

L'accès à une propriété d'un objet est une expression qui produit une valeur. On peut inclure ces accès dans d'autres expressions plus complexes. Voici par exemple comment afficher les caractéristiques du stylo en une seule ligne.

var stylo = {
    type: "bille",
    couleur: "bleu",
    marque: "Bic"
};

console.log("Mon stylo à " + stylo.type + " " + stylo.marque + " écrit en " + stylo.couleur);

Modification d'un objet

Une fois un objet créé, on peut modifier les valeurs de ses propriétés avec la syntaxe monObjet.maPropriete = nouvelleValeur.

var stylo = {
    type: "bille",
    couleur: "bleu",
    marque: "Bic"
};

console.log("Mon stylo à " + stylo.type + " " + stylo.marque + " écrit en " + stylo.couleur);

stylo.couleur = "rouge"; // Modifie la couleur de l'encre du stylo

console.log("Mon stylo à " + stylo.type + " " + stylo.marque + " écrit en " + stylo.couleur);

JavaScript offre même la possibilité d'ajouter dynamiquement de nouvelles propriétés à un objet déjà créé.

var stylo = {
    type: "bille",
    couleur: "bleu",
    marque: "Bic"
};

console.log("Mon stylo à " + stylo.type + " " + stylo.marque + " écrit en " + stylo.couleur);

stylo.prix = 2.5; // Ajout de la propriété prix à l'objet stylo

console.log("Il coûte " + stylo.prix + " euros");

Exemple : un mini-jeu de rôle

La plupart des cours sur la programmation orientée objet utilisent des exemples qui modélisent des animaux, des voitures ou encore des comptes bancaires. Essayons plutôt quelque chose de plus amusant : programmer un mini-jeu de rôle en utilisant des objets.

Dans un jeu de rôle, chaque personnage est défini par de nombreuses caractéristiques (qui diffèrent suivant le jeu). Voici par exemple l'écran d'information sur un personnage d'un célèbre jeu en ligne multijoueurs. 

Non, ce n'est pas mon perso. Et d'abord, je ne connais même pas ce jeu ;)
Non, ce n'est pas mon perso. Et d'abord, je ne connais même pas ce jeu ;)

Plus modestement, nous allons modéliser un personnage de notre jeu en le dotant de trois caractéristiques :

  • son nom,

  • sa santé (nombre de points de vie),

  • sa force.

Création d'un personnage

Je vous présente Aurora, le premier personnage de notre jeu :

var perso = {
    nom: "Aurora",
    sante: 150,
    force: 25
};

Aurora est représentée par un objet perso ayant trois propriétés : nom, sante et force. Elles ont chacune une valeur et, ensemble, définissent l'état de notre personnage à un instant donné. 

Aurora s'apprête à vivre une longue série d'aventures, dont certaines pourront modifier ses caractéristiques, comme dans l'exemple ci-dessous.

var perso = {
    nom: "Aurora",
    sante: 150,
    force: 25
};

console.log(perso.nom + " a " + perso.sante + " points de vie et " + perso.force + " en force");

// Aurora est blessée par une flèche
perso.sante = perso.sante - 20;

// Aurora trouve un bracelet de force
perso.force = perso.force + 10;

console.log(perso.nom + " a " + perso.sante + " points de vie et " + perso.force + " en force");

Créez ce mini-jeu de rôle dans le fichier chapitre_7/js/jdr.js et testez-le avec le fichier chapitre_7/html/jdr.html associé.  Vous obtenez le résultat suivant.

La notion de méthode

Dans notre programme, on remarque que l'instruction console.log(...) qui affiche les caractéristiques du personnage est dupliquée, ce qui est une mauvaise chose. Une première solution, étudiée dans un précédent chapitre, consisterait à créer une fonction pour décrire un personnage. 

Ajout d'une méthode à un objet

Observez l'exemple ci-dessous sans le recopier dans votre programme.

// Renvoie la description d'un personnage
function decrire(personnage) {
    var description = personnage.nom + " a " + personnage.sante + " points de vie et " + personnage.force + " en force";
    return description;
}

console.log(decrire(perso));

La fonction decrire() n'utilise que les propriétés d'un personnage, qui est passé en paramètre. Plutôt que de la définir de manière externe, nous pouvons l'ajouter à la définition de notre objet sous la forme d'une nouvelle propriété :

var perso = {
    nom: "Aurora",
    sante: 150,
    force: 25,

    // Renvoie la description du personnage
    decrire: function () {
        var description = this.nom + " a " + this.sante + " points de vie et " +
            this.force + " en force";
        return description;
    }
};

console.log(perso.decrire());

// Aurora est blessée par une flèche
perso.sante = perso.sante - 20;

// Aurora trouve un bracelet de force
perso.force = perso.force + 10;

console.log(perso.decrire());

L'objet perso possède une nouvelle propriété nommée decrire. La valeur de cette propriété est une fonction qui renvoie la description du personnage sous forme textuelle.

Une propriété dont la valeur est une fonction est appelée une méthode. Une méthode permet de définir une action pour un objet. On dit également qu'une méthode ajoute à cet objet un comportement.

Appel d'une méthode sur un objet

Vérifions d'abord le bon fonctionnement de notre nouveau programme. Le résultat obtenu est identique au précédent.

Revenons au code source du programme, et observons en particulier cette ligne.

console.log(perso.decrire());

Pour obtenir la description d'un personnage, on utilise maintenant l'expression perso.decrire() plutôt que decrire(perso). Cette différence est essentielle :

  • decrire(perso) appelle la fonction decrire() en lui passant l'objet perso en paramètre. Dans ce cas, la fonction est externe à l'objet.

  •  perso.decrire() appelle la fonction decrire() sur l'objet perso. Dans ce cas, la fonction fait partie de la définition de l'objet : il s'agit d'une méthode.

Pour appeler une méthode nomMethode sur un objet nomObjet, on utilise la syntaxe nomObjet.nomMethode().

Le mot-clé this

Observez maintenant le corps de la méthode decrire() de notre objet perso. Un nouveau mot-clé y apparaît : this. Il est défini automatiquement par JavaScript à l'intérieur d'une méthode et représente l'objet sur lequel la méthode a été appelée.

La méthode decrire() ne prend plus de personnage en paramètre : elle utilise this pour accéder aux propriétés de l'objet sur lequel elle a été appelée.

Les objets prédéfinis de JavaScript

Le langage JavaScript met à la disposition des programmeurs un certain nombre d'objets standards qui peuvent rendre de multiples services. Nous en avons déjà utilisé quelques-uns :

  • L'objet console donne accès à la console du navigateur. Par exemple, on peut écrire un message dans la console avec console.log().

  • L'objet Math rassemble des fonctionnalités mathématiques. Par exemple, Math.random() renvoie un nombre aléatoire entre 0 et 1.

Bilan

Voici ce que vous devez retenir de ce premier chapitre consacré aux objets :

  • La programmation orientée objet consiste à écrire des programmes en utilisant des objets qui représentent les éléments du domaine étudié.

  • En JavaScript, un objet est constitué d'un ensemble de propriétés.

  • Une propriété est une association entre un nom et une valeur.

  • Lorsque la valeur d'une propriété est une fonction, on dit que cette propriété est une méthode de l'objet.

Voici la syntaxe générale de création et d'utilisation d'un objet.

var monObjet = {
    propriete1: valeur1,
    propriete2: valeur2,
    // ... ,
    methode1: function(/* ... */) {
        // ...
    },
    methode2: function(/* ... */) {
        // ...
    },
    // ...
};

console.log(monObjet.propriete1); // Affiche la propriété propriete1 de monObjet

console.log(monObjet.methode1(...)); // Affiche le résultat de l'appel de la méthode methode1 de monObjet

Dans le prochain chapitre, nous enrichirons notre petit jeu de rôle et nous en profiterons pour découvrir d'autres possibilités offertes par les objets en JavaScript.

A vous de jouer !

Les exercices ci-dessous vont vous permettre d'écrire vos premiers programmes à base d'objets. Créez-les dans le répertoire chapitre_7

Ajout de l'expérience du personnage (résultat à obtenir)

Complétez le programme jdr.js issu du cours pour ajouter au personnage une propriété nommée xp représentant son expérience. Sa valeur initiale est de 0. L'expérience doit apparaître dans la description du personnage.

// TODO : ajoutez ici la définition de l'objet perso

console.log(perso.decrire());

// Aurora est blessée par une flèche
perso.sante = perso.sante - 20;

// Aurora trouve un bracelet de force
perso.force = perso.force + 10;

// Aurora apprend une nouvelle compétence
perso.xp = perso.xp + 15;

console.log(perso.decrire());

Modélisation d'un chien (résultat à obtenir)

Complétez le programme chien.js ci-dessous pour ajouter la définition de l'objet chien.

// TODO : ajoutez ici la définition de l'objet chien

console.log(chien.nom + " est un " + chien.race + " mesurant " + chien.taille + " cm");
console.log("Tiens, un chat ! " + chien.nom + " aboie : " + chien.aboyer());

Le résultat d'exécution à obtenir est le suivant.

Modélisation d'un cercle (résultat à obtenir)

Complétez le programme cercle.js ci-dessous pour ajouter la définition de l'objet cercle. La valeur de son rayon est saisie par l'utilisateur.

var r = Number(prompt("Entrez le rayon d'un cercle :"));

// TODO : ajoutez ici la définition de l'objet cercle

console.log("Son périmètre vaut " + cercle.perimetre());
console.log("Son aire vaut " + cercle.aire());

Voici le résultat à obtenir pour un cercle de rayon 3,6.

Modélisation d'un compte bancaire (résultat à obtenir)

Ecrivez un programme compte.js qui crée un objet compte ayant les propriétés suivantes :

  • Une propriété titulaire valant "Alex".

  • Une propriété solde valant initialement 0.

  • Une méthode crediter() ajoutant le montant passé en paramètre au solde du compte.

  • Une méthode debiter() retirant le montant passé en paramètre du solde du compte.

  • Une méthode decrire() renvoyant la description du compte.

Utilisez cet objet pour afficher sa description, le créditer puis le débiter de montants saisis successivement par l'utilisateur, puis afficher de nouveau sa description.

Voici le résultat à obtenir pour un crédit de 200 puis un débit de 150.

Solutions des exercices

Le code source des solutions est consultable en ligne

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Exemple de certificat de réussite
Exemple de certificat de réussite