JavaScript : programmation objet - notation JSON

Dans le chapitre précédent j'ai évoqué les objets natifs de JavaScript : les Dates, les objets String, les objets Math, etc.
Dans cette page je vais vous montrer comment créer vos propres objets et les manipuler.

Création d'objet par un constructeur - exemple 1

Un constructeur est simplement une fonction définissant un objet, ses propriétés et méthodes.
Dans ce premier exemple l'objet ne comprend que des propriétés.

Le script

// création de l'objet voiture avec 4 propriétéw
function voiture(marque,modele, puissance, motorisation)
{
	this.marque = marque;
	this.modele = modele; 
	this.puissance = puissance;
	this.motorisation = motorisation; 
}
// création d'instances de voiture
var auto_jean = new voiture('Peugeot', '2008 série2', '130CV', 'essence'); 
var auto_paul = new voiture('Renault', 'clio 4', '90CV','diesel');

// affichage d'instances avec leurs propriétés
alert("Voiture de jean : " + auto_jean.marque +" " + auto_jean.modele); 
alert(`Voiture de paul :  ${auto_paul.puissance} et ${auto_paul.motorisation} `);

L'objet créé se nomme "voiture" et comprend 4 propriétés.
Je crée ensuite deux instances de l'objet : auto_jean & auto_paul. On peut dire aussi que l'on crée deux objets de la classe "voiture".
Notez l'emploi de la notation pointée : objet.propriété.
Dans la dernière instruction j'utilise la notation "template strings" pour éviter une concaténation fastidieuse.

Le rendu dans un Iframe

Création d'objet par constructeur - exemple 2

Dans l'exemple précédent les objets ne comprenaient que des propriétés or si on veut manipuler une objet ce dernier doit comprendre aussi au moins une méthode. Une méthode est une fonction propre à l'objet.

Le script

function voiture(marque,modele, puissance, motorisation)
{
	this.marque = marque;
	this.modele = modele; 
	this.puissance = puissance;
	this.motorisation = motorisation; 
	this.presenter = function()
	{
	var presenter = this.marque + " - " + this.modele + " - " 
		+ this.puissance + " - " + this.motorisation; 
	return presenter ;
	}
		
}
// création d' instances de voiture
var ma_voiture = new voiture('Renault', 'clio 4', '90CV','diesel');
var auto_felix = new voiture('Peugeot', '2008 série2', '130CV', 'essence'); 

// appel de la méthode presenter
alert("Ma voiture :  " + ma_voiture.presenter());
alert("Voiture de Felix :  " +auto_felix.presenter());

//changement de propriétés 
ma_voiture.marque ="Porsche" ; 
ma_voiture.modele ="Panamera";
ma_voiture.puissance ="330CV" ;

alert("La voiture dont je rêve  :  " + ma_voiture.presenter());
// notation avec crochets
alert(ma_voiture['marque'] + " " + ma_voiture['modele'] +" " 
	+ ma_voiture['motorisation'])

L'objet créé se nomme voiture et comprend 4 propriétés et une méthode.
Je crée deux instance de voiture.
La méthode se nomme presenter(). Il s'agit d'une fonction propre à l'objet qui affiche ici toutes les propriétés de l'objet.
Pour décrire une méthode il faut employer les mots réservés function et return.
Pour appeler une méthode d'un objet il faut employer la syntaxe : objet.methode(). N'oubliez pas les parenthèses, une méthode c'est une fonction !

Je procède ensuite à un changement de propriétés pour l'instance "mavoiture".
Notez la syntaxe pour modifier la valeur d'une propriété : objet.propriété ="nouvelle valeur".
On dit que l'on utilise la notation pointée.

Pour accéder / modifier la valeur d'une propriété il existe aussi une autre solution : la notation entre crochets. La syntaxe est alors : objet['propriété'].

La notation entre crochets ne fonctionne pas pour les méthodes.

Le rendu dans un Iframe

Les classes et l'héritage - notation pointée optionnelle

En POO classique, une classe est la description d'un objet. La classe définit donc les propriétés et les méthodes de l'objet.
Pour se rapprocher de la syntaxe objet des autres langages, la version ECMAScript de 2015 introduit les classes.

Dans l'exemple qui suit je vais définir un objet via une classe. Je vais aussi créer une deuxième classe héritant de la première.
Je vais créer des instances de la classe mère et de la classe fille.
Je vais aussi évoquer la notation pointée optionnelle ...

Exemple

// création de la classe auto 
class Auto{
	constructor(marque,modele,puissance,motorisation)
	{
		this.marque = marque;
		this.modele = modele; 
		this.puissance = puissance;
		this.motorisation = motorisation; 
	}
} // fin définition classe
var auto_pierre = new Auto("Citroen", "C3", "80CV","electrique"); 
console.log("Auto de pierre : " + auto_pierre.marque + " - " + auto_pierre.modele); 

