M3203 - Programmation objet et événementielle - TP3

Objectifs de la séance

  • Rappels sur la notion d'objet
  • Savoir créer et manipuler des classes en Javascript

Pré-requis

Résumé de la séance précédente

  • Un évènement est déclenché par une action sur un élément, le plus souvent réalisée par l'utilisateur.
  • En programmation évènementielle, l'exécution du programme est dirigée par les évènements.
  • Pour déclencher un évènement à l'action d'un utilisateur, on utilise la méthode element.addEventListener(event, fonction);. Exemple : 
    
			// Une fonction qui lance une alerte
			function test(){ 
				alert("Vous avez cliqué");
			}
			// Le bouton qui déclenchera l'évènement
			var bouton = document.getElementById("go");
			// Ajout de l'écouteur d'évènements sur le bouton #go
			bouton.addEventListener("click", test);
  • L'objet Event permet d'accéder à l'évènement déclenché et ses propriétés comme son type ou l'élément cible par exemple

La programmation orientée objet en Javascript

Les objets

Vous avez déjà vu et manipulé des objets pendant les séances précédentes, comme l'objet Event. Nous allons revenir sur cette notion et voir comment créer ses propres objets en Javascript.

Notion d'objet

Vous connaissez les tableaux qui permettent de regrouper plusieurs valeurs dans une même variable. Chaque élément du tableau est indexé par un numéro, comme ceci :


var tableau = ["Arthur", "Zéphir", "Tom"];
// Correspondance entre les éléments et leur numéros :
//	tableau[0] => "Arthur"
//	tableau[1] => "Zéphir"
//	tableau[2] => "Tom"

De la même façon, les objets permettent de stocker plusieurs valeurs dans une même variable. Pour les objets, ces valeurs sont stockées dans des propriétés. On n'y accède non plus par des numéros comme pour les tableaux mais avec des chaînes de caractères.

Par exemple, dans la vraie vie, une voiture est un objet. En programmation orientée objet, on peut écrire un objet qui reflète une voiture. La voiture a des caractéristiques (sa marque, son modèle, sa couleur et son prix) qui seront stockées dans les propriétés de l'objet. La voiture peut aussi faire des actions comme avancer ou stopper. En programmation orientée objet, ces actions seront implémentées dans des méthodes, des fonctions propres à l'objet.

Définition d'un objet

Pour définir un objet et ses propriétés en Javascript, on écrit le nom de la propriété suivie de ":" et sa valeur entre des accolades comme ceci :


var voiture = {
	marque : "Toyota",
	modele : "Yaris",
	couleur : "gris",
	prix : 20000
};
// Correspondance entre les noms de propriétés et leur valeur :
//	voiture.marque => "Toyota";
//	voiture.modele => "Yaris"
//	voiture.couleur => "gris"
//	voiture.prix => 20000

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

Pour accéder à la propriété d'un objet, on utilise le point entre le nom de la variable et le nom de la propriété, comme vous l'avez vu avec les objets du DOM.


var voiture = {
	marque : "Toyota",
	modele : "Yaris",
	couleur : "gris",
	prix : 20000
};
console.log(voiture.modele); // Affiche "Yaris"

Modifier la valeur de la propriété d'un objet

On affecte une nouvelle valeur à la propriété de l'objet avec le signe "=" suivi de la nouvelle valeur.


var voiture = {
	marque : "Toyota",
	modele : "Yaris",
	couleur : "gris",
	prix : 20000
};
console.log(voiture.modele); // Affiche "Yaris"
voiture.modele = "Prius";
console.log(voiture.modele); // Affiche "Prius"

Les classes

Définition d'une classe

Vous savez maintenant déclarer un objet avec ses propriétés. Imaginez maintenant que vous voulez programmer une application pour un loueur de voitures pour qu'il puisse gérer son parc de voitures de location. Vous voudrez que tous vos objets voiture partagent les mêmes propriétés et les mêmes fonctions. Si un de vos objets voiture ne possède pas la propriété marque, vous risquez quelques bugs ! Comment faire ? On utilise les classes !

