Programmation objet &

JSON

LES PRINCIPES DE LA PROGRAMMATION OBJET

Tous les langages modernes offrent aux développeurs la possibilité d’utiliser la program-
mation objet. Ce type de programmation consiste à manipuler des objets qui contiennent
des données structurées (stockées dans des propriétés) et des fonctions (appelées
méthodes). La programmation objet remplace le développement plus traditionnel, qui
s’appuie sur des appels de fonctions avec des paramètres d’entrée.

La programmation objet facilite la maintenance du code et sa modularité. En principe, un

ensemble de fonctionnalités est porté par un objet et chaque objet a son rôle dans un
projet. Cette séparation logique et fonctionnelle favorise le travail à plusieurs.

Un objet est associé à un type, appelé classe de l’objet, définissant la structure des pro-
priétés et ses fonctionnalités. Un objet, appelé instance, contient les données liées à la
structure.

Dans cette première partie, nous allons d’abord étudier les concepts importants de la
programmation objet. Imaginons l’instance monArticle, issue du type d’objet
Article, et contenant les propriétés suivantes :

am.ofppt@gmail.com AHBOUZ Mustapha Page 1

Les propriétés de l’objet monArticle, instance du type Article, seraient accessibles
par la notation pointée :
monArticle.titre
Les objets de type Article posséderaient également des méthodes, par exemple l’affichage
de la vignette de résumé :
monArticle.displayResume()

Les propriétés

Une propriété est une donnée associée à un objet. La propriété possède un nom et sa
valeur, qui peut être une chaîne de caractères, un nombre, un booléen ou tout autre objet
JavaScript.
Une propriété est dite accessible en écriture s’il est possible de modifier sa valeur par
programmation.

Si la propriété n’est pas modifiable, on parle d’un accès en lecture seule.

Une propriété est dite énumérable si son nom est présent dans la liste des propriétés.
Les propriétés et leur type d’accès sont définis dans le constructeur de l’objet.

Les méthodes

Une méthode est une fonction associée à un objet. Par exemple, la méthode log(valeur)
de window est la fonction qui affiche le paramètre valeur dans la console du navigateur.
Par abus de langage et simplification, méthode et fonction sont souvent synonymes.
Dans le corps de la méthode d’un objet, le mot clé this fait référence à l’objet en cours
de manipulation, c’est-à-dire celui sur lequel s’applique la méthode.

La notation pointée

Nous avons déjà utilisé partout la notation pointée dans les scripts d’exemple de ce cours.
Ainsi, le titre de la page contenu dans la balise <title> est accessible avec la notation
document.title.
Le JavaScript autorise aussi l’accès aux propriétés d’un objet par les crochets, comme s’il
s’agissait d’un tableau. Ainsi, la syntaxe document["title"] est fonctionnellement
équivalente à document.title.

Il est intéressant de noter que les méthodes des objets peuvent aussi être appelées par
la notation crochet. Vous pouvez donc afficher dans la console du navigateur le titre de la
page avec l’appel : console["log"](document.title);
La lisibilité de cette syntaxe n’est pas vraiment bonne. De plus, votre éditeur de texte
ne pourra pas procéder à la coloration syntaxique habituelle. Pourtant, l’accès aux
propriétés par les crochets peut être très pratique. Imaginons un objet qui possède
les propriétés montant1 à montantN et que nous devions en faire la somme. Avec
la notation pointée, nous n’avons pas le choix et nous devons coder la totalité de la
somme : var somme=obj.montant1+obj.montant2+ … +obj.montantN;

Les classes
En programmation objet classique, une classe est la définition de la structure d’un objet.

am.ofppt@gmail.com AHBOUZ Mustapha Page 2

Elle définit les propriétés disponibles, leur type et leur accessibilité. La classe définit éga-
lement les méthodes disponibles sur l’objet.
Les classes sont un élément central de la programmation objet dans tous les langages.
Les classes ont été ajoutées dans le JavaScript à partir de la version ECMAScript 2015.

Le constructeur.

En JavaScript, la création d’un objet se fait à partir d’un constructeur. Un constructeur

