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.
J'avoue que comme d'autres développeurs JS, je me contente le plus souvent d'utiliser que les objets natifs.

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és
function voiture(marque,modele, puissance, motorisation)
{
	this.marque = marque;
	this.modele = modele; 
	this.puissance = puissance;
	this.motorisation = motorisation; 
}
// création d'instances de l'objet 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
document.write("<br> Voiture de jean : " + auto_jean.marque +" " + auto_jean.modele); 
document.write("<br> Voiture de paul : " + auto_paul.puissance +" " + 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. Dans d'autres langages on dit que l'on crée deux objets de la classe "voiture".
Notez l'emploi de la notation pointée : objet.propriété

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 des méthodes !
Une méthode est une fonction propre à l'objet.

Le script

// création de l'objet voiture avec 4 propriétés et une méthode
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'une instance de l'objet 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
document.write("<br>Ma voiture :  " + ma_voiture.presenter());
document.write("<br>Voiture de Felix :  " +auto_felix.presenter());

//changement de propriétés 
ma_voiture.marque ="Porsche" ; 
ma_voiture.modele ="Panamera";
ma_voiture.puissance ="330CV" ;
document.write ("<hr>");
document.write("La voiture dont je rêve  :  " + ma_voiture.presenter());

L'objet créé se nomme voiture et comprend 4 propriétés et une méthode.
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. Ce qui est logique : une méthode est en fait une fonction. propre à un objet et qui retourne une valeur.

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".

Le rendu :

Exercice d'application

Le script à compléter

// créer l'objet Personnage
function Personnage(lenom,leprenom,lesexe)
{
	this.nom=...
	this.prenom =...
	this.sexe =...
	
	this.decrire =function()
	{
        var description = this.nom + " " + this.prenom;
        return ...
	}
	this.saluer =function()
	{ 
		var civilite ;
		if (this.sexe =="M") civilite = ... ; else civilite =...
		return ... ;
	}
} // fin fonction
// créer des instances de la classe personnage
personne1 = new ...("Dubois", "Julien","M");
personne2 = new ...("Marmin", "Isabelle","F");


// appel des méthodes saluer et decrire appliquées aux instances
document.write(personne1.saluer() + " " + personne1.decrire());
document.write("<br>");
document.write(...);

Le rendu dans Iframe

Travail à faire

En fonction du rendu du script et de vos connaissances, vous devez être capable de compléter le script.

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 aussi évoquer la notation pointée optionnelle : très pratique.

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"); 
document.write("<br> 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'); 
document.write("<br>Tacot de Henri :  " + tacot_henri.presenter());
var tacot_jacques =  new Tacot('Renault', '4CV','35CV', 'essence', '1950', 'restauré'); 
document.write("<br>Tacot de Jacques :  " + tacot_jacques.presenter());

// notation pointée optionnelle
document.write("<br>" + 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()".
Regardez attentivement le dernier "document.write()" !

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 notatation 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.
Il remplace donc progressivement le format d'échange de données XML.

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

Un objet créé avec la syntaxe JSON

Dans un script je créé un objet "bar" avec des propriétés et une méthode en utilisant la notation JSON.
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 clé "vernaculaires" a deux valeurs d'où l'emploi des crochets.

La méthode 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

Ces méthodes ont été introduites par la version 2017 de ECMAScript et sont directement inspirées de méthodes utilisées dans le langage Python pour les structures dites "dictionnaires".

Le rendu

Affichez la console pour observer les "arrays" découlant des trois dernières instructions.

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

Exercice d'application

Le script à compléter

Le rendu dans Iframe

Travail à faire

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 rendu

Tableau d'objets

Solution 1

Le code

Le rendu dans un Iframe

Solution 2

Le code

Le rendu