Une classe est donc un modèle d'objet : elle définit toutes ses propriétés et toutes ses méthodes. Pour créer un objet à partir d'une classe, on dit qu'on l'instancie. Chaque objet est donc l'instance d'une classe. Tous les objets créés à partir d'une classe partageront donc les mêmes propriétés mais la valeur de ces propriétés pourra être différente entre chaque instance (chaque objet créé). De la même façon, chaque instance d’une classe aura les mêmes méthodes, mais l’exécution de la fonction correspondante ne s’appliquera qu’à l’instance sur laquelle elle aura été appelée.

Définir une classe

Je ne détaillerai ici que la syntaxe apparue avec ECMAScript 2015 qui est une syntaxe similaire aux autres langages de programmation. Pour créer une nouvelle classe, on utilise le mot-clé class suivi du nom de la classe. Le corps de la classe sera encapsulé dans des accolades. Comme ceci : 

class Voiture{
	// Corps de la classe
}

Le constructeur d'une classe

Une classe possède un constructeur. C'est une méthode particulière qui est exécutée quand on crée un objet à partir de la classe. C'est donc dans le constructeur que l'on va initialiser les propriétés d'une classe, et d'une manière générale faire toutes les opérations qui doivent être réalisées à la création de l'objet. Toutes les propriétés doivent être précédées du mot-clé this qui représente l'objet. Le constructeur peut prendre des paramètres. Pour notre voiture, il prendra en paramètre les valeurs de la marque de la voiture, son modèle, sa couleur et son prix. 

class Voiture{
	constructor(marque, modele, couleur, prix){
	// Constructeur de la classe
		this.marque = marque; // La propriété this.marque est initialisée avec la valeur marque passée en paramètre
		this.modele = modele;
		this.couleur = couleur;
		this.prix = prix; 
	}
}

Ajouter des méthodes à une classe

Pour définir les actions réalisées par un objet, on utilise des méthodes, des fonctions rattachées à un objet. Par exemple ici, on va définir une méthode display qui affichera les caractéristiques d'une voiture. 

class Voiture{
	constructor(marque, modele, couleur, prix){
	// Constructeur de la classe
		this.marque = marque; // La propriété this.marque est initialisée avec la valeur marque passée en paramètre
		this.modele = modele;
		this.couleur = couleur;
		this.prix = prix; 
	}

	display(){
	// La méthode display retourne une phrase du type "La voiture marque modele de couleur X est à louer pour YZ euros par jour."
		return "La voiture "+this.marque+" "+this.modele+" de couleur "+ this.couleur + " est à louer pour " + this.prix + "euros par jour.";
	}
}
Pour appeler une méthode dans le corps d'une classe, il faudra également faire précéder son nom du mot-clé this.

Instancier une classe

Pour instancier une classe, on utilise le mot-clé new, comme ceci : 

class Voiture{
	constructor(marque, modele, couleur, prix){
	// Constructeur de la classe
		this.marque = marque; // La propriété this.marque est initialisée avec la valeur marque passée en paramètre
		this.modele = modele;
		this.couleur = couleur;
		this.prix = prix; 
	}

	display(){
	// La méthode display retourne une phrase du type "La voiture marque modele de couleur X est à louer pour YZ euros par jour."
		return "La voiture "+this.marque+" "+this.modele+" de couleur "+ this.couleur + " est à louer pour " + this.prix + "euros par jour.";
	}
} // Fin de la classe

var voiture1 = new Voiture("Toyota", "Yaris", "rouge", "30"); // On donne les paramètres attendus par le constructeur.
console.log(voiture1.display()); //Affiche dans la console "La voiture Toyota Yaris de couleur rouge est à louer pour 30 euros par jour."


Aller à l'exercice