Mis à jour le 19/11/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 questylo est un objet. Cet objet possède trois propriétés :type,couleur etmarque. 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éenomObjet.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 fichiercours.js situé dans le répertoirechapitre_7/js (à créer). Créez ensuite le fichiercours.html associé danschapitre_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 syntaxemonObjet.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 objetperso ayant trois propriétés :nom,sante etforce. 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 fichierchapitre_7/js/jdr.js et testez-le avec le fichierchapitre_7/html/jdr.html associé.  Vous obtenez le résultat suivant.

La notion de méthode

Dans notre programme, on remarque que l'instructionconsole.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 fonctiondecrire() 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'objetperso possède une nouvelle propriété nomméedecrire. 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'expressionperso.decrire() plutôt quedecrire(perso). Cette différence est essentielle :

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

  •  perso.decrire() appelle la fonction decrire() sur l'objetperso. 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éthodenomMethode sur un objetnomObjet, on utilise la syntaxe nomObjet.nomMethode().

Le mot-clé this

Observez maintenant le corps de la méthodedecrire() de notre objetperso. 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éthodedecrire() ne prend plus de personnage en paramètre : elle utilisethis 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'objetconsole donne accès à la console du navigateur. Par exemple, on peut écrire un message dans la console avecconsole.log().

  • L'objetMath 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épertoirechapitre_7

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

Complétez le programmejdr.js issu du cours pour ajouter au personnage une propriété nomméexp 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 programmechien.js ci-dessous pour ajouter la définition de l'objetchien.

// 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 programmecercle.js ci-dessous pour ajouter la définition de l'objetcercle. 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 programmecompte.js qui crée un objetcompte ayant les propriétés suivantes :

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

  • Une propriété solde valant initialement 0.

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

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

  • Une méthodedecrire() 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