est simplement une fonction définissant un objet, ses propriétés et ses méthodes. Dans le
corps de la fonction constructeur, le mot clé this fait référence à l’instance de l’objet en
cours de construction.

L’héritage

L’ héritage est une notion capitale de la programmation objet. Le nom d’héritage est bien
choisi, car il désigne la transmission automatique de propriétés et de méthodes d’un objet
père vers un objet fils. Ce principe évite la duplication de code.
Par exemple, si nous devons définir des objets de types Chien et Cheval, nous aurons
besoin d’une classe parente Animal, qui portera toutes les propriétés communes,
comme l’âge, le sexe ou le nom. En JavaScript, tous les objets héritent du type de plus bas
niveau, Object, qui définit entre autres la méthode toString() qui transforme en chaîne
de caractères lisibles toutes les propriétés de l’objet.

De la même manière, les éléments HTML affichés sur la page sont des objets issus d’une
longue liste d’héritages permettant de regrouper les propriétés communes.

CRÉER DES OBJETS JAVASCRIPT

Après avoir défini les principales caractéristiques de la programmation objet, nous allons
apprendre à créer des objets et à les utiliser en JavaScript. Malheureusement, le
JavaScript utilise un modèle particulier de création d’objets, à base de prototypes. La
longue histoire du langage a également abouti à des syntaxes très variées. Rassurez-vous,
la souplesse de JavaScript facilite l’usage rapide des objets, même si tous les concepts ne
sont pas parfaitement maîtrisés à la première lecture.

Les constructeurs JavaScript

Un objet JavaScript est construit grâce à une fonction constructeur. Cette fonction orga-
nise la structure de l’objet en définissant les propriétés et les méthodes. Le constructeur
initialise certaines propriétés avec des valeurs de départ.
Le JavaScript possède des constructeurs natifs (comme Date, Array, Object). Le
développeur peut bien sûr créer ses propres objets. Créons notre constructeur d’objet
de type Animal :

LE FORMAT JSON

Le JSON (JavaScript Object Notation) est un format texte standardisé de représentation

des données. Il est à la fois compact et facile à lire et à écrire pour un développeur.

am.ofppt@gmail.com AHBOUZ Mustapha Page 3

Le JSON a été inventé dans le début des années 2000 par le développeur américain Dou-
glas Crockford. Le JSON est maintenant nativement reconnu par tous les navigateurs. Il
est également compris par tous les autres langages de programmation et devient ainsi
une sérieuse alternative au format d’échange de données XML (Extensible Markup Lan-
guage).

Le format JSON permet de définir des structures de données à partir d’objets et de ta-
bleaux.
Un objet JSON est un ensemble de couples propriété:valeur placé entre acco-
lades. Les couples sont séparés par une virgule. La propriété et sa valeur sont séparées
par le caractère deux-points.
La structure générique d’un objet JSON est donc :
{ propriete1 : valeur1, …, proprieteN : valeurN }

Un tableau JSON est une suite de valeurs séparées par des virgules et placée entre cro-
chets. La structure générique d’un tableau JSON est donc :
[ valeur1, …, valeurN ]

Une propriété d’un objet JSON est une chaîne de caractères.

Une valeur en JSON peut être une chaîne de caractères, un nombre, un booléen ou un
autre élément JSON, objet ou tableau. Grâce à cette diversité de valeurs possibles, le
format JSON peut décrire pratiquement toutes les structures d’objets complexes néces-
saires dans un projet.
Notez quelques caractéristiques propres au format JSON :

 L’ordre de déclaration des propriétés d’un objet n’a pas d’incidence.

 Il n’est pas possible de créer un tableau indexé avec JSON. Seuls les tableaux avec
indice auto-incrémenté sont autorisés.
 Les espaces et retours à la ligne n’ont pas d’effet sur les objets générés et servent
uniquement à la mise en forme et à la lisibilité.
 Le seul délimiteur de chaînes de caractères est le guillemet ". L’apostrophe ' n’est
pas autorisée et génère une erreur.

L’usage du JSON en JavaScript