// classe Tacot hérite de la classe Auto
class Tacot extends Auto
{
	constructor(marque,modele,puissance,motorisation,annee,etat)
	{
		super(marque,modele,puissance,motorisation);
		// nouvelles propriétés 
		this.annee = annee;
		this.etat = etat; 
		// nouvelle méthode
		this.presenter = function()
		{
		var infos = this.marque + " "+ this.modele + " " + this.puissance + " " 
			+ this.motorisation + " " + this.annee + " "+ this.etat ;
		return infos ;
		}
	}
} // fin définition classe

var tacot_henri =  
	new Tacot('Citroen', 'traction avant','50CV', 'essence', '1940', 'épave'); 
alert("Tacot de Henri :  " + tacot_henri.presenter());
var tacot_jacques =  
	new Tacot('Renault', '4CV','35CV', 'essence', '1950', 'restauré'); 
alert("Tacot de Jacques :  " + tacot_jacques.presenter());

// notation pointée optionnelle
alert("Auto de pierre :" + auto_pierre.marque +"-"+ auto_pierre.modele +  "-" 
	+ auto_pierre?.annee +"-" + auto_pierre?.etat);

Je définis donc la classe "Auto" . Il est d'usage que la première lettre de la classe soit une majuscule.
La fonction constructor() initialise les propriétés et méthodes.
Notez que la classe "Auto" ne comprend que des propriétés.

A partir de la classe "Auto" je définis la classe "Tacot" par héritage avec l'instruction class Tacot extends Auto.
La fonction super() reprend la structure de la classe mère.
Dans cette nouvelle classe je définis deux nouvelles propriétés (annee & etat) et une méthode nommée "presenter()".
Je crée deux instances de la classe "Tacot" et j'affiche toutes leurs propriétés via la méthode "presenter()".
Pour la dernière instruction alert j'utilise la notation pointée optionnelle.

Notation pointée optionnelle

Je ne sais plus si l'instance auto_pierre appartient à la classe mère "Auto" OU à la classe fille "Tacot. Il n'est donc pas certain que l'objet "auto_pierre" possède les propriétés "annee" et "etat". J'utilise donc pour ces deux propriétés la notation optionnelle : caractères ?. entre objet et propriété.
Grâce à cette syntaxe il n'y a pas plantage du script mais simplement affichage éventuel de "undefined" comme vous le constatez dans le rendu ci-dessous.

Le rendu

La notation JSON

Le format JSON

Le JSON (JavaScript Object Notation) est un format standardisé de représentation des données.
Ce format est nativement reconnu par tous les navigateurs. Il est aussi compris par d'autres langages de programmation que JS.

Un objet JSON est un ensemble de couples propriéte:valeur.
Les couples sont séparés par une virgule. Entre la propriété et sa valeur un double point.

Un objet créé avec la syntaxe JSON

La syntaxe JSON permet de créer un objet (avec ses attributs et méthodes) très facilement.
On dit que l'on crée un objet littéral.

Le script

var moi = {
nom : 'Darcheville',
prenom : 'Patrick',
age :'âgé',
presenter:function()
{ 
	alert(this.nom + " " + this.prenom + " " + this.age); 
},
}; // fin définition objet moi 

moi.presenter();

Le rendu

Un second exemple un peu plus complexe

Dans un script je crée un objet "bar" avec des propriétés et une méthode en utilisant la notation JSON.
Pour certaines propriétés il peut y avoir plusieurs valeurs.
La méthode "fiche" génère du code HTML ...

Le script

...
var bar = {
	nom : 'bar commun',
	vernaculaires : ['bar','loup'],
	latin : 'dicentrarchus labrax',
	image : 'bar_commun.jpg',
	elevage : 'oui',
	fiche:function()
	{ 
		var code_html = "<h3>" + this.nom; 
		code_html += "<br>Noms vernaculaires : " + this.vernaculaires; 
		code_html+="<br>Nom scientifique :" + this.latin; 
		code_html += "<br>Aqucaulture ? : " + this.elevage; 
		code_html+= "</h3>"; 
		code_html += "<img src =" + this.image + ">" ; 
		return code_html; 
	}
};
// affichage de la fiche du poisson
document.write (bar.fiche()); 

// accès aux propriétés, valeurs, couples clé;valeur
console.clear(); 
console.log(Object.keys(bar));
console.log(Object.values(bar));
console.log(Object.entries(bar)); 
...

L'objet bar décrit ce poisson osseux à la chaire succulente.
L'objet comprend 5 propriétés et une méthode fiche().
Attention la propriété "vernaculaires" a deux valeurs d'où l'emploi des crochets pour indiquer que la valeur est un "array".

La méthode "fiche" génère du code HTML pour afficher toutes les propriétés y compris l'image.

Observez très attentivement les trois dernières instructions du script :
La méthode keys appliquée sur Object retourne un tableau contenant toutes les clés de l'objet.
La méthode values appliquée sur Object retourne un tableau contenant toutes les valeurs de l'objet.
La méthode entries appliquée sur Object retourne un tableau contenant toutes les couples clé/valeur

Le rendu

Affichez la console !

POO & API Canvas

Dans le cadre de l'API Canvas (qui permet de dessiner dans la page web) j'utilise très souvent la POO.
À chaque fois je définis un objet avec ses propriété et une méthode pour le dessiner dans le canevas.
API Canvas & POO

Tableau d'objets

Vous connaissez les tableaux indicés ne comprenant que des valeurs basiques (chaînes de caractères ou nombres). Je vais vous montrer maintenant comment produire des tableaux d'objets donc un ensemble structuré de données.

Solution 1

On définit une classe puis on crée des instances de cette classe et enfin on regroupe tous ces objets dans un tableau indicé.

Le code

...
<button onclick ="ft_objets()">Création et parcours d'un tableau d'objets</button>
<script>
function ft_objets()
{
// un tableau d'objets

// création de la classe Membres
	function Membre(nom,prenom,email)
	{
	this.nom = nom;
	this.prenom =prenom;
	this.email =email; 
	}

// quatre instances de l'objet Membres 
	var dj = new Membre("Dubois", "Jules","dubois.jules@free.fr"); 
	var de = new Membre("Dupuis", "Emilie","dupuisjulie@free.fr"); 
	var dm = new Membre("Durand", "Marcelle","durand-marcelle@free.fr"); 
	var dh = new Membre("Dumont", "Henri","dumonthenri@free.fr"); 
	

	// réunion de toutes les instances de Membres dans un tableau indicé
	var membres =[dj,de,dm,dh]; 


// parcours du tableau d'objets : solution moderne
	for (var membre of membres)
	{document.write(membre.nom + " " + membre.prenom +" " + membre.email + "<br>" ); }	

	// recherche d'infos 
	document.write("<hr>"); 	
	document.write ('infos sur dm : ' + dm.nom + " - " + dm.prenom + " - " + dm.email); 
	document.write("<br>"); 
	document.write ('infos sur dj : ' + dj.nom + " - " + dj.prenom + " - " + dj.email); 
	
	console.clear(); 
	console.log(Object.keys(dj)); 
	console.log(Object.values(de)); 
	console.log(Object.entries(dm)); 
} // fin fonction

Parcours du tableau d'objets avec la structure for ... of ....

Notez les trois dernières instructions qui affichent dans la console une clé OU une valeur OU un couple clé/valeur pour un des objets du tableau.

Le rendu dans un Iframe

Affichez la console du navigateur !

Solution 2

On utilise la notation JSON pour créer un tableau d'objets.
Vous allez voir que c'est beaucoup plus simple que la solution précédente. Cependant il y a un inconvénient : les différents objets ne sont plus nommés ...

Le code

...
<button onclick ="ft_objets()">Générer et manipuler tableau JSON</button>
<script>
function ft_objets()
{
	// création d'un tableau d'objets avec format JSON
	var membres = [
	{nom: "Dupuis", prenom : "Louise", email : "dupuis.louise@free.fr"},
	{nom: "Dubois", prenom : "Jacques", email : "jacquesdubois@aol.com"},
	{nom: "Lefranc", prenom : "Emile", email : "lefranc-emile@gmail.com"},
	{nom: "Bertolli", prenom : "Jeanne", email : "berto59jane@laposte.net"}
	
	];// fin tableau 

// parcours du tableau d'objets
for (var membre of membres)
	{document.write(membre.nom + " " + membre.prenom +" " + membre.email + "<br>" ); }

// accès à clé ou valeur ou couple pour certains éléménts du tableau	
console.clear(); 
console.log(Object.keys(membres[0])); 
console.log(Object.values(membres[1]));
console.log(Object.entries(membres[2]));
} // fin fonction
...

Membres est un tableau indicé d'objets définis au format JSON (emploi d'accolades pour chaque élément) mais l'ensemble entouré de crochets (comme tout tableau indicé).
Notez les trois dernières instructions qui affichent dans la console pour un élément : clé OU valeur OU couple clé/valeur.

Le rendu

Affichez la console !

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

JavaScript : programmation objet - notation JSON

Création d'objet par un constructeur - exemple 1

Le script

Le rendu dans un Iframe

Création d'objet par constructeur - exemple 2

Le script

Le rendu dans un Iframe

Les classes et l'héritage - notation pointée optionnelle

Exemple

Notation pointée optionnelle

Le rendu

La notation JSON

Le format JSON

Un objet créé avec la syntaxe JSON

Le script

Le rendu

Un second exemple un peu plus complexe

Le script

Le rendu

POO & API Canvas

Tableau d'objets

Solution 1

Le code

Le rendu dans un Iframe

Solution 2

Le code

Le rendu