Le format JSON est tellement pratique et logique qu’il remplace souvent les construc-
teurs de la déclaration native des objets et des tableaux.
Ainsi, un tableau sera souvent déclaré par du JSON, à la fois plus lisible et plus compact :
var jours=["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
La déclaration classique serait :
var jours =new Array("Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim");
Les deux créations ont exactement le même résultat. Le tableau jours contient :

Pour les objets, la déclaration avec JSON facilite aussi la lisibilité et la compacité. La créa-

am.ofppt@gmail.com AHBOUZ Mustapha Page 4

tion d’un objet sans propriété avec JSON s’écrit simplement :
var obj={};
Cette syntaxe est équivalente à l’utilisation du constructeur Object() classique :
var obj=new Object();

Nous allons créer l’objet truiteFario par JSON, qui définit quelques caractéristiques
d’une truite fario :
var truiteFario = {
nom: "Fario",
noms: ["Truite sauvage","Truite commune"],
latin: "salmo truta fario",
image: "fario.jpg",
particularite: "Présence de points rouges et noirs auréolés",
tailleMoyenne: 30,
tailleMaxi: 70,
maille: 25,
};

Dans la console, le navigateur affiche l’objet :

Ce simple exemple présente quelques caractéristiques intéressantes :

 Les propriétés de notre objet ne sont pas des chaînes avec les délimiteurs ", comme
le réclame la syntaxe JSON. Le JavaScript autorise cette notation directe, plus
compacte et plus lisible.
 La virgule sépare chaque couple de propriété/valeur. Il y a une virgule ignorée
avant l’accolade de fermeture. La syntaxe JSON ne l’autoriserait pas.
 La propriété noms est un tableau de chaînes de caractères.

La notation pointée est toujours utilisée pour accéder aux valeurs des propriétés de notre
objet. Par exemple, pour obtenir le nombre de noms alternatifs de notre truite fario, nous
écrivons :
truiteFario.noms.length
Comme pour les objets créés par leur constructeur natif, l’accès aux propriétés peut se
faire aussi par les crochets. Ainsi, le second nom alternatif est trouvé indifféremment par :
truiteFario["noms"][1]
ou par :truiteFario.noms[1]

Le JavaScript ajoute au format JSON le support de création de méthode. Créons, pour

notre truite fario, la méthode display(), qui retourne le code HTML représentant la
fiche poisson :

am.ofppt@gmail.com AHBOUZ Mustapha Page 5

am.ofppt@gmail.com AHBOUZ Mustapha Page 6
Le JSON est très utilisé pour passer des paramètres à une fonction. L’avantage principal
est de ne pas avoir à respecter l’ordre des paramètres de la déclaration de la fonction.
L’autre avantage est que la définition de nouveaux paramètres est facilitée. Imaginons
une fonction qui attende dix paramètres nommés param1 à param10. La déclaration
classique serait :

Le format JSON est également très utilisé dans le cadre d’échange de données entre le
navigateur et le serveur, lors d’appels AJAX par exemple, que nous traiterons dans la
seconde partie dédiée à l’interactivité.

Les conversions JSON en JavaScript

Le constructeur JSON possède deux méthodes de manipulations des objets.

La méthode parse() (« analyser » en français) transforme la chaîne de caractères au format
JSON passée en paramètre et retourne l’objet correspondant :
Object JSON.parse(String chaineJSON)
Si la chaîne passée en paramètre n’est pas correctement formatée, une erreur est retour-
née. Il est donc nécessaire de tester la présence d’une erreur éventuelle avant toute
analyse de chaîne JSON avec le bloc try catch .

La méthode stringify() (« chaînifier » en traduction littérale) effectue l’opération inverse,

appelée linéarisation, et retourne la chaîne de caractères JSON correspondant à l’objet
passé en paramètre :
String JSON.stringify(Object monObjet)
Par exemple, pour reprendre notre objet truiteFario, l’appel à JSON.stringify(truiteFario)
retourne la chaîne de caractères :

Notez que les propriétés sont bien des chaînes entourées des " et qu’il n’y a pas de vir-
gule après la dernière propriété. La méthode display() a été ignorée car elle n’est pas

am.ofppt@gmail.com AHBOUZ Mustapha Page 7

compatible avec le format JSON officiel.La méthode stringify() retourne toujours la
chaîne la plus courte possible en supprimant tous les espaces inutiles.
Le JSON ne supporte pas directement les tableaux associatifs. La linéarisation d’un ta-
bleau indicé de monnaies retourne un tableau vide :

Grâce à la double notation d’accès aux propriétés d’un objet, nous pouvons transformer
notre tableau associatif en objet classique :

Représentation de documents structurés¶

L’objectif est donc de représenter des informations plus ou moins complexes en

satisfaisant les besoins suivants:
Flexibilité: la structure doit pouvoir s’adapter à des variations plus ou moins
importantes; prenons un document représentant un livre ou une documentation
technique: on peut avoir (ou non) des annexes, des notes de bas de pages, tout un
ensemble d’éléments éditoriaux qu’il faut pouvoir assembler souplement.
Richesse de la structure: il faut pouvoir imbriquer des tableaux, des listes, des agrégats
pour créer des structures complexes.
Autonomie: quand deux systèmes échangent un document, toutes les informations
doivent être incluses dans la représentation; en particulier, les données doivent être auto-
décrites: le contenu vient avec sa propre description.
Sérialisation: la sérialisation désigne la capacité à coder un document sous la forme d’une
séquence d’octets qui peut “voyager” sans dégradation sur le réseau, une propriété
essentielle dans le cadre d’un système distribué.
D’une manière générale, les documents structurés sont des graphes dont chaque partie
est auto-décrite. Commençons par la structure de base: les paires (clé, valeur). En voici
un exemple, codé en JSON.
"nom": "philippe"

am.ofppt@gmail.com AHBOUZ Mustapha Page 8

Et le même, codé en XML.
<nom>philippe</nom>

La construction (clé, valeur) permet de créer des agrégats. Voici un exemple JSON, dans
lequel les agrégats sont codés avec des accolades ouvrante/fermante.
{"nom": "Philippe Rigaux", "tél": 2157786, "email": "philippe@cnam.fr"}

En XML, il faut “nommer” l’agrégat.

<personne>

<nom>Philippe Rigaux</nom>

<tel>2157786</tel>

<email>philippe@cnam.fr</email>

</personne>

On constate tout de suite que le codage XML est beaucoup plus bavard que celui de
JSON.
Important
Les termes varient pour désigner ce que nous appelons agrégat; on pourra
parler d’objet (JSON), d’élément (XML), de dictionnaire (Python), de tableau
associatif (PHP), de hash map (Java), etc. D’une manière générale ne vous laissez pas
troubler par la terminologie variable, et ne lui accordez pas plus d’importance qu’elle n’en
mérite. Un agrégat est un ensemble de paires (clé, valeur), chaque clé étant unique.
Nous avons parlé de la nécessité de composer des structures comme condition essentielle
pour obtenir une puissance de représentation suffisante. Sur la base des paires (clé,
valeur) et des agrégats vus ci-dessus, une extension immédiate par composition consiste à
considérer qu’un agrégat est une valeur. On peut alors créer une paire clé-valeur dans
laquelle la valeur est un agrégat, et imbriquer les agrégats les uns dans les autres, comme
le montre l’exemple ci-dessous.
{
"nom": {
"prénom": "Philippe",
"famille": "Rigaux"
},
"tél": 2157786,
"email": "philippe@cnam.fr"
}
Continuons à explorer les structures de base. Une liste est une valeur constituée d’une
séquence de valeurs. Les listes sont représentés en JSON (où on les appelle tableaux) avec
des crochets ouvrant/fermant.

[2157786, 2498762]

Une liste est une valeur, et on peut donc l’associer à une clé dans un agrégat.

{nom: "Philippe", "téls": [2157786, 2498762] }

am.ofppt@gmail.com AHBOUZ Mustapha Page 9

XML en revanche ne connaît pas explicitement la notion de tableau. Tout est
uniformément représenté par balisage.
<personne>
<nom>philippe</nom>
<tels>
<tel>2157786</tel>
<tel>2498762</tel>
</tels>
</personne>

Note
Un des inconvénients de XML est qu’il existe plusieurs manières de représenter les
mêmes données, ce qui donne lieu à des réflexions et débats inutiles. Un langage comme
JSON propose un ensemble minimal et suffisant de structures, représentées avec
concision. La puissance de XML ne vient pas de sa syntaxe mais de la richesse des
normes et outils associés.
Et voilà pour l’essentiel. On peut faire des agrégats d’agrégats d’agrégats, sans limitation
de profondeur. On peut combiner des agrégats, des listes et des paires (clé, valeur) pour
créer des structures riches et flexibles. Enfin, le codage (JSON ou XML) donne à ce que
nous appellerons maintenant “documents” l’autonomie et la robustesse (pour des
transferts sur le réseau) attendu.

Les documents sont des graphes

Prenons un peu de hauteur pour comprendre le modèle de données. Un document

structuré représente en fait un arbre dans lequel on représente à la fois le contenu (les
valeurs) et la structure (les noms des clés et l’imbrication des constructeurs élémentaires).
La figure Représentation arborescente (JSON: arêtes étiquetées par les clés) montre deux
arbres correspondant aux exemples qui précèdent. Les noms sont sur les arêtes, les
valeurs sur les feuilles.

Fig. 3.1 Représentation arborescente (JSON: arêtes étiquetées par les clés)

Le codage associe bien une structure (l’arbre) et le contenu (le texte dans les feuilles). Une
autre possibilité est de représenter à la fois la structure et les valeurs comme des nœuds.
C’est ce que fait XML (figure Représentation arborescente (XML: clés représentées par
des nœuds)).

am.ofppt@gmail.com AHBOUZ Mustapha Page 10

 Fig. 3.2 Représentation arborescente (XML: clés représentées par des nœuds)

Abrégé de la syntaxe JSON

Résumons maintenant la syntaxe de JSON qui remplace, il faut bien le dire, tout à fait
avantageusement XML dans la plupart des cas à l’exception sans doute de documents
“rédigés” contenant beaucoup de texte: rapports, livres, documentation, etc. JSON est
concis, simple dans sa définition, et très facile à associer à un langage de programmation
(les structures d’un document JSON se transposent directement en structures du langage
de programmation, valeurs, listes et objets).

Note

JSON est l’acronyme de JavaScript Object Notation. Comme cette expression le suggère,
il a été initialement créé pour la sérialisation et l’échange d’objets Javascript entre deux
applications. Le scénario le plus courant est sans doute celui des applications Ajax dans
lesquelles le serveur (Web) et le client (navigateur) échangent des informations codées en
JSON. Cela dit, JSON est un format texte indépendant du langage de programmation
utilisé pour le manipuler, et se trouve maintenant utilisé dans des contextes très éloignés
des applications Web.

C’est le format de données principal que nous aurons à manipuler, et comme format
d’échange sur le Web par d’innombrables applications.
La syntaxe est très simple et a déjà été en grande partie introduite précédemment. Elle est
présentée ci-dessous, mais vous pouvez aussi vous référer à des sites
comme http://www.json.org/.

Valeurs simples

La structure de base est la paire (clé, valeur) (key-value pair).

"title": "The Social network"

Qu’est-ce qu’une valeur?

On distingue les valeurs atomiques et les valeurs complexes (construites).

am.ofppt@gmail.com AHBOUZ Mustapha Page 11

Les valeurs atomiques sont:
 les chaînes de caractères (entourées par les classiques apostrophes doubles anglais
(droits)),
 les nombres (entiers, flottants)
 les valeurs booléennes (true ou false).
Voici une paire (clé, valeur) où la valeur est un entier (NB: pas d’apostrophes).
"year": 2010

Et une autre avec un Booléen (toujours pas d’apostrophes).

"oscar": false

Valeurs complexes
Les valeurs complexes sont soit des objets (agrégats de paires clé-valeur) soit des listes
(séquences de valeurs). Un objet est un ensemble de paires clé-valeur dans lequel chaque
clé n’apparaît qu’une fois. C’est ce que nous avons appelé agrégat dans un contexte plus
général.

{"last_name": "Fincher", "first_name": "David", "oscar": true}

Un objet est une valeur complexe et peut être utilisé comme valeur dans une paire clé-
valeur.
"director": {
"last_name": "Fincher",
"first_name": "David",
"birth_date": 1962,
"oscar": true
}
Une liste (array) est une séquence de valeurs dont les types peuvent varier: Javascript est
un langage non typé et les tableaux peuvent contenir des éléments hétérogènes, même si
ce n’est sans doute pas recommandé. Une liste est une valeur complexe, utilisable dans
une paire clé-valeur.

"actors": ["Eisenberg", "Mara", "Garfield", "Timberlake"]

La liste suivante est valide, bien que contenant des valeurs hétérogènes.
"bricabrac": ["Eisenberg", 1948, {"prenom", "Philippe", "nom": "Rigaux"},
true, [1, 2, 3]]

L’imbrication est sans limite: on peut avoir des tableaux de tableaux, des tableaux d’objets
contenant eux-mêmes des tableaux, etc. Pour représenter un document avec JSON, nous
adopterons simplement la contrainte que le constructeur de plus haut niveau soit un objet
(en bref, document et objet sont synonymes).

{
"title": "The Social network",
"summary": "On a fall night in 2003, Harvard undergrad and \n
programming genius Mark Zuckerberg sits down at his \n
computer and heatedly begins working on a new idea. (...)",
"year": 2010,
"director": {"last_name": "Fincher","first_name": "David"},

am.ofppt@gmail.com AHBOUZ Mustapha Page 12

 "actors": [
{"first_name": "Jesse", "last_name": "Eisenberg"},
{"first_name": "Rooney", "last_name": "Mara"}
]
}
ExEmplE d’application

Mise en forme des données

Les données sont principalement représentées sous la forme de tableaux. On parle de
données tabulaires.

Exemple : Nom Prenom Age

Perrin Léo 18

Petit Loïc 32

Leroux Pierre 27

Il existe trois formats pour représenter un tableau de données : les formats CSV, XML et
JSON.

Ces trois formats sont des fichiers composés d’une suite de caractères où l’on distingue
deux types d’information :

 Les données.
 Les caractères permettant de structurer ces données.

a) Le format CSV
Le format Comma Separated Values (CSV) structure les données sous la forme
de valeurs séparées par des virgules. Ce format est très facile à générer et à
manipuler. Chaque ligne du fichier CSV correspond à une ligne du tableau et
chaque valeur séparée par une virgule correspond à une colonne du tableau.

Exemple du tableau précédent au format CSV :

La première ligne du fichier contient l'entête de la table, à savoir le nom de chacune des
colonnes. Les lignes suivantes contiennent les données du tableau, en respectant l'ordre
des colonnes. Le séparateur n'est pas forcément une virgule, on peut par exemple utiliser
le point-virgule.

am.ofppt@gmail.com AHBOUZ Mustapha Page 13

 b) Le format XML
Le format eXtensible Markup Language (XML) est un format basé sur
l’utilisation de balises pour structurer les données. Les balises sont utilisées pour
encadrer un contenu : il y a une balise ouvrante et une balise fermante.

Exemple du tableau au format XML :

c) Le format JSON
Le format JavaScript Object Notation (JSON) est un format plus récent utilisé pour
représenter des objets qui dérive de la notation des objets du langage JavaScript. Un
document JSON est essentiellement un ensemble de paires constituées d'une étiquette et
d'une valeur ou d'une liste de valeurs. Les paires sont placées entres accolades et séparées
par des virgules. Les valeurs des listes sont placées entre crochets et séparées par des
virgules.

Exemple du tableau au format JSON :

Le premier ensemble possède une paire dont la clé est liste et dont la valeur est une liste
de trois éléments. Chacun de ces trois éléments est un ensemble avec trois paires
représentant respectivement le nom, le prénom et l’âge de chaque personne.

Remarquez que les nombres ne sont pas placés entre guillemets, contrairement aux mots
et aux clés qui doivent être entre guillemets.

am.ofppt@gmail.com AHBOUZ Mustapha Page 14