Programmation Web Javascript

,
Programmation, Conception
et Design Patterns en JavaScript ;
Web Côté Client avec jQuery
Rémy Malgouyres
LIMOS UMR 6158, IUT, département info
Université Clermont Auvergne
B.P. 86
63172 AUBIERE cedex
https://malgouyres.org/
Tous mes cours sur le Web sont sur le Web :
Cours de programmation WEB sur les documents hypertexte HTML/CSS :
https://malgouyres.org/programmation-html-css
Tutoriel sur le CMS Drupal :
https://malgouyres.org/tutoriel-drupal
Cours de programmation WEB côté serveur en PHP :
https://malgouyres.org/programmation-php
Cours de programmation WEB côté client en JavaScript :
https://malgouyres.org/programmation-javascript
Cours sur l’administration de serveurs (Serveurs WEB avec apache, SSL, LDAP...) :
https://malgouyres.org/administration-reseau
Table des matières
1 Premiers pas en JavaScript 6

1.1 Balise <script> et Hello world en JavaScript . . . . . . . . . . . . . . . . . . 6
1.1.1 Hello Word Avec document.write . . . . . . . . . . . . . . . . . . . . 6
1.1.2 Hello Word Avec la Méthode alert de Popup . . . . . . . . . . . . . . 6
1.1.3 Document Template et Modification Dynamique de la Vue . . . . . . . 7
1.2 Types, Variables et Portée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.3 Fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.4 Objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.4.1 Création d’un objet au moyen d’un littéral . . . . . . . . . . . . . . . . 10
1.4.2 Méthodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.4.3 Objets Imbriqués (Composites et Composés) . . . . . . . . . . . . . . . 12
1.4.4 Constructeur d’Object et mot réservé new . . . . . . . . . . . . . . . . 14
1.5 Tableaux (le type Array) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.5.1 Notion d’Array et construction . . . . . . . . . . . . . . . . . . . . . . 15
1.5.2 Quelques méthodes prédéfinies sur le type Array . . . . . . . . . . . . 16
1.6 Exemple : traitement d’un formulaire avec jQuery . . . . . . . . . . . . . . . . 16
1.6.1 Qu’est-ce que jQuery ? . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.6.2 Récupérer, filtrer et afficher les données d’un formulaire . . . . . . . . 17
2 Programmation Fonctionnelle et Objet en JavaScript 20

2.1 Passages d’Arguments, Objets this et Pattern that . . . . . . . . . . . . . . 20
2.1.1 Passage d’arguments par objets . . . . . . . . . . . . . . . . . . . . . . 20
2.1.2 Invocation de Méthode avec le Pattern “apply” . . . . . . . . . . . . . 21
2.1.3 Accès au Composite à partir du Composé (pattern that) . . . . . . . . 23
2.2 Le Pattern Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.2.1 Cycle de Vie d’une Variable Locale à une Fonction . . . . . . . . . . . 24
2.2.2 Principe Général du Pattern Module . . . . . . . . . . . . . . . . . . . 26
2.3 Exemple de fabrique sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.4 Structuration d’une application . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.5 Exemple : un module metier.regexUtil . . . . . . . . . . . . . . . . . . . . . 31
2.6 Modélisation de Modules Métier (version 1) . . . . . . . . . . . . . . . . . . . 35
2.6.1 Attributs et méthodes statiques (Version 1) . . . . . . . . . . . . . . . 36
2.6.2 Exemple : Module Métier adresse . . . . . . . . . . . . . . . . . . . . 38
2.6.3 Fabrique Générique d’Instances Métier (Version 1) . . . . . . . . . . . 40
2.6.4 Exemple : La Fabrique du Module adresse . . . . . . . . . . . . . . . 45
2.6.5 Utilisation : Création d’un Module myApp.view.adresse . . . . . . . . 48
2.7 Interface Générique de Objets métier . . . . . . . . . . . . . . . . . . . . . . . 52
1
TABLE DES MATIÈRES
2.7.1 Implémentation d’interfaces en JavaScript . . . . . . . . . . . . . . . . 52

2.7.2 Interface des instances de modules métier . . . . . . . . . . . . . . . . 53
2.7.3 Exemple d’utilisation : Méthode d’affichage générique . . . . . . . . . . 55
3 Constructeurs, Prototype et Patterns Associés 59

3.1 Constructeurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
3.2 Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
3.2.1 Notion de prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
3.2.2 Surcharge des méthodes du prototype : l’exemple de toString . . . . . 62
3.3 Modélisation de Modules Métier (version 2) . . . . . . . . . . . . . . . . . . . 63
3.3.1 Attributs et méthodes statiques (version 2) . . . . . . . . . . . . . . . 63
3.3.2 Fabrique générique d’instances métier (version 2) . . . . . . . . . . . . 65
3.3.3 Utilisation avec l’affichage générique d’objets métier . . . . . . . . . . . 70
3.4 Patterns pseudo-classique (à éviter) . . . . . . . . . . . . . . . . . . . . . . . . 70
4 Formulaires, Filtrage, Pattern Mediator 73

4.1 Filtrage Basique des Inputs d’un Formulaire . . . . . . . . . . . . . . . . . . . 73
4.2 Pattern Mediator pour le filtrage d’attributs . . . . . . . . . . . . . . . . . . . 75
4.3 Exemple :
Génération automatique de formulaire d’adresse . . . . . . . . . . . . . . . . . 78
5 Exemple d’Application avec IHM 84

5.1 Principe de l’application et analyse fonctionnelle . . . . . . . . . . . . . . . . . 84
5.2 Modèle de donnée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
5.3 Pattern Mediator : centraliser les événements . . . . . . . . . . . . . . . . . . 87
5.4 Événements concernant les personnes . . . . . . . . . . . . . . . . . . . . . . . 90
5.4.1 Enregistrement des événements utilisateurs via jQuery . . . . . . . . . 90
5.4.2 Mise à jour du panneau des détails . . . . . . . . . . . . . . . . . . . . 93
5.4.3 Mise à jour du panneau des items . . . . . . . . . . . . . . . . . . . . . 94
5.4.4 Bouton ”Supprimer” . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
5.4.5 Bouton ”Modifier” et affichage du formulaire . . . . . . . . . . . . . . . 97
5.4.6 Bouton ”Ajouter une personne” . . . . . . . . . . . . . . . . . . . . . . 98
5.4.7 Validation du formulaire de modification . . . . . . . . . . . . . . . . . 99
5.4.8 Validation du formulaire d’ajout d’une personne . . . . . . . . . . . . . 100
5.4.9 Code HTML de la vue et invocation des méthodes . . . . . . . . . . . 101
5.5 Événements concernant les Adresses . . . . . . . . . . . . . . . . . . . . . . . . 104
5.5.1 Enregistrement des événements utilisateurs via jQuery . . . . . . . . . 104
5.5.2 Boutons d’ajout, de suppression, et de modification . . . . . . . . . . . 106
5.5.3 Création d’une nouvelle adresse . . . . . . . . . . . . . . . . . . . . . . 109
5.5.4 Modification d’une adresse . . . . . . . . . . . . . . . . . . . . . . . . . 110
6 Requêtes Asynchrones et API Restful 113

6.1 Qu’est-ce qu’une requête asynchrone ? . . . . . . . . . . . . . . . . . . . . . . 113
6.2 Requêtes Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
6.3 Qu’est-ce qu’une API REST (ou systèmes Restful) ? . . . . . . . . . . . . . . . 117
6.4 Persistance par Requêtes sur une API Restful . . . . . . . . . . . . . . . . . . 118
6.4.1 Création du Module persistance et Objet statusCode . . . . . . . . 118
2
TABLE DES MATIÈRES
6.4.2 Construction du modèle à partir de la base de données . . . . . . . . . 119

6.4.3 Création, Mise à jour, et suppression des personnes . . . . . . . . . . . 123
6.4.4 Création, Mise à jour, et suppression des adresses . . . . . . . . . . . . 126
A Graphisme avec les Canvas HTML5 130

A.1 Notion de canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
A.2 Exemple d’animation dans un canvas . . . . . . . . . . . . . . . . . . . . . . . 131
B Programmation Événementielle en JavaScript 133

B.1 Rappel sur la Gestion d’Événements en CSS . . . . . . . . . . . . . . . . . . . 133
B.2 Événements en Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
B.2.1 Le principe des événements en Javascript . . . . . . . . . . . . . . . . 134
B.2.2 Exemple de mise à jour d’un élément . . . . . . . . . . . . . . . . . . . 135
B.2.3 Formulaires Dynamiques an Javascript . . . . . . . . . . . . . . . . . . 136
C Gestion des fenêtres 139

C.1 Charger un nouveau document . . . . . . . . . . . . . . . . . . . . . . . . . . 139
C.2 Naviguer dans l’historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
C.3 Ouvrir une nouvelle fenêtre (popup) . . . . . . . . . . . . . . . . . . . . . . . 141
D Document Object Model (DOM) 142

D.1 Qu’est-ce que le DOM ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
D.2 Sélection et Manipulation de Base sur le DOM . . . . . . . . . . . . . . . . . . 143
D.2.1 Sélection de tout ou partie des éléments . . . . . . . . . . . . . . . . . 143
D.2.2 Filtrage par le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
D.2.3 Application de Méthode aux éléments . . . . . . . . . . . . . . . . . . 145
D.2.4 Événements et Callbacks . . . . . . . . . . . . . . . . . . . . . . . . . . 146
D.2.5 Fitrage d’un Tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
3
Architectures client/serveur et API
Architecture d’une application multi plate-formes

Une application multi plate-formes contemporaine cherchera à se structurer suivant (voir fi-
gure 1) :
1. Une application sur un serveur (API ) qui traitera les données et assurera la persistance ;
2. Une application sur chaque type de client, qui utilise ce serveur via des requêtes, et gère
l’interface (par exemple une Interface Homme Machine (IHM)).
Acteur API Base de

secondaires Serveur HTTP données
s
do
ée
requêtes
données
re
es
nn
nn
qu
êt
do
ée
qu
êt
s
es
re
Client Client Appli. etc.

Mobile Web Tierce
Figure 1 : La structure typique d’une application multi plate-formes
On aura dans la mesure du possible intérêt à limiter le plus possible le travail côté client
pour les raisons suivantes :
1. L’implémentation côté client dépend de la plate-forme et l’implémentation sur le serveur

constitue un forme de factorisation du code.
2. Sur certaines plate-formes, comme dans le cas des applications web en JavaScript, la
sécurité et la confidentialité côté client sont très mauvaises, alors que nous pouvons
implémenter la sécurité côté serveur.
Cependant, dans la mesure du possible, les opérations peu sensible, par exemple concernant
l’ergonomie, se feront côté client pour limiter les coûts d’infrastructure (nombre de serveurs...)
et améliorer la réactivité de l’application.
4
TABLE DES MATIÈRES
Le cas de l’application Web

Dans ce cours, nous étudions le développement d’applications Web (auxquelles on accède via
un navigateur internet), avec une architecture client/serveur dans laquelle (voir la figure 2) :
• Notre API est un serveur HTTP implémenté en PHP avec une architecture MVC et
DAL ;
• Notre application côté client est en JavaScript (qui s’est imposé comme un langage stan-
dard côté client), et utilise la librairie jQuery pour la gestion des événements, des vues,
et des interactions (requêtes et échange de données au format JSON ) avec le serveur.
Client : IHM requêtes Serveur : API

points d’entrée et actions
événements utilisateur GET, POST, PUT, DELETE persistance
architecture MVC
requêtes asynchrones BD
données
parse/génère JSON Driver de BD
parse/génère JSON
JSON architecture DAL (génér./exec. SQL)
génération vues HTML
Figure 2 : L’architecture client/serveur de notre application Web
5
Chapitre 1
Premiers pas en JavaScript
1.1 Balise <script> et Hello world en JavaScript

1.1.1 Hello Word Avec document.write
Une première manière d’insérer un script JavaScript dans un fichier HTML est de mettre le
code JavaScript dans une balise <script></script>. On a alors accès au document dans le
code JavaScript et on peut sortir du code HTML :
Figure 1.1 : Illustration du code source 1.1
Code Source 1.1 : /bases-js/ex01-helloWorldTest.html (cf. Fig 1.1)

1 <!doctype HTML>
2 <html lang=” f r ”>
3 <head>
4 <meta charset=”UTF−8” />
5 <t i t l e>H e l l o World en J a v a s c r i p t</ t i t l e>
6 </head>
7 <body>
8 <p>
9 <s c r i p t>
10 document . w r i t e ( ” H e l l o w o r l d ! ” ) ;
11 </s c r i p t>
12 </p>
13 </body>
14 </html>
1.1.2 Hello Word Avec la Méthode alert de Popup

Une autre manière d’insérer un script JavaScript dans un fichier HTML est de mettre le code
JavaScript dans un fichier .js séparé, qui est inclus dans le HTML au niveau du header par
une balise <script src=''...''></script>.
6
Chapitre 1 : Premiers pas en JavaScript
Code Source 1.2 : /bases-js/ex02-helloWorldTest.html (cf. Fig 1.2)

1 <!doctype HTML>
3 <head>
6 <p>
7 <s c r i p t src=” . /ex02−helloWorld . j s ”></s c r i p t>
8 </p>
9 </head>
10 <body>
11 </body>
12 </html>
Code Source 1.3 : /bases-js/ex02-helloWorld.js

1 a l e r t ( ” H e l l o World ! ” ) ;
Dans ce dernier cas, on ne peut pas générer de code directement dans le document HTML
(avec document.write) dans le fichier JavaScript, mais il y a d’autres avantages (factorisation
et mise en cache du code JavaScript partagé entre plusieurs pages HTML par exemple).
La fonction alert peut par exemple utilisé pour du débuggage si l’on ne dispose pas d’un
outil de debug intégré dans notre IDE.
1.1.3 Document Template et Modification Dynamique de la Vue

Dans une application HTML/JavaScript côté client, on organise souvent le code avec, d’une
part, un squelette de document HTML, appelé template, et d’autre part des fichiers JavaScript,
inclus le plus tard possible dans la page HTML, qui modifie a posteriori le document pour
générer certaines parties dynamiquement.
Code Source 1.4 : /bases-js/ex02bis-helloWorldTemplateTest.html

1 <!doctype HTML>
3 <head>
6 </head>
7 <body>
7
Rémy Malgouyres, https://malgouyres.org Programmation JavaScript, Patterns, Web
8 <!−− Cré a t i o n d ’ une page ” Template ” , s q u e l e t t e de n o t r e page −−>

9 <!−− Paragraphe q u i va c o n t e n i r l e code −−>
10 <p id=” p a r a g r a p h e R e s u l t a t ”></p>
11 <!−− I n c l u s i o n du f i c h i e r J a v a S c r i p t pour l e code dynamique −−>
12 <s c r i p t src=” . / e x 0 2 b i s − h e l l o W o r l d T e m p l a t e . j s ”></s c r i p t>
13 </body>
14 </html>
Code Source 1.5 : /bases-js/ex02bis-helloWorldTemplate.js

1 // Géné r a t i o n dynamique de code HTML :
2 var codeHTML = ” H e l l o w o r l d ! ” ;
3 // Mise à j o u r de l a vue
4 document . getElementById ( ” p a r a g r a p h e R e s u l t a t ” ) . innerHTML = codeHTML ;
1.2 Types, Variables et Portée

Le JavaScript est un langage faiblement typé, car on n’indique pas le type des variables lors
de la déclaration. Lors le la déclaration des variables, le type est fixé implicitement par le type
de la donnée affectée à la variable.
La déclaration de la variable peut contenir ou non le mot clef var. Un variable déclarée
avec le mot clef var (on parle de déclaration explicite) est locale à la fonction où la variable
est déclarée. Une variable déclarée sans le mot clef var (on parle de déclaration implicite) est
globale.
Il n’y a pas, contrairement au C++ ou Java, de visibilité locale à un bloc. Un variable
déclarée n’importe où dans une fonction est visible dans toute la fonction au moins. Pour cette
raison, on déclarera systématiquement les variables locales à la fonction au début du corps de la
fonction, contrairement aux bonnes pratiques dans d’autres langages où on déclare la variable
au plus près de son point de première utilisation.
Dans les programmes assez gros structurés en modules ou packages, on peut créer en JavaS-
cript l’équivalent d’un namespace par un patron de conception consistant à mettre le code de
l’ensemble d’un module dans le corps de définition d’une fonction ou dans un littéral définissant
un objet (voir plus loin pour la notion d’objet).
1.3 Fonctions
Les fonctions en JavaScript sont déclarées par le mot clef function. c’est un type de données
comme un autre, et une fonction peut ainsi être affectée à une variable. Voici un exemple de
fonction qui calcule le prix TTC d’un produit à partir de son prix hors taxes. Comme les
paramètres des fonctions ne sont pas typés, on peut vérifier le type des paramètres dans la
fonction et éventuellement renvoyer une exception si le type du paramètre effectif n’est pas le
bon.
Code Source 1.6 : /bases-js/ex03-functionTest.html
1 <!doctype HTML>
3 <head>
8
5 <t i t l e>F o n c t i o n s</ t i t l e>

6 </head>
7 <body>
8 <!−− Cré a t i o n d ’ une page ” Template ” , s q u e l e t t e de n o t r e page −−>
9 <!−− Paragraphe q u i va c o n t e n i r l e code −−>
11 <!−− I n c l u s i o n du f i c h i e r J a v a S c r i p t pour l e code dynamique −−>
12 <s c r i p t src=” . / e x 0 3 − f u n c t i o n . j s ”></s c r i p t>
13 </body>
14 </html>
Code Source 1.7 : /bases-js/ex03-function.js

1 /* * @ d e s c r i p t i o n C a l c u l e l e p r i x TTC d ’ un p r o d u i t
2 * @ f u n c t i o n calculPrixTTC
3 * @param {number} prixHT − Le p r i x h o r s t a x e du p r o d u i t
4 * @param {number} tauxTVA − Le t a u x de TVA à a p p l i q u e r
5 * @throws S i l e s p a r a m è t r e s prixHT e t tauxTVA ne s o n t pas d e s nombres
6 */
7 var calculPrixTTC = function ( prixHT , tauxTVA ) {
8 i f ( ! ( typeof prixHT == ” number ” ) | | ! ( typeof tauxTVA == ” number ” ) ) {
9 throw new E r r o r ( ” Function calculPrixTTC a p p e l é e a v e c paramètre i n c o r r e c t . ” )
10 }
11 return prixHT *(1.0+tauxTVA / 1 0 0 . 0 ) ;
12 };
13
14
16 var codeHTML = ” ” ;
17 // Appel c o r r e c t de l a f o n c t i o n :
18 try {
19 codeHTML += ” P r i x TTC : ” + calculPrixTTC ( 1 8 0 . 0 , 1 9 . 6 ) ;
20 } catch ( e r r ) {
21 alert ( err ) ;
22 }
23 // Appel i n c o r r e c t de l a f o n c t i o n d é c l e n c h a n t une e x c e p t i o n :
24 try {
25 codeHTML += ” P r i x TTC : ” + calculPrixTTC ( ” coucou ” , 1 9 . 6 ) ;
26 } catch ( e r r ) {
27 alert ( err ) ;
28 }
Notons que l’on peut aussi déclarer une fonction un peu comme en PHP de la manière
suivante :
Code Source 1.8 : Ne jamais faire ça !

1 function myFunction (myParam) {
2 return (myParam < 0 ) ;
3 }
mais la fonction est alors globale (son nom existe dans tout le programme).
9
La bonne pratique consiste à déclarer les éléments d’un programme de sorte

qu’ils aient la portée la plus locale possible, donc à déclarer la fonction avec le
mot clé var comme dans le premier exemple de fonction ci-dessus.
1.4 Objets
Un objet JavaScript rassemble plusieurs propriétés, qui peuvent être des données, d’autres
objets, ou encore des fonctions, alors appelées méthodes. Un objet n’est ni tout à fait une
structure comme en C, ni tout à fait une classe comme dans un langage objet classique. Par
exemple, un objet JavaScript n’a pas de visibilité (privée, public) pour ses propriétés. Par
ailleurs, le principal mécanisme d’héritage en JavaScript se fait par la notion de prototype et
est très différent de l’héritage dans les langages objet classiques. Là encore, on peut mimer une
notion de visibilité via des patrons de conception.
Les noms de propriétés peuvent être
• Soit une chaîne de caractère (comme ”nom de propriété !”) quelconque (respecter les
doubles quotes dans un tel cas).
• Soit des noms légaux (commençant par une lettre suivi par une suite de lettres, chiffres,
et underscores (caractère _) auquel cas les doubles quotes sont optionnelles pour désigner
le nom.
1.4.1 Création d’un objet au moyen d’un littéral

On peut créer un nouvel objet par un littéral, en définissant ses propriétés des accolades {}. On
met alors chaque nom de propriété suivi d’un : suivi de la valeur de la propriété. Les propriétés
ainsi construites sont séparées par des virgules.
Code Source 1.9 : /bases-js/ex04-objectLitteral.js

1 /* * @ d e s c r i p t i o n L i t t é r a l d é f i n i s s a n t un o b j e t a p p e l é ” p r o d u i t ” */
2 var p r o d u i t = {
3 ” denomination ” : ” Notebook s o u s Ubuntu 4 c o r e s 2 . 0GB” ,
4 ” prixHT ” : 1 8 0 . 0 ,
5 ”tauxTVA” : 1 9 . 6
6 };
7 /* *
8 * @ d e s c r i p t i o n C a l c u l e l e p r i x TTC d ’ un p r o d u i t
10 * @param { O b j e c t } prod − Le p r o d u i t à t r a i t e r
11 * @param {number} prod . prixHT − Le p r i x h o r s t a x e du p r o d u i t
12 * @param {number} prod . tauxTVA − Le t a u x de TVA à a p p l i q u e r
13 * @throws S i l e s p r o p r i é t é s du paramètre prod ne s o n t pas d e s nombres
14 */
15 var calculPrixTTC = function ( prod ) {
16 // Test d ’ e x i s t e n c e d e s p r o p r i é t é s de l ’ o b j e t :
17 i f ( ” prixHT ” in prod && ”tauxTVA” in prod ) {
18 return prod . prixHT *(1.0+ prod . tauxTVA / 1 0 0 . 0 ) ;
19 } else {
20 // R e j e t d ’ une e x c e p t i o n p e r s o n n a l i s é e :
21 // On r e j e t t e un o b j e t a v e c une prop . ”name” e t une prop . ” message ” .
22 throw {
10
23 name : ”Bad Parameter ” ,

24 message : ” Mauvais t y p e de paramètre pour l a f o n c t i o n calculPrixTTC ”
25 };
26 }
27 };
28
29 // E s s a i d ’ a p p e l de l a f o n c t i o n
30 try {
31 var codeHTML = ” P r i x TTC du p r o d u i t \” ”+p r o d u i t . denomination
32 +” \” : ”+calculPrixTTC ( p r o d u i t ) ;
33 } catch ( e ) { // a f f i c h a g e de l ’ e x c e p t i o n p e r s o n n a l i s é e .
34 a l e r t ( ”Une e r r e u r \” ” + e . name + ” \” s ’ e s t p r o d u i t e :\n” + e . message ) ;
35 }
1.4.2 Méthodes
Un objet peut contenir des propriétés qui sont de type function. On parle alors de méthode de
l’objet. Dans une méthode, on accède aux propriétés des l’objet grâce à l’identificateur this,
désignant l’objet auquel appartien la méthode.
Code Source 1.10 : /bases-js/ex05-objectMethod.js (cf. Fig 1.3)

4 ” prixHT ” : 1 8 0 . 0 ,
5 ”tauxTVA” : 1 9 . 6 ,
6 /* *
8 * @method calculPrixTTC
9 * @return Le p r i x TTC du p r o d u i t
10 */
11 getPrixTTC : function ( ) {
12 return t h i s . prixHT *(1.0+ t h i s . tauxTVA / 1 0 0 . 0 ) ;
13 }
14 };
15
11
16 // F on ct i o n dans l e c o n t e x t e g l o b a l :
17 /* * @ d e s c r i p t i o n Gé nère l e code HTML pour a f f i c h e r un o b j e t q u e l c o n q u e
18 * @function getHtmlObjet
19 * @param { O b j e c t } o b j e t − L ’ o b j e t à t r a i t e r
20 * @return Le code HTML pour a f f i c h e r l ’ o b j e t
21 */
22 var getHtmlObjet = function ( o b j e t ) {
23 var c h a i n e = ” ” ;
24 // Parcours de t o u t e s l e s p r o p r i é t é s de l ’ o b j e t ( s t y l e ” f o r e a c h ” ) :
25 fo r ( var nom in o b j e t ) {
26 c h a i n e += ” o b j e t [ \ ” ”+nom+” \ ” ] = ”
27 + o b j e t [ nom ] // Appel de l a mé t h o d e t o S t r i n g par d é f a u t
28 +”<br />” ;
29 }
30 return c h a i n e ;
31 } ;
32
33 // a p p e l d ’ une f o n c t i o n d é f i n i e dans l e c o n t e x t e g l o b a l :
34 var codeHTML = ”<p>” + getHtmlObjet ( p r o d u i t ) + ”</p>” ;
35 // a p p e l d ’ une mé t h o d e :
36 codeHTML += ”<p>P r i x TTC : ” + p r o d u i t . getPrixTTC ( ) + ”</p>” ;
Une méthode d’objet JavaScript n’est pas tout à fait comme une méthode d’un langage à
objet classique, car la méthode JavaScript existe en autant d’exemplaires qu’il y a d’instance
des objets. Nous verrons plus loin la notion de prototype, qui permet de crée des méthodes qui
existent en un seul exemplaire pour toute une classe d’objets ayant les mêmes propriétés.
1.4.3 Objets Imbriqués (Composites et Composés)

Il est possible, dans un littéral d’objet, de créer une propriété qui est elle-même un objet. On
peut parler de composite pour l’objet qui contient un autre objet, qui est alors un composé.
Code Source 1.11 : /bases-js/ex06-nestedObjects.js (cf. Fig 1.4)

3 denomination : ” Notebook s o u s Ubuntu ” ,
4 prixHT_base : 1 8 0 . 0 ,
5 tauxTVA : 2 0 . 0 ,
6 /* * @ d e s c r i p t i o n O b j e t ” n i c h é ” dans un sur−o b j e t ( O p t i o n s du p r o d u i t ) */
7 options : {
8 p r o c e s s o r : ” I n t e l 4 c o r e s 2 . 5 Ghz” ,
12
9 memory : ” 4GB” ,
10 ” p r i x s u p p l é m e n t a i r e HT” : 5 0 . 0 ,
11 /* * @ d e s c r i p t i o n Gé nère l e code HTML d e s o p t i o n s
12 * @method getHTML
13 */
14 getHtml : function ( ) {
15 return t h i s . p r o c e s s o r + ” ” + t h i s . memory +
16 ” ( s u p p l é ment : ” + t h i s [ ” p r i x s u p p l é m e n t a i r e HT” ] + ” &euro ; ) ” ;
17 }
18 },
19 /* * @ d e s c r i p t i o n Gé nère l e code HTML c o m p l e t du p r o d u i t
21 */
23 return t h i s . denomination +
24 ”<br />p r i x TTC t o u t compris : ”
25 + ( t h i s . prixHT_base + ( t h i s . o p t i o n s [ ” p r i x s u p p l é m e n t a i r e HT” ] | | 0 . 0 )
)
26 *(1.0+ t h i s . tauxTVA / 1 0 0 . 0 )
27 + ” &euro ;<br />” + t h i s . o p t i o n s . getHtml ( ) + ”<br />” ;
28 }
29 };
30
32 var codeHTML = ”<p>” + p r o d u i t . getHtml ( ) + ”</p>” ;
On peut aussi choisir de définir l’objet contenant les options dans une méthode getOptions
du composite, qui retourne un objet. La méthode getOptions joue alors un rôle de “fabrique”.
Code Source 1.12 : /bases-js/ex06-objectReturnedInMethod.js

4 prixHT_base : 1 8 0 . 0 ,
5 tauxTVA : 2 0 . 0 ,
6 /* * @ d e s c r i p t i o n C o n s t r u c t i o n d ’ un o b j e t dans une mé t h o d e
7 */
8 g e t O p t i o n s : function ( ) {
9 // Cré a t i o n de l ’ o b j e t o p t i o n dans l a f o n c t i o n (” f a b r i q u e ” )
10 return {
12 memory : ”4GB” ,
16 */
18 return t h i s . p r o c e s s o r + ” ” + t h i s . memory +
20 }
21 };
22 },
13
25 */
29 + ( t h i s . prixHT_base
30 + ( t h i s . g e t O p t i o n s ( ) [ ” p r i x s u p p l é m e n t a i r e HT” ] | | 0 . 0 ) )
31 *(1.0+ t h i s . tauxTVA / 1 0 0 . 0 )
32 + ” &euro ;<br />” + t h i s . g e t O p t i o n s ( ) . getHtml ( ) + ”<br />” ;
33 }
34 };
35
37 var codeHTML = ”<p>” + p r o d u i t . getHtml ( ) + ”</p>” ;
1.4.4 Constructeur d’Object et mot réservé new

On peut créer un objet via le constructeur Object. Voici un exemple où l’on crée un objet
qui représente un produit. On crée ensuite une fonction qui calcule le prix TTC de ce produit
après avoir testé l’existence d’attributs.
Code Source 1.13 : /bases-js/ex07-objectNew.js

1 /* * @ d e s c r i p t i o n I n s t a n t i a t i o n d ’ un O b j e t ” p r o d u i t ” */
2 var p r o d u i t = new Object ( ) ;
3 // Ajout dynamique de p r o p r i é t é s
4 p r o d u i t . denomination = ” Notebook s o u s Ubuntu 4 c o r e s 2 . 0GB” ;
5 p r o d u i t . prixHT = 1 8 0 . 0 ;
6 p r o d u i t . tauxTVA = 2 0 . 0 ;
7
8 /* *
11 * @param { O b j e c t } prod − Le p r o d u i t à t r a i t e r
12 * @param {number} prod . prixHT − Le p r i x h o r s t a x e du p r o d u i t
13 * @param {number} prod . tauxTVA − Le t a u x de TVA à a p p l i q u e r
14 * @throws S i l e s p r o p r i é t é s du paramètre prod ne s o n t pas d e s nombres
15 */
16 var calculPrixTTC = function ( prod ) {
17 i f ( ” prixHT ” in prod && ”tauxTVA” in prod ) {
18 return prod . prixHT *(1.0+ prod . tauxTVA / 1 0 0 . 0 ) ;
19 } else {
20 throw new E r r o r ( ” Mauvais t y p e de paramètre pour l a f o n c t i o n calculPrixTTC ” ) ;
21 }
22 }
23 // Géné r a t i o n de code HTML
24 var codeHTML = ” P r i x TTC du p r o d u i t \” ”+p r o d u i t . denomination+” \” : ”+
calculPrixTTC ( p r o d u i t ) ;
Dans la mesure du possible, il est préférable de définir les objets JavaScript par des littéraux
car ça peut être plus efficace que la construction dynamique avec le constructeur Object.
14
1.5 Tableaux (le type Array)

1.5.1 Notion d’Array et construction
Dans les langages classique, un tableau est une séquence d’éléments, contigus en mémoire, avec
un accès aux éléments par un indice entier. En JavaScript, les tableaux sont des objets dont
les propriétés sont automatiquement nommées avec les chaînes '0', '1', '2'. Ces tableaux
possèdent certains avantages des objets, comme par exemple la possibilité d’avoir des éléments
de types différents, mais sont significativement plus lents que les tableaux classiques.
Un tableau peut être créé par un littéral, entre crochets [ ].
Code Source 1.14 : /bases-js/ex08-arrayLitterals.js (cf. Fig 1.5)

1 /* * @ d e s c r i p t i o n Dé c l a r a t i o n d ’ un Array s o u s forme de l i t t é r a l */
2 var tab = [ 1 , 3 , ” coucou ” , 6 ] ;
3 tab [ 4 ] = 9 ; // Ajout d ’ un é l é ment
5 var codeHTML = ”Donné e s du t a b l e a u :<br />” ;
6 // Parcours du t a b l e a u a v e c un i n d i c e numé r i q u e
7 for ( var i =0 ; i<tab . l e n g t h ; i ++){
8 i f ( i > 0) {
9 codeHTML += ” , ”
10 }
11 codeHTML += tab [ i ] ;
12 }
Un tableau peut aussi être créé par le constructeur d’Array. Celui-ci peut prendre en argu-
ment soit le nombre de cases du tableau à allouer, soit les éléments du tableau initialisés lors
de la création du tableau. On peut toujours ajouter des éléments au tableau par une simple
affectation de ces éléments et la mémoire évolue automatiquement.
Code Source 1.15 : /bases-js/ex09-arraysNew.js
1 /* * @ d e s c r i p t i o n Dé c l a r a t i o n d ’ un Array s o u s forme de l i t t é r a l */
2 var tab = new Array ( 1 , 3 , ” coucou ” , 6 ) ;
3 tab [ 4 ] = 9 ; // Ajout d ’ un é l é ment
5 var codeHTML = ”Donné e s du t a b l e a u :<br />” ;
6 // Parcours du t a b l e a u a v e c un i n d i c e numé r i q u e
7 for ( var i =0 ; i<tab . l e n g t h ; i ++){
8 i f ( i > 0) {
9 codeHTML += ” , ”
10 }
15
11 codeHTML += tab [ i ] ;
12 }
De même que pour les objets, il est préférable de définir les tableaux JavaScript par des
littéraux car ça peut être plus efficace que la construction dynamique avec le constructeur
Array.
1.5.2 Quelques méthodes prédéfinies sur le type Array

Considérons un tableau array obtenu par invocation du contructeur d’Array :
Code Source 1.16 :
1 var a r r a y = new Array ( . . . ) ;
On peut manipuler le tableau avec des méthodes de collection de conception classique :
• Suppression du dernier élément (l’élément supprimé est retourné par la méthode) :

function array.pop();
• Suppression du premier élément (l’élément supprimé est retourné par la méthode) :

function array.shift();
• Suppression d’une partie des éléments :

function array.splice(firstElementKey, numberOfElementsToRemove);
• Ajout d’un ou plusieurs élément(s) à la fin :

function array.push(element1, element2...);
• Tri d’un tableau : function array.sort(compareFuntion);

où compareFuntion est une fonction permettant de comparer deux éléments du tableau
qui a pour prototype : function compareFuntion(a, b);
et renvoie 0 si les éléments sont égaux, un nombre négatif si a est strictement inférieur à
b, et un nombre positif si a est strictement supérieur à b.
Pour les chaînes de caractère, on peut utiliser la méthode string.localCompare(that)
(similaire à strcmp).
1.6 Exemple : traitement d’un formulaire avec jQuery

1.6.1 Qu’est-ce que jQuery ?
La librairie jQuery, dont on peut obtenir le code et la documentation sur api.jquery.com,
permet de simplifier la gestion de différents aspects d’une application côté client en JavaScript :
• Gestion des événements utilisateur ;
• Récupération des valeurs saisies dans un formulaire ;
• Manipulation du document via le DOM ;
16
• Requêtes asynchrones (transfert de données entre serveur et client en dehors du charge-

ment initial de la page) ;
• Codage des données pour la transfert (par exemple JSON ).
Pour utiliser jQuery, il suffit d’insérer son code dans un script, via une balise (remplacer
x.xx.x par le numéro de version utilisé sur jquery.com) :
<script src="https://code.jquery.com/jquery-x.xx.x.js"></script>
Pour travailler offline, on peut utiliser jQuery en local après téléchargement dans le répertoire
courant :
<script src="./jquery-x.xx.x.js"></script>
Les méthodes de jQuery peuvent être appelées (avec des argument args) par l’abréviation
$(args).
1.6.2 Récupérer, filtrer et afficher les données d’un formulaire

Le script suivant récupère les données d’un formulaire, les filtres par expressions régulières, et
les affiche en modifiant le DOM.
Plus précisément, le script réalise les opération suivantes :
• Déclaration d’un gestionnaire (fonction afficheDonneesForm) de l’événement submit du

formulaire ayant formStudentData pour ID ;
• Dans cette fonction afficheDonneesForm,
– Récupération des valeurs saisies dans les éléments ayant nom et annee pour ID, qui
sont respectivement un input et un select.
– Test sur la forme (expression régulière, champs obligatoire,...) sur les valeurs des
champs nom et année du formulaire (à l’aide d’un littéral de type expression régulière
entre slashes /.../).
– Ajout dans le <span> ayant spanResultat pour ID du code HTML du résultat de
la saisie (affichage du nom et de l’année, ou le cas échéant un message d’erreur).
– Empêcher le comportement par défaut de la soumission du formulaire (appel du
script action côté serveur lors du click sur l’input de type submit).
Voici le fichier HTML :

Code Source 1.17 : /bases-js/ex10-jQueryFormTest.html (cf. Fig 1.6)
1 <!doctype HTML> <!−− Template de Document HTML −−>
3 <head>
5 <t i t l e>F o r m u l a i r e s avec jQuery</ t i t l e>
6 </head>
7 <body>
8 <form id=” formStudentData ”>
9 <p>
17
10 <l a b e l for=”nom” >Nom</ l a b e l>

11 <i nput name=”nom” id=”nom” />
12 </p>
13 <p>
14 <s e l e c t name=” annee ” id=” annee ”>
15 <option value=” c h o i s i s s e z ” selected disabled>−− c h o i s i s s e z −−</option>
16 <option value=” Première ”>Première ann é e</option>
17 <option value=” Deuxième ”>Deuxième ann é e</option>
18 </s e l e c t>
19 </p>
20 <p>
21 <i nput type=” s u b m i t ” value=” V a l i d e r ” />
22 </p>
23 </form>
24
25 <p>
26 <s trong>donn é e s s a i s i e s&nbsp ; :</s trong><br />
27 <!−− Les r é s u l t a t s de l a s a i s i e v o n t s ’ a f f i c h e r dans ce span −−>
28 <span id=” s p a n R e s u l t a t ”></span>
29 </p>
30 <s c r i p t src=” j q u e r y . j s ”></s c r i p t>
31 <s c r i p t src=” ex10−jQueryForm . j s ”></s c r i p t>
32 </body>
33 </html>
Il est recommandé de mettre, dans la mesure du possible, le script à la fin du document,

car cela limite le coût et le délai des chargements et parsing de la librairie jQuery lors d’un
premier chargement (ou rafraîchissement) de la page. Voici le fichier JavaScript :
Code Source 1.18 : /bases-js/ex10-jQueryForm.js

1 /* * @ d e s c r i p t i o n C a l l b a c k : Ré cup é r e e t a f f i c h e l e s i n p u t s de f o r m u l a i r e .
2 * L ’ i m p l é m en ta ti on u t i l i s e jQuery .
3 * @ f u n c t i o n afficheDonneesForm
4 * @param { jQueryEvent } e v e n t − l ’ é v é nement ( de t y p e s u b m i t ) g é r é par ce Handler
5 */
6 var a f f i c h e D o n n e e s F o r m = function ( e v e n t ) {
7 // r é cup é r a t i o n ( v i a jQuery ) de l a v a l e u r de l ’ i n p u t d ’ ID ”nom”
8 var nom = $ ( ”#nom” ) . v a l ( ) ;
9 // r é cup é r a t i o n ( v i a jQuery ) de l a v a l e u r du s e l e c t d ’ ID ” annee ”
18
10 var annee = $ ( ”#annee ” ) . v a l ( ) ;

11
12 // t e s t de champs o b l i g a t o i r e s e t d ’ e x p r e s s i o n s r é g u l i è r e s u r l e nom
13 i f ( ( annee !== ” Première ” && annee !== ” Deuxième ” ) | |
14 ! /^ [ a−zA−ZÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæ ¸ è é ê ö ì í î ïðñ ò ó ôõö÷øùúûĀāüýþÿ
\ s ” ’ −]{1 ,} $/
15 . t e s t (nom) ) {
16 $ ( ”#s p a n R e s u l t a t ” ) . html ( ” Problème : forme d ’ un champs i n c o r r e c t . ” ) ;
17 } else {
18 $ ( ”#s p a n R e s u l t a t ” ) . html ( ”<em>Nom : </em>” + nom + ”<br />” +
19 ”<em>Annee : </em>” + annee ) ;
20 }
21 // É v i t e r d ’ a p p e l e r l ’” a c t i o n ” par d é f a u t ( r e q u ê t e s u r un s c r i p t PHP, e t c . )
22 // du f o r m u l a i r e l o r s du c l i c k s u r l e bouton s u b m i t
23 event . preventDefault ( ) ;
24 };
25
26 // G e s t i o n de l ’ é v é nement s u b m i t du f o r m u l a i r e .
27 // On d é f i n i t afficheDonneesForm comme g e s t i o n n a i r e ( h a n d l e r )
28 // de l ’ é v é nement .
29 $ ( ”#formStudentData ” ) . on ( ” s u b m i t ” , a f f i c h e D o n n e e s F o r m ) ;
19
Chapitre 2
Programmation Fonctionnelle et Objet

en JavaScript
On distingue en JavaScript deux catégories de patterns (et éventuellement des patterns hy-
brides) :
• Les patterns dits fonctionnels s’appuient sur les aspects de JavaScript en tant que langage
fonctionnel. Autrement dit, ces patterns exploitent les propriétés des fonctions JavaScript
en tant que données, ainsi que la portée des variables dans ces fonctions.
• Les patterns dits prototypaux s’appuient sur les aspects de JavaScript en tant que langage
prototypal. Ceci est lié à une propriété que possèdent tous les objets JavaScript, appelée
le prototype. Le prototype permet de partager des propriétés entre plusieurs objets, et
il conduit naturellement à des notions d’héritage. Il permet aussi d’augmenter les objets
pour leur rajouter des propriétés, bien après que ces objets aient été définis, y compris
sur les types de base comme String.
Nous commencerons par voir un certain nombre de patterns fonctionnels, qui permettent
de faire de la programmation objet avec des notions comme la visibilité, la structuration d’une
application en modules (ou packages), des fabriques, ou encore des patterns permettant le
découplage des composants d’une application à base d’événements, ou comme subscriber/pu-
blisher.
Ces patterns peuvent paraître déconcertant au premier abord pour un développeur habitué
aux langages objet classiques. Avec un peu d’habitude, on en vient à considérer que JavaScript
est un excellent langage objet, très expressif et très souple. Cependant, certains problèmes de
conception du langage, qui n’ont pu être corrigés pour assurer la compatibilité ascendante,
nécessitent quelques précautions, sous la forme de bonnes habitudes.
2.1 Passages d’Arguments, Objets this et Pattern that

2.1.1 Passage d’arguments par objets
En JavaScript, il est souvent plus pratique, plutôt que de passer une série de paramètres, ce
qui oblige à tenir compte de l’ordre de ces paramètres, de donner en argument à une fonction
les données dans les propriétés d’un objet, soit construit à la volée, soit construit auparavant.
20
Chapitre 2 : Programmation Fonctionnelle et Objet en JavaScript
Ce pattern offre souvent plus de souplesse que la manière classique. Dans l’exemple suivant,
la fonction génère le code HTML de l’objet passé en paramètre, sans savoir de quel type d’objet
il s’agit. On l’utilise ensuite pour afficher une adresse.
Code Source 2.1 : /pattern-fonct/ex02-affichageObjetBasic.js

1 /* * @summary Cré ee un cha î ne de c a r a c t è r e l i s i b l e q u i r e p r é s e n t e l ’ o b j e t .
2 * @ d e s c r i p t i o n On s u p p o s e que t o u t e s l e s p r o p r i é t é s de l ’ o b j e t s o n t de t y p e
3 * cha î ne ou nombre ( e l l e s p e u v e n t ê t r e automatiquement c o n v e r t i e s en cha î ne )
4 * @function objectToHtmlTable
5 * @param { O b j e c t } s p e c − L ’ o b j e t dont l e s p r o p r i é t é s d o i v e n t ê t r e a f f i c h é e s
6 * @return Le code HTML pour a f f i c h e r l e s p r o p r i é t é s de l ’ o b j e t
7 */
8 var objectToHtmlTable = function ( s p e c ) {
9
10 var c h a i n e = ”<table><tbody>” ;
11 // Parcours d e s p r o p r i é t é s de l ’ o b j e t s p e c p a s s é en argument
12 fo r ( propertyName in s p e c ) {
13 // La p r o p r i é t é e s t d é f i n i e e t non v i d e ,
14 // e l l e ne v i e n t pas du p r o t o t y p e de l ’ o b j e t e t ce n ’ e s t pas une f o n c t i o n
15 i f ( s p e c [ propertyName ] && s p e c . hasOwnProperty ( propertyName )
16 && typeof s p e c [ propertyName ] != ” f u n c t i o n ” ) {
17 // Concat é n a t i o n à une cha î ne . Les nombres s o n t c o n v e r t i s .
18 c h a i n e += ’<tr><td s t y l e =”text −align : right ;”><em>’ + propertyName + ” :</
em></td>” +
19 ”<td>” + s p e c [ propertyName ] + ”</td></ tr>” ;
20 }
21 };
22 c h a i n e += ”<tbody></table>” ;
24 };
Code Source 2.2 : /pattern-fonct/ex02-affichageObjetBasicTest.js

1 // I n v o c a t i o n de l a f o n c t i o n a v e c l e p a t t e r n
2 var codeHTML = objectToHtmlTable ( {
3 i d : ”0 f 3 e a 7 5 9 b 1 ” ,
4 numeroRue : ”2 b i s ” ,
5 r u e : ”Rue de l a Paix ” ,
6 complementAddr : ” ” ,
7 c o d e P o s t a l : ” 63000 ” ,
8 v i l l e : ” Clermont−Ferrand ” ,
9 pays : ” France ”
10 }) ;
11 // U t i l i s a t i o n de l a v a l e u r r e t o u r n é e pour g éné r e r l a vue
2.1.2 Invocation de Méthode avec le Pattern “apply”

Le pattern apply permet d’“appliquer” une méthode d’un certain objet à un autre objet. En
d’autres termes, pattern apply permet d’exécuter une méthode d’un objet comme si elle était
définie dans un autre objet. Plus précisément, lors de l’invocation de la méthode suivant le
pattern apply, le code de la fonction est exécuté, mais chaque occurrence du mot réservé this,
au lieu de faire référence à l’objet contenant la méthode, va faire référence à un autre objet, qui
21
est passé en premier argument lors de l’invocation. Les arguments ordinaires de la méthode,
suivant la définition de ses paramètres, sont transmis, lors de l’invocation, dans un Array passé
en second argument.
Code Source 2.3 : /pattern-fonct/ex01-2-patternApplyInvocationTest.js (cf. Fig 2.1)

4 ” prixHT ” : 1 8 0 . 0 ,
5 ”tauxTVA” : 1 9 . 6 ,
6
7 /* * @ d e s c r i p t i o n Gé nère l e code HTML pour a f f i c h e r un o b j e t q u e l c o n q u e
8 * @method g e t H t m l O b j e t
9 * @param { s t r i n g } t i t r e − t e x t e du t i t r e <h2>
10 * @param { s t r i n g } b a l i s e − t y p e de b a l i s e HTML c o n t e n a n t l e code g éné r é
11 * (” p ” , ”em” , ” d i v ” , ” span ” . . . )
12 */
13 getHtml : function ( t i t r e , b a l i s e ) {
14 var c h a i n e = ”<” + b a l i s e + ”>” // On o u v r e l a b a l i s e ;
15 c h a i n e += ”<h2>” + t i t r e + ”</h2>” ;
16 // Parcours de t o u t e s l e s p r o p r i é t é s de l ’ o b j e t ( s t y l e ” f o r e a c h ” ) :
17 f o r (nom in t h i s ) {
18 i f ( t h i s . hasOwnProperty (nom) && typeof t h i s [ nom ] !== ” f u n c t i o n ” ) {
19 c h a i n e += ” o b j e t [ \ ” ”+nom+” \ ” ] = ”
20 + t h i s [ nom ] + ”</br>” ; // Appel de l a mé t h o d e t o S t r i n g par d é
faut
21 }
22 }
23 c h a i n e += ”</” + b a l i s e + ”>” ; // On ferme l a b a l i s e
25 }
26 };
27
28 /* * @ d e s c r i p t i o n Repr é s e n t e un f i l m de l a s é r i e ” S t a r Wars” */
29 var b l o c k b u s t e r = {
30 ” s e r i e s ” : ” S t a r Wars” ,
31 ” t i t l e ” : ”The Phantom Menace” ,
32 ” d i r e c t o r ” : ” George Lucas ” ,
33 ”Ép i s o d e ” : ” I ” ,
34 ” y e a r ” : ” 1999 ”
22
35 } ;
36
37 // I n v o c a t i o n c l a s s i q u e de l a mé t h o d e a f f i c h a n t l e p r o d u i t :
38 codeHTML = p r o d u i t . getHtml ( ” I n v o c a t i o n Normale ” , ” span ” ) ;
39 // I n v o c a t i o n a v e c p a t t e r n a p p l y de l a mé t h o d e de ” p r o d u i t ”
40 // pour a f f i c h e r ” b l o c k b u s t e r ” :
41 codeHTML += p r o d u i t . getHtml . apply ( b l o c k b u s t e r , // O b j e t p r e n a n t p l a c e de t h i s
42 // L i s t e d e s arguments de l a mé t h o d e :
43 [ ” I n v o c a t i o n \” a p p l y \” s u r b l o c k b u s t e r ” , // t i t r e
44 ” span ” ] ) ; // b a l i s e
2.1.3 Accès au Composite à partir du Composé (pattern that)

Une méthode d’un objet imbriqué, tel qu’un composé de la partie 1.4.3 obtenus par une fa-
brique, peut accéder aux propriétés du composite en utilisant une propriété ou une variable,
traditionnellement appelée that, qui contient la référence du composite :
Code Source 2.4 : /pattern-fonct/ex06-returnedObjectCompositeAccess.js (cf. Fig 2.2)

4 prixHT_base : 1 8 0 . 0 ,
5 tauxTVA : 2 0 . 0 ,
6 /* * @ d e s c r i p t i o n C o n s t r u c t i o n d ’ un o b j e t dans une mé t h o d e
7 */
8 g e t O p t i o n s : function ( ) {
9 // Mé m o r i s a t i o n du c o m p o s i t e pour a c c è s par l e compos é
10 var t h a t = t h i s ; // p a t t e r n t h a t ( p a r t i e 1)
11 // Cré a t i o n de l ’ o b j e t o p t i o n dans l a f o n c t i o n (” f a b r i q u e ” )
12 return {
14 memory : ”4GB” ,
18 */
23
20 // Accès au c o m p o s i t e à p a r t i r d ’ une mé t h o d e du compos é

21 var codeHTML = ”<b>Op tions du p r o d u i t \” ”
22 + t h a t . denomination // p a t t e r n t h a t ( p a r t i e 2)
23 + ” \” : </b>” ;
24 codeHTML += ”<br />” + t h i s . p r o c e s s o r + ” ” + t h i s . memory +
26 return codeHTML ;
27 }
28 };
29 },
32 */
36 + ( t h i s . prixHT_base
37 + ( t h i s . g e t O p t i o n s ( ) [ ” p r i x s u p p l é m e n t a i r e HT” ] | | 0 . 0 ) )
38 *(1.0+ t h i s . tauxTVA / 1 0 0 . 0 )
39 + ” &euro ;<br />” + t h i s . g e t O p t i o n s ( ) . getHtml ( ) + ”<br />” ;
40 }
41 } ;
42
44 codeHTML = ”<p>” + p r o d u i t . getHtml ( ) + ”</p>” ;
2.2 Le Pattern Module

2.2.1 Cycle de Vie d’une Variable Locale à une Fonction
Une variable locale à une fonction, déclarée avec le mot clé var, n’est plus accessible à l’extérieur
de la fonction. Cependant, contrairement à ce qui se passe dans un langage comme le C, la
variable locale peut continuer à exister en mémoire après la fin de l’exécution de la fonction.
2.2.1.a Rappel sur les variables locales en C

Dans le langage C, les variables locales à une fonction sont créées dans une zone mémoire
appelée la pile, et sont automatiquement détruites lors du retour de la fonction après son
invocation.
Dans l’exemple suivant, une fonction C retourne l’adresse d’une variable locale, puis la
fonction main tente d’accéder à la zone mémoire correspondante.
Code Source 2.5 : /pattern-fonct/fonction-C/variableLocale.c

1 #include <s t d i o . h>
2
3 /* * Fo n c ti o n bugg é e q u i r e t o u r n e l ’ a d r e s s e d ’ une v a r i a b l e l o c a l e */
4 int * maFonction ( ) {
5 int x = 2 ; // v a r i a b l e l o c a l e x
6 int * pRetour = &x ; // P o i n t e u r s u r l a v a r i a b l e x
7 p r i n t f ( ”%d\n” , * pRetour ) ; // A f f i c h e x , donc 2
24
8 return pRetour ; // Retourne l ’ a d r e s s e d ’ une v a r i a b l e l o c a l e !!!!!

9 }
10
11 int main ( ) {
12 int * pointeurSurX = maFonction ( ) ; // I n v o c a t i o n de l a f o n c t i o n
13 p r i n t f ( ”%d\n” , * pointeurSurX ) ; // Erreur mé moire ! ! ! !
14 return 0 ;
15 }
Même si l’exécution peut éventuellement fonctionner sur certain compilateurs, le code n’est
pas défini dans le standard du C ANSI, et le comportement peut donner n’importe quoi ! On
peut mettre en évidence le bug avec l’outil valgrind, qui détecte une erreur mémoire (ici sur la
ligne 13) :
==3894== Use of uninitialised value of size 8

==3894== at 0x4E8476B: _itoa_word (_itoa.c:179)
==3894== by 0x4E8812C: vfprintf (vfprintf.c:1631)
==3894== by 0x4E8F898: printf (printf.c:33)
==3894== by 0x400619: main (variableLocale.c:13)
2.2.1.b Survivance des variables locales en JavaScript

En JavaScript, le cycle de vie d’une variable locale peut aller au delà du retour de la fonction
après son invocation, si on retourne une entité (objet, fonction, tableau, etc.) qui fait référence
à cette variable locale.Ceci est possible du fait que les variables locales ne sont pas gérés en
mémoire via une pile, mais comme de la mémoire dynamique libérée par le garbage collector.
La mémoire pour la variable locale ne peut donc pas être détruite tant qu’il existe une référence
à cette variable !
Dans l’exemple suivant, une fonction maFonction retourne une autre fonction locale accesVariableX,
qui elle même retourne la variable locale x de maFonction. On peut alors accéder, via la fonction
locale retournée, à la variable locale x, bien après que l’exécution de la fonction maFonction
Code Source 2.6 : /pattern-fonct/ex01-survieVariableLocaleJS.js (cf. Fig 2.3)

1
2 var maFonction = function ( ) {
3 var x = 2 ; // V a l r i a b l e l o c a l e x de t y p e ” number ” , v a l e u r é g a l e à 2
4
5 // F on c ti o n l o c a l e q u i a c c è d e à l a v a r i a b l e l o c a l e x e t l a r e t o u r n e
6 var a c c e s V a r i a b l e X = function ( ) {
7 return x ; // U t i l i s a t i o n de l a v a r i a b l e l o c a l e x
8 };
9
25
10 return a c c e s V a r i a b l e X ; // On r e t o u r n e l a f o n c t i o n l o c a l e
11 } ;
12
13 var getX = maFonction ( ) ; // On r é c u p è r e l a f o n c t i o n r e t o u r n é e par maFonction
14 codeHTML = ”La v a r i a b l e l o c a l e x a pour v a l e u r ” + getX ( ) ;
2.2.2 Principe Général du Pattern Module

Le pattern Module permet de créer des composants qui peuvent jour le rôle que jouent les classes
dans les langages objet classiques. Il permet, entre autre, de créer des données et méthodes
privées, et une interface publique avec d’autres données et méthodes, qui sont accessibles de
l’extérieur, et qui peuvent, elles, accéder aux propriétés privées.
Le pattern consiste à créer une fonction. Les données et méthodes privées sont simplement
des variables locales de la fonction. Elles ne sont donc pas visibles du monde extérieur à la
fonction. La fonction renvoie un objet, qui constitue l’interface publique du module, dont les
propriétés (données, objets ou fonctions) accèdent aux variables privées. Lorsque l’objet est
retourné, on ne peut plus accéder directement aux variables locales de la fonction, mais celles-
ci restent vivantes (leur cycle de vie ne se termine pas) tant que l’objet retourné qui s’y réfère
n’est pas lui-même détruit. Autrement dit, on peut continuer à manipuler ces variables locales
au travers des méthodes de l’interface publique.
Code Source 2.7 : /pattern-fonct/ex01-modulePattern.js
1 /* * @ d e s c r i p t i o n I l l u s t r a t i o n du p a t t e r n Module
2 * p e r m e t t a n t d ’ i m p l é menter l a v i s i b i l i t é en J a v a S c r i p t .
3 */
4 var mySecretModule = function ( d e f a u l t S e c r e t V a l u e ) {
5 /* * @ d e s c r i p t i o n Donné e p r i v é e a v e c une v a l e u r par d é f a u t
6 * ( variable locale )
7 * @private { s t r i n g } P r i v a t e S e c r e t = ( d e f a u l t S e c r e t V a l u e | ””)
8 */
9 var m y P r i v a t e S e c r e t = ( ( d e f a u l t S e c r e t V a l u e && // s ’ i l y a une v a l e u r en
paramètre
10 typeof d e f a u l t S e c r e t V a l u e === ” s t r i n g ” )
11 && d e f a u l t S e c r e t V a l u e )
12 | | ” ” ; // s i pas de v a l e u r en paramètre
13
14 /* * @ d e s c r i p t i o n T e s t e une e x p r e s s i o n r é g u l i è r e ( f i x é e ) s u r une cha î ne
15 * @ f u n c t i o n myRegexTestMethod
16 * @private
17 * @param { s t r i n g } c h a i n e − La cha î ne à t e s t e r
18 */
19 var myRegexTestMethod = function ( c h a i n e ) {
20 return ( typeof c h a i n e === ” s t r i n g ” ) && /^ [ a−z ] * $/ i . t e s t ( c h a i n e ) ;
21 };
22
23 /* * @summary I n t e r f a c e p u b l i q u e du module , s u i v a n t l e ” p a t t e r n module ” .
24 * @ d e s c r i p t i o n On c r é e un o b j e t q u i va ê t r e rendu p u b l i c
25 * Cet o b j e t va ê t r e r e t o u r n é , mais pas l e s donn é e s p r i v é e s .
26 * Les mé t h o d e s de c e t o b j e t c o n s t i t u e r o n t l e s mé t h o d e s p u b l i q u e s du module ,
27 * qui u t i l i s e n t l e s v a r i a b l e s ( et f o n ct i o n s ) priv é es ( v a r i a b l e s l o c a l e s ) .
28 */
29 var p u b l i c I n t e r f a c e = {
26
30 /* * @ d e s c r i p t i o n Donné e p u b l i q u e a v e c une v a l e u r par d é f a u t

31 * @ p u b l i c { s t r i n g } d o n n e e P u b l i q u e = ’ donn é e p u b l i q u e par d é f a u t ’
32 */
33 donneePublique : ’ donn é e p u b l i q u e par d é f a u t ’ ,
34
35 /* * @ d e s c r i p t i o n S e t t e r pour m o d i f i e r l a donn é e p r i v é e m y P r i v a t e S e c r e t
36 * @method s e t S e c r e t
37 * @public
38 * @param { s t r i n g } s e c r e t V a l u e − La v a l e u r à t e s t e r p u i s a f f e c t e r
39 * @throws S i s e c r e t V a l u e ne s u i t pas l ’ e x p r e s s i o n r é g u l i è r e
myRegexTestMethod
40 */
41 s e t S e c r e t : function ( s e c r e t V a l u e ) {
42 // Test d ’ e x p r e s s i o n r é g u l i è r e v i a l a f o n c t i n p r i v é e :
43 i f ( myRegexTestMethod ( s e c r e t V a l u e ) ) {
44 myPrivateSecret = secretValue ;
45 } else {
46 throw {
47 name : ” I l l e g a l A r g u m e n t E x c e p t i o n ” ,
48 message : ”Le s e c r e t ” + s e c r e t V a l u e + ” e s t i n v a l i d e . ”
49 };
50 }
51 },
52
53 /* * @ d e s c r i p t i o n A c c e s s e u r pour acc é d e r à l a donn é e p r i v é e m y P r i v a t e S e c r e t
54 * @method g e t S e c r e t
55 * @public
56 * r e t u r n La v a l e u r de l a donn é e p r i v é e m y P r i v a t e S e c r e t
57 */
58 g e t S e c r e t : function ( ) {
59 return m y P r i v a t e S e c r e t ;
60 },
61 } ; // Fin de p u b l i c I n t e r f a c e
62 // L ’ i n t e r f a c e p u b l i q u e du module e s t r e t o u r n é e pour u t i l i s a t i o n h o r s de l a
fonction
63 return p u b l i c I n t e r f a c e ;
64 }
Le fichier suivant teste les accès aux données et méthodes publiques du module suivant le
pattern module :
Code Source 2.8 : /pattern-fonct/ex01-modulePatternTest.js (cf. Fig 2.4)

1 // Cré a t i o n du module par i n v o c a t i o n du ” p a t t e r n module ” :
27
2 var s e c r e t M o d u l e = mySecretModule ( ” i n i t S e c r e t ” ) ;
3 // Code HTML à a j o u t e r au p a r a g r a p h e d ’ ID p a r a g r a p h e R e s u l t a t
4 var codeHTML = ” ” ;
5 // Accès à l a donn é e p u b l i q u e de l ’ i n t e r f a c e :
6 codeHTML += ” d o n n e e P u b l i q u e : ” + s e c r e t M o d u l e . donneePublique + ”<br />” ;
7 // M o d i f i c a t i o n de l a donn é e p u b l i q u e de l ’ i n t e r f a c e :
8 s e c r e t M o d u l e . donneePublique = ” n o u v e l l e donn é e p u b l i q u e ” ;
9 codeHTML += ” d o n n e e P u b l i q u e : ” + s e c r e t M o d u l e . donneePublique + ”<br />” ;
10
11 // A c c e s s e u r de s e c r e t ( v a r i a b l e l o c a l e p r i v é e du ” p a t t e r n module ” ) :
12 codeHTML += ” S e c r e t : ” + s e c r e t M o d u l e . g e t S e c r e t ( ) + ”<br />” ;
13 // T e n t a t i v e de m o d i f i e r l e s e c r e t ( l e s e t t e r p u b l i c f a i t d e s t e s t s ) :
14 try {
15 s e c r e t M o d u l e . s e t S e c r e t ( ” abcde ” ) ; // La cha î ne n ’ e n t r a î ne pas d ’ e r r e u r
17 } catch ( e ) {
18 codeHTML += ” Erreur de t y p e ” + e . name + ”<br />Message : ” + e . message + ”<br /
>” ;
19 }
20 // T e n t a t i v e de m o d i f i e r l e s e c r e t ( l e s e t t e r p u b l i c f a i t d e s t e s t s ) :
21 try {
22 s e c r e t M o d u l e . s e t S e c r e t ( ” abcde567 ” ) ; // La cha î ne g é nère une e r r e u r
24 } catch ( e ) {
25 codeHTML += ” Erreur de t y p e ” + e . name + ” : ” + e . message + ”<br />” ;
26 }
Le mécanisme du langage essentiel pour ce pattern est la portée (scope) des variables locales
à une fonction, qui s’étend aux sous-fonctions de la fonction, et à leurs sous-fonctions...
2.3 Exemple de fabrique sommaire

Dans l’exemple suivant, une fabrique, suivant un pattern module très sommaire, construit un
objet de type adresse (éventuellement partiellement rempli), en sélectionnant les propriétés que
l’objet en paramètre qui sont dans une liste.
Cet exemple est plutôt un exemple d’école et nous verrons plus loin des exemple plus
complets, les propriété de l’objet retourné manipulant des données (attributs) privées.
Code Source 2.9 : /pattern-fonct/ex03-methodLitteralParam.js
1 /* * @ d e s c r i p t i o n F a b r i q u e c r é ant un o b j e t de t y p e ” Adresse ”
2 * a v e c d e s ” a t t r i b u t s ” ( d e s p r o p r i é t é s a t t e n d u e s d é te r m i n é e s ) f i x é s .
3 * On v é r i f i e que l e s p r o p r i é t é s s o n t b i e n sp é c i f i é e s p o u r l e s ” a t t r i b u t s ” .
4 * @param { O b j e c t } s p e c − O b j e t a v e c l e s donn é e s d ’ une a d r e s s e
5 * @param { s t r i n g } s p e c . i d − l ’ i d e n t i f i a n t u n i q u e de l ’ a d r e s s e
6 * @param { s t r i n g } s p e c . numeroRue − l e numé ro de l a rue / p l a c e
7 * @param { s t r i n g } s p e c . rue − l a rue / p l a c e
8 * @param { s t r i n g } s p e c . complementAddr − Le b â timent , l i e u d i t . . .
9 * @param { s t r i n g } s p e c . c o d e P o s t a l − Le code p o s t a l
10 * @param { s t r i n g } s p e c . v i l l e − La v i l l e
11 * @param { s t r i n g } s p e c . pays − Le pays
12 * @return Une i n s t a n c e d ’ a d r e s s e ” v a l i d é e ” ( o b j e t a v e c l e s p r o p r i é t é s )
13 * @throws S i ” s p e c ” ne c o n t i e n t pas t o u t e s l e s p r o p r i é t é s a t t e n d u e s .
14 */
28
15 var f a b r i q u e A d r e s s e V e r s i o n 1 = function ( s p e c ) {
16 // O b j e t à r e t o u r n e r i n i t i a l e m e n t v i d e
17 var a d r e s s e = {} ;
18 // L i s t e d e s ” a t t r i b u t s ” d ’ une a d r e s s e ( p r o p r i é t é s a t t e n d u e s )
19 var l i s t e P r o p r i e t e s = [ ” i d ” , ”numeroRue” , ” rue ” , ” complementAddr ” ,
20 ” c o d e P o s t a l ” , ” v i l l e ” , ” pays ” ] ;
21 // Parcours d e s p r o p r i é t é s de l ’ o b j e t s p e c p a s s é en argument
22 fo r ( propertyName in s p e c ) {
23 i f ( s p e c . hasOwnProperty ( propertyName ) ) {
24 // S i l a p r o p r i é t é e x i s t e dans l e t y p e a d r e s s e :
25 i f ( l i s t e P r o p r i e t e s . indexOf ( propertyName ) >= 0 ) {
26 a d r e s s e [ propertyName ] = s p e c [ propertyName ] ;
27 } else {
28 throw {
29 name : ” UnknownPropertyException ” ,
30 message : ” P r o p r i é t é de l ’ a d r e s s e inconnue . ”
31 };
32 } Les
33 }
34 }
35 return a d r e s s e ;
36 };
Code Source 2.10 : /pattern-fonct/ex03-methodLitteralParamTest.js

1 // c r é a t i o n d ’ une i n s t a n c e a v e c l a f a b r i q u e
2 var a d r e s s e = f a b r i q u e A d r e s s e V e r s i o n 1 ( {
3 i d : ”0 f 3 e a 7 5 9 b 1 ” ,
5 r u e : ”Rue de l a Paix ” ,
6 complementAddr : ” ” ,
7 c o d e P o s t a l : ” 63000 ” ,
10 }) ;
11 // Géné r a t i o n d ’HTML par i n t r o s p e c t i o n :
12 codeHTML = objectToHtmlTable ( a d r e s s e ) ;
2.4 Structuration d’une application

L’un des principaux défauts de JavaScript est sa tendance à créer, parfois sans faire exprès,
des variables globales, ce qui a tendance à créer des interactions involontaires entre des parties
du code qui n’ont rien à voir, ce qui génère des bugs difficiles à débusquer...
Nous allons voir maintenant comment rédiore les nombres de variables globales de notre
programme à une seule variable, ici appelée myApp, qui contient toute notre application.
L’objet myApp, initialement, ne contient que deux méthodes :
• Une méthode addModule qui permet d’ajouter un objet quelconque (de type pattern-fonct,
Function, Array, etc.) sous la forme de propriété de l’application.
29
• Une méthode init, qui permet de rajouter un ensemble de propriétés prédéfinies, sans
avoir à les créer une par une.
Code Source 2.11 : /pattern-fonct/ex04-structureApplication.js

1 /* * Dé f i n i t i o n d ’ une v a r i a b l e a p p l i c a t i o n .
2 * L ’ a p p l i c a t i o n e s t i n i t i a l e m e n t v i d e e t ne comporte que l a f o n c t i o n n a l i t é
3 * p e r m e t t a n t d ’ a j o u t e r d e s modules .
4 * Une mé t h o d e i n i t ( ) permet d ’ i n i t i a l i s e r p l u s i e u r s modules .
5 *
6 */
7 var myApp = {
8 /* * Mé t h o d e q u i a j o u t e un module à n o t r e a p p l i c a t i o n
9 * Un module p e u t ê t r e n ’ i m p o r t e q u e l o b j e t q u i c o n t i e n t
10 * d e s donn é e s ou d e s mé t h o d e s . . .
11 * @method addModule
12 * @param { O b j e c t | f u n c t i o n | s t r i n g | r e g e x | number | Array | . . . } m o d u l e O b j e c t
13 * − un o b j e t ou v a l e u r q u e l c o n q u e à a j o u t e r à n o t r e a p p l i c a t i o n .
14 */
15 addModule : function ( moduleName , moduleObject ) {
16 i f ( typeof moduleName === ” s t r i n g ” &&
17 /^ [ a−z ] { 1 , } [ a−z0 −9\_] * $/ i . t e s t ( moduleName ) ) {
18 t h i s [ moduleName ] = moduleObject ;
19 } else {
20 throw {
21 name : ” I l l a g e a l A r g u m e n t E x c e p t i o n ” ,
22 message : ” I m p o s s i b l e de c r é e r l e s module : nom ” + moduleName
23 + ” i l l é gal ”
24 }
25 }
26 },
27
28 /* * A j o u t e t o u t e s l e s p r o p r i é t é s d ’ un o b j e t à n o t r e a p p l i c a t i o n .
29 * @method i n i t
30 * @param { O b j e c t } s p e c − o b j e t c o n t e n a n t l e s p r o p r i é t é s à a j o u t e r .
31 */
32 i n i t : function ( s p e c ) {
33 f o r ( var attributeName in s p e c ) {
34 i f ( s p e c . hasOwnProperty ( attributeName ) ) {
35 t h i s . addModule ( attributeName , s p e c [ attributeName ] ) ;
36 }
37 }
38 }
39 } ;
40
41 // I n i t i a l i s a t i o n de l ’ a p p l i c a t i o n a v e c un module m e t i e r i n i t i a l e m e n t v i d e .
42 myApp . i n i t ( {
43 m e t i e r : {}
44 } ) ;
Nous utilisons maintenant ce squelette d’application et nous créons dans notre application
un module metier.
Nous utilisons ensuite le pattern apply qui nous permet d’utiliser la méthode myApp.addModule
en prenant comme ”this” un autre objet que myApp.
En appliquant donc la méthode myApp.addModule en prenant myApp.metier comme ”this”,
30
nous créons un sous-module de myApp.metier, appelé myApp.metier.sousModule. Ce sous-

module contient une propriété essai.
Code Source 2.12 : /pattern-fonct/ex04-structureApplicationTest.js
1 // a j o u t d ’ une p r o p r i é t é au mé t i e r :
2 myApp . m e t i e r . coucou = ” t e s t ” ;
3
4 // Ajout d ’ un sous−module au module myApp . m e t i e r
5 // On a p p l i q u e ( p a t t e r n a p p l y ) addModule en p r e n a n t t h i s = myApp . m e t i e r
6 myApp . addModule . apply (myApp . m e t i e r ,
7 [ ” sousModule ” ,
8 { e s s a i : ” Je s u i s l a p r o p r i é t é \” e s s a i \” du s o u s module ” }
9 ]) ;
10
11 /* * @ d e s c r i p t i o n Module myApp . v i e w a v e c une p r o p r i é t é ”codeHTML”
12 * @module myApp . v i e w
13 * La p r o p r i é t é ”codeHTML” c o n t i e n d a l e code HTML de l a vue
14 * ( i n s é r é dans l e p a r a g r a p h e d ’ ID ” p a r a g r a p h e R e s u l t a t ” )
15 */
16 myApp . addModule ( ” v i e w ” , {codeHTML : ” ” } ) ;
17
18 /* * @ d e s c r i p t i o n Programme P r i n c i p a l de l ’ a p p l i c a t i o n
19 * @method mainFunction
20 * @public
21 */
22 myApp . addModule ( ” mainFunction ” , function ( ) {
23 myApp . view . codeHTML += ”Exé c u t i o n de myApp . mainFunction . . .<br />” ;
24 myApp . view . codeHTML += ”myApp . m e t i e r . coucou : ”
25 + myApp . m e t i e r . coucou + ”<br />” ;
26 myApp . view . codeHTML += ”myApp . m e t i e r . sousModule . e s s a i : ”
27 + myApp . m e t i e r . sousModule . e s s a i ;
28 }) ;
29
30 // Exé c u t i o n de l a mé t h o d e mainFunction
31 myApp . mainFunction ( ) ;
32 // U t i l i s a t i o n de ”myApp . v i e w . codeHTML” pour g éné r e r l a vue
33 document . getElementById ( ” p a r a g r a p h e R e s u l t a t ” ) . innerHTML
34 = myApp . view . codeHTML ;
”
Code Source 2.13 : Fichiers JS inclus dans ex04-structureApplicationTest.html
2 <s c r i p t src=” e x 0 4 − s t r u c t u r e A p p l i c a t i o n . j s ”></s c r i p t>
3 <s c r i p t src=” e x 0 4 − s t r u c t u r e A p p l i c a t i o n T e s t . j s ”></s c r i p t>
2.5 Exemple : un module metier.regexUtil

L’exemple suivant montre l’utilisation du pattern Module pour créer un sous-module métier
utilitaire pour tester des expressions régulières courantes :
• Expressions formées avec les caractères du langage courant dans une des langues dont
les accents sont normalisés dans la norme ISO 8859 − 1 (Latin-1, Europe occidentale),
admettant aussi les guillemets, apostrophes et traits d’union (tiret haut).
31
• Mêmes caractère que la précédente mais admettant en outre les chiffres.
• Mêmes caractère que la précédente mais admettant en outre les caractères de ponctuation
(; . , ! ? :) et les parenthses.
Trois expressions régulières constances (donc pré-compilées) sont définies comme données
statiques (en un seul exemplaire) privées. L’interface fournit trois méthodes pour tester ces
expressions régulière sur une chaîne, avec éventuellement des conditions de longueur minimale
ou maximale sur la chaîne (exemple : champs obligatoire...).
Code Source 2.14 : /pattern-fonct/ex05-modulePatternRegex.js

1 /* * @ d e s c r i p t i o n Sous−module du mé t i e r : u t i l i t a i r e pour e x p r e s s i o n s r é g u l i è r e s
2 * L ’ o b j e t c r é é e s t l ’ i n t e r f a c e p u b l i q u e r e t o u r n é e par une f o n c t i o n
3 * q u i s u i t l e ” p a t t e r n module ” .
4 * La f o n c t i o n r e t o u r n e son i n t e r f a c e : un o b j e t a v e c s e s mé t h o d e s .
5 * Cet o b j e t e s t a j o u t é comme sous−module au module ” m e t i e r ” par ” addModule ” .
6 * @module r e g e x U t i l
7 * @augments myApp . m e t i e r
8 */
9 myApp . addModule . apply (myApp . m e t i e r , [ ” r e g e x U t i l ” , function ( ) {
10
11 // //////////////////////////////////////////////
12 // V a r i a b l e s e t mé t h o d e s ” s t a t i q u e s ” p r i v é e s
13
14 /* * @ d e s c r i p t i o n E x p r e s s i o n r é g u l i è r e c o n s t a n t e pour l a l a n g u e n a t u r e l l e
15 * Admet l e s c a r a c t è r e s d ’ eu rop e o c c i d e n t a l e ( j e u l a t i n 1) e t e s p a c e s .
16 * @constant
17 * @private
18 */
19 var r e g e x L a t i n 1
20 = /^ [ a−zA−ZÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæ ¸ è é ê ö ì í î ïð ñ òó ôõö÷øùúû
Āāüýþÿ \ s ” ’\ −]* $/ i ;
21
22 /* * @ d e s c r i p t i o n E x p r e s s i o n r é g u l i è r e c o n s t a n t e pour l a l a n g u e e t c h i f f r e s
23 * @constant
24 * @private
25 */
26 var r e g e x L a t i n 1 W i t h D i g i t s =
27 /^ [ a−zA−ZÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæ ¸ è é ê ö ì í î ïð ñ òó ôõö÷øùúû
Āāüýþÿ \ s ” ’\ −0 −9]* $/ i ;
28
29 /* * @ d e s c r i p t i o n E x p r e s s i o n r e g e x c o n s t a n t e l a n g u e + c h i f f r e s + p o n c t u a t i o n
30 * @constant
31 * @private
32 */
33 var r e g e x L a t i n 1 W i t h D i g i t s P u n c t u a t i o n =
34 /^ [ a−zA−ZÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæ ¸ è é ê ö ì í î ïð ñ òó ôõö÷øùúû
Āāüýþÿ \ s ” ’\ −0 −9\ ;\.\ ,\ !\ ?\ : ] * $/ i ;
35
36 /* * @ d e s c r i p t i o n V a l i d e une e x p r e s s i o n r é g u l i è r e s u r une c h a i n e
37 * a v e c c o n d i t i o n s de l o n g u e u r ( minimale ou maximale ) o p t i o n n e l l e s
38 * @method v a l i d a t e R e g e x
39 * @private
40 * @param { O b j e c t } s p e c − o b j e t c o n t e n a n t l e s donn é e s du t e s t à e f f e c t u e r
41 * @param { f u n c t i o n } s p e c . r e g e x T e s t −
32
42 * f o n c t i o n de t e s t q u i r e n v o i e t r u e en c a s de s u c c è s
43 * e t un message d ’ e r r e u r en c a s d ’ é c h e c
44 * @param { s t r i n g } s p e c . c h a i n e − cha î ne de c a r a c t è r e s à t e s t e r
45 * @param {number} [ s p e c . minLength =0] − l o n g u e u r minimale pour l a cha î ne
46 * @param {number} [ s p e c . maxLength=u n d e f i n e d ] − l o n g u e u r maximale pour l a
cha î ne
47 * @return { b o o l e a n | s t r i n g } t r u e s i l e s c o n d i t i o n s s o n t s a t i s f a i t e s ,
48 * un message d ’ e r r e u r pour un u t i l i s a t e u r s i n o n .
49 */
50 var v a l i d a t e R e g e x = function ( s p e c ) {
51 i f ( typeof s p e c . c h a i n e === ” s t r i n g ”
52 && ( ! s p e c . minLength | | s p e c . c h a i n e . l e n g t h >= s p e c . minLength )
53 && ( s p e c . maxLength === u n d e f i n e d | |
54 s p e c . c h a i n e . l e n g t h <= s p e c . maxLength )
55 ){
56 return s p e c . r e g e x . t e s t ( s p e c . c h a i n e ) ;
57 }
58 return ” Erreur : l o n g u e u r de l ’ e n t r é e ( champ o b l i g a t o i r e , t r o p l o n g . . . ) ” ;
59 };
60
61 /* * @ d e s c r i p t i o n I n t e r f a c e p u b l i q u e du ” p a t t e r n module ” pour r e g e x U t i l s ,
62 * r e t o u r n é par l a f o n c t i o n , c o n t i e n t l e s mé t h o d e s p u b l i q u e s du module . */
63 var p u b l i c I n t e r f a c e R e g e x = {
64 /* * @ d e s c r i p t i o n t e s t e l ’ e x p r e s s i o n du l a n g a g e n a t u r e l a v e c e s p a c e s
65 * @method t e s t R e g e x L a t i n 1
66 * @public
69 * @param {number} [ s p e c . minLength =0] − l o n g u e u r minimale de l a cha î ne
70 * @param {number} [ s p e c . maxLength=u n d e f i n e d ] − l o n g u e u r max de l a cha î ne
73 */
74 t e s t R e g e x L a t i n 1 : function ( s p e c ) {
75 // Ajout d ’ une p r o p r i é t é à s p e c ( a ug me n ta t i on )
76 spec . regex = regexLatin1 ;
77 return v a l i d a t e R e g e x ( s p e c ) ;
78 },
79
80 /* * @ d e s c r i p t i o n t e s t e l ’ e x p r e s s i o n du l a n g a g e n a t u r e l , e s p a c e s , c h i f f r e s
81 * @method t e s t R e g e x L a t i n 1 W i t h D i g i t s
82 * @public
89 */
90 t e s t R e g e x L a t i n 1 W i t h D i g i t s : function ( s p e c ) {
92 spec . regex = regexLatin1WithDigits ;
94 },
95
96 /* * @ d e s c r i p t i o n t e s t e l e l a n g a g e n a t u r e l , e s p a c e s , c h i f f r e s e t
33
ponctuation
97 * @method t e s t R e g e x L a t i n 1 W i t h D i g i t s P u n c t u a t i o n
98 * @public
105 */
106 t e s t R e g e x L a t i n 1 W i t h D i g i t s P u n c t u a t i o n : function ( s p e c ) {
108 spec . regex = regexLatin1WithDigitsPunctuation ;
110 }
111 } ; // f i n du l i t t é r a l d é f i n i s s a n t p u b l i c I n t e r f a c e R e g e x
112
113 // On r e t o u r n e l ’ o b j e t c o n t e n a n t l ’ i n t e r f a c e p u b l i q u e ( p a t t e r n ” module ” ) .
114 return p u b l i c I n t e r f a c e R e g e x ;
115
116 } ( ) ] // f i n ET APPEL de l a f o n c t i o n q u i c r é e l ’ o b j e t ” r e g e x U t i l ”
117 ) ; // f i n de l ’ a p p e l de l a mé t h o d e myApp . addModule a v e c l e p a t t e r n ” a p p l y ”
118 // ( a j o u t de l ’ o b j e t p u b l i c I n t e r f a c e R e g e x au m e t i e r , s o u s l e nom r e g e x U t i l )
Le fichier HTML réalise des tests des méthodes du module regexUtil sur un jeu de chaînes,
et affiche les résultats dans une table.
Code Source 2.15 : /pattern-fonct/ex05-modulePatternRegexTest.js (cf. Fig 2.5)

1 /* * @ d e s c r i p t i o n Programme P r i n c i p a l : t e s t du module myApp . m e t i e r . r e g e x U t i l
3 * @public
4 */
6 // Cha î nes pour l e s t e s t s d ’ e x p r e s s i o n s r é g u l i è r e s :
7 var t a b C h a i n es = [ ”L ’ é norme Bla−b l à” , ” B l a b l a 2 ” , ” B l a b l a#” , ” a u t r e b l a b l a :
b l i ( bleu )” ] ;
8 var i ;
9 // R a cc ou rc i par c o p i e de r é f é r e n c e :
10 var r e g e x U t i l = myApp . m e t i e r . r e g e x U t i l ;
11 var codeHTML = ”<table><thead>” +
34
12 ”<tr><th></th><th>L a t i n 1</th><th>L a t i n 1 w i t h D i g i t s</th>” +

13 ”<th>L a t i n 1 w i t h D i g i t s<br />and p un c t</th></ tr></thead><tbody>” ;
14 fo r ( i = 0 ; i< ta bC h a in es . l e n g t h ; i ++){
15 codeHTML += ”<tr><td>” + ta bCh a i ne s [ i ] + ”</td>”
16 + ”<td>” + r e g e x U t i l . t e s t R e g e x L a t i n 1 ( {
17 chaine : tabChaines [ i ]
18 } ) + ”</td>”
19 + ”<td>” + r e g e x U t i l . t e s t R e g e x L a t i n 1 W i t h D i g i t s ( {
21 } ) + ”</td>”
22 + ”<td>” + r e g e x U t i l . t e s t R e g e x L a t i n 1 W i t h D i g i t s P u n c t u a t i o n ( {
24 } ) + ”</td>”
25 }
26 codeHTML += ”</tbody></table>” ;
29 } ) ; // f i n de myApp . mainFunction ( )
30
31 // Lancement de l ’ a p p l i c a t i o n :
Code Source 2.16 : Fichiers JS inclus dans ex05-modulePatternRegexTest.html

1 <!−− Cré a t i o n de l ’ a p p l i c a t i o n v i d e a v e c deux mé t h o d e s −−>
2 <s c r i p t src=” e x 0 4 _ s t r u c t u r e A p p l i c a t i o n . j s ”></s c r i p t>
3 <!−− Cré a t i o n de sous−module r e g e x U t i l de myApp . m e t i e r −−>
4 <s c r i p t src=” . /ex05−modulePatternRegex . j s ”></s c r i p t>
5 <!−− Cré a t i o n de l a mé t h o d e de t e s t myApp . m e t i e r . mainFunction −−>
6 <s c r i p t src=” . /ex05−modulePatternRegexTest . j s ”></s c r i p t>
2.6 Modélisation de Modules Métier (version 1)

Nous voyons maintenant un utilitaire général permettant d’ajouter dans myApp.metier un
module pour représenter ce qu’on appellerait dans les langages objets classiques une classe
métier. Nous utiliserons dans la suite de ce cours les conventions et le vocabulaire suivant :
• Un module métier permet de représenter des entités relevant du métier qui possèdent
(regroupent) des attributs.
Exemple. Un module métier myApp.metier.adresse regroupera les attributs id, numeroRue,
rue, complementAddr, codePostal, ville et pays...
• Chaque module métier comprendra des méthodes d’instances, qui s’appliqueront aux
instances, et dont l’implémentation s’appuiera sur les valeurs des attributs.
Exemple. La méthode d’instance getAttribute, appelée accesseur, permet d’obtenir la
valeur d’un attribut dans une instance à partir du nom de l’attribut.
• Chaque module métier comprendra des méthodes de classe, dont l’implémentation et le
résultat seront indépendant des valeurs des attributs, donc indépendante des instances.
Exemple. La méthode de classe getAttributeList renvoie, sous forme d’Array, la liste
des noms d’attributs du module métier (liste commune à toutes les instances d’un même
module métier).
35
Chaque module métier est construit à partir d’un objet attributesPatterns, qui définit
la structure d’une instance. Ici, attributesPatterns définit, pour chaque attribut, une mé-
thode de test par expression régulière de validité d’une valeur pour l’attribut, et une propriété
labelText à afficher pour indiquer à l’utilisateur de quelle donnée il s’agit (typiquement : texte
de l’élément HTML <label> associé à un input dans un formulaire). On pourrait facilement
adapter le code pour permettre des propriétés calculées, ou encore différents types d’éléments
d’interface utilisateur (divers inputs (couleur, nombre, date,...), de textarea ou de select) dans
les formulaires, etc.
2.6.1 Attributs et méthodes statiques (Version 1)

L’interface publique du module métier propose quelques méthodes statiques utilitaires, comme
l’accès à la liste des noms d’attributs, aux données labelText, ou le test d’expression régulière
d’une valeur pour un attribut.
Code Source 2.17 : /pattern-fonct/ex06-createModuleMetier.js
1 /* * @ d e s c r i p t i o n Dé f i n i t l e s p r o p r i é t é s g éné r a l e d e s o b j e t s mé t i e r s
2 * à p a r t i r d ’ une sp é c i f i c a t i o n d e s a t t r i b u t s .
3 * On a j o u t e au mé t i e r un o b j e t q u i e s t l ’ i n t e r f a c e p u b l i q u e d ’ une f o n c t i o n q u i
s u i t l e p a t t e r n ” module ” .
4 * La f o n c t i o n r e t o u r n e son i n t e r f a c e p u b l i q u e q u i e s t un o b j e t .
5 * Cet o b j e t e s t a j o u t é comme sous−module au module ” m e t i e r ” .
6 *
7 * Dans c e t o b j e t , on ne t r o u v e pas pour l e moment l e s p r o p r i é t é s d ’ i n s t a n c e .
C e l l e s −c i s e r o n t a j o u t é e s par ” aug men tat io n ” .
8 *
9 * @module c r e a t e M o d u l e M e t i e r
11 * @param { s t r i n g } moduleName − nom du module mé t i e r
12 * @param { O b j e c t } a t t r i b u t e s P a t t e r n s − o b j e t c o n t e n a n t l e s a t t r i b u t s d ’ un
module mé t i e r
13 * − Chaque p r o p r i é t é de a t t r i b u t e s P a t t e r n s d é f i n i t un a t t r i b u t
du module mé t i e r
14 * − chaque a t t r i b u t p o s s è d e
15 * + une f o n c t i o n de t e s t s u r l e s v a l e u r s nommé e r e g e x T e s t
16 * + un t e x t e de l a b e l p e r m e t t a n t de d é s i g n e r l a donn é e
pour l ’ u t i l i s a t e u r
17 */
18 myApp . addModule . apply (myApp . m e t i e r , [ ” c r e a t e M o d u l e M e t i e r ” ,
19 function ( moduleName , a t t r i b u t e s P a t t e r n s ) {
20
21 // //////////////////////////////////////////////
22 // P r o p r i é t é s e t mé t h o d e s ” s t a t i q u e s ” p r i v é e s
23
24 /* *
25 * Tableau c o n t e n a n t l a l i s t e d e s a t t r i b u t s d ’ une i n s t a n c e .
26 * Le t a b l e a u e s t pr é c a l c u l é l o r s de l ’ i n i t i a l i s a t i o n .
27 * @member
28 * @private
29 */
30 var a t t r i b u t e L i s t = function ( ) {
31 var l i s t e = [ ] ;
32
33 // Parcours d e s p r o p r i é t é s de l ’ o b j e t a t t r i b u t e s P a t t e r n s . r e g e x T e s t
36
34 // q u i c o r r e s p o n d e n t aux a t t r i b u t s de l ’ i n s t a n c e
35 fo r ( var attributeName in a t t r i b u t e s P a t t e r n s ) {
36 // Ne p a s c o n s i d é r e r l e s p r o p r i é t é s ” h é r i t é e s ” du p r o t o t y p e .
37 i f ( a t t r i b u t e s P a t t e r n s . hasOwnProperty ( attributeName ) ) {
38 l i s t e . push ( attributeName ) ;
39 }
40 }
41
42 return l i s t e ;
43 } ( ) ; // a p p e l immé d i a t de l a f o n c t i o n anonyme .
44
45
46 // //////////////////////////////////////////////
47 // I n t e r f a c e p u b l i q u e du module
48
49 /* * @ d e s c r i p t i o n O b j e t c o n t e n a n t l e s donn é e s e t mé t h o d e s p u b l i q u e s
50 * ( l e s p r o p r i é t é s p u b l i q u e s s o n t r e t o u r n é e s par l a f o n c t i o n ” module ” ) .
51 */
52 var p u b l i c I n t e r f a c e M o d u l e s M e t i e r = {
53
54 /* * @ d e s c r i p t i o n Renvoie l a l i s t e d e s noms d ’ a t t r i b u t s s d e s i n s t a n c e s .
55 * @method g e t A t t r i b u t e L i s t
56 */
57 g e t A t t r i b u t e L i s t : function ( ) {
58 return a t t r i b u t e L i s t ;
59 },
60
61 /* * @ d e s c r i p t i o n Renvoie l e t e x t e de d e s c r i p t i o n d ’ un a t t r i b u t d e s i n s t a n c e s
.
62 * @method g e t L a b e l T e x t
63 * @param { s t r i n g } a t t r i b u t e N a m e − nom de p r o p r i é t é
64 * @return { s t r i n g } l e t e x t e de d e s c r i p t i o n c o u r t e du champs
65 */
66 g e t L a b e l T e x t : function ( attributeName ) {
67 return a t t r i b u t e s P a t t e r n s [ attributeName ] . l a b e l T e x t ;
68 },
69
70 /* * @ d e s c r i p t i o n Expose l e t e s t d ’ e x p r e s s i o n r é g u l i è r e d e s a t t r i b u t s
71 * des i n s t a n c e s .
72 * Peut ê t r e u t i l i s é e pour l e f i l t r a g e d e s donn é e s d ’ un f o r m u l a i r e .
73 * @method t e s t R e g e x
75 * @param { s t r i n g } v a l u e − v a l e u r pour i n i t i a l i s e r l ’ a t t r i b u t
76 * @return { b o o l e a n | s t r i n g } t r u e s i l a c h a i n e e s t un code p o s t a l v a l i d e ,
77 * un message d ’ e r r e u r s i n o n .
78 */
79 t e s t R e g e x : function ( attributeName , v a l u e ) {
80 i f ( a t t r i b u t e s P a t t e r n s [ attributeName ] === u n d e f i n e d ) {
81 return ”La p r o p r i é t é ” + attributeName + ” n ’ e x i s t e pas ” ;
82 } else {
83 return a t t r i b u t e s P a t t e r n s [ attributeName ] . r e g e x T e s t ( v a l u e ) ;
84 }
85 }
86
87 } ; // f i n de l ’ o b j e t p u b l i c I n t e r f a c e M o d u l e s M e t i e r
88
37
89 myApp . m e t i e r [ moduleName ] = p u b l i c I n t e r f a c e M o d u l e s M e t i e r ;
90
91 } ] // f i n de l a f o n c t i o n q u i c r é e l ’ o b j e t myApp . m e t i e r [ moduleName ]
92
93 ) ; // f i n de l ’ a p p e l ” a p p l y ” de l a mé t h o d e myApp . addModule
94 // ( a j o u t de l ’ o b j e t p u b l i c I n t e r f a c e M o d u l e s M e t i e r au m e t i e r , s o u s l e nom
createModuleMetier )
2.6.2 Exemple : Module Métier adresse

Nous créons (nous instancions) maintenant un sous-module myApp.metier.adresse.
Code Source 2.18 : /pattern-fonct/ex06-moduleMetierAdresse.js
1 /* * @ d e s c r i p i o n Module mé t i e r myApp . m e t i e r . a d r e s s e
2 * p e r m e t t a n t de r e p r é s e n t e r d e s a d r e s s e s p o s t a l e s .
3 *
4 * @module
5 * @public
6 *
7 * @property { f u n c t i o n ( s t r i n g ) } g e t A t t r i b u t e − permet d ’ o b t e n i r l a v a l e u r d ’ un
a t t r i b u t à p a r t i r du nom de l ’ a t t r i b u t
8 * @property { f u n c t i o n ( s t r i n g ) } g e t L a b e l T e x t − permet d ’ o b t e n i r l e t e x t e de
l a b e l d ’ un a t t r i b u t à p a r t i r du nom de l ’ a t t r i b u t
9 * @property { f u n c t i o n ( s t r i n g , v a l u e ) } t e s t R e g e x − permet de t e s t e r l a v a l i d i t é
d ’ une v a l e u r pour un a t t r i b u t
10 */
11 myApp . m e t i e r . c r e a t e M o d u l e M e t i e r ( ” a d r e s s e ” ,
12 /* * @ d e s c r i p i o n Sp é c i f i e l e s a t t r i b u t s d e s o b j e t s de t y p e a d r e s s e :
13 * p r o p r i é t é s a t t e n d u e s , forme de c e s donn é e s . . .
14 *
15 * @private
16 *
17 * @property { O b j e c t } i d − P r o p r i é t é s de l ’ i d e n t i f i a n t u n i q u e de l ’ i n s t a n c e
18 * @property { O b j e c t } numé roRue − P r o p r i é t é s du numé ro de l a rue
19 * @property { O b j e c t } rue − P r o p r i é t é s du nom de l a rue / p l a c e
20 * @property { O b j e c t } complementAddr − P r o p r i é t é s du compl é ment Lieu d i t /Bâ
timent . . .
21 * @property { O b j e c t } c o d e P o s t a l − P r o p r i é t é s du code p o s t a l
22 * @property { O b j e c t } v i l l e − P r o p r i é t é s du nom de l a v i l l e
23 * @property { O b j e c t } numé roRue − P r o p r i é t é s du nom du pays
24 */
25 {
26 id : {
27 r e g e x T e s t : function ( c h a i n e ) {
28 i f ( /^[0−9a−f ] { 1 0 } $/ i . t e s t ( c h a i n e ) === true ) {
29 return true ;
30 } else {
31 return ”L ’ i d e n t i f i a n t d o i t comporter 10 c h i f f r e s hexa . ” ;
32 }
33 },
34 labelText : ” I d e n t i f i a n t ”
35 },
36 numeroRue : {
38 i f (myApp . m e t i e r . r e g e x U t i l . t e s t R e g e x L a t i n 1 W i t h D i g i t s ( {
38
39 chaine : chaine ,
40 maxLength : 15
41 } ) === true )
42 {
43 return true ;
44 } else {
45 return ”Le numé ro de l a rue c o n t i e n t au p l u s 15 c a r a c t è r e s , ”
46 +” l e t t r e s , t i r e t s e t g u i l l e m e t s ou c h i f f r e s . ” ;
47 }
48 },
49 l a b e l T e x t : ”Numé ro ”
50 },
51 rue : {
53 i f (myApp . m e t i e r . r e g e x U t i l . t e s t R e g e x L a t i n 1 W i t h D i g i t s ( {
55 minLength : 1 ,
56 maxLength : 255
57 } ) === true )
58 {
59 return true ;
60 } else {
61 return ” l e nom de l a rue / p l a c e , o b l i g a t o i r e ne c o n t i e n t que ”
62 + ” d e s l e t t r e s , t i r e t s e t g u i l l e m e t s ou c h i f f r e s . ” ;
63 }
64 },
65 l a b e l T e x t : ” rue / p l a c e ”
66 },
67 complementAddr : {
69 i f (myApp . m e t i e r . r e g e x U t i l . t e s t R e g e x L a t i n 1 W i t h D i g i t s P u n c t u a t i o n ( {
71 maxLength : 255
72 } ) === true )
73 {
74 return true ;
75 } else {
76 return ” l e compl é ment d ’ a d r e s s e ne c o n t i e n t que d e s l e t t r e s , ”
77 + ” t i r e t s e t g u i l l e m e t s ou c h i f f r e s . ” ;
78 }
79 },
80 l a b e l T e x t : ” Lieu d i t , Bâ timent , BP”
81 },
82 codePostal : {
84 i f ( /^ [0 −9]{5} $/ . t e s t ( c h a i n e ) === true ) {
85 return true ;
86 } else {
87 return ”Le code p o s t a l d o i t comporter 5 c h i f f r e s d é cimaux . ” ;
88 }
89 },
90 l a b e l T e x t : ”Code P o s t a l ”
91 },
92 ville : {
94 i f (myApp . m e t i e r . r e g e x U t i l . t e s t R e g e x L a t i n 1 ( {
39
96 minLength : 1 ,
97 maxLength : 255
98 } ) === true )
99 {
100 return true ;
101 } else {
102 return ”La v i l l e , o b l i g a t o i r e , ne c o n t i e n t que d e s l e t t r e s , ”
103 + ” t i r e t s et guillemets . ” ;
104 }
105 },
106 labelText : ” Ville ”
107 },
108 pays : {
110 i f (myApp . m e t i e r . r e g e x U t i l . t e s t R e g e x L a t i n 1 ( {
112 minLength : 1 ,
113 maxLength : 255
114 } ) === true )
115 {
116 return true ;
117 } else {
118 return ”Le pays , o b l i g a t o i r e , ne c o n t i e n t que d e s l e t t r e s , ”
119 + ” t i r e t s et guillemets . ” ;
120 }
121 },
122 l a b e l T e x t : ” Pays ”
123 }
124 } // f i n de l ’ o b j e t a t t r i b u t e s P a t t e r n s
125 ) ; // f i n de l ’ i n v o c a t i o n de myApp . m e t i e r . c r e a t e M o d u l e M e t i e r
2.6.3 Fabrique Générique d’Instances Métier (Version 1)

Nous créons ensuite, via un pattern Module, une fabrique générique (ou encore fabrique abs-
traite) d’instances d’objets métier. Cette fabrique est générique en ce sens qu’elle peut servir de
fabrique pour n’importe quel module métier qui implémente les méthodes getAttributeList(),
getLabelText() et testRegex(), comme les modules métier généré en utilisant le code source 2.17,
comme illustré dans le code source 2.18. Nous verrons par exemple, dans la partie 2.6.4, com-
ment utiliser cette méthode pour créer très simplement une fabrique concrète d’adresses en
s’appuyant sur le module myApp.metier.adresse (voir la partie 2.6.2).
La fabrique prend comme paramètre un objet contenant des valeurs pour initialiser les
attributs, effectue les tests d’expressions régulières, et crée deux objets privés :
• L’objet privé dataAttributes contient comme propriétés les attributs de l’instance d’ob-
jets métier ;
• L’objet privé dataError contient comme propriétés les éventuels messages d’erreur suite
aux tests (typiquement d’expression régulière) sur la validité des valeurs des attributs de
l’instance d’objets métier ;
Des méthodes publiques, dans l’interface du module, permettent d’accéder à, ou de modifier
les données de l’instance. Notons que les méthodes de l’interface publique du module créé
40
peuvent utiliser les méthodes du module parent en utilisant le pattern that (voir la partie 2.1.3).
L’interface publique des instances expose aussi les méthodes statiques (méthodes de classes),
dont le code ne dépend pas des instances, mais est factorisé au niveau du module métier (ici
donné par l’objet that suivant le pattern that).
Nous avons aussi ajouté la possibilité, en passant un argument inputObj égal à null, de
réer une instance par défaut (id aléatoire et autres attributs vides) Ceci permet par exemple
d’initialiser un formulaire vide pour créer une nouvelle instance.
Code Source 2.19 : /pattern-fonct/ex07-fabriqueObjetMetier.js

1 /* * @ d e s c r i p t i o n F a b r i q u e q u i c r é e d e s o b j e t s d ’ un module mé t i e r , s u i v a n t l e ”
p a t t e r n module ” .
2 * Le paramètre s p e c de n o t r e f o n c t i o n e s t un o b j e t c o n t e n a n t l e s v a l e u r s d e s
attributs
3 * de l ’ i n s t a n c e à c r é e r .
4 *
5 * Pour ê t r e u t i l i s é e , c e t t e f a b r i q u e d o i t ê t r e a j o u t é e en t a n t que mé t h o d e
6 * à un module mé t i e r comportant d é j à dans son i n t e r f a c e p u b l i q u e l e s mé t h o d e s
7 * g e t A t t r i b u t e L i s t , g e t L a b e l T e x t e t t e s t R e g e x comme l e s modules
8 * g éné r é s par l a mé t h o d e myApp . M e t i e r . c r e a t e M o d u l e M e t i e r ( . , . ) .
9 *
10 * @method c r e a t e I n s t a n c e G e n e r i q u e
12 * @param { O b j e c t } i n p u t O b j − sp é c i f i c a t i o n d e s v a l e u r s d e s a t t r i b u t s d ’ une
i n s t a n c e de module mé t i e r
13 * @param { s t r i n g } i n p u t O b j . i d − i d e n t i f i a n t u n i q u e de l ’ i n s t a n c e
14 * @param { s t r i n g | number} i n p u t O b j . a t t r i b u t e N a m e − v a l e u r à a f f e c t e r à l ’
a t t r i b u t attributeName
15 * ( exemple pour une a d r e s s e : i n p u t O b j . numeroRue , i n p u t O b j .
codePostal , etc .
16 */
17 myApp . addModule . apply (myApp . m e t i e r , [ ” c r e a t e I n s t a n c e G e n e r i q u e ” , function (
inputObj ) {
18
19 // //////////////////////////////////////////////
21
22 /* * @ d e s c r i p t i o n c o n t i e n t l e s v a l e u r s d e s a t t r i b u t s de l ’ i n s t a n c e ,
initialement vide
23 * @member
24 * @private
25 */
26 var d a t a A t t r i b u t e s = {} ;
27 /* * @ d e s c r i p t i o n c o n t i e n t l e s messages d ’ e r r e u r a s s o c i é s aux a t t r i b u t s de l ’
instances
28 * @member
29 * @private
30 */
31 var d a t a E r r o r = {} ;
32
33 // A p p l i c a t i o n du p a t t e r n ” t h a t ”
34 // S i une f o n c t i o n l o c a l e (comme s e t A t t r i b u t e A n d E r r o r p l u s l o i n )
35 // v e u t u t i l i s e r une mé t h o d e du module c o n t e n a n t c o n c r è t e m e n t n o t r e f a b r i q u e ,
36 // ( par exemple myApp . m e t i e r . a d r e s s e . t e s t R e g e x )
37 // I l d o i t a p p e l e r ( par exemple ) t h i s . s e t A t t r i b u t e A n d E r r o r .
38 // Mais s i l a mé t h o d e s e t A t t r i b u t e A n d E r r o r e s t a p p e l é e dans
41
39 // l ’ i n t e r f a c e p u b l i q u e d e s i n s t a n c e s ( p u b l i c I n t e r f a c e I n s t a n c e ) c i −d e s s o u s ,
40 // ” t h i s ” r é f é r e r a à c e t a u t r e o b j e t ( i c i p u b l i c I n t e r f a c e I n s t a n c e ) .
41 // Une s o l u t i o n c o n s i s t e à mé m o r i s e r l ’ o b j e t t h i s dans une v a r i a b l e t h a t ,
42 // e t d ’ a p p e l e r l a mé t h o d e t h a t . t e s t R e g e x e t non pas t h i s . t e s t R e g e x
43 // dans l a f o n c t i o n l o c a l e s e t A t t r i b u t e A n d E r r o r c i −d e s s o u s .
44 var t h a t = t h i s ; // exemple : t h i s = myApp . m e t i e r . a d r e s s e
45
46 /* * @ d e s c r i p t i o n A j o u t e un message d ’ e r r e u r a s s o c i é à un a t t r i b u t
47 * @method addError
48 * @private
49 */
50 var addError = function ( attributeName , message ) {
51 // Ajout d ’ une p r o p r i é t é
52 d a t a E r r o r [ attributeName ] = message ;
53 }
54
55 /* * @ d e s c r i p t i o n S e t t e r : i n i t i a l i s e l a v a l e u r pour un a t t r i b u t d ’ une i n s t a n c e .
56 * En c a s d ’ e r r e u r un message pour c e t a t t r i b u t e s t e s t a j o u t é dans d a t a E r r o r .
57 * En l ’ a b s e n c e d ’ e r r e u r , une é v e n t u e l l e e r r e u r pr é c é d e n t e e s t e f f a c é e .
58 * @method i n p u t O b j .
59 * @private
60 */
61 var s e t A t t r i b u t e A n d E r r o r = function ( attributeName , v a l u e ) {
62 var r e s u l t T e s t R e g e x = t h a t . t e s t R e g e x ( attributeName , v a l u e ) ;
63 // On i n t i a l i s e l ’ a t t r i b u t de l ’ i n s t a n c e
64 d a t a A t t r i b u t e s [ attributeName ] = v a l u e ;
65 // S i l a v a l i d a t i o n par e x p r e s s i o n r é g u l i è r e e s t p a s s é e
66 i f ( r e s u l t T e s t R e g e x === true ) {
67 // On e f f a c e une v i e i l l e e r r e u r é v e n t u e l l e
68 delete d a t a E r r o r [ attributeName ] ;
69 } else {
70 // On i n i t a l i s e l ’ a t t r i b u t de l ’ o b j e t d e s e r r e u r s .
71 // a v e c l e message d ’ e r r e u r .
72 addError ( attributeName , ” A t t r i b u t ” + v a l u e +
73 ” i n v a l i d e : ” + resultTestRegex ) ;
74 }
75 }
76
77 // I n i t i a l i s a t i o n d e s a t t r i b u t s de l ’ i n s t a n c e .
78 // S i l ’ o b j e t en argument e s t n u l l , on c o n s t r u i t une i n s t a n c e par d é f a u t
79 i f ( inputObj !== null ) {
80 // Parcours d e s p r o p r i é t é s de g e t A t t r i b u t e L i s t ( )
81 // q u i c o r r e s p o n d e n t aux a t t r i b u t s de l ’ i n s t a n c e à c r é e r
82 f o r ( var i = 0 ; i < t h i s . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++i ) {
83 var attributeName = t h i s . g e t A t t r i b u t e L i s t ( ) [ i ] ;
84 // U t i l i s a t i o n du s e t t e r pour i n i t i a l i s e r l ’ a t t r i b u t
85 s e t A t t r i b u t e A n d E r r o r ( attributeName , inputObj [ attributeName ] ) ;
86 }
87 } else {
88 // On i n i t i a l i s e l e s v a l e u r s d e s a t t r i b u t s à ””
89 f o r ( var i = 0 ; i < t h i s . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++i ) {
91 d a t a A t t r i b u t e s [ attributeName ] = ” ” ;
92 }
93 }
94
42
95 // //////////////////////////////////////////////
97
98 /* * @ d e s c r i p t i o n I n t e r f a c e p u b l i q u e d e s i n s t a n c e s du module mé t i e r .
99 * F o u r n i t l e s mé t h o d e s pour m a n i p u l e r l ’ i n s t a n c e ( a c c e s s e u r s , s e t t e r s . . . )
100 */
101 var p u b l i c I n t e r f a c e I n s t a n c e = {
102 /* * @ d e s c r i p t i o n Retourne l e module a v e c l e s mé t h o d e s ” s t a t i q u e s ”
103 * (comme l ’ a c c è s d i r e c t à l a l i s t e d e s p r o p r i é t é s ou l e s t e s t s r e g e x )
104 * @return { O b j e c t } l e module myApp . m e t i e r . moduleName
105 */
106 getModule : function ( ) {
107 return t h a t ;
108 },
109
110 /* * @ d e s c r i p t i o n A c c e s s e u r pour t o u s l e s membres p r i v é s d ’ i n s t a n c e .
111 * @method g e t A t t r i b u t e
112 * @public
113 * @param { s t r i n g } a t t r i b u t e N a m e − nom de l ’ a t t r i b u t a t t e n d u e d ’ une
instance
114 * @return { s t r i n g } l a v a l e u r de l ’ a t t r i b u t ou u n d e f i n e d en c a s de nom d ’
a t t r i b u t inconnu .
115 */
116 g e t A t t r i b u t e : function ( attributeName ) {
117 return d a t a A t t r i b u t e s [ attributeName ] ;
118 },
119
120 /* * @ d e s c r i p t i o n S e t t e r :
121 * i n i t i a l i s e l a v a l e u r pour un a t t r i b u t d ’ une i n s t a n c e a p r è s un t e s t .
122 * En c a s d ’ e r r e u r , un message pour c e t a t t r i b u t e s t a j o u t é dans d a t a E r r o r .
124 * I l s ’ a g i t d ’ un s i m p l e a l i a s v e r s l a f o n c t i o n p r i v é e s e t A t t r i b u t e A n d E r r o r .
125 * @method s e t A t t r i b u t e
126 * @public
127 * @param { s t r i n g } a t t r i b u t e N a m e − nom de l ’ a t t r i b u t a t t e n d u e d ’ une i n s t a n c e
128 * @param { s t r i n g } v a l u e − v a l e u r à p r e n d r e pour l ’ a t t r i b u t a t t e n d u d ’ une
instance
129 * @return { b o o l e a n } t r u e s ’ i l y a au moins une e r r e u r , f a l s e s i n o n
130 */
131 setAttribute : setAttributeAndError ,
132
133 /* * @ d e s c r i p t i o n permet de s a v o i r s i un d e s a t t r i b u t s au moins comporte une
erreur .
134 * @return { b o o l e a n } t r u e s ’ i l y a au moins une e r r e u r , f a l s e s i n o n
135 */
136 h a s E r r o r : function ( ) {
137 fo r ( var attributeName in d a t a E r r o r ) {
138 i f ( d a t a E r r o r . hasOwnProperty ( attributeName ) ) {
139 return true ;
140 }
141 }
142 return f a l s e ;
143 },
144
145 /* * @ d e s c r i p t i o n Donne l ’ a c c è s au message d ’ e r r e u r d ’ un a t t r i b u t ( s ’ i l e x i s t e
).
43
146 * @param { s t r i n g } a t t r i b u t e N a m e − nom d ’ a t t r i b u t d ’ une i n s t a n c e de module mé

tier
147 * @return { s t r i n g | u n d e f i n e d } l e message d ’ e r r e u r pour un a t t r i b u t s ’ i l
existe
148 * ou u n d e f i n e d en l ’ a b s e n c e d ’ e r r e u r
149 */
150 g e t E r r o r M e s s a g e : function ( attributeName ) {
151 return d a t a E r r o r [ attributeName ] ;
152 },
153
154 /* * @ d e s c r i p t i o n Ré c u p è r e l a l i s t e d e s noms d ’ a t t r i b u t s q u i ont une e r r e u r
155 * @return { s t r i n g [ ] } t a b l e a u d e s noms d ’ a t t r i b u t s q u i comportent une e r r e u r
.
156 */
157 g e t E r r o r L i s t : function ( ) {
158 var e r r o r L i s t = [ ] ;
159 fo r ( var attributeName in d a t a E r r o r ) {
160 i f ( d a t a E r r o r . hasOwnProperty ( attributeName ) ) {
161 e r r o r L i s t . push ( attributeName ) ;
162 }
163 }
164 return e r r o r L i s t ;
165 },
166
167 // //////////////////////////////////////////////////////////////////////
168 // Ajout d e s mé t h o d e s s t a t i q u e s du module dans l ’ i n t e r f a c e d e s i n s t a n c e s
169 // //////////////////////////////////////////////////////////////////////
170
171 /* * @ d e s c r i p t i o n Renvoie l a l i s t e d e s noms d ’ a t t r i b u t s d e s i n s t a n c e s .
173 */
175 return t h a t . g e t A t t r i b u t e L i s t ( ) ;
176 },
177
178 /* * @ d e s c r i p t i o n Renvoie l e t e x t e de d e s c r i p t i o n d ’ un a t t r i b u t d e s i n s t a n c e s
.
180 * @param { s t r i n g } a t t r i b u t e N a m e − nom d ’ un a t t r i b u t
181 * @return { s t r i n g } l e t e x t e de d e s c r i p t i o n c o u r t e du champ
182 */
184 return t h a t . g e t L a b e l T e x t ( attributeName ) ;
185 },
186
187 /* * @ d e s c r i p t i o n Expose l e t e s t d ’ e x p r e s s i o n r é g u l i è r e d e s a t t r i b u t s
188 * des i n s t a n c e s .
191 * @param { s t r i n g } a t t r i b u t e N a m e − nom d ’ un a t t r i b u t
193 * @return { b o o l e a n | s t r i n g } t r u e s i l a c h a i n e e s t un code p o s t a l v a l i d e ,
195 */
197 return t h a t . t e s t R e g e x ( attributeName , v a l u e ) ;
44
198 },
199
200 /* * @ d e s c r i p t i o n F a b r i q u e q u i c r é e d e s o b j e t s d ’ un module mé t i e r , s u i v a n t l e ”
p a t t e r n module ” .
201 * Le paramètre s p e c de n o t r e f o n c t i o n e s t un o b j e t c o n t e n a n t l e s v a l e u r s d e s
attributs
202 * de l ’ i n s t a n c e à c r é e r .
203 * @param { O b j e c t } i n p u t O b j e t − sp é c i f i c a t i o n d e s v a l e u r s d e s a t t r i b u t s d ’ une
i n s t a n c e de module mé t i e r
204 * @param { s t r i n g } i n p u t O b j e t . i d − i d e n t i f i a n t u n i q u e de l ’ i n s t a n c e
205 * @param { s t r i n g } i n p u t O b j e t . a t t r i b u t e N a m e − v a l e u r à a f f e c t e r à l ’ a t t r i b u t
attributeName
206 * ( exemple pour une a d r e s s e : i n p u t O b j . numeroRue , i n p u t O b j
. codePostal , etc .
207 */
208 c r e a t e I n s t a n c e : function ( i n p u t O b j e t ) {
209 return t h a t . c r e a t e I n s t a n c e ( i n p u t O b j e t ) ;
210 },
211
212 /* * @ d e s c r i p t i o n Cré e une c o p i e de l ’ o b j e t à l ’ i d e n t i q u e .
213 * @returns { O b j e c t } une i n s t a n c e a v e c d e s v a l e u r s d ’ a t t r i b u t s i d e n t i q u e à
this .
214 */
215 c l o n e : function ( ) {
216 return t h i s . c r e a t e I n s t a n c e ( d a t a A t t r i b u t e s ) ;
217 }
218 } ; // f i n de p u b l i c I n t e r f a c e I n s t a n c e
219
220 return p u b l i c I n t e r f a c e I n s t a n c e ;
221
222 } // f i n de l a mé t h o d e c r e a t e I n s t a n c e
223 ] ) ; // f i n de l ’ a p p e l ” a p p l y ” de l a mé t h o d e myApp . addModule
2.6.4 Exemple : La Fabrique du Module adresse

La fabrique d’instances d’adresse, comme toutes les autres fabriques concrètes pour les instances
d’objets métier, est simplement une copie de la fabrique générique d’objets métier vue dans la
partie 2.6.3, qui est simplement placée dans le sous-module myApp.metier.adresse.
Ainsi, mors de l’invocation de cette fabrique, les méthodes getAttributeList(), getLabelText()
et that.testRegex() font référence aux méthodes éponymes du module myApp.metier.adresse,
ce qui permet à la fabrique, dont le code est générique, de travailler cincrètement sur des
adresses.
Code Source 2.20 : /pattern-fonct/ex08-fabriqueAdresse.js
1 /* *
2 * Fabrique qui cr é e des o b j e t s repr é sentant des adresse , suiva nt l e ” pattern
module ” .
3 * Le paramètre s p e c de n o t r e f o n c t i o n e s t un o b j e t c o n t e n a n t l e s p r o p r i é t é s d ’
une a d r e s s e à c r é e r .
4 *
5 * @method c r e a t e I n s t a n c e
6 * @augments myApp . m e t i e r . a d r e s s e
7 * @param { O b j e c t } i n p u t O b j − sp é c i f i c a t i o n d e s p r o p r i é t é s d ’ une i n s t a n c e d ’
adresse
45
8 * @param { s t r i n g } i n p u t O b j . i d − i d e n t i f i a n t u n i q u e de l ’ i n s t a n c e
9 * @param { s t r i n g } i n p u t O b j . numeroRue − numero de rue
10 * @param { s t r i n g } i n p u t O b j . rue − nom de rue
11 * @param { s t r i n g } i n p u t O b j . complementAddr − compl é ment d ’ a d r e s s e ( l i e u dut , b â
timent , r é s i d e n c e , e t c . )
12 * @param { s t r i n g } i n p u t O b j . c o d e P o s t a l − code p o s t a l
13 * @param { s t r i n g } i n p u t O b j . v i l l e − nom de v i l l e
14 * @param { s t r i n g } i n p u t O b j . pays − nom de pays
15 */
16 myApp . addModule . apply (myApp . m e t i e r . a d r e s s e , [ ” c r e a t e I n s t a n c e ” ,
17 myApp . m e t i e r .
c r e a t e I n s t a n c e G e n e r i q u e ] ) ; //
f i n de l ’ a p p e l ” a p p l y ” de l a mé
t h o d e myApp . addModule
Le fichier HTML réalise le test de création d’une instance et d’utilisation de setters, et

affiche les données et les erreurs obtenues.
Code Source 2.21 : /pattern-fonct/ex06-moduleMetierAdresseTest.js (cf. Fig 2.6)

1 /* * Module de t e s t a v e c une mé t h o d e d ’ a f f i c h a g e d ’ une i n s t a n c e
2 * d ’ adresse avec ses é v e n t u e l l e s e r r e u r s .
3 * @module myApp . t e s t
4 * @method myApp . t e s t . t e s t A f f i c h e A d r e s s e
5 * @public
6 * @param { O b j e c t } a d r e s s e − i n s t a n c e d ’ o b j e t mé t i e r du module ” a d r e s s e ”
7 */
8 myApp . addModule ( ” t e s t ” , {
9 t e s t A f f i c h e A d r e s s e : function ( a d r e s s e ) {
10 // Code HTML pour l ’ a f f i c h a g e de l ’ i n s t a n c e :
11 var codeHTML = ”<div><span><h2>Donné e s :</h2>” +
12 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ i d ’ ) +
13 ” :</s trong>” + a d r e s s e . g e t A t t r i b u t e ( ’ i d ’ ) + ”<br />” +
14 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ numeroRue ’ ) +
15 ” :</s trong> ” + a d r e s s e . g e t A t t r i b u t e ( ’ numeroRue ’ ) + ”<br />” +
16 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ rue ’ ) +
46
17 ” :</s trong> ” + a d r e s s e . g e t A t t r i b u t e ( ’ rue ’ ) + ”<br />” +

18 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ complementAddr ’ ) +
19 ” :</s trong> ” + a d r e s s e . g e t A t t r i b u t e ( ’ complementAddr ’ ) + ”<br />” +
20 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ c o d e P o s t a l ’ ) +
21 ” :</s trong> ” + a d r e s s e . g e t A t t r i b u t e ( ’ c o d e P o s t a l ’ ) + ”<br />” +
22 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ v i l l e ’ ) +
23 ” :</s trong> ” + a d r e s s e . g e t A t t r i b u t e ( ’ v i l l e ’ ) + ”<br />” +
24 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ pays ’ ) +
25 ” :</s trong> ” + a d r e s s e . g e t A t t r i b u t e ( ’ pays ’ ) +
26 ”</span>” ;
27
28 // v a r i a n t e en énumé r a n t automatiquement l e s p r o p r i é t é s
29 codeHTML += ”<span><h2>E r r e u r s :</h2>” +
30 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ i d ’ ) +
31 ” :</s trong>” + a d r e s s e . g e t E r r o r M e s s a g e ( ’ i d ’ ) + ”<br />” +
32 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ numeroRue ’ ) +
33 ” :</s trong> ” + a d r e s s e . g e t E r r o r M e s s a g e ( ’ numeroRue ’ ) + ”<br />” +
34 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ rue ’ ) +
35 ” :</s trong> ” + a d r e s s e . g e t E r r o r M e s s a g e ( ’ rue ’ ) + ”<br />” +
36 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ complementAddr ’ ) +
37 ” :</s trong> ” + a d r e s s e . g e t E r r o r M e s s a g e ( ’ complementAddr ’ ) + ”<br />” +
38 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ c o d e P o s t a l ’ ) +
39 ” :</s trong> ” + a d r e s s e . g e t E r r o r M e s s a g e ( ’ c o d e P o s t a l ’ ) + ”<br />” +
40 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ v i l l e ’ ) +
41 ” :</s trong> ” + a d r e s s e . g e t E r r o r M e s s a g e ( ’ v i l l e ’ ) + ”<br />” +
42 ”<s trong>” + a d r e s s e . g e t L a b e l T e x t ( ’ pays ’ ) +
43 ” :</s trong> ” + a d r e s s e . g e t E r r o r M e s s a g e ( ’ pays ’ ) +
44 ”</span></div>” ;
46 } // f i n de l a mé t h o d e t e s t A f f i c h e A d r e s s e
47 } // f i n du module myApp . t e s t
48 ) ; // f i n de l ’ i n v o c a t i o n de myApp . addModule
49
50 /* * @ d e s c r i p t i o n Programme p r i n c i p a l q u i c o n s t r u i t l e s donn é e s
51 * e t g é nère l a vue .
52 * @method myApp . mainFunction
53 * @public
54 */
56 // c r é a t i o n d ’ une i n s t a n c e
57 var a d r e s s e = myApp . m e t i e r . a d r e s s e . c r e a t e I n s t a n c e ( {
58 i d : ” 04 a b f 8 5 b c 9 ” ,
59 numeroRue : ” 2 b i s ” ,
60 r u e : ”Rue de l ’ a Paix ” ,
61 // o u b l i du champs complementAddr
62 c o d e P o s t a l : ” 630000 ” ,
64 pays : ” France 2 ”
65 }) ;
66
67 var codeHTML = t h i s . t e s t . t e s t A f f i c h e A d r e s s e ( a d r e s s e ) ;
68
69 // Test de s e t t e r
70 a d r e s s e . s e t A t t r i b u t e ( ” complementAddr ” , ” \”Bâ t i m e n t 3D\” ” ) ;
71 a d r e s s e . s e t A t t r i b u t e ( ” c o d e P o s t a l ” , ” 63000 ” ) ;
72 a d r e s s e . s e t A t t r i b u t e ( ” pays ” , ” France ” ) ;
47
73 a d r e s s e . s e t A t t r i b u t e ( ”numeroRue” , ”@#*m” ) ;
74
75 codeHTML += t h i s . t e s t . t e s t A f f i c h e A d r e s s e ( a d r e s s e ) ;
76
77 // Test de c l o n a g e :
78 codeHTML += t h i s . t e s t . t e s t A f f i c h e A d r e s s e ( a d r e s s e . c l o n e ( ) ) ;
79
82 } ) ;
83
Code Source 2.22 : Fichiers JS inclus dans ex06-moduleMetierAdresseTest.html

5 <!−− Cré a t i o n de sous−module a d r e s s e de myApp . m e t i e r −−>
6 <s c r i p t src=” . /ex06−createModuleMetier . j s ”></s c r i p t>
7 <!−− Cré a t i o n d ’ une mé t h o d e f a b r i q u e g éné r i q u e d ’ o b j e t s mé t i e r −−>
8 <s c r i p t src=” . / e x 0 7 − f a b r i q u e O b j e t M e t i e r . j s ”></s c r i p t>
10 <s c r i p t src=” . /ex06−moduleMetierAdresse . j s ”></s c r i p t>
11 <!−− Cré a t i o n d ’ une mé t h o d e f a b r i q u e d ’ a d r e s s e de myApp . m e t i e r . a d r e s s e −−>
12 <s c r i p t src=” . / e x 0 8 − f a b r i q u e A d r e s s e . j s ”></s c r i p t>
13 −−
14 <!−− Ajout d ’ une f o n c t i o n de t e s t , d ’ une mé t h o d e ”main ” , e t ex é c u t i o n −−>
15 <s c r i p t src=” . /ex06−moduleMetierAdresseTest . j s ”></s c r i p t>
2.6.5 Utilisation : Création d’un Module myApp.view.adresse

Nous ajoutons, dans un module myApp.view.adresse, des méthodes pour générer le code
HTML d’une adresse, au format compact (sur une ligne) ou au format développé (avec le
détail des labels des attribut).
Code Source 2.23 : /pattern-fonct/ex09-adresseView.js

1 // Cré a t i o n d ’ un module myApp . v i e w e t d ’ un sous−module myApp . v i e w . a d r e s s e
2 myApp . addModule ( ” v i e w ” , { a d r e s s e : { } } ) ;
3
4 /* *
5 * Mé t h o d e de g éné r a t i o n de code HTML pour une i n s t a n c e d ’ a d r e s s e .
6 * Pour chaque p r o p r i é t é a t t e n d u e d ’ une a d r e s s e , l a d e s c r i p t i o n de l a p r o p r i é t é
e t sa v a l e u r s o n t a f f i c h é e s .
7 *
8 * @method g e t H t m l D e v e l o p p e d
9 * @augments myApp . v i e w . a d r e s s e
10 * @param { O b j e c t } a d r e s s e − sp é c i f i c a t i o n d e s p r o p r i é t é s d ’ une i n s t a n c e d ’
adresse
11 * @param { s t r i n g } a d r e s s e . i d − i d e n t i f i a n t u n i q u e de l ’ i n s t a n c e
12 * @param { s t r i n g } a d r e s s e . numeroRue − numero de rue
13 * @param { s t r i n g } a d r e s s e . rue − nom de rue
48
14 * @param { s t r i n g } a d r e s s e . complementAddr − compl é ment d ’ a d r e s s e ( l i e u dut , b â

15 * @param { s t r i n g } a d r e s s e . c o d e P o s t a l − code p o s t a l
16 * @param { s t r i n g } a d r e s s e . v i l l e − nom de v i l l e
17 * @param { s t r i n g } a d r e s s e . pays − nom de pays
18 */
19 myApp . addModule . apply (myApp . view . a d r e s s e , [ ” g e t H t m l D e v e l o p p e d ” , function ( a d r e s s e
){
20 var htmlCode = ” ” ;
21
22 var moduleAdresse = a d r e s s e . getModule ( ) ;
23
24 i f ( a d r e s s e . g e t A t t r i b u t e ( ’ numeroRue ’ ) ) {
25 htmlCode += ”<span c l a s s =\” a d r e s s e I t e m \”>” + moduleAdresse . g e t L a b e l T e x t ( ’
numeroRue ’ ) + ”&nbsp ; :</span> ” +
26 a d r e s s e . g e t A t t r i b u t e ( ’ numeroRue ’ ) + ” ,<br />” ;
27 }
28
29 htmlCode += ”<span c l a s s =\” a d r e s s e I t e m \”>” + moduleAdresse . g e t L a b e l T e x t ( ’ rue ’ )
+ ”&nbsp ; :</span> ” +
30 a d r e s s e . g e t A t t r i b u t e ( ’ rue ’ ) + ” ,<br />” ;
31
32 i f ( typeof a d r e s s e . g e t A t t r i b u t e ( ’ complementAddr ’ ) === ” s t r i n g ” &&
33 a d r e s s e . g e t A t t r i b u t e ( ’ complementAddr ’ ) !== ” ” ) {
complementAddr ’ ) + ”&nbsp ; :</span> ” +
35 a d r e s s e . g e t A t t r i b u t e ( ’ complementAddr ’ ) + ” ,<br />” ;
36 }
37
c o d e P o s t a l ’ ) + ”&nbsp ; :</span> ” +
39 a d r e s s e . g e t A t t r i b u t e ( ’ c o d e P o s t a l ’ ) + ”<br />” +
40 ”<span c l a s s =\” a d r e s s e I t e m \”>” + moduleAdresse . g e t L a b e l T e x t ( ’ v i l l e ’ ) + ”&
nbsp ; :</span> ” +
41 a d r e s s e . g e t A t t r i b u t e ( ’ v i l l e ’ ) + ”<br />” +
42 ”<span c l a s s =\” a d r e s s e I t e m \”>” + moduleAdresse . g e t L a b e l T e x t ( ’ pays ’ ) + ”&
nbsp ; :</span> ” +
43 a d r e s s e . g e t A t t r i b u t e ( ’ pays ’ ) + ”<br />” ;
44
45 i f ( adresse . hasError () ) {
46 var e r r o r L i s t = a d r e s s e . g e t E r r o r L i s t ( ) ;
47 htmlCode += ”<s trong>C e r t a i n s champs ont une e r r e u r :</s trong><br />” ;
48 f o r ( var i =0 ; i<e r r o r L i s t . l e n g t h ; i ++){
49 i f ( i > 0) {
50 htmlCode += ” , ” ;
51 }
52 htmlCode += e r r o r L i s t [ i ] ;
53 }
54 }
55
56 return htmlCode ;
57 }]) ;
58
59 /* *
60 * Mé t h o d e de g éné r a t i o n de code HTML pour une i n s t a n c e d ’ a d r e s s e .
61 * L ’ a d r e s s e e s t a f f i c h é e s u r une l i g n e , s a n s mention d e s e r r e u r s .
49
62 *
64 * @augments myApp . v i e w . a d r e s s e
65 * @param { O b j e c t } a d r e s s e − sp é c i f i c a t i o n d e s p r o p r i é t é s d ’ une i n s t a n c e d ’
adresse
66 * @param { s t r i n g } a d r e s s e . i d − i d e n t i f i a n t u n i q u e de l ’ i n s t a n c e
67 * @param { s t r i n g } a d r e s s e . numeroRue − numero de rue
68 * @param { s t r i n g } a d r e s s e . rue − nom de rue
69 * @param { s t r i n g } a d r e s s e . complementAddr − compl é ment d ’ a d r e s s e ( l i e u dut , b â
70 * @param { s t r i n g } a d r e s s e . c o d e P o s t a l − code p o s t a l
71 * @param { s t r i n g } a d r e s s e . v i l l e − nom de v i l l e
72 * @param { s t r i n g } a d r e s s e . pays − nom de pays
73 */
74 myApp . addModule . apply (myApp . view . a d r e s s e , [ ” getHtmlCompact ” , function ( a d r e s s e ) {
76
77 i f ( a d r e s s e . g e t A t t r i b u t e ( ’ numeroRue ’ ) ) {
78 htmlCode += a d r e s s e . g e t A t t r i b u t e ( ’ numeroRue ’ ) + ” , ” ;
79 }
80
81 htmlCode += a d r e s s e . g e t A t t r i b u t e ( ’ rue ’ ) + ” , ” ;
82 i f ( a d r e s s e . g e t A t t r i b u t e ( ’ complementAddr ’ ) ) {
83 htmlCode += a d r e s s e . g e t A t t r i b u t e ( ’ complementAddr ’ ) + ” , ” ;
84 }
85 htmlCode += a d r e s s e . g e t A t t r i b u t e ( ’ c o d e P o s t a l ’ ) + ” ” +
86 adresse . getAttribute ( ’ v i l l e ’ ) + ” , ” +
87 a d r e s s e . g e t A t t r i b u t e ( ’ pays ’ ) ;
89 }]) ;
Code Source 2.24 : /pattern-fonct/ex09-adresseViewTest.js (cf. Fig 2.7)

2 * d ’ a d r e s s e a v e c l e s mé t h o d e s du p a c k a g e myApp . v i e w . a d r e s s e
5 * @public
7 */
50
9 t e s t A f f i c h e A d r e s s e : function ( a d r e s s e ) {
10 return ”<span s t y l e =\”width :260 px ; display : i n l i n e −b l o c k ; vertical −align :
top ;\”>” +
11 ”<p><s trong>Adresse Dé v e l o p p é e :</s trong><br />” +
12 myApp . view . a d r e s s e . getHtmlDevelopped ( a d r e s s e ) + ”</p>” +
13 ”<p><s trong>Adresse Compacte :</s trong><br />” +
14 myApp . view . a d r e s s e . getHtmlCompact ( a d r e s s e ) + ”</p>” +
15 ”</span>” ;
16 } // f i n de l a mé t h o d e t e s t A f f i c h e A d r e s s e
19
20
24 * @public
25 */
29 i d : ” 04 a b f 8 5 b c 9 ” ,
33 c o d e P o s t a l : ” 630000 ” ,
36 }) ;
37
38 var codeHTML = t h i s . t e s t . t e s t A f f i c h e A d r e s s e ( a d r e s s e ) ;
39
44
45 codeHTML += t h i s . t e s t . t e s t A f f i c h e A d r e s s e ( a d r e s s e ) ;
48 } ) ;
49
Code Source 2.25 : Fichiers JS inclus dans ex09-adresseViewTest.html

51

13 <!−− Cré a t i o n de f o n c t i o n s d ’ a f f i c h a g e dans myApp . m e t i e r . v i e w . a d r e s s e −−>
14 <s c r i p t src=” . /ex09−adresseView . j s ”></s c r i p t>
15 −−
17 <s c r i p t src=” . /ex09−adresseViewTest . j s ”></s c r i p t>
2.7 Interface Générique de Objets métier

Il est possible de tester l’affichage des objets métier de manière générique, sans supposer qu’il
s’agit particuièrement d’une adresse, sur la base de l’implémentation d’une interface. Nous
devons d’abord créer un outil pour vérifier l’implémentation d’une interface par des objets
JavaScript.
2.7.1 Implémentation d’interfaces en JavaScript

Voici une classe Interface, qui possède comme attribut un Array de noms de méthodes, et qui
permet de vérifier qu’un objet possède bien des méthodes avec les noms correspondants. Notons
que nous ne vérifions pas que lés méthodes correspondent bien à un prototype déterminé, mais
seulement que les noms de méthodes sont présents.
Code Source 2.26 : /pattern-fonct/ex11-interfaceImplementation.js
1 /* *
2 * Dé f i n i t une ” i n t e r f a c e ” , a v e c un nom e t un e n s e m b l e de mé t h o d e s .
3 * Ceci nous p e r m e t t r a de v é r i f i e r qu ’ un c e r t a i n nombre d ’ op é r a t i o n s
4 * s o n t pr é s e n t e s dans un o b j e t J a v a S c r i p t .
5 *
6 * @constructor I n t e r f a c e
7 * @param { s t r i n g } name − nom de l ’ i n t e r f a c e
8 * @param { s t r i n g [ ] } methods − t a b l e a u c o n t e n a n t l e s noms d e s mé t h o d e s de l ’
interface .
9 */
10 var I n t e r f a c e = function ( methods ) {
11
12 i f ( methods . l e n g t h === u n d e f i n e d ) {
13 throw {
14 name : ” I l l e g a l A r g u m e n t ” ,
15 message : ”Une i n t e r f a c e né c e s s i t e un a r r a y ( ou array−l i k e ) de noms de mé
thodes . ”
16 };
17 }
18
19 // Cré a t i o n d ’ une p r o p r i é t é pour s t o c k e r l e nom de l ’ i n t e r f a c
20 // Cré a t i o n d ’ un t a b l e a u pour s o c k e r l e s noms de mé t h o d e d
21 t h i s . methods = [ ] ;
22 // pour chaque nom de mé t h o d e
23 fo r ( var i = 0 ; i < methods . l e n g t h ; ++i ) {
24 // Vé r i f i c a t i o n de t y p e
25 i f ( typeof methods [ i ] !== ’ s t r i n g ’ ) {
52
26 throw {
27 name : ” I l l e g a l A r g u m e n t ” ,
28 message : ” Les noms de mé t h o d e s d ’ une i n t e r f a c e d o i v e n t ê t r e de t y p e
string .”
29 };
30 }
31 // Ajout du nom de mé t h o d e
32 t h i s . methods . push ( methods [ i ] ) ;
33 }
34 };
35
36 /* *
37 * Vé r i f i e qu ’ un o b j e t ” i m p l é mente une i n t e r f a c e ” , en ce s e n s qu ’ i l comporte
38 * un c e r t a i n nombre de mé t h o d e s ( p r o p r i é t é s de t y p e f o n c t i o n ) q u i ont l e s
39 * mêmes noms que l e s mé t h o d e s de l ’ i n t e r f a c e .
40 *
41 * @method isImplementedBy
42 * @param { O b j e c t } o b j e t − o b j e t q u i d o i t i m p l é menter l ’ i n t e r f a c e .
43 * @return { b o o l e a n | s t r i n g } t r u e s i l ’ o b j e t comporte t o u t e s l e s mé t h o d e s de l ’
interface ,
44 * un message d ’ e r r e u r i n d i q u a n t une mé t h o d e q u i n ’ e s t pas pr é s e n t e dans l ’ o b j e t
sinon .
45 */
46 I n t e r f a c e . p r o t o t y p e . isImplementedBy = function ( o b j e t ) {
47 // Pour chaque nom de mé t h o d e
48 fo r ( var i = 0 ; i < t h i s . methods . l e n g t h ; ++i ) {
49 var methodName = t h i s . methods [ i ] ;
50 // S i l ’ o b j e t n ’ a pas de p r o p r i é t é de ce nom q u i s o i t de t y p e f o n c t i o n
51 i f ( ! o b j e t [ methodName ] | | typeof o b j e t [ methodName ] !== ’ f u n c t i o n ’ ) {
52 return ”L ’ o b j e t n ’ i m p l é mente pas l a mé t h o d e ” + methodName ;
53 }
54 }
55 return true ;
56 };
Voici un exemple dans lequel nous définissions une interface attendues de nos modules
métier. Cette interface contient deux types de méthodes :
1. L’interface attendue des instances du module métier permet de tester la présence d’un
certain nombre de méthodes communes à toutes les instances (similaires à des méthodes
de classe), qui sont définies dans le prototype des instances ;
2. L’interface attendue des instances permet de s’assurer de la présence d’un certain nombre
de méthodes sur les instances, qui sont définies soit au niveau du prototype (si le code
source est indépendant de l’instance) ou au niveau de l’instance (si besoin de personnaliser
le code).
2.7.2 Interface des instances de modules métier
Code Source 2.27 : /pattern-fonct/ex11-interfaceImplementationMetier.js

1 /* * @ d e s c r i p t i o n Test s i un o b j e t i m p l é mente l e s i n t e r f a c e s g éné r i q u e s
2 * pour l e s o b j e t s mé t i e r s s u i v a n t n o t r e m o d l i s a t i o n .
3 *
53
4 * @method t e s t I n t e r f a c e I m p l e m e n t a t i o n
6 * @public
7 * @param { O b j e c t } i n s t a n c e − I n s t a n c e d ’ o b j e t mé t i e r s u p p o s é e
8 * @param { f u n c t i o n } i n s t a n c e . getModule − r e t o u r n e l e module mé t i e r (mé t h o d e s
statiques )
9 * @param { f u n c t i o n } i n s t a n c e . g e t A t t r i b u t e
10 * @param { f u n c t i o n } i n s t a n c e . s e t A t t r i b u t e
11 * @param { f u n c t i o n } i n s t a n c e . h a s E r r o r
12 * @param { f u n c t i o n } i n s t a n c e . g e t E r r o r M e s s a g e
13 * @param { f u n c t i o n } i n s t a n c e . g e t E r r o r L i s t
14 *
15 * @param { f u n c t i o n } i n s t a n c e . getModule ( ) . g e t A t t r i b u t e L i s t
16 * @param { f u n c t i o n } i n s t a n c e . getModule ( ) . g e t L a b e l T e x t
17 * @param { f u n c t i o n } i n s t a n c e . getModule ( ) . t e s t R e g e x
18 * @param { f u n c t i o n } i n s t a n c e . getModule ( ) . c r e a t e I n s t a n c e
19 *
20 * @return
21 */
22 myApp . addModule . apply (myApp . m e t i e r , [ ” t e s t I n t e r f a c e I m p l e m e n t a t i o n ” , function (
instance ){
23
24 // Dé f i n i t i o n de l ’ i n t e r f a c e commune aux modules mé t i e r ( a d r e s s e , personne ,
etc .)
25 var metierCommonMethods = new I n t e r f a c e ( [
26 // 1) Mé t h o d e s s t a t i q u e s ( r é s u l t a t s i n d é pendant de l ’ i n s t a n c e )
27 ” getAttributeList ” , ” getLabelText ” , ” testRegex ” , ” createInstance ” ,
28 // 2) Mé t h o d e s d ’ i n s t a n c e ( r é s u l t a t s d é pendant de l ’ i n s t a n c e )
29 ” getModule ” , ” g e t A t t r i b u t e ” , ” s e t A t t r i b u t e ” , ” h a s E r r o r ” , ” g e t E r r o r M e s s a g e ” ,
” getErrorList ”
30 ]) ;
31
32 // c r é a t i o n d ’ une i n s t a n c e ( en l ’ o c c u r r e n c e une a d r e s s e )
33 var monObjet = myApp . m e t i e r . a d r e s s e . c r e a t e I n s t a n c e ( {
34 i d : ” 04 a b f 8 5 b c 9 ” ,
37 complementAdresse : ”Bâ t i m e n t 3D” ,
38 c o d e P o s t a l : ” 63000 ” ,
41 }) ;
42
43 return metierCommonMethods . isImplementedBy ( monObjet ) ;
44 } ] ) ;
Code Source 2.28 : /pattern-fonct/ex11-interfaceImplementationTest.js

4 * @public
5 */
8 var monObjet = myApp . m e t i e r . a d r e s s e . c r e a t e I n s t a n c e ( {
54
9 i d : ” 04 a b f 8 5 b c 9 ” ,
12 complementAdresse : ”Bâ t i m e n t 3D” ,
13 c o d e P o s t a l : ” 63000 ” ,
16 }) ;
17
18 var t e s t I n t e r f a c e s M e t i e r = myApp . m e t i e r . t e s t I n t e r f a c e I m p l e m e n t a t i o n ( monObjet ) ;
19 var codeHTML ;
20 i f ( t e s t I n t e r f a c e s M e t i e r === true ) {
21 codeHTML = ”<p>L ’ o b j e t s e m b l e b i e n i m p l é menter l e s mé t h o d e s r e q u i s e s .</p>” ;
22 } else {
23 codeHTML = ”<p>” + t e s t I n t e r f a c e s M e t i e r + ”</p>”
24 }
27 } ) ;
28
”
Code Source 2.29 : Fichiers JS inclus dans ex11-interfaceImplementationTest.html
14 <s c r i p t src=” . /ex09−adresseView . j s ”></s c r i p t>
15 <!−− C l a s s e de v é r i f i c a t i o n de l ’ i m p l é me n t a t i o n d ’ i n t e r f a c e s −−>
16 <s c r i p t src=” . / e x 1 1 − i n t e r f a c e I m p l e m e n t a t i o n . j s ”></s c r i p t>
18 <s c r i p t src=” . / e x 1 1 − i n t e r f a c e I m p l e m e n t a t i o n M e t i e r . j s ”></s c r i p t>
19 −−
21 <s c r i p t src=” . / e x 1 1 − i n t e r f a c e I m p l e m e n t a t i o n T e s t . j s ”></s c r i p t>
2.7.3 Exemple d’utilisation : Méthode d’affichage générique
Code Source 2.30 : /pattern-fonct/ex12-objetMetierView.js

1 // Cré a t i o n d ’ un module myApp . v i e w e t d ’ un sous−module myApp . v i e w . a d r e s s e
2 myApp . addModule ( ” v i e w ” , { a d r e s s e : { } } ) ;
3
55
4 /* *
5 * Mé t h o d e de g éné r a t i o n de code HTML pour une i n s t a n c e d ’ o b j e t mé t i e r .
6 * Pour chaque a t t r i b u t d ’ une i n s t a n c e , l a d e s c r i p t i o n de l a p r o p r i é t é
7 * e t sa v a l e u r s o n t a f f i c h é e s .
8 *
10 * @augments myApp . v i e w
11 * @public
12 * @param { O b j e c t } i n s t a n c e − i n s t a n c e d ’ o b j e t mé t i e r q u i i m p l é mente :
13 * ” getModule ” , ” g e t A t t r i b u t e ” , ” s e t A t t r i b u t e ” ,
14 * ” hasError ” , ” getErrorMessage ” , ” g e t E r r o r L i s t ”
15 * a i n s i que l e s mé t h o d e s s t a t i q u e s :
16 * ” getAttributeList ” , ” getLabelText ” , ” testRegex ” ,
17 * ” c r e a t e I n s t a n c e ” , ” getModule ” .
18 */
19 myApp . addModule . apply (myApp . view , [ ” g e t H t m l G e n e r i c ” , function ( i n s t a n c e ) {
20 var t e s t I n t e r f a c e s M e t i e r = myApp . m e t i e r . t e s t I n t e r f a c e I m p l e m e n t a t i o n ( i n s t a n c e ) ;
21 i f ( t e s t I n t e r f a c e s M e t i e r !== true ) {
22 // Retourner un message d ’ e r r e u r au l i e u du code HTML de l ’ i n s t a n c e
23 return t e s t I n t e r f a c e s M e t i e r ;
24 }
25 // Code HTML pour l ’ a f f i c h a g e de l ’ i n s t a n c e :
26 var codeHTML = ”<div><span><h2>Donné e s de l ’ i n s t a n c e :</h2>” ;
27 fo r ( var i =0 ; i < i n s t a n c e . getModule ( ) . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++i ) {
28 var attributeName = i n s t a n c e . getModule ( ) . g e t A t t r i b u t e L i s t ( ) [ i ] ;
29 codeHTML += ”<s trong>”
30 + i n s t a n c e . getModule ( ) . g e t L a b e l T e x t ( attributeName ) + ” : ”
31 + ”</s trong> ”
32 + i n s t a n c e . g e t A t t r i b u t e ( attributeName ) + ”<br />” ;
33 }
34 codeHTML += ”</span>” ;
35
36 // v a r i a n t e en énumé r a n t automatiquement l e s p r o p r i é t é s
37 codeHTML += ”<span><h2>E r r e u r s :</h2>” ;
38 fo r ( var i =0 ; i < i n s t a n c e . getModule ( ) . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++i ) {
39 var attributeName = i n s t a n c e . getModule ( ) . g e t A t t r i b u t e L i s t ( ) [ i ] ;
40 codeHTML += ”<s trong>”
41 + i n s t a n c e . getModule ( ) . g e t L a b e l T e x t ( attributeName ) + ” : ”
42 + ”</s trong> ” +
43 i n s t a n c e . g e t E r r o r M e s s a g e ( attributeName ) + ”<br />” ;
44 }
45 codeHTML += ”</span></div>” ;
47 } ] ) ;
Code Source 2.31 : /pattern-fonct/ex12-objetMetierViewTest.js

2 * d ’ a d r e s s e a v e c l e s mé t h o d e s du p a c k a g e myApp . v i e w . a d r e s s e
5 * @public
7 */
9 t e s t A f f i c h e I n s t a n c e : function ( i n s t a n c e ) {
56
10 return myApp . view . getHtmlGeneric ( i n s t a n c e ) ;

11 } // f i n de l a mé t h o d e t e s t A f f i c h e I n s t a n c e
14
15
19 * @public
20 */
24 i d : ” 04 a b f 8 5 b c 9 ” ,
27 complementAddr : ” aa ” ,
29 c o d e P o s t a l : ” 630000 ” ,
30 v i l l e : ” Clermont−Fernand ” ,
32 }) ;
33
34 var codeHTML = t h i s . t e s t . t e s t A f f i c h e I n s t a n c e ( a d r e s s e ) ;
35
40
41 codeHTML += t h i s . t e s t . t e s t A f f i c h e I n s t a n c e ( a d r e s s e ) ;
42
43 // a l e r t (codeHTML) ;
46 } ) ;
47
Code Source 2.32 : Fichiers JS inclus dans ex12-objetMetierViewTest.html

57
14 <s c r i p t src=” . / e x 1 1 − i n t e r f a c e I m p l e m e n t a t i o n . j s ”></s c r i p t>
16 <s c r i p t src=” . / e x 1 1 − i n t e r f a c e I m p l e m e n t a t i o n M e t i e r . j s ”></s c r i p t>
17 <!−− Cré a t i o n de f o n c t i o n s d ’ a f f i c h a g e g éné r i q u e dans myApp . m e t i e r . v i e w −−>
18 <s c r i p t src=” . / e x 1 2 − o b j e t M e t i e r V i e w . j s ”></s c r i p t>
19 −−
21 <s c r i p t src=” . / e x 1 2 − o b j e t M e t i e r V i e w T e s t . j s ”></s c r i p t>
58
Chapitre 3
Constructeurs, Prototype et Patterns

Associés
3.1 Constructeurs
Un classe en Javascript se crée à partir d’un constructeur, qui est une fonction dont le nom est
le nom de la classe à créer. À l’intérieur du constructeur, les propriétés de la classe sont créées
et initialisées à l’aide de l’identificateur this. Le constructeur retourne un unique objet dont
les propriétés correspondent à celles qui ont été initialisées à l’aide de l’identificateur this. En
d’autres termes, le constructeur retourne une instance de la classe. Par convention, les noms
de constructeurs commencent par une majuscule.
Code Source 3.1 : /pattern-proto/ex01-classeTelephone.js
1 /* *
2 * C o n s t r u c t e u r de t é l é phone . Notez l a m a j u s c u l e s u r l e nom .
3 * @constructor
4 * @param { s t r i n g } t e l 1 − l e numé ro de t é l é phone .
5 * @param { s t r i n g } [ t e l 2 ] − un second numé ro de t é l é phone .
6 */
7 var Telephone = function ( t e l 1 , /* argument o p t i o n n e l */ t e l 2 ) {
8
9 var checkPhone = function ( t e l ) {
10 // Test d ’ e x p r e s s i o n r é g u l i è r e a p r è s s u p p r e s s i o n d e s e s p a c e s e t t a b u l a t i o n s
11 i f ( typeof t e l . l i b e l l e !== ” s t r i n g ” | | typeof t e l . numero !== ” s t r i n g ” | |
12 /^ ((\+33) | 0 ) [0 −9]{9} $/ . t e s t ( t e l . numero . r e p l a c e ( / \ s /g , ’ ’ ) ) !== true ) {
13 throw {
14 name : ” I l l e g a l A r g u m e n t E x c e p t i o n ” ,
15 message : ”Numé ro de t é l é phone \” ” + t e l . l i b e l l e + ” : ” + t e l . numero + ”
\” i n v a l i d e ”
16 }
17 }
18 };
19
20 checkPhone ( t e l 1 ) ;
21 // Cré a t i o n d ’ un a t t r i b u t de l a c l a s s e
22 t h i s . t e l 1=t e l 1 ;
23
24 i f ( t e l 2 !== u n d e f i n e d ) {
25 checkPhone ( t e l 2 ) ;
26 // Cré a t i o n d ’ un a t t r i b u t de l a c l a s s e
59
27 t h i s . t e l 2=t e l 2 ;
28 }
29
30 /* *
31 * @method g etH tml
32 * @return { s t r i n g } l e code HTML pour a f f i c h e r une i n s t a n c e .
33 */
34 t h i s . getHtml = function ( ) {
35 var htmlCode = t h i s . t e l 1 . l i b e l l e + ” : ” + t h i s . t e l 1 . numero + ”<br />” ;
36 i f ( t h i s . t e l 2 !== u n d e f i n e d ) {
37 htmlCode += t h i s . t e l 2 . l i b e l l e + ” : ” + t h i s . t e l 2 . numero + ”<br />” ;
38 }
40 };
41 }
Code Source 3.2 : /pattern-proto/ex01-classeTelephoneTest.js

1 try {
2 // Appel du c o n s t r u c t e u r a v e c l e mot c l é ”new” :
3 var t e l = new Telephone ( { l i b e l l e : ” Maison ” , numero : ”+33 1 23 45 67 89 ” } ,
4 { l i b e l l e : ” M o b i l e ” , numero : ” 09 87 65 43 21 ” } ) ;
5 // U t i l i s a t i o n de l a mé t h o d e getH tml ( )
6 var codeHTML = ”<p>” + t e l . getHtml ( ) + ”</p>” ;
7 } catch ( e r r ) {
8 a l e r t ( e r r . message ) ;
9 }
Un constructeur doit systématiquement être employé avec le mot clé new. En

effet, l’emploi d’un constructeur sans le mot clé new, qui ne génère, en soi, aucune
exception ni warning conduit à un comportement imprévisible, généralement
catastrophique. D’où l’importance de respecter la convention que les noms
de constructeurs commencent par une majuscule, contrairement à toutes
les autres fonctions ou variables.
3.2 Prototypes
3.2.1 Notion de prototype
Les méthodes de classes telles que vues jusqu’à présent ont l’inconvénient que ces méthodes
sont des propriétés des objets, qui existent en autant d’exemplaires qu’il y a d’instance des
objets, alors qu’elles sont constantes.
Pour éviter cela, on peut mettre les méthodes non pas directement dans l’objet, mais dans
son prototype. Le prototype est lui-même une propriété de l’objet, mais qui est partagée entre
tous les objets de la classe (il s’agit d’une variable de classe). Toutes les variables de classes
doivent être crées au niveau du prototype.
Code Source 3.3 : /pattern-proto/ex02-prototype.js

1
60
Chapitre 3 : Constructeurs, Prototype et Patterns Associés
2 /* *
3 * Augmente l a c l a s s e Telephone en e j o u t a n t une mé t h o d e au p r o t o t y p e de
Telephone
4 * @method g e t H t m l B y L i b e l l e
5 * @return { s t r i n g } l e code HTML pour a f f i c h e r une i n s t a n c e .
6 */
7 Telephone . p r o t o t y p e . getNumero = function ( l i b e l l e ) {
8 i f ( t h i s . t e l 1 . l i b e l l e . toLowerCase ( ) === l i b e l l e . toLowerCase ( ) ) {
9 return t h i s . t e l 1 . numero ;
10 }
11 i f ( t h i s . t e l 2 !== u n d e f i n e d &&
12 t h i s . t e l 2 . l i b e l l e . toLowerCase ( ) === l i b e l l e . toLowerCase ( ) ) {
13 return t h i s . t e l 2 . numero ;
14 }
15 return ”Numé ro i n e x i s t a n t ” ;
16 };
Code Source 3.4 : /pattern-proto/ex02-prototypeTest.js (cf. Fig 3.1)

1 try {
4 { l i b e l l e : ” Mo b i l e ” , numero : ” 09 87 65 43 21 ” } ) ;
5 // U t i l i s a t i o n de l a mé t h o d e getNumero ( ) du p r o t o t y p e
6 var codeHTML = ”<p>” + t e l . getNumero ( ” maison ” ) + ”</p>” ;
7 codeHTML += ”<p>” + t e l . getNumero ( ” m o b i l e ” ) + ”</p>” ;
8 codeHTML += ”<p>” + t e l . getNumero ( ” t r a v a i l ” ) + ”</p>” ;
9 } catch ( e r r ) {
11 }
La méthode Object.prototype.hasOwnProperty() permet de tester si une propriété d’un

objet existe au niveau de l’objet lui-même, ou au niveau de son prototype, ou encore du
prototype de son prototype.
Le fonctionnement de la notion de prototype est le suivant : Lors d’une tentative d’accès
à un propriété de l’objet, la propriété est tout d’abord recherchée au niveau des propriétés
propres. Seulement si la propriété n’existe pas dans les propriétés propres, elle est ensuite
recherchée dans le prototype de l’objet. Si elle n’existe pas non plus à ce niveau, la propriété
est recherchée dans le prototype du prototype, et ainsi de suite...
Ce processus s’appelle la délégation et il permet de spécialiser les objets, en les faisant hériter
des propriétés d’un prototype, tout en leur permettant de surcharger (redéfinir) les données ou
61
méthodes. Ceci constitue un mécanisme très souple d’héritage, entièrement dynamique.
3.2.2 Surcharge des méthodes du prototype : l’exemple de toString

La méthode toString, qui permet de convertir un objet en chaîne de caractères (par exemple
pour l’afficher) a une implémentation par défaut définie dans le prototype de la classe Object.
On peut la surcharger dans le prototype de notre classe Telephone pour changer le compor-
tement par défaut de la méthode toString et mettre en forme à notre guise les numéros de
téléphone.
Code Source 3.5 : /pattern-proto/ex03-toString.js

1 /* *
2 * @override t o S t r i n g
3 * @return { s t r i n g } une cha î ne de c a r a c t è r e r e p r é s e n t a t n t l ’ i n s t a n c e de
Telephone
4 */
5
6 Telephone . p r o t o t y p e . t o S t r i n g = function ( ) {
7 var t e x t e = t h i s . t e l 1 . l i b e l l e + ” : ” + t h i s . t e l 1 . numero ;
8 i f ( t h i s . t e l 2 !== u n d e f i n e d ) {
9 t e x t e += ” e t ” + t h i s . t e l 2 . l i b e l l e + ” : ” + t h i s . t e l 2 . numero ;
10 }
11 return t e x t e ;
12 }
Code Source 3.6 : /pattern-proto/ex03-toStringTest.js

1 try {
4 { l i b e l l e : ” Mo b i l e ” , numero : ” 09 87 65 43 21 ” } ) ;
5 // U t i l i s a t i o n i m p l i c i t e de l a mé t h o d e t o S t r i n g ( ) ( c o n v e r s i o n )
6 var codeHTML = ”<p>” + t e l + ”</p>” ;
7 } catch ( e r r ) {
9 }
Code Source 3.7 : Fichiers JS inclus dans ex03-toStringTest.html

1 <!−− Dé f i n i t i o n du c o n s t r u c t e u r de Telephone −−>
2 <s c r i p t src=” . / e x 0 1 − c l a s s e T e l e p h o n e . j s ”></s c r i p t>
3 <!−− Redé f i n i t i o n de l a mé t h o d e t o S t r i n g du p r o t o t y p e de Telephone −−>
4 <s c r i p t src=” . / e x 0 3 − t o S t r i n g . j s ”></s c r i p t>
5 −−
6 <!−− Impl é me n t a t i o n du t e s t e t de l a vue −−>
7 <s c r i p t src=” . / e x 0 3 − t o S t r i n g T e s t . j s ”></s c r i p t>
62
3.3 Modélisation de Modules Métier (version 2)

Le but de cette partie est de proposer une nouvelle modélisation pour les modules métier
définis dans la partie 2.6. L’objectif est d’utiliser la notion de prototype pour éviter d’avoir
autant de copies des méthodes statiques et des méthodes de classe des modules métier qu’il y
a d’instance. Constatant que le code source de toutes ces méthodes est le même pour toutes
les méthodes, ce code sera factorisé dans le prototype du module, qui sera lui-même accessible
via le prototype des instances.
3.3.1 Attributs et méthodes statiques (version 2)
Code Source 3.8 : /pattern-proto/ex05-createModuleMetierProto.js

1 /* * @ d e s c r i p t i o n Dé f i n i t l e s p r o p r i é t é s g éné r a l e d e s o b j e t s mé t i e r s
2 * à p a r t i r d ’ une sp é c i f i c a t i o n d e s a t t r i b u t s .
3 * On a j o u t e au mé t i e r un o b j e t q u i e s t l ’ i n t e r f a c e p u b l i q u e d ’ une f o n c t i o n q u i
s u i t l e p a t t e r n ” module ” .
4 * La f o n c t i o n r e t o u r n e son i n t e r f a c e p u b l i q u e q u i e s t un o b j e t .
5 * Cet o b j e t e s t a j o u t é comme sous−module au module ” m e t i e r ” .
6 *
7 * Dans c e t o b j e t , on ne t r o u v e pas pour l e moment l e s p r o p r i é t é s d ’ i n s t a n c e .
C e l l e s −c i s e r o n t a j o u t é e s par ” aug men tat io n ” .
8 *
9 * @module c r e a t e M o d u l e M e t i e r
11 * @param { s t r i n g } moduleName − nom du module mé t i e r
12 * @param { O b j e c t } a t t r i b u t e s P a t t e r n s − o b j e t c o n t e n a n t l e s a t t r i b u t s d ’ un
module mé t i e r
13 * − Chaque p r o p r i é t é de a t t r i b u t e s P a t t e r n s d é f i n i t un a t t r i b u t
du module mé t i e r
14 * − chaque a t t r i b u t p o s s è d e
15 * + une f o n c t i o n de t e s t s u r l e s v a l e u r s nommé e r e g e x T e s t
16 * + un t e x t e de l a b e l p e r m e t t a n t de d é s i g n e r l a donn é e
pour l ’ u t i l i s a t e u r
17 */
18 myApp . addModule . apply (myApp . m e t i e r , [ ” c r e a t e M o d u l e M e t i e r ” ,
19 function ( moduleName ,
20 attributesPatterns ){
21 // ////////////////////////////////////////////////////////
22 // S i l e modèle de t o u t e s l e s mé t h o d e s s t a t i q u e s communes
23 // à t o u s l e s o b j e t s mé t i e r n ’ a pas e n c o r e é t é c r é é
24 // ( Cet o b j e t e x i s t e en un e x e m p l a i r e u n i q u e . )
25 i f (myApp . m e t i e r . m e t h o d e s S t a t i q u e s M o d u l e s M e t i e r === u n d e f i n e d ) {
26 //On c r é e l e modèle de t o u t e s l e s mé t h o d e s s t a t i q u e s communes
27 // à t o u s l e s o b j e t s mé t i e r .
28 myApp . m e t i e r . m e t h o d e s S t a t i q u e s M o d u l e s M e t i e r = {
29 /* * @ d e s c r i p t i o n Renvoie l a l i s t e d e s p r o p r i é t é s a t t e n d u e s d e s i n s t a n c e s
.
31 */
33 return a t t r i b u t e L i s t ;
34 },
35
63
36 /* * @ d e s c r i p t i o n R e n v o i e l e t e x t e de d e s c r i p t i o n de l ’ a t t r i b u t a t t e n d u e
des i n s t a n c e s .
37 * Renvoie u n d e f i n e d en c a s d ’ e r r e u r ( p r o p r i é t é inconnue )
40 * @return { s t r i n g } l e t e x t e de d e s c r i p t i o n c o u r t e du champs
41 */
43 return a t t r i b u t e s P a t t e r n s [ attributeName ] . l a b e l T e x t ;
44 },
45
46
47 /* * @ d e s c r i p t i o n Expose l e t e s t d ’ e x p r e s s i o n r é g u l i è r e d e s a t t r i b u t s d e s
instances .
52 * @return { b o o l e a n | s t r i n g } t r u e s i l a c h a i n e e s t un a t t r i b u t v a l i d e ,
54 */
56 i f ( a t t r i b u t e s P a t t e r n s [ attributeName ] === u n d e f i n e d ) {
57 return ”La p r o p r i é t é ” + attributeName + ” n ’ e x i s t e pas ” ;
58 } else {
59 return a t t r i b u t e s P a t t e r n s [ attributeName ] . r e g e x T e s t ( v a l u e ) ;
60 }
61 }
62 } ; // Fin du l i t t é r a l myApp . m e t i e r . m e t h o d e s S t a t i q u e s M o d u l e s M e t i e r
63 } // f i n du ” i f (myApp . m e t i e r . m e t h o d e s S t a t i q u e s M o d u l e s M e t i e r === u n d e f i n e d ) ”
64
65 var ModuleMetier = function ( ) {} ;
66
67 // Le modèle de t o u t e s l e s mé t h o d e s s t a t i q u e s communes à t o u s l e s o b j e t s
68 // mé t i e r s e r t de p r o t o t y p e à t o u s l e s modules mé t i e r .
69 // Cela permet de r e n d r e c e s mé t h o d e s ( e x e m p l a i r e u n i q u e ) a c c e s s i b l e s
70 // dans t o u s l e s modules mé t i e r
71 ModuleMetier . p r o t o t y p e
72 = myApp . m e t i e r . m e t h o d e s S t a t i q u e s M o d u l e s M e t i e r ;
73
74 // Cré a t i o n du module a v e c l e c o n s t r u c t e u r de modules mé t i e r s
75 // p o u t p o u v o i r d é f i n i r un p r o t o t y p e commun pour t o u s
76 // l e s modules mé t i e r .
77 myApp . m e t i e r [ moduleName ] = new ModuleMetier ( ) ;
78 /* *
79 * Tableau c o n t e n a n t l a l i s t e d e s a t t r i b u t s d ’ une i n s t a n c e .
80 * Le t a b l e a u e s t pr é c a l c u l é l o r s de l ’ i n i t i a l i s a t i o n .
81 * @member
82 * @private
83 */
84 var a t t r i b u t e L i s t = function ( ) {
85 var l i s t e = [ ] ;
86
87 // Parcours d e s p r o p r i é t é s de l ’ o b j e t a t t r i b u t e s P a t t e r n s . r e g e x T e s t
88 // q u i c o r r e s p o n d e n t aux a t t r i v u t s de l ’ i n s t a n c e
89 fo r ( var attributeName in a t t r i b u t e s P a t t e r n s ) {
64
90 // Ne p a s c o n s i d é r e r l e s p r o p r i é t é s ” h é r i t é e s ” du p r o t o t y p e .
91 i f ( a t t r i b u t e s P a t t e r n s . hasOwnProperty ( attributeName ) ) {
92 l i s t e . push ( attributeName ) ;
93 }
94 }
95 return l i s t e ;
96 } ( ) ; // a p p e l immé d i a t de l a f o n c t i o n anonyme .
97
98 /* * @ d e s c r i p t i o n P r o p r i é t é c o n t e n a n t l e s sp é c i f i c a t i o n s
99 * de chaque a t t r i b u t t e l l e s que donn é e s en p a r a m è t r e s
100 */
101 //myApp . m e t i e r [ moduleName ] . a t t r i b u t e s P a t t e r n s = a t t r i b u t e s P a t t e r n s ;
102
103 } ] // f i n de l a f o n c t i o n q u i c r é e l ’ o b j e t myApp . m e t i e r [ moduleName ]
104 ) ; // f i n de l ’ a p p e l ” a p p l y ” de l a mé t h o d e myApp . addModule
105 // ( a j o u t de l ’ o b j e t t h i s au m et ier , s o u s l e nom c r e a t e M o d u l e M e t i e r )
3.3.2 Fabrique générique d’instances métier (version 2)

Pour les méthodes d’instance, le code source des méthodes étant indépendant de l’instance
(même si le résultats de ces méthodes dépend des valeurs attributs, et donc de l’instance), il sera
factorisé dans un prototype unique, qui est créé une seule fois. Le constructeur correspondant
est mémorisé dans la propriété privateInstanceConstructor du module myApp.metier.
Comme les attributs d’un constructeur sont toujours publics, nous instantions avec notre
privateInstanceConstructor une instance qui sera elle même privée (en suivant le pattern
module comme dans la partie 2.2).
Le module métier (comme par exemple myApp.metier.adresse), dont l’interface contient
les méthodes statiques (méthodes de classe), sera utilisé comme prototype des instances (PublicInstanceIn
Une instance du constructeur PublicInstanceInterface est retournée comme interface du
pattern module exposant à la fois les méthodes statiques et les méthodes d’instance.
Code Source 3.9 : /pattern-proto/ex05-fabriqueObjetMetierProto.js
1 /* *
2 * F a b r i q u e q u i c r é e d e s o b j e t s r e p r é s e n t a n t d e s i n s t a n c e d ’ o b j e t s mé t i e r ,
s u i v a n t l e ” p a t t e r n module ” .
3 * Le paramètre s p e c de n o t r e f o n c t i o n e s t un o b j e t c o n t e n a n t l e s a t t r i b u t s de l
’ instance à cr é er .
4 *
5 * @method c r e a t e I n s t a n c e G e n e r i q u e
7 * @param { O b j e c t | n u l l } i n p u t O b j − sp é c i f i c a t i o n d e s a t t r i b u t s d ’ une i n s t a n c e d ’
o b j e t mé t i e r .
8 * S i i n p u t O b j e s t n u l l , on c r é e une i n s t a n c e par d é f a u t ( i d a l é a t o i r e , a u t r e s
a t t r i b u t s vide ) .
9 * @param { s t r i n g | | u n d e f i n e d } i n p u t O b j . i d − i d e n t i f i a n t u n i q u e de l ’ i n s t a n c e
10 * @param { s t r i n g | number} i n p u t O b j . a t t r i b u t e N a m e − v a l e u r à a f f e c t e r à l ’
a t t r i b u t attributeName
11 * ( exemple pour une a d r e s s e : i n p u t O b j . numeroRue , i n p u t O b j .
codePostal , etc .
12 */
13 myApp . addModule . apply (myApp . m e t i e r , [ ” c r e a t e I n s t a n c e G e n e r i q u e ” , function (
inputObj ) {
14
65
15 that = this ;
16
17 // ////////////////////////////////////////////////////////
18 // S i l e modèle de t o u t e s l e s mé t h o d e s p r i v é e s communes
19 // à t o u t e s l e s i n s t a n c e s d ’ o b j e t s mé t i e r n ’ a pas e n c o r e é t é c r é é
20 // ( Cet o b j e t e x i s t e en un e x e m p l a i r e u n i q u e . )
21 i f (myApp . m e t i e r . m e t h o d e s I n s t a n c e s M e t i e r === u n d e f i n e d ) {
22 // C o n s t r u c t e u r d ’ un o b j e t u n i q u e a v e c un p r o t o t y p e
23 var P r i v a t e I n s t a n c e s C o n s t r u c t o r = function ( ) {
24 /* * @ d e s c r i p t i o n c o n t i e n t l e s v a l e u r s d e s a t t r i b u t s de l ’ i n s t a n c e ,
initialement vide
25 * @member
26 * @private
27 */
28 t h i s . d a t a A t t r i b u t e s = {} ;
29 /* * @ d e s c r i p t i o n c o n t i e n t l e s messages d ’ e r r e u r a s s o c i é s aux a t t r i b u t s
de l ’ i n s t a n c e s
30 * @member
31 * @private
32 */
33 t h i s . d a t a E r r o r = {} ;
34 };
35
36 P r i v a t e I n s t a n c e s C o n s t r u c t o r . p r o t o t y p e . addError
37 = function ( attributeName , message ) {
38 // Ajout d ’ une p r o p r i é t é
39 t h i s . d a t a E r r o r [ attributeName ] = message ;
40 };
41
42 PrivateInstancesConstructor . prototype . setAttribute
43 = function ( attributeName , v a l u e ) {
44 var r e s u l t T e s t R e g e x = t h a t . t e s t R e g e x ( attributeName , v a l u e ) ;
45 // On i n t i a l i s e l ’ a t t r i b u t de l ’ i n s t a n c e
46 t h i s . d a t a A t t r i b u t e s [ attributeName ] = v a l u e ;
47 // S i l a v a l i d a t i o n par e x p r e s s i o n r é g u l i è r e e s t p a s s é e
48 i f ( r e s u l t T e s t R e g e x === true ) {
49 // On e f f a c e une v i e i l l e e r r e u r é v e n t u e l l e
50 delete t h i s . d a t a E r r o r [ attributeName ] ;
51 } else {
52 // On i n i t a l i s e l a p r o p r i é t é de l ’ o b j e t d e s e r r e u r s .
53 // a v e c l e message d ’ e r r e u r .
54 t h i s . addError ( attributeName , ” A t t r i b u t ” + v a l u e +
55 ” i n v a l i d e : ” + resultTestRegex ) ;
56 }
57 };
58
59 PrivateInstancesConstructor . prototype . getAttribute
60 = function ( attributeName ) {
61 return t h i s . d a t a A t t r i b u t e s [ attributeName ] ;
62 };
63
64 PrivateInstancesConstructor . prototype . hasError
65 = function ( ) {
66 fo r ( var attributeName in t h i s . d a t a E r r o r ) {
67 i f ( t h i s . d a t a E r r o r . hasOwnProperty ( attributeName ) ) {
68 return true ;
66
69 }
70 }
72 };
73
74 PrivateInstancesConstructor . prototype . getErrorList
75 = function ( ) {
76 var e r r o r L i s t = [ ] ;
77 fo r ( var attributeName in t h i s . d a t a E r r o r ) {
78 i f ( t h i s . d a t a E r r o r . hasOwnProperty ( attributeName ) ) {
79 e r r o r L i s t . push ( attributeName ) ;
80 }
81 }
82 return e r r o r L i s t ;
83 };
84
85 PrivateInstancesConstructor . prototype . getErrorMessage
86 = function ( attributeName ) {
87 return t h i s . d a t a E r r o r [ attributeName ] ;
88 };
89 /* * @ d e s c r i p t i o n Géné r a t i o n d ’ un ID a l é a t o i r e en c a s de c r é a t i o n d ’ une
nouvelle instance
90 * ( c a s où l e s s p e c i f i c a t i o n s i n p u t O b j s o n t n u l l )
91 * @private
92 */
93 P r i v a t e I n s t a n c e s C o n s t r u c t o r . p r o t o t y p e . generateRandomId
94 = function ( ) {
95 var id Le ngt h = 10 ;
96 var r e s u l t a t = ” ” ;
97 var h e x a D i g i t s = Array ( ” 0” , ” 1” , ” 2” , ” 3” , ” 4” , ”5” , ”6” , ”7” , ”8” , ”9” , ”a” , ”
b ” , ” c ” , ”d” , ” e ” , ” f ” ) ;
98 var i ;
99 fo r ( var i =0 ; i<10 ; ++i ) {
100 r e s u l t a t += h e x a D i g i t s [ Math . f l o o r ( Math . random ( ) * 1 6 ) ] ;
101 }
102 return r e s u l t a t ;
103 }
104
105 // On mé morise l e c o n s t r u c t e u r d ’ i n s t a n c e s p r i v é e s pour n ’ en a v o i r qu ’ un
106 myApp . m e t i e r . p r i v a t e I n s t a n c e C o n s t r u c t o r = P r i v a t e I n s t a n c e s C o n s t r u c t o r ;
107 } // f i n du ” i f (myApp . m e t i e r . m e t h o d e s I n s t a n c e s M e t i e r === u n d e f i n e d ) ”
108
109 // On c r é e une i n s t a n c e p r i v é e ( v a r i a b l e l o c a l e , v o i r ” p a t t e r n module ” )
110 var p r i v a t e I n s t a n c e = new myApp . m e t i e r . p r i v a t e I n s t a n c e C o n s t r u c t o r ( ) ;
111
112
113 /* * @ d e s c r i p t i o n Cré a t i o n d ’ un c o n s t r u c t e u r p r i v é , c r é ant une c l a s s e q u i
114 * c o n t i e n d r a l e s mé t h o d e s p e r m e t t a n t de m a n i p u l e r l ’ i n s t a n c e c r é é e ,
115 * q u i c o n t i t u e l ’ i n t e r f a c e du p a t t e r n module .
116 *
117 *L ’ i n t é r ê t d ’ un c o n s t r u c t e u r e s t de d é f i n i r l e s mé t h o d e au n i v e a u du
prototype ,
118 * v i a l ’ o b j e t u n i q u e myApp . m e t i e r . m e t h o d e s I n s t a n c e s M e t i e r , c r é é une s e u l e
fois .
119 *
120 * De p l u s , pe p r o t o t y p e d e s i n s t a n c e s h é r i t e l u i −même d e s mé t h o d e s
67
statiques
121 * du module mé t i e r .
122 */
123 var P u b l i c I n s t a n c e I n t e r f a c e = function ( ) {} ;
124
125 // MISE À DISPOSITION DES MÉTHODES STATIQUES DU MODULE
126 // VIA LE PROTOTYPE
127 P u b l i c I n s t a n c e I n t e r f a c e . p r o t o t y p e = t h i s ; // exemple : t h i s = myApp . m e t i e r .
adresse
128
129 /* * @ d e s c r i p t i o n Retourne l e module a v e c l e s mé t h o d e s ” s t a t i q u e s ”
130 * (comme l ’ a c c è s d i r e c t à l a l i s t e d e s a t t r i b u t s ou l e s t e s t s r e g e x )
131 * @return { O b j e c t } l e module myApp . m e t i e r . moduleName
132 */
133 P u b l i c I n s t a n c e I n t e r f a c e . p r o t o t y p e . getModule = function ( ) {
134 return t h i s ;
135 };
136
137
138 // I n t e r f a c e p u b l i q u e du module , r e t o u r n é e par l a f a b r i q u e
139 var i n s t a n c e I n t e r f a c e = new P u b l i c I n s t a n c e I n t e r f a c e ( ) ;
140
141 i n s t a n c e I n t e r f a c e . getModule = function ( ) {
142 return t h i s ;
143 };
144
145 // ///////////////////////////////////////////////
146 // On e x p o s e l e s mé t h o d e s du p r o t o t y p e de l ’ i n s t a n c e p r i v é e
147 // v i a l ’ i n t e r f a c e d e s i n s t a n c e s :
148
149 /* * @ d e s c r i p t i o n A j o u t e une p r o p r i é t é ( message d ’ e r r e u r ) dans t h i s . d a t a E r r o r
150 * c o r r e s p o n d a n t à un a t t r i b u t .
151 * @method addError
152 * @public
153 */
154 i n s t a n c e I n t e r f a c e . addError = function ( ) {
155 p r i v a t e I n s t a n c e . addError ( ) ;
156 };
157
158 /* * @ d e s c r i p t i o n S e t t e r : i n i t i a l i s e l a v a l e u r d e s a t t i b u t s d ’ une i n s t a n c e .
159 * En c a s d ’ e r r e u r un message pour c e t t e p r o p r i é t é e s t e s t a j o u t é dans t h i s .
dataError .
161 * @method s e t A t t r i b u t e
162 * @public
163 */
164 i n s t a n c e I n t e r f a c e . s e t A t t r i b u t e = function ( attributeName , v a l u e ) {
165 p r i v a t e I n s t a n c e . s e t A t t r i b u t e ( attributeName , v a l u e ) ;
166 };
167
168 /* * @ d e s c r i p t i o n A c c e s s e u r pour t o u s l e s membres p r i v é s d ’ i n s t a n c e .
169 * @method g e t A t t r i b u t e
170 * @public
171 * @param { s t r i n g } a t t r i b u t e N a m e − nom de l ’ a t t r i b u t a t t e n d u e d ’ une
instance
172 * @return { s t r i n g } l a v a l e u r de l ’ a t t r i b u t ou u n d e f i n e d en c a s de nom d ’
68
a t t r i b u t inconnu .
173 */
174 i n s t a n c e I n t e r f a c e . g e t A t t r i b u t e = function ( attributeName ) {
175 return p r i v a t e I n s t a n c e . g e t A t t r i b u t e ( attributeName ) ;
176 };
177
178 /* * @ d e s c r i p t i o n Dé t e r m i n e s i l ’ i n s t a n c e comprend au moins une e r r e u r .
179 * @public
180 * @return { b o o l e a n } t r u e s ’ i l y a ( au moins ) une e r r e u r , f a l s e s i n o n
181 */
182 i n s t a n c e I n t e r f a c e . h a s E r r o r = function ( attributeName ) {
183 return p r i v a t e I n s t a n c e . h a s E r r o r ( attributeName ) ;
184 };
185
186 /* * @ d e s c r i p t i o n Ré c u p è r e l a l i s t e d e s champs q u i ont une e r r e u r
187 * @public
188 * @return { s t r i n g [ ] } t a b l e a u d e s noms de p r o p r i é t é s q u i comportent une
erreur .
189 */
190 i n s t a n c e I n t e r f a c e . g e t E r r o r L i s t = function ( ) {
191 return p r i v a t e I n s t a n c e . g e t E r r o r L i s t ( ) ;
192 };
193
194 /* * @ d e s c r i p t i o n Donne l ’ a c c è s au message d ’ e r r e u r d ’ un a t t r i b u t ( s ’ i l e x i s t e
).
195 * @method g e t E r r o r M e s s a g e
196 * @public
197 * @param { s t r i n g } a t t r i b u t e N a m e − nom d ’ a t t r i b u t d ’ une i n s t a n c e de module mé
tier
198 * @return { s t r i n g | u n d e f i n e d } l e message d ’ e r r e u r pour un a t t r i b u t s ’ i l
existe
199 * ou u n d e f i n e d en l ’ a b s e n c e d ’ e r r e u r
200 */
201 i n s t a n c e I n t e r f a c e . g e t E r r o r M e s s a g e = function ( attributeName ) {
202 return p r i v a t e I n s t a n c e . g e t E r r o r M e s s a g e ( attributeName ) ;
203 };
204
205 // I n i t i a l i s a t i o n d e s a t t r i b u t s de l ’ i n s t a n c e
206 // S i l ’ o b j e t en argument e s t n u l l , on c o n s t r u i t une i n s t a n c e par d é f a u t
207 i f ( inputObj !== null ) {
208 // Parcours d e s p r o p r i é t é s de g e t A t t r i b u t e L i s t ( )
209 // q u i c o r r e s p o n d e n t aux a t t r i b u t s de l ’ i n s t a n c e à c r é e r
210 fo r ( var i = 0 ; i < t h i s . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++i ) {
212 // U t i l i s a t i o n du s e t t e r pour i n i t i a l i s e r l ’ a t t r i b u t
213 p r i v a t e I n s t a n c e . s e t A t t r i b u t e ( attributeName , inputObj [ attributeName ] ) ;
214 }
215 } else {
216 // On i n i t i a l i s e l e s v a l e u r s d e s a t t r i b u t s à ””
217 fo r ( var i = 0 ; i < t h i s . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++i ) {
219 i f ( attributeName === ” i d ” ) {
220 p r i v a t e I n s t a n c e . d a t a A t t r i b u t e s [ attributeName ] = p r i v a t e I n s t a n c e .
generateRandomId ( ) ;
221 } else {
222 p r i v a t e I n s t a n c e . d a t a A t t r i b u t e s [ attributeName ] = ” ” ;
69
223 }
224 }
225 }
226
227 // C o n s t r u c t i o n d ’ une i n s t a n c e a v e c
228 return i n s t a n c e I n t e r f a c e ;
229 } // f i n de l a mé t h o d e c r e a t e I n s t a n c e
230 ] ) ; // f i n de l ’ a p p e l ” a p p l y ” de l a mé t h o d e myApp . addModule
3.3.3 Utilisation avec l’affichage générique d’objets métier

Les méthodes de test d’implémentation d’interfaces de la partie 2.7 sont utilisables telles quelles.
Pour adapter l’exemple de test d’affichage générique (code source 2.31), il suffit de modifier
l’inclusion des fichiers JavaScript comme suit :
Code Source 3.10 : Fichiers JS inclus dans ex06-fabriqueAdresseProtoTest.html

2 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 0 4 − s t r u c t u r e A p p l i c a t i o n . j s ”></s c r i p t>
4 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 0 5 − m o d u l e P a t t e r n R e g e x . j s ”></s c r i p t>
6 <s c r i p t src=” . / e x 05 − c re at e Mo du le M e t ie rP ro to . j s ”></s c r i p t>
8 <s c r i p t src=” . / e x 0 5 − f a b r i q u e O b j e t M e t i e r P r o t o . j s ”></s c r i p t>
10 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 0 6 − m o d u l e M e t i e r A d r e s s e . j s ”></s c r i p t>
12 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 0 8 − f a b r i q u e A d r e s s e . j s ”></s c r i p t>
14 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 1 1 − i n t e r f a c e I m p l e m e n t a t i o n . j s ”></s c r i p t>
16 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 1 1 − i n t e r f a c e I m p l e m e n t a t i o n M e t i e r . j s ”></s c r i p t>
17 <!−− Cré a t i o n de f o n c t i o n s d ’ a f f i c h a g e g éné r i q u e dans myApp . m e t i e r . v i e w −−>
18 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 1 2 − o b j e t M e t i e r V i e w . j s ”></s c r i p t>
19 −−
21 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 1 2 − o b j e t M e t i e r V i e w T e s t . j s ”></s c r i p t>
Les fichiers du répertoire ../pattern-fonct correspondent aux exemples définis dans le cha-
pitre 2, qui sont réutilisables tels quels du fait de la généricité et de l’homogénéité des interfaces
d’objets métier.
3.4 Patterns pseudo-classique (à éviter)

Dans l’exemple suivant, nous créons une classe Personne qui hérite des propriétés de la classe
Adresse. Pour celà :
1. le constructeur d’Adresse est appelé explicitement dans le constructeur de Personne ;
2. la classe Adresse est déclarée comme superclass de la classe Personne ;
70
3. Les méthodes qui existent au niveau du prototype de la classe Adresse et qui doivent
être spécifiées pour des personnes sont surchargées au niveau du prototype de la classe
Personne.
Dans l’exemple suivant, nous surchargeons l’accesseur de la propriété ville et la méthode
toString.
Code Source 3.11 : /pattern-proto/ex08-extension-de-classe.js
1 function A d r e s s e ( numeroRue , rue , complement , c o d e P o s t a l , v i l l e ) {
2 i f ( numeroRue . match ( /^ ( [ 0 − 9 ] * ) (([0 −9]+) (\ ?) ( ( ( b i s ) | ( t e r ) ) ) ?)$/ ) ) {
3 t h i s . numeroRue = numeroRue . r e p l a c e ( / \ s+/g , ’ ’ ) ;
4 } else {
5 throw new E r r o r ( ”Numé ro de l a rue i n v a l i d e . ” ) ;
6 }
7
8 i f ( r u e . match ( /^ ( ( ( [ a−zA−Zê é è öàöÉÈÊÀÖË\ \− \.\ ,0 −9\ ] ) | ( \ ” ) ) | ( \ ’ ) ) {1 ,300} $/ ) )
{
9 t h i s . r u e = r u e . r e p l a c e ( / \ s+/g , ’ ’ ) ;
10 ;
11 } else {
12 throw new E r r o r ( ”Nom de l a rue / p l a c e i n v a l i d e . ” ) ;
13 }
14
15 i f ( complement . match ( /^ ( ( ( [ a−zA−Zê é è öàöÉÈÊÀÖË\ \− \.\ ,0 −9\ ] ) | ( \ ” ) ) | ( \ ’ ) )
{0 ,300} $/ ) ) {
16 t h i s . complement = complement . r e p l a c e ( / \ s+/g , ’ ’ ) ;
17 } else {
18 throw new E r r o r ( ” Complement d ’ a d r e s s e i n v a l i d e . ” ) ;
19 }
20
21 i f ( c o d e P o s t a l . match ( /^ [0 −9]{5} $/ ) ) {
22 this . codePostal = codePostal ;
23 } else {
24 throw new E r r o r ( ”Code p o s t a l i n v a l i d e . ” ) ;
25 }
26
27 i f ( v i l l e . match ( /^ ( ( ( [ a−zA−Zê é è öàöÉÈÊÀÖË\ \− \.\ ,0 −9\ ] ) | ( \ ” ) ) | ( \ ’ ) ) {0 ,300} $/ )
) {
28 t h i s . v i l l e = v i l l e . r e p l a c e ( / \ s+/g , ’ ’ ) ;
29 } else {
30 throw new E r r o r ( ”Nom de v i l l e i n v a l i d e . ” ) ;
31 }
32 }
33
34 A d r e s s e . p r o t o t y p e . g e t V i l l e = function ( ) {
35 return t h i s . v i l l e ;
36 }
37
38 A d r e s s e . p r o t o t y p e . t o S t r i n g = function ( ) {
39 var r e s u l t a t = t h i s . numeroRue ;
40 i f ( t h i s . numeroRue != ” ” )
41 r e s u l t a t += ” , ” ;
42 r e s u l t a t += t h i s . r u e + ” , ” ;
43 r e s u l t a t += t h i s . complement ;
44 i f ( t h i s . complement != ” ” )
45 r e s u l t a t += ” , ” ;
71
46 r e s u l t a t += t h i s . v i l l e + ”<br />” ;
47 return r e s u l t a t ;
48 }
49
50 function Personne (nom , prenom , numeroRue , rue , complement , c o d e P o s t a l , v i l l e ) {
51 A d r e s s e . c a l l ( this , numeroRue , rue , complement , c o d e P o s t a l , v i l l e ) ;
52 t h i s . nom = nom ;
53 t h i s . prenom = prenom ;
54 }
55
56 Personne . s u p e r c l a s s = A d r e s s e ;
57 Personne . p r o t o t y p e . g e t V i l l e = function ( ) {
58 return A d r e s s e . p r o t o t y p e . g e t V i l l e . c a l l ( t h i s ) ;
59 }
60
61 Personne . p r o t o t y p e . t o S t r i n g = function ( ) {
62 return t h i s . nom+” , ”+t h i s . prenom+” , ”+A d r e s s e . p r o t o t y p e . t o S t r i n g . c a l l ( t h i s ) ;
63 }
Code Source 3.12 : /pattern-proto/ex08-extension-de-classe.html

1 <!doctype HTML>
3 <head>
5 <t i t l e>Chainage de c o n s t r u c t e u r s</ t i t l e>
6 <s c r i p t src=” . / e x 0 8 − e x t e n s i o n − d e − c l a s s e . j s ”></s c r i p t>
7 </head>
8 <body>
9 <p>
10 <s c r i p t>
11 try {
12 var p e r s = new Personne ( ” Dujardin ” , ” Jean ” , ” 10 t e r ” , ” rue de l ’ a v e n i r ” , ’ ”Le
Rastou ” ’ , ” 86098 ” , ” Les F l o t s B l e u s ” ) ;
13 document . w r i t e ( p e r s ) ;
14 document . w r i t e ( ”<br />L ’ a d r e s s e s e t r o u v e dans l a v i l l e de \” ”+p e r s . g e t V i l l e ( )+
” \”. ”) ;
15 } catch ( e r r ) {
16 alert ( err ) ;
17 }
18 </s c r i p t>
19 <p>
20 </body>
21 </html>
72
Chapitre 4
Formulaires, Filtrage, Pattern

Mediator
4.1 Filtrage Basique des Inputs d’un Formulaire

L’exemple suivant montre comment filtrer les attributs d’un formulaires côté client en affichant
immédiatement un message d’erreur lors de la saisie d’une valeur incorrecte. On associe à chaque
événement onchange de chaque attribut une fonction JavaScript qui réalisera le filtrage.
Code Source 4.1 : /form-filter/ex01-basicForm.js

1 // a l i a s v e r s l e module d ’ e x p r e s s i o n s r é g u l i è r e s
2 var r e g e x U t i l = myApp . m e t i e r . r e g e x U t i l ;
3
4 /* * @ d e s c r i p t i o n G e s t i o n n a i r e d ’ é v é nement change de l ’ i n p u t d ’ ID ” mainForm_titre
”.
5 * C e t t e mé t h o d e e f f e c t u e l e f i l t r a g e par e x e p r e s s i o n r é g u l i è r e .
6 * @method f i l t e r T i t r e
7 */
8 var f i l t e r T i t r e = function ( ) {
9 var t i t r e V a l u e = $ ( ”#mainForm_titre ” ) . v a l ( ) ;
10 // E x p r e s s i o n s du l a n g a g e c o u r a n t e t c h i f f r e s
11 var r e s u l t R e g e x T e s t = r e g e x U t i l . t e s t R e g e x L a t i n 1 W i t h D i g i t s ( {
12 chaine : titreValue ,
13 minLength : 1
14 }) ;
15 // M o d i f i c a t i o n du contenu du span d ’ ID ” error_mainForm_titre ”
16 i f ( r e s u l t R e g e x T e s t === true ) {
17 $ ( ”#error_mainForm_titre ” ) . empty ( ) ;
18 } else {
19 $ ( ”#error_mainForm_titre ” ) . html (
20 ” Erreur : l e t i t r e ne d o i t c o n t e n i r que l e s l e t t r e s e t c h i f f r e s<br />” ) ;
21 }
22 };
23
24 /* * @ d e s c r i p t i o n G e s t i o n n a i r e d ’ é v é nement onchange de l ’ i n p u t d ’ ID ”
mainForm_resume ” .
25 * C e t t e mé t h o d e e f f e c t u e l e f i l t r a g e par e x e p r e s s i o n r é g u l i è r e .
26 * @ f u n c t i o n f i l t e r Resume
27 */
28 var f i l t e r Resume = function ( ) {
73
29 var t i t r e V a l u e = $ ( ”#mainForm_resume” ) . v a l ( ) ;
30 // E x p r e s s i o n s du l a n g a g e c o u r a n t e t c h i f f r e s e t p o n c t u a t i o n
31 var r e s u l t R e g e x T e s t = r e g e x U t i l . t e s t R e g e x L a t i n 1 W i t h D i g i t s P u n c t u a t i o n ( {
32 chaine : titreValue ,
33 minLength : 1
34 }) ;
35 // M o d i f i c a t i o n du contenu du span d ’ ID ” error_mainForm_resume ”
36 i f ( r e s u l t R e g e x T e s t === true ) {
37 $ ( ”#error_mainForm_resume ” ) . empty ( ) ;
38 } else {
39 $ ( ”#error_mainForm_resume ” ) . html (
40 ” Erreur : l e r ésumé ne d o i t c o n t e n i r que l e s l e t t r e s e t c h i f f r e s ” +
41 ” ou d e s c a r a c t è r e s de p o n c t u a t i o n<br />” ) ;
42 }
43 };
Code Source 4.2 : /form-filter/ex01-basicFormTest.html (cf. Fig 4.1)

1 <!doctype HTML>
3 <head>
5 <t i t l e>F i l t r a g e d ’ i n p u t s</ t i t l e>
6 <l i nk rel=” s t y l e s h e e t ” href=” b a s i c S t y l e . c s s ” />
7 </head>
8 <body>
9 <h1>S a i s i e d ’ un f i l m</h1>
10 <form id=”mainForm” action=” p o s t ”>
11 <!−− i n p u t a v e c g e s t i o n n a i r e de l ’ é v é nement onchange −−>
12 <span id=” error_mainForm_titre ” class= ” errorMsg ”></span>
13 <l a b e l for=” mainForm_titre ”>T i t r e :</ l a b e l>
14 <i nput type=” t e x t ” id=” mainForm_titre ” s i z e=” 15 ”
15 placeholder=” T i t r e du f i l m ” onchange= ” f i l t e r T i t r e ( ) ” /><br />
16
17 <!−− t e x t a r e a a v e c g e s t i o n n a i r e de l ’ é v é nement onchange −−>
18 <span id=” error_mainForm_resume ” class= ” errorMsg ”></span>
19 <l a b e l for=”mainForm_resume”>Résumé :</ l a b e l>
74
Chapitre 4 : Formulaires, Filtrage, Pattern Mediator
20 <textarea id=”mainForm_resume” rows=” 10 ” cols=” 50 ”

21 placeholder=” S a i s i s s e z v o t r e r ésumé ” onchange= ” f i l t e r Resume ( ) ”></textarea>
22 </form>
23 <!−− I n c l u s i o n de l a s t r u c t u r e d ’ a p p l i c a t i o n e t du module r e g e x U t i l −−>
24 <s c r i p t src=” m o d u l e s M e t i e r . j s ”></s c r i p t>
25 <!−− P a t t e r n Mediator sp é c i a l i s é pour l e s é v é nement ” change ” d e s <i nput> −−>
26 <s c r i p t src=” e x 0 2 − m e d i a t o r I n p u t F i l t e r . j s ”></s c r i p t>
27 <!−− I n c l u s i o n de jQuery pour l e s é v é nements e t m a n i p u l a t i o n du DOM −−>
28 <s c r i p t src=” j q u e r y . j s ”></s c r i p t> <s c r i p t src=” ex01−basicForm . j s ”></s c r i p t>
29 </body>
30 </html>
4.2 Pattern Mediator pour le filtrage d’attributs

L’inconvénient du filtrage présenté dans la partie 4.1 est que, dans le code HTML d’un champs
du formulaire lui-même, on doit déclarer une méthode de filtrage spécifique pour ce champs
(attribut onchange de l’élément HTML input ou textarea).
Dans l’architecture d’application que nous proposons par la suite, la méthode de filtrage
ne sera pas codée en dûr dans le module chargé de générer le formulaire, mais plutôt dans
les tests d’expressions régulières effectués dans les modules métier. En particulier, la méthode
précise dépendra de l’instance et de l’attribut considéré, ce qui entraînerait un fort couplage
(interdépendance) des méthodes chargées de l’IHM et des classes métier (ou du modèle).
Nous savons par expérience que ce type de couplage va provoquer des difficultés pour la
maintenance et l’évolution de notre application (comme par exemple la migration de nos objet
métier côté serveur avec NodeJS). Nous allons maintenant introduire un pattern qui a pour
vocation de découpler le déclenchement des événements (via, en l’occurence, des événements
utilisateurs onchange) de l’implémentation des opérations correspondantes sur les données
métier, ou les données du modèle. Ce pattern est une généralisation du pattern Observer.
Dans notre exemple, un module Mediator va enregistrer les méthodes callbacks (qui ne
sont que des fonctions JavaScript) associées à des événements. L’exécution des ces claabacks
(en l’occurence la réaction à un événement onchange) sera déclenchée par la publication de
l’événement en question par l’intermédiaire du Mediator.
Code Source 4.3 : /form-filter/ex02-mediatorInputFilter.js
1
2 /* *
3 * Ajout d ’ un module c t r l ( c o n t r ô l e u r s ) à l ’ a p p l i c a t i o n .
4 * @module c t r l
5 * @augments myApp
6 */
7 myApp . addModule . apply (myApp, [ ” c t r l ” , { } ] ) ;
8
9 /* *
10 * Impl é me n ta ti on du p a t t e r n ”Mé d i a t o r ” pour g é r e r l e f i l t r a g e d e s i n p u t s de
formulaires .
11 * @module m e d i a t o r I n p u t F i l t e r
12 * @augments myApp . c t r l
13 */
14 myApp . addModule . apply (myApp . c t r l , [ ” m e d i a t o r I n p u t F i l t e r ” , function ( ) {
15
16 // //////////////////////////////////////////////
75
18
19 /* *
20 * C o l l e c t i o n , i n d e x é e par ID de f o r m u l a i r e de c a l l b a c k s d ’ é v é nements l i é s à
d i f f é r e n s f o r m u l a i r e s ( t y p i q u e m e n t : é v é nement onchange d ’ un i n p u t ) .
21 * @private
22 */
23 var m _ s u b s c r i p t i o n L i s t s ;
24
25 /* *
26 * I n i t i a l i s e ( ou r é i n i t i a l i s e ) l ’ e n s e m b l e d e s l i s t e s d ’ é v é nements à l a
col le cti on vide .
27 * @private
28 */
29 var i n i t = function ( ) {
30 m _ s u b s c r i p t i o n L i s t s ={} ;
31 };
32
33 // I n n i t i a l i s e r une f o i s l ’ e n s e m b l e d e s l i s t e s d ’ é v é nements à l a c o l l e c t i o n
vide .
34 init () ;
35
36 // //////////////////////////////////////////////
38
39 /* *
40 * Cré a t i o n d ’ un o b j e t c o n t e n a n t l e s donn é e s e t mé t h o d e s p u b l i q u e s
41 * ( l e s p r o p r i é t é s p u b l i q u e s s o n t r e t o u r n é e s par l a f o n c t i o n ” module ” ) .
42 */
43 var p u b l i c I n t e r f a c e M e d i a t o r = {
44
45 /* *
46 * A j o u t e un f o r m u l a i r e e t l a l i s t e ( i n i t i a l e m e n t v i d e ) de s e s c a l l b a c k s
associ és .
47 * S i l e f o r m u l a i r e e s t d é j à g é r é , l a l i s t e de s e s c a l l b a c k s a s s o c i é s e s t
supprim é e e t r é i n i t i a l i s é e à l a l i s t e v i d e .
48 * @param { s t r i n g } formId − l ’ I d du f o r m u l a i r e ( en t a n t qu ’ é l é ment HTML)
49 */
50 addForm : function ( formId ) {
51 m _ s u b s c r i p t i o n L i s t s [ formId ] = {}
52 },
53
54 /* *
55 * Supprime un f o r m u l a i r e e t s e s c a l l b a c k s a s s o c i é s
57 */
58 removeForm : function ( formId ) {
59 i f ( ! m _ s u b s c r i p t i o n L i s t s . hasOwnProperty ( formId ) ) {
61 }
62 delete m _ s u b s c r i p t i o n L i s t s [ formId ] ;
63 return true ;
64 },
65
66 /* *
67 * Ajout d ’ un é v é nement a s s o c i é à un a t t r i b u t de f o r m u l a i r e e t de sa
76
fonction callback .
68 * S i l ’ é v é nement e x i s t a i t d é j à pour c e t i n p u t , i l e s t é c r a s é .
70 * @param { s t r i n g } inputName − l e nom de l ’ i n p u t ( ou de l a p r o p r i é t é de l ’
o b j e t mé t i e r a s s o c i é ) .
71 * @param { f u n c t i o n } c a l l b a c k F u n c t i o n − l a f o n c t i o n ( c a l l b a c k ) à a p p e l e r en
c a s de p u b l i c a t i o n de l ’ é v é nement .
72 */
73 s u b s c r i b e : function ( formId , inputName , c a l l b a c k F u n c t i o n ) {
74 i f ( m _ s u b s c r i p t i o n L i s t s . hasOwnProperty ( formId ) ) {
75 m _ s u b s c r i p t i o n L i s t s [ formId ] [ inputName ] = { c a l l b a c k : c a l l b a c k F u n c t i o n } ;
76 } else {
77 throw {name : ” I l l e g a l A r g u m e n t E x c e p t i o n ” ,
78 message : ” Cat é g o r i e d ’ é v é nements ” + eventCateg + ” inconnue du mé
diateur ”
79 };
80 }
81 },
82
83 /* *
84 * P u b l i c a t i o n d ’ un é v é nement a s s o c i é à un a t t r i b u t de f o r m u l a i r e p r o v o q u a n t
l ’ ex é c u t i o n de l a f o n c t i o n c a l l b a c k a s s o c i é e
86 * @param { s t r i n g } inputName − l e nom de l ’ i n p u t ( ou de l a p r o p r i é t é de l ’
o b j e t mé t i e r a s s o c i é ) .
87 */
88 p u b l i s h : function ( formId , inputName ) {
89
90 i f ( m _ s u b s c r i p t i o n L i s t s . hasOwnProperty ( formId ) ) {
91 i f ( m _ s u b s c r i p t i o n L i s t s [ formId ] . hasOwnProperty ( inputName ) ) {
92 // On a p p e l l e l e c a l l b a k a v e c son
93 m _ s u b s c r i p t i o n L i s t s [ formId ] [ inputName ] . c a l l b a c k ( ) ;
94 }
95 } else {
96 throw {name : ” I l l e g a l A r g u m e n t E x c e p t i o n ” ,
97 message : ” For mul aire d ’ ID ” + formId + ” inconnu du mé d i a t e u r ”
98 };
99 }
100 },
101
102 /* *
103 * Ré i n i t i a l i s e l a c o l l e c t i o n d e s f o r m u l a i r e s g é r é s à une c o l l e c t i o n v i d e .
104 */
105 empty : function ( ) {
106 init () ;
107 }
108 };
109
110 return p u b l i c I n t e r f a c e M e d i a t o r ;
111
112 }() ] ) ;
Code Source 4.4 : /form-filter/ex02-mediatorInputFilterTest.html

1 <!doctype HTML>
77
3 <head>
5 <t i t l e>F i l t r a g e d ’ i n p u t s</ t i t l e>
7 </head>
8 <body>
9 <h1>S a i s i e d ’ un f i l m</h1>
10 <form id=”mainForm” action=” p o s t ”>
11 <!−− i n p u t a v e c g e s t i o n n a i r e de l ’ é v é nement onchange −−>
12 <span id=” error_mainForm_titre ” class= ” errorMsg ”></span>
13 <l a b e l for=” mainForm_titre ”>T i t r e :</ l a b e l>
14 <i nput type=” t e x t ” id=” mainForm_titre ” s i z e=” 15 ”
15 placeholder=” T i t r e du f i l m ” onchange= ” f i l t e r Data ( ’ mainForm ’ , ’ t i t r e ’ ) ” /><br /
>
16 <!−− t e x t a r e a a v e c g e s t i o n n a i r e de l ’ é v é nement onchange −−>
17 <span id=” error_mainForm_resume ” class= ” errorMsg ”></span>
18 <l a b e l for=”mainForm_resume”>Résumé :</ l a b e l>
19 <textarea id=”mainForm_resume” rows=” 10 ” cols=” 50 ”
20 placeholder=” S a i s i s s e z v o t r e r ésumé ” onchange= ” f i l t e r Data ( ’ mainForm ’ , ’
resume ’ ) ”></textarea>
21 </form>
22 <!−− I n c l u s i o n de l a s t r u c t u r e d ’ a p p l i c a t i o n e t du module r e g e x U t i l −−>
23 <s c r i p t src=” m o d u l e s M e t i e r . j s ”></s c r i p t>
27 <s c r i p t src=” ex01−basicForm . j s ”></s c r i p t>
28 <s c r i p t>
29 // Ajout du f o r m u l a i r e ”mainForm” au mé d i a t e u r q u i g è r e r a s e s é v é nements .
30 myApp . c t r l . m e d i a t o r I n p u t F i l t e r . addForm ( ’ mainForm ’ ) ;
31 // E n r e g i s t r e m e n t du c a l l b a c k a s s c o c i é à l ’ é v é nement onchange du t i t r e
32 myApp . c t r l . m e d i a t o r I n p u t F i l t e r . s u b s c r i b e ( ’ mainForm ’ , ’ t i t r e ’ , f i l t e r T i t r e ) ;
33 // E n r e g i s t r e m e n t du c a l l b a c k a s s c o c i é à l ’ é v é nement onchange du r ésumé
34 myApp . c t r l . m e d i a t o r I n p u t F i l t e r . s u b s c r i b e ( ’ mainForm ’ , ’ resume ’ , f i l t e r Resume )
;
35
36 /** @ d e s c r i p t i o n P u b l i e l ’ é v é nement onchange d ’ un i n p u t a u p r è s du mé d i a t e u r ,
37 * p r o v o q u a n t l ’ ex é c u t i o n du c a l l b a c k e n r e g i s t r é pour c e t é v é nement .
38 * @ f u n c t i o n f i l t e r Data
39 */
40 var f i l t e r Data = function ( formId , inputName ) {
41 myApp . c t r l . m e d i a t o r I n p u t F i l t e r . p u b l i s h ( formId , inputName ) ;
42 };
43 </s c r i p t>
44 </body>
45 </html>
4.3 Exemple :
Génération automatique de formulaire d’adresse
Dans l’exemple suivant, des méthodes d’un module myApp.gui permettent de générer auto-
matiquement les inputs d’un formulaire permettant de saisir les attributs (ici supposées de
type texte) d’un objet qui implémente des interface qui apparaissent dans l’exemple de la
78
partie 2.7.1.
Nous appliquons cette méthode pour afficher et filtrer automatiquement un formulaire de
saisie d’une adresse.
Code Source 4.5 : /form-filter/ex03-formsGui.js

1 /* * @ d e s c r i p t i o n Module ” g u i ” ( pour G r a p h i c a l User I n t e r f a c e )
2 * @module g u i
3 * @augments myApp
4 */
5 myApp . addModule . apply (myApp, [ ” g u i ” , { } ] ) ;
6
7 /* * @ d e s c r i p t i o n Géné r a t i o n de l ’ ID d ’ un é l é ment HTML de t y p e i n p u t pr é f i x é par
l ’ ID du f o r m u l a i r e
8 * @method g e t I n p u t I d
9 * @augments myApp . g u i
10 * @param { O b j e c t } i n p u t S p e c − c o n t i e n t l e s sp é c i f i c a t i o n s de l ’ i n p u t
11 * @param { s t r i n g } i n p u t S p e c . formId − i d du f o r m u l a i r e dans l e q u e l l ’ i n p u t s e r a
ins éré
12 * @param { s t r i n g } i n p u t S p e c . a t t r i b u t e N a m e − nom de l ’ a t t r i b u t de i n p u t S p e c .
objetMetier
13 * à s a i s i r dans l ’ i n p u t
14 */
15 myApp . addModule . apply (myApp . gui , [ ” g e t I n p u t I d ” , function ( i n p u t S p e c ) {
16 return i n p u t S p e c . formId + ”_” + i n p u t S p e c . attributeName ;
17 } ] ) ;
18
19 /* * @ d e s c r i p t i o n P u b l i e a u p r è s du Mediator un é v é nement onchange d ’ un I n p u t
20 * @method p u b l i s h I n p u t C h a n g e
22 * @param { s t r i n g } formId i d du f o r m u l a i r e dans l e q u e l l ’ i n p u t s e r a i n s é r é
23 * @param { s t r i n g } a t t r i b u t e N a m e nom de l ’ a t t r i b u t de i n p u t S p e c . o b j e t M e t i e r à
s a i s i r dans l ’ i n p u t
24 */
25 myApp . addModule . apply (myApp . gui , [ ” p u b l i s h I n p u t C h a n g e ” , function ( formId ,
attributeName ) {
26 myApp . c t r l . m e d i a t o r I n p u t F i l t e r . p u b l i s h ( formId , attributeName ) ;
27 } ] ) ;
28
29 /* * @ d e s c r i p t i o n Géné r a t i o n du code HTML d ’ un i n p u t .
30 * @method g e t T e x t I n p u t C o d e
32 * @param { O b j e c t } i n p u t S p e c c o n t i e n t l e s sp é c i f i c a t i o n s de l ’ i n p u t
33 * @param { O b j e c t } i n p u t S p e c . i n s t a n c e − i n s t a n c e d ’ o b j e t mé t i e r q u i i m p l é mente :
39 * @param { s t r i n g } i n p u t S p e c . formId i d du f o r m u l a i r e dans l e q u e l l ’ i n p u t s e r a
ins éré
40 * @param { s t r i n g } i n p u t S p e c . a t t r i b u t e N a m e nom de l ’ a t t r i b u t de i n p u t S p e c .
o b j e t M e t i e r à s a i s i r dans l ’ i n p u t
41 * @param { s t r i n g } [ i n p u t S p e c . t y p e=t e x t ] t y p e de l ’ i n p u t
42 * @param {number} [ i n p u t S p e c . i n p u t S i z e =10] t a i l l e de l ’ i n p u t ( nombre de
caractères )
43 */
79
44 myApp . addModule . apply (myApp . gui , [ ” g e t I n p u t C o d e ” , function ( i n p u t S p e c ) {

45 // C a l c u l de l ’ ID de l ’ i n p u t :
46 var i n p u t I d = myApp . g u i . g e t I n p u t I d ( i n p u t S p e c ) ;
47
48 // Valeur de l ’ a t t r i b u t de l ’ o b j e t pour l ’ a t t r i b u t v a l u e de l ’ i n p u t
49 var a t t r i b u t e V a l u e = i n p u t S p e c . o b j e t M e t i e r . g e t A t t r i b u t e ( i n p u t S p e c .
attributeName ) | | ” ” ;
50 // Cré a t i o n d ’ un é v e n t u e l message s i l ’ o b j e t c o m p o r t a i t d é j à une e r r e u r
51 var e r r o r M e s s a g e = i n p u t S p e c . o b j e t M e t i e r . g e t E r r o r M e s s a g e ( i n p u t S p e c .
attributeName ) !== u n d e f i n e d
52 ? i n p u t S p e c . o b j e t M e t i e r . g e t E r r o r M e s s a g e ( i n p u t S p e c . attributeName
) + ”<br />” : ” ” ;
53
54 // ////////////////////////////////////////////////////////////////////
55 // C a l l b a c k de g e s t i o n du f i l t r a g e de l ’ i n p u t :
56 myApp . c t r l . m e d i a t o r I n p u t F i l t e r . s u b s c r i b e ( i n p u t S p e c . formId , i n p u t S p e c .
attributeName , function ( ) {
57
58 var r e s u l t a t T e s t R e g e x = i n p u t S p e c . o b j e t M e t i e r . t e s t R e g e x ( i n p u t S p e c .
attributeName ,
59 document . getElementById ( i n p u t I d ) . v a l u e ) ;
60 i f ( r e s u l t a t T e s t R e g e x !== true ) {
61 document . getElementById ( ” error_ ”+i n p u t I d ) . innerHTML = r e s u l t a t T e s t R e g e x
+”<br />” ;
62 } else {
63 document . getElementById ( ” error_ ”+i n p u t I d ) . innerHTML = ” ” ;
64 }
65 } ) ; // f i n du c a l l b a c k //////////////////////////////////////////////
66
67 var inputType = i n p u t S p e c . inputType === u n d e f i n e d ? ” t e x t ” : i n p u t S p e c .
inputType ;
68 var i n p u t S i z e = i n p u t S p e c . i n p u t S i z e === u n d e f i n e d ? ” 10 ” : i n p u t S p e c . i n p u t S i z e
;
69 var l a b e l T e x t = i n p u t S p e c . o b j e t M e t i e r . g e t L a b e l T e x t ( i n p u t S p e c . attributeName ) ;
70
71 // r e t o u r du code HTML de l ’ i n p u t
72 return ”<span c l a s s =\”errorMsg \” i d =\”error_ ”+i n p u t I d+” \”>” + e r r o r M e s s a g e + ”
</span>” +
73 ”<l a b e l f o r =\”” + i n p u t S p e c . attributeName + ” \”>” + l a b e l T e x t + ”</ l a b e l>”
+
74 ”<i nput t y p e =\”” + inputType + ” \” name=\”” + i n p u t S p e c .
attributeName +
75 ” \” i d =\”” + i n p u t I d + ” \” ” + ” v a l u e =\”” + a t t r i b u t e V a l u e + ” \” ” +
76 ” s i z e =\”” + i n p u t S i z e + ” \” ” +
77 ” onchange=\”myApp . g u i . p u b l i s h I n p u t C h a n g e ( ’ ” + i n p u t S p e c . formId + ” ’ , ’
” + i n p u t S p e c . attributeName + ” ’ ) \” ” + ” />” ;
78 } ] ) ;
79
80 /* * @ d e s c r i p t i o n Géné r a t i o n du code HTML de l ’ e n s e m b l e d e s i n p u t s d ’ un
formulaire .
81 *
82 * @method getHtmlFormInputs
84 * @public
85 * @param { O b j e c t } i n s t a n c e − i n s t a n c e d ’ o b j e t mé t i e r q u i i m p l é mente :
80
91 * @param { s t r i n g } formId i d du f o r m u l a i r e dans l e q u e l l ’ i n p u t s e r a i n s é r é
92 * @return { s t r i n g } l e code HTML d e s t o u s l e s i n p u t s c o r r e s p o n d a n t aux p r o p r i é t é
s de l ’ o b j e t mé t i e r .
93 */
94 myApp . addModule . apply (myApp . gui , [ ” getHtmlFormInputs ” , function ( o b j e t M e t i e r ,
formId ) {
95 // On v é r i f i e que l ’ o b j e t M e t i e r i m p l é mente b i e n n o t r e i n t e r f a c e g éné r i q u e .
96 var t e s t I n t e r f a c e s M e t i e r = myApp . m e t i e r . t e s t I n t e r f a c e I m p l e m e n t a t i o n (
objetMetier ) ;
97 i f ( t e s t I n t e r f a c e s M e t i e r !== true ) {
98 throw new E r r o r ( t e s t I n t e r f a c e s M e t i e r ) ;
99 }
100
101 // Ajour du f o r m u l a i r e ”mainForm” au mé d i a t e u r q u i g è r e r a s e s é v é nements .
102 myApp . c t r l . m e d i a t o r I n p u t F i l t e r . addForm ( formId ) ;
103
105
106 var a t t r i b u t e L i s t = o b j e t M e t i e r . g e t A t t r i b u t e L i s t ( ) ;
107
108 // Tous l e s i n p u t s s o n t de t y p e t e x t e , donc on p e u t
109 // f a i r e une b o u c l e a u t o m a t i q u e s u r l e s p r o p r i é t é s .
110 fo r ( var i =0 ; i < a t t r i b u t e L i s t . l e n g t h ; i ++){
111 var attributeName = a t t r i b u t e L i s t [ i ] ;
112 // l ’ u t i l i s a t e u r ne p e u t pas m o d i f i e r l ’ ID :
113 i f ( attributeName != ” i d ” ) {
114 // Concat é n a t i o n du code HTML de l ’ i n p u t
115 htmlCode += myApp . g u i . getInputCode ( {
116 objetMetier : objetMetier ,
117 attributeName : a t t r i b u t e L i s t [ i ] ,
118 labelText : objetMetier . getLabelText ( a t t r i b u t e L i s t [ i ] ) ,
119 formId : formId
120 } ) + ”<br />” ;
121 }
122 }
123
124 // champs cach é r e p r é s e n t a n t l ’ ID de l ’ i n s t a n c e
125 htmlCode += ”<i nput t y p e =\” h i d d e n \” i d =\”” + formId + ” _id \” v a l u e =\”” +
126 o b j e t M e t i e r . g e t A t t r i b u t e ( ” i d ” ) + ” \” />” ;
127
129 }]) ;
Code Source 4.6 : /form-filter/ex03-formsGuiTest.js (cf. Fig 4.2)

1 // Ajout d ’ une mé t h o d e mainFunction
3
6 i d : ” 04 a b f 8 5 b c 9 ” ,
7 numeroRue : ” 2 bis@ ” ,
81
9 complementAddr : ”Bâ t i m e n t 3D” ,
10 c o d e P o s t a l : ” 63000 ” ,
13 }) ;
14
15 // Géné r a t i o n du f o r m u l a i r e a v e c l e s c a l l b a c k s
16 codeHTML = ”<form i d =\”mainForm\” method=\” p o s t \”>” +
17 myApp . g u i . getHtmlFormInputs ( a d r e s s e , ”mainForm” ) +
18 ”<i nput t y p e =\” s u b m i t \” v a l u e =\” v a l i d e r \” />” +
19 ”</form>” ;
22 } ) ;
23
Code Source 4.7 : Fichiers JS inclus dans ex03-formsGuiTest.html

1 <!−− S t r u c t u r e de l ’ a p p l i c a t i o n v i d e a v e c deux mé t h o d e s −−>
5 <!−− Sous−module a d r e s s e de myApp . m e t i e r −−>
6 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 0 6 − c r e a t e M o d u l e M e t i e r . j s ”></s c r i p t>
7 <!−− Mé t h o d e f a b r i q u e g éné r i q u e d ’ o b j e t s mé t i e r −−>
8 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 0 7 − f a b r i q u e O b j e t M e t i e r . j s ”></s c r i p t>
17 <!−− F o n c t i o n s d ’ a f f i c h a g e g éné r i q u e dans myApp . m e t i e r . v i e w −−>
19 −−
82

22 <!−− Mediator sp é c i a l i s é pour f i l t r e r l e s i n p u t s ( e v t ” change ” ) −−>
24 <!−− Géné r a t i o n a u t o m a t i q u e de f o r m u l a i r e s a v e c f i l t r a g e d e s a t t r i b u t s −−>
25 <s c r i p t src=” ex03−formsGui . j s ”></s c r i p t>
26 −−
28 <s c r i p t src=” ex03−formsGuiTest . j s ”></s c r i p t>
Le test avec la modélisation des objets métiers de la partie 3.3, utilisant la notion de
prototype, diffère seulement au niveau de l’inclusion de la définition des modules métier dans
le fichier HTML :
Code Source 4.8 : Fichiers JS inclus dans ex03-formsGuiTestProto.html
6 <s c r i p t src=” . . / p a t t e r n − p r o t o / e x 0 5 − c r e a t e M o d u l e M e t i e r P r o t o . j s ”></s c r i p t>
8 <s c r i p t src=” . . / p a t t e r n − p r o t o / e x 0 5 − f a b r i q u e O b j e t M e t i e r P r o t o . j s ”></s c r i p t>
17 <!−− F o n c t i o n s d ’ a f f i c h a g e g éné r i q u e dans myApp . m e t i e r . v i e w −−>
19 −−
25 <s c r i p t src=” ex03−formsGui . j s ”></s c r i p t>
26 −−
28 <s c r i p t src=” ex03−formsGuiTest . j s ”></s c r i p t>
83
Chapitre 5
Exemple d’Application avec IHM
5.1 Principe de l’application et analyse fonctionnelle

Notre application, qui possède un modèle constitué d’une collection de personnes, permet (voir
les storyboards sur la figure 5.1) :
• D’afficher la liste des noms de personnes (items) ;
• De sélectionner une personne en cliquant sur l’item correspondant (l’item est alors surli-
gné et les détails concernant cette personne sont affichés) ;
• De modifier les données de la personnes (en l’occurence le nom) en cliquant sur un bouton
”Modifier”.
• D’ajouter une personne ;
• De supprimer la personne sélectionnée.
• d’ajouter, de supprimer ou de modifier une adresse pour la personne sélectionnée.
Comme on peut le voir, nous avons une agrégation entre les personnes et les adresses, une
personne pouvant avoir plusieurs adresses.
En recenssant les événements (clics de boutons d’items, liens) possibles sur les storyboards
de la figure 5.1, on dresse le diagramme de cas d’utilisation représenté sur la figure 5.2.
5.2 Modèle de donnée

Dans notre modèle de données, une classe personne comporte un nom et une composition avec
des instances d’adresse. Nous créons, pour le moment, quelques instances ”en dur”, dans un
tableau personnes, avec chacune une adresse. Une autre propriété selectedPersonne contient
une référence vers l’instance de personne sélectionnée (item surligné et détails affichés).
Code Source 5.1 : /ihm-demo/modelModule.js
1
2 myApp . addModule . apply (myApp, [ ” modele ” , {
3 s e l e c t e d P e r s o n n e : null ,
4 personnes : [ ] ,
84
Chapitre 5 : Exemple d’Application avec IHM
(a) Sélection d’une personne (item surligné à gauche)
(b) Ajout d’une adresse pour la personne sélectionnée
(c) Ajout d’une personne
(d) Après ajout d’une personne
Figure 5.1 : Captures d’écran de notre application
85
Figure 5.2 : Diagramme de cas d’utilisation de notre application avec son IHM
5 }]) ;
6
7 myApp . modele . p e r s o n n e s . push (myApp . m e t i e r . p e r s o n n e . c r e a t e I n s t a n c e ( {
8 i d : ” 0123 a b c d e f ” ,
9 nom : ” Toto l e Hé ro ” ,
10 a d r e s s e : myApp . m e t i e r . a d r e s s e . c r e a t e I n s t a n c e ( {
11 i d : ” 04 a b f 8 5 b c 9 ” ,
14 complementAddr : ” D a l l e ” ,
15 c o d e P o s t a l : ” 630000 ” ,
18 })
19 }) ) ;
20
22 i d : ” 0123 abcd12 ” ,
23 nom : ” T i t i l e t o u t p ’ t i t ” ,
25 i d : ” 04 a b f 8 5 b b 5 ” ,
26 numeroRue : ”4 t e r ” ,
27 r u e : ”Rue de l ’ e n f e r ” ,
28 complementAddr : ” c ’ e s t l e s a u t r e s . . . ” ,
29 c o d e P o s t a l : ” 75000 ” ,
30 v i l l e : ” Ris pas ” ,
32 })
86
33 }) ) ;
34
36 i d : ” 0123 abcd01 ” ,
37 nom : ” Toutou c ’ e s t par où ” ,
39 i d : ” 04 a b f 8 5 b a 4 ” ,
40 numeroRue : ”1” ,
41 r u e : ” P l a c e de l ’ A l t e r n a t i v e ” ,
42 complementAddr : ” Pourquoi pas ” ,
43 c o d e P o s t a l : ” 63123 ” ,
44 v i l l e : ” Les Paumiers ” ,
46 })
47 }) ) ;
5.3 Pattern Mediator : centraliser les événements

Notre module mediator va nous permettre :
• De découpler l’implémentation de la réaction aux événements utilisateurs (modification

du modèle, mise à jour des vues) de la gestion de ces événements utilisateurs via la
technologie jQuery, qui, de ce fait, se trouve circonscrite à une seule classe (Wrapper).
• D’éliminer les dépendances cycliques entre les modules de notre application ;
• De recenser les événements utilisateurs de manière lisible dans un module centralisé ;
• De provoquer des mises à jour de panneaux de la vue qui observent des propriétés du
modèle.
Contrairement au médiateur spécialisé dans le filtrage des attributs de formulaires décrit

dans la partie 4.2, le module mediator va nous permettre d’exécuter plusieurs callback en
réaction à un même événement (par exemple pour mettre à jour différentes parties de la vue
après une modification du modèle).
Code Source 5.2 : /ihm-demo/mediator.js

1 /* *
2 * Impl é me n ta ti on du p a t t e r n ”Mé d i a t o r ” pour l a g e s t i o n d e s é v é nements
utilisateurs ,
3 * e t l a mise à j o u r d e s v u e s ( ou d e s sous−a r b r e s du DOM)
4 */
5 myApp . addModule . apply (myApp . gui , [ ” m e d i a t o r ” , function ( ) {
6
7 /* *
8 * L i s t e d e s é v é nements pour l e s q u e l s une l i s t e de c a l l b a c k s p e u t ê t r e
enregistr ée
9 * @private
10 */
11 var m _ s u b s c r i p t i o n L i s t s ;
12
13 /* *
87
14 * I n i t i a l i s e l a l i s t e d e s é v é nements , a v e c pour chacun , une l i s t e de

callbacks vide .
15 * @method i n i t
16 */
17 var i n i t = function ( ) {
18 m_subscriptionLists = {
19
20 // Opé r a t i o n s CRUD s u r l e s p e r s o n n e s
21 ” p er son ne / re ad ” : [ ] , // L i r e t o u t e s l e s p e r s o n n e s pour ( r e ) o n s t r u i r e l e
modèle
22
23 ” p er son ne / u p d a t e ” : [ ] , // v a l i d a t i o n du f o r m u l a i r e de mise à j o u r de l a
pe rs o nn e s é l e c t i o n n é e .
24 ” p er son ne / c r e a t e ” : [ ] , // v a l i d a t i o n du f o r m u l a i r e d ’ a j o u t d ’ une p e r s o nn e .
25 ” p er son ne / d e l e t e ” : [ ] , // S u p p r e s s i o n d ’ une pe r s o n n e
26
27 // Opé r a t i o n s CRUD s u r l e s a d r e s s e s
28 ” a d r e s s e / c r e a t e ” : [ ] , // v a l i d a t i o n du f o r m u l a i r e d ’ a j o u t d ’ une a d r e s s e .
29 ” a d r e s s e / u p d a t e ” : [ ] , // mise à j o u r d ’ une a d r e s s e
30 ” a d r e s s e / d e l e t e ” : [ ] , // S u p p r e s s i o n d ’ une a d r e s s e
31
32 // A c t i o n s U t i l i s a t e u r donnant l i e u à un changement de l e vue
33 ” p er son ne / s e l e c t D e t a i l s ” : [ ] , // Sé l e c t i o n d ’ une p e r s o n n e pour v o i r l e s d
é tails
34 ” p er son ne / e d i t ” : [ ] , // c l i c k s u r l a m o d i f i c a t i o n de l a p e r s o n n e s é
lectionn ée
35 ” p er son ne / s a i s i e ” : [ ] , // c l i c k s u r l a m o d i f i c a t i o n de l a pe r s o n n e s é
lectionn ée
36
37 ” a d r e s s e / e d i t ” : [ ] , // S u p p r e s s i o n d ’ une a d r e s s e
38 ” a d r e s s e / s a i s i e ” : [ ] , // c l i c k s u r l a m o d i f i c a t i o n de l a p e r s o n n e s é
lectionn ée
39
40 // N o t i f i c a t i o n s de m o d i f i c a t i o n du modèle pour r e q u ê t e AJAX e t /ou mise à
j o u r de l a vue
41 ” p er son ne / changed ” : [ ] , // mise à j o u r d ’ une p e r s o n n e
42 ” p er son ne / c r e a t e d ” : [ ] , // mise à j o u r d ’ une p e r s o n n e
43 ” p er son ne / d e t a i l s C h a n g e d ” : [ ] , // Mise à j o u r r e q u i s e du panneau d e s d é
tails
44
45 // N o t i f i c a t i o n s de m o d i f i c a t i o n du modèle pour r e q u ê t e AJAX e t /ou mise à
j o u r de l a vue
46 ” a d r e s s e / changed ” : [ ] , // mise à j o u r d ’ une a d r e s s e
47 ” a d r e s s e / c r e a t e d ” : [ ] , // mise à j o u r d ’ une a d r e s s e
48
49
50 // Demande de r é−e n r e g i s t r e m e n t d ’ é v é nements u t i l i s a t e u r s s u i t e à
r e c o n s t r u c t i o n d ’ é l é ments HTML
51 ” p er son ne / h t m l L i s t e I t e m R e b u i l t ” : [ ] , // Ré e n r e g i s t r e m e n t d e s é v é nements de
c l i c k sur l e s items
52 // s u i t e à r e c o n s t r u c t i o n c o m p l è t e du
code HTML d e s i t e m s .
53 ” p er son ne / d e t a i l s R e b u i l t ” : [ ] , // Ré e n r e g i s t r e m e n t d e s é v é nements de c l i c k
s u r l e s b o u t o n s ” Supprimer ” , ” M o d i f i e r ”
54 // s u i t e à r e c o n s t r u c t i o n du code HTML
des dé t a i l s .
88
55
56 };
57 };
58
59 // Appel de l a mé t h o d e d ’ i n i t i a l i s a t i o n
60 init () ;
61
62 /* *
63 * I n t e r f a c e p u b l i q u e du module m e d i a t o r
64 */
65 var p u b l i c I n t e r f a c e M e d i a t o r = {
66 /* *
67 * E n r e g i s t r e m e n t d ’ un c a l l b a c k s u r un é v é nement .
68 * I l p e u t y a v o i r p l u s i e u r s c a l l b a c k s s u r un même é v é nement
69 * ( par exemple : mise à j o u r de deux p a r t i e s d i s t i n c t e s de l a vue )
70 * @param { s t r i n g } e v e n t C a t e g é v é nement , q u i d o i t ê t r e un nom de p r o p r i é t é
de m _ s u b s c r i p t i o n L i s t s
71 * @param { f u n c t i o n } c a l l b a c k F u n c t i o n l a f o n c t i o n q u i s e r a a p p e l é e en r é
a c t i o n à l ’ é v é nement .
72 */
73 s u b s c r i b e : function ( eventCateg , c a l l b a c k F u n c t i o n ) {
74 i f ( m _ s u b s c r i p t i o n L i s t s . hasOwnProperty ( eventCateg ) ) {
75 m _ s u b s c r i p t i o n L i s t s [ eventCateg ] . push ( { c a l l b a c k : c a l l b a c k F u n c t i o n } ) ;
76 } else {
77 throw new E r r o r ( ” Cat é g o r i e d ’ é v é nements ” + eventCateg + ” inconnue du m
é diateur ”) ;
78 }
79 },
80
81 /* *
82 * P u b l i c a t i o n d ’ un é v é nement s u r v e n u e t ex é c u t i o n de t o u s l e s callbacks
correspondants .
83 * @param { s t r i n g } e v e n t C a t e g é v é nement , q u i d o i t ê t r e un nom de p r o p r i é t é
de m _ s u b s c r i p t i o n L i s t s
84 * @param { O b j e c t } c o n t e x t A r g argument o p t i o n n e l à t r a n s m e t t r e au c a l l b a c k (
exemple : item c l i q u é . . . )
85 */
86 p u b l i s h : function ( eventCateg , c o n t e x t A rg ) {
87 var i ;
88 i f ( m _ s u b s c r i p t i o n L i s t s . hasOwnProperty ( eventCateg ) ) {
89 f or ( var i =0 ; i< m _ s u b s c r i p t i o n L i s t s [ eventCateg ] . l e n g t h ; ++i ) {
90 // On a p p e l l e l e c a l l b a k a v e c son
91 m _ s u b s c r i p t i o n L i s t s [ eventCateg ] [ i ] . c a l l b a c k ( c o n t e x t A r g ) ;
92 }
93 } else {
94 throw new E r r o r ( ” Cat é g o r i e d ’ é v é nements ” + eventCateg + ” inconnue du m
é diateur ”) ;
95 }
96 },
97
98 // Ré i n i t i a l i s e l e s l i s t e s de c a l l b a c k s à v i d e .
99 empty : function ( ) {
100 init () ;
101 }
102 };
103
89
104 return p u b l i c I n t e r f a c e M e d i a t o r ;
105 }() ] ) ;
5.4 Événements concernant les personnes

5.4.1 Enregistrement des événements utilisateurs via jQuery
Tous les événements recensés dans le diagramme de cas d’utilisation (voir la figure 5.2) se
verront ici attribué un gestionnaire qui, généralement, ne fera que publier l’événement auprès de
mediator (partie 5.3). Les éléments HTML constants de la vue (<span>, <button>, <div>, <p>,
etc.) sur lesquels ces événements seront appliqués sont définis dans le fichier HTML principal
décrit dans la partie 5.4.9.
Ces événements utilisateurs doivent parfois être réenregistrés suite à la reconstruction des
éléments HTML concernés. Les événements sont alors détruits (méthodes jQuery.off(), ou
jQuery.empty(), ou encore jQuery.remove()), puis, le code HTML est regénéré, et enfin, les
événements utilisateur sont ré-enregistrés (méthode jQuery.on()).
S’il faut prévoir de ré-enregistrer un gestionnaire d’événement utilisateur, nous allons per-
mettre de déclencher ce ré-enregistrement via le mediator. Ceci permet d’éviter notamment
des problèmes de dépendance cyclique des fonctions JavaScript ou modules, par exemples du
fait que les événements jQuery doivent être initialisés après la génération de la vue.
Code Source 5.3 : /ihm-demo/guiJQueryEventsPersonne.js

1 /* *
2 * Mé t h o d e d ’ i n i t i a l i s a t i o n d e s é v é nements u t i l i s a t e u r s J a v a S c r i p t .
3 * E n r e g i s t r e m e n t d e s g e s t i o n n a i r e s de c e s é v é nements v i a jQuery .
4 */
5 myApp . addModule . apply (myApp . gui , [ ” i n i t J Q u e r y E v e n t s P e r s o n n e ” , function ( ) {
6
7 // ///////////////////////////////////////////////////////
8 // c l i c k s u r l e bouton ” A j o u t e r une p er s on n e ” f a i s a n t s o r t i r l e f o r m u l a i r e
9
10 /* *
11 * G e s t i o n n a i r e c l i c k s u r l e bouton f a i s a n t s o r t i r l e f o r m u l a i r e
12 */
13 var c l i c k B o u t o n S a i s i e P e r s o n n e = function ( e v e n t ) {
14 // p u b l i c a t i o n a u p r è s du mé d i a t o r
15 myApp . g u i . m e d i a t o r . p u b l i s h ( ” per s on n e / s a i s i e ” , {
16 p e r s o n n e : myApp . modele . s e l e c t e d P e r s o n n e
17 }) ;
18 };
19
20 // E n r e g i s t r e m e n t du Handler du c l i c k pour m o d i f i e r l e s d é t a i l s de l ’ item s é
l e c t i o n n é v i a jQuery
21 $ ( ”#b o u t o n A j o u t e r P e r s o n n e ” ) . on ( ” c l i c k ” , c l i c k B o u t o n S a i s i e P e r s o n n e ) ;
22
23 // ///////////////////////////////////////////////////////
24 // c l i c k s u r l e bouton ” M o d i f i e r l e nom” f a i s a n t s o r t i r l e f o r m u l a i r e
25
26 /* *
28 */
90
29 var c l i c k B o u t o n M o d i f i e r P e r s o n n e = function ( e v e n t ) {
30
32 myApp . g u i . m e d i a t o r . p u b l i s h ( ” per s on n e / e d i t ” , {
34 }) ;
35 };
36
37 // ///////////////////////////////////////////////////////
38 // c l i c k s u r l e bouton ” Supprimer l a pe r s o n n e ” f a i s a n t s o r t i r l e f o r m u l a i r e
39
40 /* *
42 */
43 var c l i c k B o u t o n S u p p r i m e r P e r s o n n e = function ( e v e n t ) {
45 myApp . g u i . m e d i a t o r . p u b l i s h ( ” per s on n e / d e l e t e ” , {
47 }) ;
48 };
49
50
51 // //////////////////////////////////////////////////////
52 // G e s t i o n n a i r e de s u b m i t f o r m u l a i r e de m o d i f i c a t i o n de p e r s o n n e .
53
54 /* *
55 * G e s t i o n n a i r e de l ’ é v é nement s u b m i t du f o r m u l a i r e .
56 * @param { Event } jQuery e v e n t c o r r e s p o n d a n t au h a n d l e r .
57 */
58 var formHandlerModifPersonne = function ( e v e n t ) {
59
60 // É v i t e r d ’ a p p e l e r l ’” a c t i o n ” par d é f a u t ( ) s c r i p t PHP, e t c . . . )
61 // du f o r m u l a i r e l o r s du s u b m i t
63
65 myApp . g u i . m e d i a t o r . p u b l i s h ( ” pe rs o n n e / u p d a t e ” , {
67 }) ;
68 } // f i n du g e s t i o n n a i r e formHandlerModif ( )
69
70 // E n r e g i s t r e m e n t du Handler du s u b m i t du f o r m u l a i r e v i a jQuery
71 $ ( ”#modifierPersonneForm ” ) . on ( ” s u b m i t ” , formHandlerModifPersonne ) ;
72
73
74 // /////////////////////////////////////////////////////
75 // G e s t i o n n a i r e de s u b m i t f o r m u l a i r e d ’ a j o u t de p e r s o n n e .
76
77 /* *
80 */
81 var formHandlerAjoutPersonne = function ( e v e n t ) {
82
91
86
88 myApp . g u i . m e d i a t o r . p u b l i s h ( ” pe rs o n n e / c r e a t e ” , {
90 }) ;
91 } // f i n du g e s t i o n n a i r e formHandlerAjout ( )
92
94 $ ( ”#ajouterPersonneForm ” ) . on ( ” s u b m i t ” , formHandlerAjoutPersonne ) ;
95
96
97 /* *
98 * E n r e g i s t r e l e s é v é nements de c l i c k s s u r l e s b o u t o n s ” M o d i f i e r ” e t ”
Supprimer ”
99 * l a per s onn e s é l e c t i o n n é e .
100 * C e t t e f o n c t i o n d o i t ê t r e i n v o q u é e en c a s de s é l e c t i o n d ’ une n o u v e l l e
pe rs o nne
101 * ( r e c o n s t r u c t i o n deu code HTML du panneau d e s d é t a i l s .
102 */
103 var r e g i s t e r B u t t o n C l i c k E v e n t s = function ( ) {
104 // E n r e g i s t r e m e n t du Handler du c l i c k pour m o d i f i e r l e s d é t a i l s de l ’ item s é
l e c t i o n n é v i a jQuery
105 $ ( ”#b o u t o n M o d i f i e r P e r s o n n e ” ) . on ( ” c l i c k ” , c l i c k B o u t o n M o d i f i e r P e r s o n n e ) ;
106 // E n r e g i s t r e m e n t du Handler du c l i c k pour su p p r i m e r l ’ item s é l e c t i o n n é v i a
jQuery
107 $ ( ”#boutonSupprimerPersonne ” ) . on ( ” c l i c k ” , c l i c k B o u t o n S u p p r i m e r P e r s o n n e ) ;
108 }
109
110 // ///////////////////////////////////////////////////////
111 // C l i c k s s u r l e s é l é ments de l a l i s t e d ’ i t e m s
112
113 /* * Mé t h o d e q u i permet de c r é e r un g e s t i o n n a i r e d ’ é v é nement de c l i c k
114 * s u r chaque nom de p e r s o n n e s ( s é l e c t i o n d e s d é t a i l s )
115 * Ces g e s t i o n n a i r e s p u b l i e n t l ’ é v é nnement ” n o u v e l l e p e r s o n n e s é l e c t i o n n é e ”
a u p r è s du mé d i a t o r .
116 * @param { i n t } i n d e x i n d i c e de l ’ item pour l e q u e l on e n r e g i s t r e l ’ é v é nement .
117 */
118 var r e g i s t e r H e l p e r S e l e c t D e t a i l s = function ( i n d e x ) {
119 return function ( ) {
120 myApp . g u i . m e d i a t o r . p u b l i s h ( ” pe rs o n n e / s e l e c t D e t a i l s ” ,
121 {
122 p e r s o n n e : myApp . modele . p e r s o n n e s [ i n d e x ]
123 }) ;
124 };
125 };
126
127 /* *
128 * E n r e g i s t r e l e s é v é nements j a v a s c r i p t de c l i c k s u r l e s é l é ments de l a l i s t e
129 * ( noms d e s p e r s o n n e s ) .
130 * C e t t e mé t h o d e d o i t ê t r e a p p e l é e l o r s de l a r e g éné r a t i o n du code de l a l i s t e
.
131 * @method r e g i s t e r L i s t e P e r s o n n e s C l i c k s
132 * @param { O b j e c t } c o n t e x t A r g s non u t i l i s é
133 * @return { f u n c t i o n } une f o n c t i o n c a l l b a c k q u i g è r e s l e c l i c k s u r l ’ item
index
92
134 */
135 var r e g i s t e r L i s t e P e r s o n n e s C l i c k s = function ( c o n t e x t A r g s ) {
136 fo r ( var i =0 ; i<myApp . modele . p e r s o n n e s . l e n g t h ; ++i ) {
137 $ ( ”#master_ ”+ myApp . modele . p e r s o n n e s [ i ] . g e t I d ( ) ) . on (
138 ” click ” , registerHelperSelectDetails ( i ) ) ;
139 }
140 };
141
142 // E n r e g i s t r e r l e s c l i c k s l o r s de l ’ i n i t i a l i s a t i o n
143 registerButtonClickEvents () ;
144 registerListePersonnesClicks () ;
145
146 // Permet à l a mé t h o d e q u i r e g é nè re t o u t e l a l i s t e d e s i t e m s
147 // de r e c r é er , v i a l e mé d i a t o r , l e s é v é nements ” c l i c k ” s u r l e s i t e m s .
148 myApp . g u i . m e d i a t o r . s u b s c r i b e ( ” per s on n e / h t m l L i s t e I t e m R e b u i l t ” ,
registerListePersonnesClicks ) ;
149
150 // Permet à l a mé t h o d e q u i r e g é nè re l e panneau d e s d é t a i l s de r e c r é er ,
151 // v i a l e mé d i a t o r , l e s é v é nements ” c l i c k ” s u r l e s b o u t o n s dans l e panneau d e s
dé t a i l s .
152 myApp . g u i . m e d i a t o r . s u b s c r i b e ( ” per s on n e / d e t a i l s R e b u i l t ” ,
registerButtonClickEvents ) ;
153 }]) ;
5.4.2 Mise à jour du panneau des détails

Le panneau des détails de l’item sélectionné doit être mis à jour lors de la modification de
la personne par validation du formulaire, ou lors du changement de l’item sélectionné (click
sur un autre item). dans ce cas, les événements utilisateurs sur les éléments HTML qui sont
générés dynamiquement sur le panneau des détails doivent aussi être reconstruit (événement
personne/detailsRebuilt du mediator).
Code Source 5.4 : /ihm-demo/guiDetailsChanged.js

1 /* *
2 * Dé f i n i t i o n e t e n r e g i s t r e m e n t d e s c a l l b a c k s de mise à j o u r d e s d é t a i l s de l ’
item s é l e c t i o n n é e .
3 */
4 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s U p d a t e D e t a i l s ” , function ( ) {
5
6 /* *
7 * Géné r a t i o n du code HTML d e s d é t a i l s de l a p e r s o n n e s é l e c t i o n n é e .
8 */
9 var getHtmlCodeDetail = function ( ) {
10 var htmlCode = ”<span c l a s s =\” p a n e l \”>” +
11 ”<p><s trong>Nom :</s trong> ” + myApp . modele . s e l e c t e d P e r s o n n e . getNom ( )
+ ”</p>” +
12 ”<button i d =\” b o u t o n M o d i f i e r P e r s o n n e \”>M o d i f i e r</button><br />” +
13 ”<button i d =\” boutonSupprimerPersonne \”>Supprimer</button><br />” +
14 ”<button i d =\” b o u t o n A j o u t e r A d r e s s e \”>A j o u t e r une a d r e s s e</button>” ;
15 f o r ( var i n d e x = 0 ; i n d e x < myApp . modele . s e l e c t e d P e r s o n n e . g et Nb Ad re ss es ( ) ;
++i n d e x ) {
16 htmlCode += ”<p>” +
17 myApp . view . a d r e s s e . getHtmlDevelopped (myApp . modele .
selectedPersonne . getAdresse ( index ) )
93
18 + ”<br /><button i d =\” boutonSupprimerAdresse_ ”

19 + myApp . modele . s e l e c t e d P e r s o n n e . g e t A d r e s s e ( i n d e x ) . g e t A t t r i b u t e
( ’ id ’ )
20 +” \”>Supprimer l ’ a d r e s s e</button>”
21 + ”<br /><button i d =\” b o u t o n M o d i f i e r A d r e s s e _ ”
22 + myApp . modele . s e l e c t e d P e r s o n n e . g e t A d r e s s e ( i n d e x ) . g e t A t t r i b u t e
( ’ id ’ )
23 +” \”>M o d i f i e r l ’ a d r e s s e</button>”
24 + ”</p>” ;
25 }
26 htmlCode += ”</span>” ;
28 };
29
30 /* *
31 * R e d e s s i n e l e s d é t a i l s d ’ une per s on n e s u i t e à sa s é l e c t i o n ou sa
modification .
32 * @param { O b j e c t } c o n t e x t A r g non u t i l i s é .
33 */
34 var r e p a i n t D e t a i l = function ( c o n te x t A r g ) {
35
36 $ ( ”#modifierPersonneForm ” ) . empty ( ) ; // Vider l e s i n p u t s e t l e s é v é nements JS
existant
37 $ ( ”#ajouterPersonneForm ” ) . empty ( ) ; // Vider l e s i n p u t s e t l e s é v é nements JS
existant
38 $ ( ”#aj o ut e rA dre sse Form ” ) . empty ( ) ; // Vider l e s i n p u t s e t l e s é v é nements JS
existant
39 $ ( ”#modifierAdresseForm ” ) . empty ( ) ; // Vider l e s i n p u t s e t l e s é v é nements JS
existant
40
41 $ ( ”#v u e D e t a i l ” ) . empty ( ) ; // Vider l e s d é t a i l s de l ’ item s é l e c t i o n n é
42
43 $ ( ”#v u e D e t a i l ” ) . html ( getHtmlCodeDetail ( ) ) ; // Géné r a t i o n du code HTML
44
45 // Recr é e r l e s é v é nements de c l i c k s s u r l e s b o u t o n s ” m o d i f i e r ” , ” s u p p r i m e r ” ,
etc .
46 myApp . g u i . m e d i a t o r . p u b l i s h ( ” per s on n e / d e t a i l s R e b u i l t ” ) ;
47 };
48
49 // E n r e g i s t r e m e n t du c a l l b a c k de l ’ é v é nement d é d i é (m. a . j . d e s d é t a i l s )
50 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / d e t a i l s C h a n g e d ” , r e p a i n t D e t a i l ) ;
51 // E n r e g i s t r e m e n t du c a l l b a c k de l ’ é v é nement de mise à j o u r de l a pe r s o n n e
52 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / changed ” , r e p a i n t D e t a i l ) ;
53
54 }() ] ) ;
5.4.3 Mise à jour du panneau des items

Le panneau qui affiche la liste des l’items doit être mis à jour lors de la modification de
la personne par validation du formulaire (le nom de la personne peut changer), ou lors du
changement de l’item sélectionné, celui-ci étant surligné.
En cas de changement de l’item sélectionné, la propriété selectedPersonne du modèle sera
modifiée, et le rafraîchissement du panneau des détails sera ensuite provoqué.
Lors de la création d’une nouvelle personne, celle-ci sera automatiquement sélectionnée.
94
Code Source 5.5 : /ihm-demo/guiPersonneChanged.js

1 /* *
2 * Dé f i n i t i o n e t abonnement d e s c a l l b a c k s de mise à j o u r de l a
3 * l i s t e c l i c k a b l e d e s items , s o i t l o r s de l a m o d i f i c a t i o n
4 * du modèle , s o i t l o r s du changement de p er s o n n e s é l e c t i o n n é e .
5 */
6 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s M a i n L i s t U p d a t e ” , function ( ) {
7
8 /* *
9 * A c t i v e ou d é s a c t i v e l e s u r l i g n a g e ( s t y l e CSS) d ’ un item de l a l i s t e .
10 * @param { pe r so nne } per son ne item de l a l i s t e à m o d i f i e r ( v i a l ’ ID de l ’ é l é
ment HTML) .
11 * @param { b o o l e a n } h i l g h l i g h t e d t r u e s i on d o i t s u r l i g n e r , f a l s e pour
r e m e t t r e l e s t y l e par d é f a u t .
12 */
13 var s e t H i g h l i g h t e d = function ( personne , h i g h l i g h t e d ) {
14 if ( highlighted ){
15 // Met tre l e s t y l e s u r l i g n é s u r l ’ item de l a l i s t e
16 $ ( ”#master_ ”+ p e r s o n n e . g e t I d ( ) ) . c s s ( ”background−color ” , ”#333” )
17 . c s s ( ” color ” , ”#e e e ” )
18 . c s s ( ”border−r a d i u s ” , ”4 px ” )
19 . c s s ( ”padding” , ”2 px ” ) ;
20 } else {
21 // Remettre l e s t y l e normal s u r l ’ item de l a l i s t e
22 $ ( ”#master_ ”+ p e r s o n n e . g e t I d ( ) ) . c s s ( ”background−color ” , ”#e e e ” )
23 . c s s ( ” color ” , ”#333” )
24 . c s s ( ”border−r a d i u s ” , ”4 px ” )
25 . c s s ( ”padding” , ”2 px ” ) ;
26 }
27 }
28
29 /* *
30 * Géné r a t i o n du code HTML de l a l i s t e de p e r s o n n e s
31 */
32 var g e t H t m l C o d e L i s t e P e r s o n n e s = function ( ) {
34 f o r ( var i =0 ; i<myApp . modele . p e r s o n n e s . l e n g t h ; ++i ) {
35 htmlCode +=
36 ”<p i d =\”master_ ”+ myApp . modele . p e r s o n n e s [ i ] . g e t I d ( ) + ” \”>” +
37 ”<s trong>Nom :</s trong> ” + myApp . modele . p e r s o n n e s [ i ] . getNom ( ) + ”</p>” ;
38 }
40 };
41
42 /* *
43 * R a f f r a i c h i s s e m e n t ( ou a f f i c h a g e ) de t o u t e l a vue .
44 * @param c o n t e x t A r g non u t i l i s é .
45 */
46 var r e p a i n t V u e = function ( c o nt e x tA r g ) {
47
48 $ ( ”#l i s t e P e r s o n n e s ” ) . empty ( ) ; // Vider l a l i s t e e t s e s é v é nements
49 $ ( ”#l i s t e P e r s o n n e s ” ) . html ( g e t H t m l C o d e L i s t e P e r s o n n e s ( ) ) ; // a f f i c h e r
50
51 // A p p l i q u e r l e s t y l e par d é f a u t s u r t o u s l e s i t e m s
52 fo r ( var i =0 ; i < myApp . modele . p e r s o n n e s . l e n g t h ; ++i ) {
53 s e t H i g h l i g h t e d (myApp . modele . p e r s o n n e s [ i ] , f a l s e ) ;
95
54 }
55 // S u r l i g n e r l ’ item s é l e c t i o n n é
56 s e t H i g h l i g h t e d (myApp . modele . s e l e c t e d P e r s o n n e , true ) ;
57
58 // Recr é e r l e s é v é nements de c l i c k s s u r l e s i t e m s de l a l i s t e
59 myApp . g u i . m e d i a t o r . p u b l i s h ( ” pe rs o n n e / h t m l L i s t e I t e m R e b u i l t ” ) ;
60 };
61
62 /* *
63 * Changer l ’ item s é l e c t i o n n é en r é a c t i o n à un c l i c k .
64 * @param { O b j e c t } c o n t e x t A r g argument i n d i q u a n t l a n o u v e l l e p e r s o n n e s é
lectionn ée .
65 * @param { pe r so nne } c o n t e x t A r g . pe rs o n n e n o u v e l l e p e r s o n n e s é l e c t i o n n é e .
66 */
67 var s e l e c t P e r s o n n e = function ( c o n t e x t A r g ) {
68 // Supprimer l e s u r l i g n a g e de l ’ a n c i e n n e p e r s o n n e s é l e c t i o n n é e
69 s e t H i g h l i g h t e d (myApp . modele . s e l e c t e d P e r s o n n e , f a l s e ) ;
70
71 // Changer l ’ item s é l e c t i o n n é
72 myApp . modele . s e l e c t e d P e r s o n n e = c o n t e x tA r g . p e r s o n n e ;
73
74 // Me ttr e l e s t y l e s u r l i g n é s u r l ’ item s é l e c t i o n n é de l a l i s t e
75 s e t H i g h l i g h t e d (myApp . modele . s e l e c t e d P e r s o n n e , true ) ;
76
77 // Provoquer l a mise à j o u r du panneau d e s d é t a i l s
78 myApp . g u i . m e d i a t o r . p u b l i s h ( ” per s on n e / d e t a i l s C h a n g e d ” , {
80 }) ;
81 };
82
83 /* *
84 * Changer l ’ item s é l e c t i o n n é s u i t e à c r é a t i o n d ’ une p e r s o n n e e t mise à j o u r
de l a vue .
85 * @param { O b j e c t } c o n t e x t A r g argument i n d i q u a n t l a n o u v e l l e p e r s o n n e s é
lectionn ée .
86 * @param { pe r so nne } c o n t e x t A r g . pe rs o n n e n o u v e l l e p e r s o n n e s é l e c t i o n n é e .
87 */
88 var s e l e c t P e r s o n n e A n R e p a i n t = function ( c o nt e x t A r g ) {
89 s e l e c t P e r s o n n e ( co n t ex t Ar g ) ;
90 repaintVue ( ) ;
91 }
92
93 // E n r e g i s t r e m e n t du c a l l b a c k de m o d i f i c a t i o n de l a p e r s o n n e
94 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / changed ” , r e p a i n t V u e ) ;
95 // E n r e g i s t r e m e n t du c a l l b a c k de c r é a t i o n de l a p e r s o n n e
96 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / c r e a t e d ” , s e l e c t P e r s o n n e A n R e p a i n t ) ;
97 // E n r e g i s t r e m e n t du c a l l b a c k de s é l e c t i o n d ’ une n o u v e l l e pe r s o n n e .
98 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / s e l e c t D e t a i l s ” , s e l e c t P e r s o n n e ) ;
99 }() ] ) ;
5.4.4 Bouton ”Supprimer”

Lorsque l’utilisateur clique sur ”Supprimer”, la personne sélectionnée est supprimée du modèle.
Une nouvelle personne est sélectionnée (personne par défaut) et la vue est réinitialisée.
96
Code Source 5.6 : /ihm-demo/guiBoutonSupprimerPersonne.js

1 /* *
2 * Dé f i n i t i o n e t e n r e g i s t r e m e n t d e s c a l l b a c k s a p p e l é s à g é r e r l e c l i c s u r l e
bouton
3 * ” m o d i f i e r ” l a pe rso nn e s é l e c t i o n n é e .
4 */
5 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s C l i c k S u p p r i m e r ” , function ( ) {
6
7 /* *
8 * C a l l b a c k q u i supprime l a pe rs o n n e p a s s é e dans l ’ o b j e t p a s s é en argument .
9 * @param { O b j e c t } c o n t e x t A r g argument i n d i q u a n t l a p e r s o n n e à s u p p r i m e r .
10 * @param { pe r so nne } c o n t e x t A r g . pe rs o n n e r é f é r e n c e de l ’ i n s t a n c e de p e r s o n n e à
s up p ri me r dans l e modèle .
11 */
12 var d e l e t e P e r s o n n e = function ( c o n t e x t A r g ) {
13 // I n d i c e dans l e t a b l e a u de l a p er s o n n e à su p p r i m e r .
14 var i n d e x S e l e c t e d P e r s o n n e = myApp . modele . p e r s o n n e s . indexOf ( c o n t e x t A r g .
personne ) ;
15 // S u p p r e s s i o n de l a pers onn e dans l e modèle
16 myApp . modele . p e r s o n n e s . s p l i c e ( i n d e x S e l e c t e d P e r s o n n e , 1 ) ;
17 // Personne s é l e c t i o n n é e par d é f a u t
18 myApp . modele . s e l e c t e d P e r s o n n e = myApp . modele . p e r s o n n e s [ 0 ] ;
19
20 // Provoquer l a mise à j o u r de l a vue :
21 myApp . g u i . m e d i a t o r . p u b l i s h ( ” per s on n e / changed ” , {
23 }) ;
24 }
25
26 // E n r e g i s t r e m e n t du c a l l b a c k
27 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / d e l e t e ” , d e l e t e P e r s o n n e ) ;
28
29 } ( ) ] ) ;
5.4.5 Bouton ”Modifier” et affichage du formulaire

Lorsque l’utilisateur clique sur ”Modifier”, le formulaire doit être affiché avec les données de la
personnes dans les inputs.
Code Source 5.7 : /ihm-demo/guiBoutonModifierPersonne.js

1 /* *
bouton
4 */
5 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s C l i c k M o d i f i e r P e r s o n n e ” , function ( ) {
6
7 /* *
8 * Géné r a t i o n du code HTML du f o r m u l a i r e de m o d i f i c a t i o n de l a p e r s o n n e s é
lectionn ée .
9 */
10 var getHtmlFormInputs = function ( ) {
top ;\”>” +
97
12 myApp . g u i . getHtmlFormInputs (myApp . modele . s e l e c t e d P e r s o n n e , ”

modifierPersonneForm ” ) +
13 ”<l a b e l></ l a b e l><i nput t y p e =\” s u b m i t \” v a l u e =\” V a l i d e r \”></ i nput>” +
14 ”</span>” ;
15 }
16
17 /* *
18 * C a l l b a c k d ’ A f f i c h a g e ( v i a l e DOM) du f o r m u l a i r e dans l ’ é l é ment d ’ ID ”
modifierPersonneForm ”
20 */
21 var r e p a i n t F o r m I n p u t s = function ( co n te x t A r g ) {
existant
existant
existant
existant
26
27 $ ( ”#modifierPersonneForm ” ) . append ( getHtmlFormInputs ( ) ) ; // a j o u t e r l e s
nouveaux i n p u t s
28 };
29
31 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / e d i t ” , r e p a i n t F o r m I n p u t s ) ;
32
33 }() ] ) ;
5.4.6 Bouton ”Ajouter une personne”

Lorsque l’utilisateur clique sur ”Ajouter une personne”, le formulaire doit être affiché avec les
valeurs par défaut (typiquement des champs vides) dans les inputs.
Pour cela, on utilise la possibilité offerte par la fabrique de nos modules métier (partie 2.6.3)
de créer une objet par défaut en passant null en argument de la fabrique. Ceci permet de ne
pas générer de messages d’erreur en cas de champs obligatoire initialement vide.
Après validation du formulaire, la personne est ajoutée dans le modèle, elle est automati-
quement sélectionnée, et la vue est mise à jour.
Code Source 5.8 : /ihm-demo/guiBoutonAjouterPersonne.js

1 /* *
bouton
4 */
5 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s C l i c k A j o u t e r ” , function ( ) {
6
7 /* *
lectionn ée .
9 */
98

top ;\”>” +
12 ”<s trong s t y l e =\”width : 360 px ; display : i n l i n e −b l o c k ; text −align :
c e n t e r ; padding : 15 px ;\”>S a i s i e d ’ une n o u v e l l e p e r s o n n e</s trong>
” +
13 myApp . g u i . getHtmlFormInputs (myApp . m e t i e r . p e r s o n n e . c r e a t e I n s t a n c e (
null ) , ” ajouterPersonneForm ” ) +
15 ”</span>” ;
16 }
17
18 /* *
mainForm”
21 */
existant
existant
existant
existant
27
28 $ ( ”#ajouterPersonneForm ” ) . append ( getHtmlFormInputs ( ) ) ; // a j o u t e r l e s
29 };
30
32 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / s a i s i e ” , r e p a i n t F o r m I n p u t s ) ;
33
34 }() ] ) ;
5.4.7 Validation du formulaire de modification

Lors de la validation (événement submit) du formulaire de modification, les données de la
personne sélectionnée doivent être mises à jour à partir des valeurs saisies dans le formulaire.
Les panneaux potentiellement impactés (liste des items, panneau des détails) sont alors mis à
jour.
Code Source 5.9 : /ihm-demo/guiModifierPersonneFormValidate.js

1 /* *
2 * Dé f i n i t i o n e t e n r e g i s t r e m e n t du c a l l b a c k r é a g i s s s a n t à l a v a l i d a t i o n ( s u b m i t )
3 * du f o r m u l a i r e de m o d i f i c a t i o n d ’ une pe r s o n n e .
4 */
5 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s V a l i d a t e M o d i f i e r F o r m ” , function ( ) {
6 // F or mul ai r e de m o d i f i c a t i o n d ’ une p er s on n e
7
8 /* *
9 * M o d i f i e l e modèle à p a r t i r d e s donn é e s s a i s i e s dans l e f o r m u l a i r e
10 */
11 var updateModel = function ( ) {
99
12
13 // 1) Mise à j o u r d e s donn é e s du modèle
14 // à p a r t i r d e s v a l e u r s d e s i n p u t s du f o r m u l a i r e
15 var attributeName ,
16 inputId ;
17 // On r é c u p è r e l e s a t t r i b u t s du f o r m u l a i r e dans une n o u v e l l e i n s t a n c e
18 var changedPersonne = myApp . m e t i e r . p e r s o n n e . c r e a t e I n s t a n c e ( null ) ;
19 // Pour chaque p r o p r i é t é ( chaque i n p u t du f o r m u l a i r e )
20 f o r ( var j =0 ; j< myApp . m e t i e r . p e r s o n n e . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++j ) {
21 var attributeName = myApp . m e t i e r . p e r s o n n e . g e t A t t r i b u t e L i s t ( ) [ j ] ;
23 // c a l c u l de l ’ ID de l ’ i n p u t
24 var i n p u t I d = myApp . g u i . g e t I n p u t I d ( {
25 attributeName : attributeName ,
26 formId : ” modifierPersonneForm ”
27 }) ;
28 // M o d i f i c a t i o n de l a p r o p r i é t é de l a p e r s o n n e
29 // a v e c l a v a l e u r s a i s i e dans l ’ i n p u t .
30 changedPersonne . s e t A t t r i b u t e ( attributeName ,
31 document . getElementById ( i n p u t I d ) . v a l u e
32 );
33
34 }
35 }
36 // Seulement s ’ i l n ’ y a pas d ’ e r r e u r ( f i l t r a g e s t r i c t c ô t é c l i e n t )
37 i f ( ! changedPersonne . h a s E r r o r ( ) ) {
38 fo r ( var j =0 ; j< myApp . m e t i e r . p e r s o n n e . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++j ) {
41 myApp . modele . s e l e c t e d P e r s o n n e . s e t A t t r i b u t e ( attributeName ,
42 changedPersonne . g e t A t t r i b u t e (
attributeName ) ) ;
43 }
44 }
45 // Provoquer l a mise à j o u r d e s é l é ments de l a vue o b s e r v a n t l a p e r s o n n e
46 myApp . g u i . m e d i a t o r . p u b l i s h ( ” pe rs o n n e / changed ” , {
47 p e r s o n n e : myApp . modele .
selectedPersonne
48 }) ;
49 }
50 };
51
52 // E n r e g i s t r e m e n t du c a l l b a c k de l ’ é v é nement de v a l i d a t i o n du f o r m u l a i r e
53 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / u p d a t e ” , updateModel ) ;
54 }() ] ) ;
5.4.8 Validation du formulaire d’ajout d’une personne

Lors de la validation (événement submit) du formulaire d’ajout, une personne doit être ajoutée
au modèle à partir des valeurs saisies dans le formulaire. Les panneaux potentiellement impactés
(liste des items, panneau des détails) sont alors mis à jour.
Code Source 5.10 : /ihm-demo/guiAjouterPersonneFormValidate.js

1 /* *
100
4 */
5 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s V a l i d a t e A j o u t e r F o r m ” , function ( ) {
6
7 /* *
9 */
14 inputId ;
15
16 // Ré cup é r a t i o n d e s donn é e s du f o r m u l a i r e dans une n o u v e l l e i n s t a n c e
17 var n o u v e l l e P e r s o n n e = myApp . m e t i e r . p e r s o n n e . c r e a t e I n s t a n c e ( null ) ;
19 f o r ( var j =0 ; j< myApp . m e t i e r . p e r s o n n e . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++j ) {
25 formId : ” ajouterPersonneForm ”
26 }) ;
29 n o u v e l l e P e r s o n n e . s e t A t t r i b u t e ( attributeName ,
31 );
32
33 }
34 }
36 i f ( ! nouvellePersonne . hasError () ) {
37 // Ajout de l a Personne au modèle
38 myApp . modele . p e r s o n n e s . push ( n o u v e l l e P e r s o n n e ) ;
39 // Provoquer l a s é l e c t i o n de l a n o u v e l l e pe r s o n n e ( e t par s u i t e l a mise à
j o u r de l a vue )
40 myApp . g u i . m e d i a t o r . p u b l i s h ( ” pe rs o n n e / c r e a t e d ” , {
41 personne : nouvellePersonne
42 }) ;
43 }
44 };
45
47 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / c r e a t e ” , updateModel ) ;
48
49 } ( ) ] ) ;
5.4.9 Code HTML de la vue et invocation des méthodes

Il faut surtout penser à inclure jqueryjs le plus tard possible et à invoquer la méthode d’en-
registrement des événements utilisateurs après la génération de la vue, qui crée les éléments
HTML sur lesques on applique ces événements.
101
Code Source 5.11 : /ihm-demo/index.html

1 <!doctype HTML>
3 <head>
5 <t i t l e>A p p l i c a t i o n i n t e r a c t i v e</ t i t l e>
7 </head>
8 <body>
9 <!−− Paragraphe c o n t e n a n t l e r é s u l t a t s du s c r i p t : −−>
16 <s c r i p t src=” . . / p a t t e r n − p r o t o / e x 0 5 − c r e a t e M o d u l e M e t i e r P r o t o . j s ”></s c r i p t>
18 <s c r i p t src=” . . / p a t t e r n − p r o t o / e x 0 5 − f a b r i q u e O b j e t M e t i e r P r o t o . j s ”></s c r i p t>
28 <s c r i p t src=” . . / p a t t e r n − f o n c t / e x 0 9 − a d r e s s e V i e w . j s ”></s c r i p t>
29
33 <s c r i p t src=” . . /form− f i l t e r / e x 0 2 − m e d i a t o r I n p u t F i l t e r . j s ”></s c r i p t>
35 <s c r i p t src=” . . /form− f i l t e r /ex03−formsGui . j s ”></s c r i p t>
36
37 <!−− Module Mé t i e r myApp . m e t i e r . p e r s o n n e s a v e s c o l l e c t i o n g e t A d r e s s e s ( ) −−>
38 <s c r i p t src=” . /personneModule . j s ”></s c r i p t>
39 <!−− C o n s t r u c t i o n en dur d ’ un modèle de donn é e s : c o l l e c t i o n de p e r s o n n e s −−>
40 <s c r i p t src=” . /modelModule . j s ”></s c r i p t>
41 <!−− P a t t e r n Mé d i a t o r pour enchainement a r c h i t e c t u r e t r o i s t i e r s−−>
42 <s c r i p t src=” . / m e d i a t o r . j s ”></s c r i p t>
43
44 <!−− Impl é mentaton de l ’ a c t i o n ” c l i c k s u r ’ M o d i f i e r ’ de Personne ”−−>
45 <s c r i p t src=” . / g u i B o u t o n M o d i f i e r P e r s o n n e . j s ”></s c r i p t>
46 <!−− Impl é mentaton de l ’ a c t i o n ” c l i c k s u r ’ Supprimer ’ de Personne ”−−>
47 <s c r i p t src=” . /guiBoutonSupprimerPersonne . j s ”></s c r i p t>
48 <!−− Impl é mentaton de l ’ a c t i o n ” c l i c k s u r ’ Ajouter ’ de Personne ”−−>
49 <s c r i p t src=” . / g u i B o u t o n A j o u t e r P e r s o n n e . j s ”></s c r i p t>
50 <!−− Impl é mentaton de l ’ a c t i o n ” c l i c k s u r ’ Ajouter ’ de Adresse ”−−>
51 <s c r i p t src=” . / g u i B o u t o n A j o u t e r A d r e s s e . j s ”></s c r i p t>
53 <s c r i p t src=” . / g u i B o u t o n M o d i f i e r A d r e s s e . j s ”></s c r i p t>
54 <!−− Impl é mentaton de l ’ a c t i o n ” c l i c k s u r ’ Supprimer ’ de Adresse ”−−>
55 <s c r i p t src=” . /guiBoutonSupprimerAdresse . j s ”></s c r i p t>
102
56 <!−− Impl é mentaton de l ’ a c t i o n ” V a l i d a t i o n de f o r m u l a i r e de modif ”−−>

57 <s c r i p t src=” . / g u i M o d i f i e r P e r s o n n e F o r m V a l i d a t e . j s ”></s c r i p t>
58 <!−− Impl é mentaton de l ’ a c t i o n ” V a l i d a t i o n de f o r m u l a i r e d ’ a j o u t ”−−>
59 <s c r i p t src=” . / g u i A j o u t e r P e r s o n n e F o r m V a l i d a t e . j s ”></s c r i p t>
61 <s c r i p t src=” . / g u i M o d i f i e r A d r e s s e F o r m V a l i d a t e . j s ”></s c r i p t>
63 <s c r i p t src=” . / g u i A j o u t e r A d r e s s e F o r m V a l i d a t e . j s ”></s c r i p t>
64 <!−− Mise à j o u r de l a vue ( panneau ”d é t a i l s ” uniquement ) −−>
65 <s c r i p t src=” . / g u i D e t a i l s C h a n g e d . j s ”></s c r i p t>
66 <!−− Mise à j o u r de l a vue ( re−g éné r e r t o u t e l a vue ) −−>
67 <s c r i p t src=” . /guiPersonneChanged . j s ”></s c r i p t>
68
69 <!−− Code HTML de l a vue −− S t r u c t u r e g én é r a l e de l a page HTML −−>
70
71 <button id=” b o u t o n A j o u t e r P e r s o n n e ”>A j o u t e r une p e r s o n n e</button><br />
72 <span id=” l i s t e P e r s o n n e s ” class= ” p a n e l ”></span>
73 <span class= ” p a n e l ”>
74 <span id=” v u e D e t a i l ”>
75 </span><br /><br />
76 </span>
77 <span id=”spanMainForm” class= ” p a n e l ”>
78 <form id=” ajouterPersonneForm ” method=” p o s t ” ></form>
79 <form id=” modifierPersonneForm ” method=” p o s t ” ></form>
80 <form id=” a jo ut e rA dre sse Form ” method=” p o s t ” ></form>
81 <form id=” modifierAdresseForm ” method=” p o s t ” ></form>
82 </span>
83
85 <s c r i p t src=” . / j q u e r y . j s ”></s c r i p t>
86 <!−− Év é nements u t i l i s a t e u r s c o n c e r n a n t l e s p e r s o n n e s −−>
87 <s c r i p t src=” . /guiJQueryEventsPersonne . j s ”></s c r i p t>
88 <!−− Év é nements u t i l i s a t e u r s c o n c e r n a n t l e s a d r e s s e s −−>
89 <s c r i p t src=” . / g u i J Q u e r y E v e n t s A d r e s s e . j s ”></s c r i p t>
90
91 <!−− Ajout d ’ un main e t ex é c u t i o n −−>
92 <s c r i p t>
93 /**
94 * Sé r i e d ’ i n s t r u c t i o n s e f f e c t u é e s pour i n i t i a l i s e r l ’ a p p l i c a t i o n /
96 * @augments myApp
97 */
99
102
103 // Provoquer l e p remier a f f i c h a g e de l a vue :
104 myApp . g u i . m e d i a t o r . p u b l i s h ( ” p e r s o n n e / c h a n g e d ” , {
106 }) ;
107
108 // E n r e g i s t r e m e n t d e s é v é nements u t i l i s a t e u r s g é r é s par jQuery
109 myApp . g u i . i n i t J Q u e r y E v e n t s P e r s o n n e ( ) ;
110 myApp . g u i . i n i t J Q u e r y E v e n t s A d r e s s e ( ) ;
111
103
112 }) ;
113
114 // ///////////////////////////////////////////////////
115 // Exé c u t i o n du Main a v e c un t e s t d ’ e x c e p t i o n
116 // t r y {
119 // } c a t c h ( e ) {
120 // a l e r t ( e . message ) ;
121 // }
122 </s c r i p t>
123 </body>
124 </html>
5.5 Événements concernant les Adresses

5.5.1 Enregistrement des événements utilisateurs via jQuery
De même que pour les personnes, l’utilisation de jQuery est limitée à un module Wrapper, qui
va définir tous les handler.
Comme il peut y avoir plusieurs adresses, dont les éléments HTML sont générés dynami-
quement, sur le panneau des détails, les événements concernant les adresses doivent pouvoir
être reconstruits dans le cas d’une reconstruction du panneau des détails de la vue (événement
personne/detailsRebuilt du mediator. De plus, nous devons créer un handler pour chacune
des adresses de la personne sélectionnée. Ces handler seront créés grâce à des helpers.
Code Source 5.12 : /ihm-demo/guiJQueryEventsAdresse.js
1 /* *
2 * Mé t h o d e d ’ i n i t i a l i s a t i o n d e s é v é nements u t i l i s a t e u r s J a v a S c r i p t .
3 * E n r e g i s t r e m e n t d e s g e s t i o n n a i r e s de c e s é v é nements v i a jQuery .
4 */
5 myApp . addModule . apply (myApp . gui , [ ” i n i t J Q u e r y E v e n t s A d r e s s e ” , function ( ) {
6
7 /* *
9 */
10 var c l i c k B o u t o n S a i s i e A d r e s s e = function ( e v e n t ) {
12 myApp . g u i . m e d i a t o r . p u b l i s h ( ” a d r e s s e / s a i s i e ” , {
14 }) ;
15 };
16
18 * du bouton de s u p p r e s s i o n s u r chaque a d r e s s e de l a p e r s o n n e s é l e c t i o n n é e .
20 * @param { i n t } i n d e x i n d i c e de l ’ a d r e s s e pour l e q u e l on e n r e g i s t r e l ’ é v é
nement .
21 */
22 var r e g i s t e r H e l p e r S u p p r i m e r A d r e s s e = function ( i n d e x ) {
24 myApp . g u i . m e d i a t o r . p u b l i s h ( ” a d r e s s e / d e l e t e ” ,
104
25 {
26 p e r s o n n e : myApp . modele . s e l e c t e d P e r s o n n e ,
27 a d r e s s e : myApp . modele . s e l e c t e d P e r s o n n e . g e t A d r e s s e ( i n d e x )
28 }) ;
29 };
30 };
31
33 * du bouton de s u p p r e s s i o n s u r chaque a d r e s s e de l a p e r s o n n e s é l e c t i o n n é e .
35 * @param { i n t } i n d e x i n d i c e de l ’ a d r e s s e pour l e q u e l on e n r e g i s t r e l ’ é v é nement
.
36 */
37 var r e g i s t e r H e l p e r M o d i f i e r A d r e s s e = function ( i n d e x ) {
39 myApp . g u i . m e d i a t o r . p u b l i s h ( ” a d r e s s e / e d i t ” ,
40 {
42 a d r e s s e : myApp . modele . s e l e c t e d P e r s o n n e . g e t A d r e s s e ( i n d e x )
43 }) ;
44 };
45 };
46
47 /* *
48 * E n r e g i s t r e l e s é v é nements de c l i c k s s u r l e s b o u t o n s ” A j o u t e r une a d r e s s e ”
et
49 * l e s b o u t o n s ” Supprimer ” ou m o d i f i e r de t o u t e s l e s a d r e s s e s de l a p e r s o n n e s
é lectionn ée .
50 * C e t t e f o n c t i o n d o i t ê t r e i n v o q u é e en c a s de s é l e c t i o n d ’ une n o u v e l l e
pe rs o nne
51 * ( r e c o n s t r u c t i o n deu code HTML du panneau d e s d é t a i l s ) .
52 */
53 var r e g i s t e r B u t t o n C l i c k E v e n t s = function ( ) {
54 var idBoutonSupprimerAdresse ,
55 idBoutonModifierAdresse ;
56 // E n r e g i s t r e m e n t du Handler du c l i c k pour a j o u t e r une a d r e s s e
57 $ ( ”#b o u t o n A j o u t e r A d r e s s e ” ) . on ( ” c l i c k ” , c l i c k B o u t o n S a i s i e A d r e s s e ) ;
58
59 f o r ( var i =0 ; i < myApp . modele . s e l e c t e d P e r s o n n e . ge tN bA dr es se s ( ) ; ++i ) {
60 idBoutonSupprimerAdresse = ” boutonSupprimerAdresse_ ” +
61 myApp . modele . s e l e c t e d P e r s o n n e . g e t A d r e s s e ( i ) . g e t A t t r i b u t e ( ’ i d ’ ) ;
62 $ ( ”#” + idBoutonSupprimerAdresse ) . on ( ” c l i c k ” ,
registerHelperSupprimerAdresse ( i ) ) ;
63 idBoutonModifierAdresse = ” boutonModifierAdresse_ ” +
64 myApp . modele . s e l e c t e d P e r s o n n e . g e t A d r e s s e ( i ) . g e t A t t r i b u t e ( ’ i d ’ ) ;
65 $ ( ”#” + i d B o u t o n M o d i f i e r A d r e s s e ) . on ( ” c l i c k ” , r e g i s t e r H e l p e r M o d i f i e r A d r e s s e
(i)) ;
66 }
67 }
68
69 // /////////////////////////////////////////////////////
70 // G e s t i o n n a i r e de s u b m i t f o r m u l a i r e d ’ a j o u t de a d r e s s e .
71
72 /* *
105

75 */
76 var f o rm H a n d l e r A j o u t A d r es s e = function ( e v e n t ) {
77
81
83 myApp . g u i . m e d i a t o r . p u b l i s h ( ” a d r e s s e / c r e a t e ” , {
85 }) ;
87
89 $ ( ”#a j out erAd re sseFo r m ” ) . on ( ” s u b m i t ” , f o rm H a n d l e r A j o u t A d r e s s e ) ;
90
91 // /////////////////////////////////////////////////////
92 // G e s t i o n n a i r e de s u b m i t f o r m u l a i r e d ’ a j o u t de a d r e s s e .
93
94 /* *
97 */
98 var f o r m H a n d l e r M o d i f i e r A d r e s s e = function ( e v e n t ) {
99
103
105 myApp . g u i . m e d i a t o r . p u b l i s h ( ” a d r e s s e / u p d a t e ” , {
107 }) ;
109
111 $ ( ”#modifierAdresseForm ” ) . on ( ” s u b m i t ” , f o r m H a n d l e r M o d i f i e r A d r e s s e ) ;
112
113 // E n r e g i s t r e r l e s c l i c k s l o r s de l ’ i n i t i a l i s a t i o n
114 registerButtonClickEvents () ;
115
116 // Permet à l a mé t h o d e q u i r e g é nè re l e panneau d e s d é t a i l s de r e c r é er ,
117 // v i a l e mé d i a t o r , l e s é v é nements ” c l i c k ” s u r l e s b o u t o n s dans l e panneau d e s
dé t a i l s .
118 myApp . g u i . m e d i a t o r . s u b s c r i b e ( ” per s on n e / d e t a i l s R e b u i l t ” ,
registerButtonClickEvents ) ;
119 }]) ;
5.5.2 Boutons d’ajout, de suppression, et de modification

Le bouton d’ajout d’une adresse, qui existe un un seul exemplaire car il dépend uniquement de
la personne, est le plus simple. Il faut créer un formulaire vierge pour la saisie d’une adresse.
Comme pour une personne, on utilise la possibilité de passer null comme argument de la
106
fabrique d’adresse, qui crée alors une adresse par défaut, sans créer d’erreurs pour les champs
vides (même pour les champs obligatoires).
Code Source 5.13 : /ihm-demo/guiBoutonAjouterAdresse.js
1 /* *
bouton
4 */
5 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s C l i c k A j o u t e r ” , function ( ) {
6
7 /* *
lectionn ée .
9 */
top ;\”>” +
12 ”<p s t y l e =\”width : 360 px ; display : i n l i n e −b l o c k ; text −align :c e n t e r ;
padding : 15 px ;\”>” +
13 ”<tr ong>S a i s i e d ’ une n o u v e l l e a d r e s s e</s trong>” +
14 ”<br />pour ” + myApp . modele . s e l e c t e d P e r s o n n e . g e t A t t r i b u t e ( ”nom” ) + ”
</p>” +
15 myApp . g u i . getHtmlFormInputs (myApp . m e t i e r . a d r e s s e . c r e a t e I n s t a n c e ( null
) , ” a jo ut erA dresseF or m ” ) +
17 ”</span>” ;
18 }
19
20 /* *
mainForm”
23 */
existant
existant
existant
existant
29
30 $ ( ”#aj o ut e rA dre sse Form ” ) . append ( getHtmlFormInputs ( ) ) ; // a j o u t e r l e s
31 };
32
34 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” a d r e s s e / s a i s i e ” , r e p a i n t F o r m I n p u t s ) ;
35
36 } ( ) ] ) ;
Les boutons de modification et de suppression des adresse doivent exister en autant d’exem-
plaire qu’il y a d’adresse. On crée donc un helper chargé de créer le callback correspondant à
chaque adresse.
107
Code Source 5.14 : /ihm-demo/guiBoutonModifierAdresse.js

1 /* *
bouton
4 */
5 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s C l i c k M o d i f i e r P e r s o n n e ” , function ( ) {
6
7 /* *
lectionn ée .
9 */
10 var getHtmlFormInputs = function ( a d r e s s e ) {
top ;\”>” +
12 myApp . g u i . getHtmlFormInputs ( a d r e s s e , ” modifierAdresseForm ” ) +
14 ”</span>” ;
15 }
16
17 /* *
modifierAdresseForm ”
19 * S i l ’ a d r e s s e a d e s e r r e u r s , p o t e n t i e l l e m e n t , e l l e n ’ a pas é t é c r é é e s u r l e
serveur .
20 * I l f a u t a l o r s u t i l i s e r l e v e r b e POST. On o u v r e a l o r s l ’ é l é ment d ’ ID ”
aj o ute r Adr e sse Fo r m ”
22 */
existant
existant
existant
existant
28
29 $ ( ”#modifierAdresseForm ” ) . append ( getHtmlFormInputs (
30 c o n t e x t A r g . a d r e s s e ) ) ; // a j o u t e r l e s
31 };
32
34 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” a d r e s s e / e d i t ” , r e p a i n t F o r m I n p u t s ) ;
35
36 } ( ) ] ) ;
Code Source 5.15 : /ihm-demo/guiBoutonSupprimerAdresse.js

1 /* *
bouton
3 * ” modifier ” la adresse s é lectionn ée .
4 */
108
5 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s C l i c k S u p p r i m e r A d r e s s e ” , function ( ) {

6
7 /* *
8 * C a l l b a c k q u i supprime l a a d r e s s e p a s s é e dans l ’ o b j e t p a s s é en argument .
9 * @param { O b j e c t } c o n t e x t A r g argument i n d i q u a n t l a a d r e s s e à su p p r i m e r .
10 * @param { a d r e s s e } c o n t e x t A r g . a d r e s s e r é f é r e n c e de l ’ i n s t a n c e de a d r e s s e à
s u ppr i me r dans l e modèle .
11 */
12 var d e l e t e A d r e s s e = function ( c o n t e x t A r g ) {
13
14 // S u p p r e s s i o n de l ’ a d r e s s e dans l a pe r so n n e
15 c o n t ex t Ar g . p e r s o n n e . d e l e t e A d r e s s e ( c o n t e xt A r g . a d r e s s e ) ;
16
17 // Provoquer l a mise à j o u r de l a vue :
18 myApp . g u i . m e d i a t o r . p u b l i s h ( ” per s on n e / d e t a i l s C h a n g e d ” , {
19 a d r e s s e : myApp . modele . s e l e c t e d P e r s o n n e
20 }) ;
21 }
22
24 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” a d r e s s e / d e l e t e ” , d e l e t e A d r e s s e ) ;
25
26 } ( ) ] ) ;
5.5.3 Création d’une nouvelle adresse

L’adresse est automatiquement ajoutée à la personne sélectionnée, et son ID est généré auto-
matiquement. Comme dans le cas d’une personne, les attributs de l’adresse (autre que l’ID)
sont récupérées à partir des valeurs des inputs du formulaire.
Code Source 5.16 : /ihm-demo/guiAjouterAdresseFormValidate.js

1 /* *
3 * du f o r m u l a i r e de m o d i f i c a t i o n d ’ une a d r e s s e .
4 */
5 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s V a l i d a t e A j o u t e r A d r e s s e F o r m ” ,
function ( ) {
6 /* *
8 */
13 inputId ;
14
15 // Ajout d ’ un a d r e s s e v i d e dans l a c o l l e c t i o n
16 var n o u v e l l e A d r e s s e = myApp . m e t i e r . a d r e s s e . c r e a t e I n s t a n c e ( null ) ;
17 myApp . modele . s e l e c t e d P e r s o n n e . addAdresse ( n o u v e l l e A d r e s s e ) ;
18
20 f o r ( var j =0 ; j< myApp . m e t i e r . a d r e s s e . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++j ) {
21 var attributeName = myApp . m e t i e r . a d r e s s e . g e t A t t r i b u t e L i s t ( ) [ j ] ;
109
26 formId : ” ajou terA d res s e Fo r m ”
27 }) ;
28 // M o d i f i c a t i o n de l a p r o p r i é t é de l a a d r e s s e
30 n o u v e l l e A d r e s s e . s e t A t t r i b u t e ( attributeName ,
32 );
33 }
34 }
35 i f ( ! nouvelleAdresse . hasError () ) {
36 // Provoquer l a mise à j o u r de l a vue ( panneau d e s d é t a i l s )
37 myApp . g u i . m e d i a t o r . p u b l i s h ( ” pe rs o n n e / d e t a i l s C h a n g e d ” , {
39 }) ;
40 // Provoquer l a r e q u ê t e AJAX pour l ’ i m p l é m e n t a t i o n de l a p e r s i s t a n c e
41 myApp . g u i . m e d i a t o r . p u b l i s h ( ” a d r e s s e / c r e a t e d ” , {
43 adresse : nouvelleAdresse
44 }) ;
45 } else {
46 myApp . modele . s e l e c t e d P e r s o n n e . d e l e t e A d r e s s e ( n o u v e l l e A d r e s s e ) ;
47 }
48 };
49
51 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” a d r e s s e / c r e a t e ” , updateModel ) ;
52
53 }() ] ) ;
5.5.4 Modification d’une adresse

La modification d’une adresse après modification présente la difficulté suivante : il faut retrouver
l’instance d’adresse à modifier, parmis les adresses de la personne sélectionnée. Nous avons
choisi de mettre un champs caché avec l’ID dans le formulaire (voir la partie 4.3). Il nous faut
alors rechercher l’ID de l’adresse dans les instances d’adresse de la personne sélectionnée. Nous
aurions aussi pu ajouter une référence vers l’adresse éditée dans le modèle.
Code Source 5.17 : /ihm-demo/guiModifierAdresseFormValidate.js

1 /* *
4 */
5 myApp . addModule . apply (myApp . gui , [ ” c a l l b a c k s V a l i d a t e M o d i f i e r A d r e s s e F o r m ” ,
function ( ) {
6 // F or mul ai r e de m o d i f i c a t i o n d ’ une p er s on n e
7
8 /* *
10 */
12
110

16 inputId ;
17
18 // Recherche de l ’ a d r e s s e q u i a é t é m o d i f i é e à p a r t i r de son ID u n i q u e
19 // L ’ ID s e t r o u v e en champs cach é du f o r m u l a i r e .
20 var i n p u t I d _ i d = myApp . g u i . g e t I n p u t I d ( {
21 attributeName : ” i d ” ,
22 formId : ” modifierAdresseForm ”
23 }) ;
24
25 // ID u n i q u e de l ’ a d r e s s e concern é e par l e f o r m u l a i r e
26 var i d A d r e s s e = document . getElementById ( i n p u t I d _ i d ) . v a l u e ;
27 var a d r e s s e E n Q u e s t i o n ; // Ré f é r e n c e de l ’ a d r e s s e concern é e par l e f o r m u l a i r e
28 f o r ( var i = 0 ; i < myApp . modele . s e l e c t e d P e r s o n n e . g et Nb Ad re ss es ( ) ; ++i ) {
29 i f ( i d A d r e s s e == myApp . modele . s e l e c t e d P e r s o n n e . g e t A d r e s s e ( i ) . g e t A t t r i b u t e (
’ id ’ ) ){
30 a d r e s s e E n Q u e s t i o n = myApp . modele . s e l e c t e d P e r s o n n e . g e t A d r e s s e ( i ) ;
31 }
32 }
33 i f ( a d r e s s e E n Q u e s t i o n === u n d e f i n e d ) {
34 throw new E r r o r ( ” Adresse i n t r o u v a b l e ( ID i n e x i s t a n t ) ” ) ;
35 }
36 // On r é c u p è r e l e s a t t r i b u t s du f o r m u l a i r e dans une n o u v e l l e i n s t a n c e
37 var changedAdresse = myApp . m e t i e r . a d r e s s e . c r e a t e I n s t a n c e ( null ) ;
39 f o r ( var j =0 ; j< myApp . m e t i e r . a d r e s s e . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++j ) {
45 formId : ” modifierAdresseForm ”
46 }) ;
49 changedAdresse . s e t A t t r i b u t e ( attributeName ,
51 );
52 }
53 }
55 i f ( ! changedAdresse . h a s E r r o r ( ) ) {
56 fo r ( var j =0 ; j< myApp . m e t i e r . a d r e s s e . g e t A t t r i b u t e L i s t ( ) . l e n g t h ; ++j ) {
59 a d r e s s e E n Q u e s t i o n . s e t A t t r i b u t e ( attributeName ,
60 changedAdresse . g e t A t t r i b u t e ( attributeName ) ) ;
61 }
62 }
64 myApp . g u i . m e d i a t o r . p u b l i s h ( ” pe rs o n n e / d e t a i l s C h a n g e d ” , {
65 p e r s o n n e : null
66 }) ;
111
68 myApp . g u i . m e d i a t o r . p u b l i s h ( ” a d r e s s e / changed ” , {
70 adresse : adresseEnQuestion
71 }) ;
72 }
73 };
75 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” a d r e s s e / u p d a t e ” , updateModel ) ;
76 }() ] ) ;
112
Chapitre 6
Requêtes Asynchrones et API Restful
6.1 Qu’est-ce qu’une requête asynchrone ?

Les requêtes asynchrones XMLHttpRequest permettent d’exécuter (suite à une événement côté
client) une requête HTTP (exécution d’un script ou programme, par exemple en PHP) sur le
serveur. On parle de requête asynchrone car le client n’est pas bloqué en attendant la réponse
du serveur : le déroulement du programme côté client peut se poursuivre, et la réponse du
serveur est gérée par des callbacks.
Malgré le nom XMLHttpRequest, les requêtes asynchrones permettent d’échanger avec le
serveur d’autres types de données que du XML. Nous utiliserons dans ce cours des données
JSON.
Le codage JSON perrmet de coder sous forme de chaîne de caractères des collections d’ob-
jets. Ainsi, on pourra, par exemple, coder en JSON une collection d’objets en PHP (tableau
associatif), puis transmettre la chaîne JSON via une requête asynchrone, et enfin reconstituer
une collection d’objets en JavaScript pour générer, par exemple, une mise en forme HTML
dans le document.
Voici un exemple de code JSON d’un tableau associatif PHP ou d’un objet JavaScript (qui
contient lui-même un tableau de descriptions de formats) :
Code Source 6.1 : Code JSON d’un tableau associatif PHP ou objet JavaScript
1 {
2 ” id ” : 654 ,
3 ” denomination ” : ” T u t o r i e l J a v a S c r i p t ” ,
4 ” prix unitaire ” : 0.50 ,
5 ” f o r m a t s ” : [ ”PDF” , ” P o s t s c r i p t ” , ”HTML” , ” ePub ” ]
6 }
On peut, par exemple, générer un tel tableau sur un serveur en PHP par le code suivant :
Code Source 6.2 : Génération et sortie du code JSON en PHP
1 < ?php
2 $myArray = array ( ” i d ” => 6 5 4 ,
3 ” denomination ” => ” T u t o r i e l J a v a S c r i p t ” ,
4 ” p r i x u n i t a i r e ” => 0 . 5 0 ,
5 ” f o r m a t s ” => array ( ”PDF” , ” P o s t s c r i p t ” , ”HTML” , ” ePub ” ) ) ;
6 // Header HTTP sp é c i f i q u e :
7 header ( ’ c o n t e n t −t y p e : a p p l i c a t i o n / j s o n ; c h a r s e t=u t f −8 ’ ) ;
8 echo json_encode ( $myArray ) ;
113
9 ?>
6.2 Requêtes Ajax

Le méthode ajax de jQuery perrmet d’effectuer une requête XMLHttpRequest qui transmet des
paramètres (un objet JavaScript) à un CGI (ici en PHP), via une URL. Dans notre exemple, le
serveur reçoit lui-même un objet (propriété data) côdé en JSON, et génère lui-même du code
JSON. Le programme client récupère du code JSON générée sur la sortie standard du CGI, et
reconstitue une objet JavaScript.
Voici notre exemple où le code JavaScript côté client récupère une collection d’objet créée
par le CGI et la met en forme en HTML. Trois boutons permettent de tester :
• Un cas sans erreur ;
• Un cas où la gestion d’erreur est implémentée en PHP côté serveur ;
• Un cas où la requête AJAX elle-même échoue.
Les trois callbacks suivants sont utilisés pour gérer la requête :
• success en cas de succès de la requête ;
• error en cas d’échec de la requête
• complete, ici utilisé pour mettre à jour la vue, que ce soit en cas de succès ou en cas
d’échec de la requête.
Je programme en JavaScript côté client est le suivant :
114
Chapitre 6 : Requêtes Asynchrones et API Restful
Code Source 6.3 : /ajax/ex02-ajax.html (cf. Fig 6.1)

1 <!doctype html>
3 <head>
4 <meta charset=” utf−8 ”>
5 <t i t l e>Requ ê t e Ajax</ t i t l e>
6 <s c r i p t src=” . / j q u e r y . j s ”></s c r i p t>
8 </head>
9
10 <body>
11 <h1>Opé r a t i o n <i>GET</ i> Codé avec JSON</h1>
12
13 <p><button o n c l i c k = ” l a n c e r R e q u e t e ( 1 ) ”>C l i q u e z i c i</button> pour l a n c e r l a requ ê
t e s a n s e r r e u r</p>
14 <p><button o n c l i c k = ” l a n c e r R e q u e t e ( 0 ) ”>C l i q u e z i c i</button> pour l a n c e r l a requ ê
t e avec une e r r e u r g é r é e par l e s e r v e u r</p>
15 <p><button o n c l i c k = ” l a n c e r R e q u e t e (−1) ”>C l i q u e z i c i</button> pour l a n c e r une requ
ê t e q u i é choue</p>
16
17 <p id=” o u t p u t P a r a g r a p h ”></p>
18 <s c r i p t>
19
20 var model = {
21 paragraphText : ” ” ,
22 error : null ,
23 g e t E r r o r M e s s a g e : function ( ) {
24 return t h i s . error !== null ? ”<br />” + t h i s . error : ” ” ;
25 }
26 };
27
28 /**
29 * f o n c t i o n c a l l b a c k ex é c u t é e en c a s de s u c c è s de l a r e q u ê t e AJAX.
30 * La mé t h o d e p a r c o u r t l e s donn é e s r e t o u r n é e s par l e s e r v e u r au fo r m at JSON,
31 * e t c o n c a t è n e l e t e x t e dans l e modèle .
32 * @param { O b j e c t } r e t r i e v e d D a t a : c o l l e c t i o n d e s donn é e s d é cod é e s à p a r t i r du
JSON .
33 * La donn é e p e u t ê t r e un message d ’ e r r e u r .
34 */
35 var a j a x C a l l b a c k S u c c e s s = function ( r e t r i e v e d D a t a ) {
36 model . e r r o r = n u l l ;
37 model . paragraphText = ” ” ;
38 // Parcours e t a f f i c h a g e d e s donn é e s de l ’ o b j e t
39 f o r ( var key in r e t r i e v e d D a t a ) {
40 model . paragraphText += key + ” −−−− > ” + r e t r i e v e d D a t a [ key ] +’<br />’ ;
41 }
42 };
43
44 /**
45 * f o n c t i o n c a l l b a c k ex é c u t é e en c a s d ’ é c h e c de l a r e q u ê t e AJAX.
46 * Une e r r e u r e s t a j o u t é e dans l e modèle e t l e t e x t e du p a r a g r a p h e e s t mis à
vide .
47 */
48 var a j a x C a l l b a c k E r r o r = function ( ) {
49 model . paragraphText = ” ” ;
50 model . error = ” Erreur : é c h e c de l a r e q u ê t e AJAX” ;
115
51 };
52
53 /**
54 * f o n c t i o n c a l l b a c k ex é c u t é e l o r s q u e l a r e q u ê t e AJAX s e t e r m i n e .
55 * Ce c a l l b a c k e s t a p p e l é en c a s d ’ é c h e c ET en c a s de s u c c è s de l a r e q u ê t e
AJAX.
56 * I c i , l a mé t h o d e met à j o u r l a vue en a f f i c h a n t l e t e x t e e t une é v e n t u e l l e
erreur .
57 */
58 var a j a x C a l l b a c k C o m p l e t e = function ( ) {
59 $ ( ”#o u t p u t P a r a g r a p h ” ) . append (
60 ”<p>” +
61 model . paragraphText +
62 model . g e t E r r o r M e s s a g e ( ) +
63 ”</p>” ) ;
64 }
65
66 /**
67 * G e s t i o n n a i r e de c l i c k s u r l e s boutons , q u i d é c l e n c h e une r e q u ê t e AJAX.
68 * @param { i n t } s i m p l e T e s t V a l u e donn é e t r a n s m i s e au s e r v e u r v i a l a p r o p r i é t é
simpleTest
69 * s i s i m p l e T e s t V a l u e e s t né g a t i f , une URL du s e r v e u r i n e x i s t a n t e
est u t i l i s ée ,
70 * p r o v o q u a n t l ’ é c h e c de l a r e q u ê t e ( c ’ e s t j u s t e pour l ’ exemple
...) .
71 */
72 var l a n c e r R e q u e t e = function ( s i m p l e T e s t V a l u e ) {
73
74 var u r l S e r v e u r = ” h t t p :/ / p r o g j s / e x e m p l e s / a j a x / e x 0 1 _ e n c o d e _ j s o n . php ” ;
75
76 // Pour p r o v o q u e r une r e q u ê t e q u i é choue complètement
77 i f ( s i m p l e T e s t V a l u e <0 ) { // URL q u i n ’ e x i s t e pas
78 u r l S e r v e u r = ” h t t p :/ / p r o g j s / e x e m p l e s / a j a x / b i d o n . php ” ;
79 }
80
81 // Lancement d ’ une r e q u ê t e AJAX a v e c donn é e s (POST) cod é e en JSON
82 var j q x h r = $ . a j a x ( {
83 // Envoyer l e s donn é e s de l a p er s on n e a v e c l e f o r ma t JSON
84 dataType : ” j s o n ” ,
85 u r l : u r l S e r v e u r , // URL du s e r v e u r
86 method : ’ post ’ , // Envoyer l e s donn é e s dans l e t a b l e a u $_POST
87 contentType : ’ application/x−www−form−urlencoded ’ ,
88 // donn é e s à t r a n s m e t t r e au s e r v e u r
89 data : {
90 simpleTest : simpleTestValue
91 },
92 // Mé t h o d e c a l l b a c k q u i r e c o n s t r u i t l e modèle en c a s de s u c c è s
93 success : ajaxCallbackSuccess ,
94 // Mé t h o d e c a l l b a c k q u i g è r e une é v é e n t u e l l e e r r e u r dans l a r e q u ê t e
95 error : a j a x C a l l b a c k E r r o r ,
96 // Mé t h o d e c a l l b a c k q u i met à j o u r s l a vue l a vue en c a s de s u c c è s ou d ’
erreur
97 complete : ajaxCallbackComplete
98 }) ;
99 }
100
116
101 </s c r i p t>

102 </body>
Le programme en PHP côté serveur est le suivant :

Code Source 6.4 : /ajax/ex01-encode-json.php
1 < ?php
2 i f ( i s s e t ($_REQUEST[ ’ s i m p l e T e s t ’ ] ) && $_REQUEST[ ’ s i m p l e T e s t ’ ] == 1 ) {
3 $myArray = array ( ’ key1 ’ => 1 1 , ’ key2 ’ => 2 2 , ’ key3 ’ => 3 3 , ’ key4 ’ => 4 4 ) ;
4 } else {
5 $myArray = array ( ’ e r r o r ’ => ”<i >PHP</i > Cannot r e t r i e v e d a t a ” ) ;
6 }
7
8 // Header HTTP
9 header ( ’ c o n t e n t −t y p e : a p p l i c a t i o n / j s o n ; c h a r s e t=u t f −8 ’ ) ;
10 echo json_encode ( $myArray ) ;
11 ?>
6.3 Qu’est-ce qu’une API REST (ou systèmes Restful) ?

Les explications sur les Web Services de type API Restful se trouvent dans le cours de pro-
grammation Web côté serveur sur :
https://malgouyres.org/programmation-php
Nous rappelons ici quelques principes. L’architecture REST (representational state transfer)
est, dans notre cadre, une architecture d’application client-serveur, qui permet le lien entre une
application côté client en Javascript et un serveur web sur lequel s’exécutent des CGI.
Le serveur permettra (au moins) d’effectuer au moins les opérations CRUD (Create, Read,
Update, Delete) sur des instances d’objets métier, aussi appelées entités ou ressources :
• Opération Create. De créer une ressource (ici une ligne d’une table de base de données)
avec ou sans son identifiant unique.
Exemple 1 : Créer une ressource de type Adresse en spécifiant les données de l’adresse,
en laissant au serveur le choix de l’Id de la ressource créée. Le serveur retourne l’Id généré
pour que le client le connaisse.
Exemple 2 : Créer une ressource de type Adresse en spécifiant les données de l’adresse
ET l’identifiant unique de l’instance à créer, par exemple parce que cet Id doit être généré
par un algorithme dépendant du client, ou parce que cet Id doit correspondre à l’Id de la
même entité ailleurs sur le réseau (comme l’ISBN d’un livre, qui ne peut pas être choisi
au hasard par le serveur).
• Opération Read. De lire toutes les ressources (ici d’une table de base de données).
Exemple : Lire toutes les personnes de la table Personne, avec une collection d’adresses
pour chaque personne (résultat d’une jointure en SQL qui correspond à un agrégat sur
les objets métiers).
• Opération Read avec Id ou prédicat. De lire ou bien une ressource identifiée de

manière unique par un identifiant unique (une ligne d’une table de base de données) ou
bien un certain nombre de ressources données par le résultat d’une requête (comme un
SELECT en SQL) ou par les données d’une jointure (par exemple avec l’identifiant d’un
117
agrégat).
Exemple 1 : Lire l’adresse d’identifiant unique (clé primaire de la table Adresse égaler à
af49bc053de73a0.
Exemple 2 : Lire toutes les adresses de la personne d’identifiant unique bd56bc053de12b3.
Exemple 3 : Lire toutes les personnes de la table Personne qui ont une adresse avec le
code postal commençant par les deux chiffre 63.
• Opération Update. De mettre à jour une ressource (ici une ligne d’une table de base
de données) identifiée de manière unique (par un identifiant unique), avec des données
(partielles ou complètes) à modifier.
Exemple : Modifier le code postal d’une adresse d’identifiant unique égal à af49bc053de73a0.
• Opération Delete. De détruire une ressource (ici une ligne d’une table de base de don-
nées) identifiée de manière unique (par un identifiant unique) ;
Exemple : Détruire la personne d’identifiant unique bd56bc053de12b3, ainsi que (s’agis-
sant d’une composition) toutes ses adresses de la table adresse (utilisation d’une clé
étrangère).
En utilisant cette interface (service web), l’application côté client pourra accéder à la couche
persistance du serveur.
Nous voyons aussi comment implémenter ces opérations sur le serveur en spécifiant les iden-
tifiants et les actions au moyen d’une URI (Universal Ressource Identifier) et des verbes (aussi
appelés méthodes, GET, PUT, POST, PATCH ou DELETE du protocole HTTP (norme RFC 2616
puis RFC 7230).
6.4 Persistance par Requêtes sur une API Restful

6.4.1 Création du Module persistance et Objet statusCode
À la racine d’un nouveau module myApp.persistance, nous créons un objet statusCodeObject,
destiné à définir les méthodes callback de gestion d’un retour de code d’erreur (status code)
HTTP.
Code Source 6.5 : /clientAndAPI/client/persistanceCommon.js
1 /* *
2 * Dé f i n i t i o n du module c h a r g é de l a p e r s i t a n c e par r e q u ê t e s AJAX
3 * s u r une API R e s t f u l p e r m e t t a n t d ’ acc é d e r à d e s e n t i t é s e t de
4 * s t o c k e r des e n t i t é s .
5 */
6 myApp . addModule ( ” p e r s i s t a n c e ” , { } ) ;
7
8 /* *
9 * Dé f i n i t i o n e t de l ’ o b j e t d é f i n i s s a n t l e s mé t h o d e c a l l b a c k
10 * c o r r e s p o n d a n t aux d i f f é r e n t s c o d e s d ’ e r r e u r ( s t a t u s c o d e s ) HTTP.
11 */
12 myApp . addModule . apply (myApp . p e r s i s t a n c e , [ ” s t a t u s C o d e O b j e c t ” , {
13 404 : function ( ) {
14 a l e r t ( ” Resource not found ” ) ;
15 },
16 400 : function ( ) {
17 a l e r t ( ”Bad R e q u e s t ” ) ;
118
18 },
19 405 : function ( ) {
20 a l e r t ( ” Method Not Allowed ” ) ;
21 },
22 422 : function ( ) {
23 a l e r t ( ” U n p r o c e s s a b l e E n t i t y : A t t r i b u t i n c o r r e c t ?” ) ;
24 },
25 500 : function ( ) {
26 a l e r t ( ” I n t e r n a l S e r v e r Error ” ) ;
27 }
28 }]) ;
6.4.2 Construction du modèle à partir de la base de données
Code Source 6.6 : /clientAndAPI/client/persistanceRead.js

1 /* *
2 * Dé f i n i t i o n e t e n r e g i s t r e m e n t d e s c a l l b a c k s de chargement du modèle
3 * à p a r t i r d e s donn é e s s u r l e s e r v e u r par une r e q u ê t e AJAX.
4 * Permet l e chargement du modèle à p a r t i r de l a b a s e de donn é e s .
5 */
6 myApp . addModule . apply (myApp . p e r s i s t a n c e , [ ” c a l l b a c k s R e b u i l d M o d e l F r o m S e r v e r ” ,
function ( ) {
7 /* *
8 * Mé t h o d e c a l l b a c k q u i e s t a p p e l é e en c a s de s u c c è s de l a r e q u ê t e AJAX.
9 * C e t t e mé t h o d e r e c o n s t r u i t l e modèle à p a r t i r d e s donn é e s du s e r v e u r .
10 * @param { O b j e c t } r e t r i e v e d D a t a donn é e s r e ¸ ues du s e r v e u r ( a p r è s p a r s i n g du
JSON)
11 * @param { O b j e c t | n u l l } r e t r i e v e d D a t a . e r r o r n u l l en l ’ a b s e n c e d ’ e r r e u r d é t e c t é
e par l e s e r v e u r ,
12 * ou un o b j e t dont l e s p r o p r i é t é s s o n t l e s messages d ’ e r r e u r r en v o y é
e s par l e s e r v e u r .
13 * @param { O b j e c t } r e t r i e v e d D a t a . d a t a donn é e s re n v o y é e s par l e s e r v e u r :
14 * c o l l e c t i o n s d ’ o b j e t s p e r m e t t a n t de c o n s t r u i r e d e s per so nn es
, avec l e u r s a d r e s s e s .
15 */
17 var a d r e s s e s D a t a , a d r e s s e I n s t a n c e ;
18
19 // S i aucune e r r e u r n ’ a é t é d é t e c t é e s u r l e s e r v e u r
20 i f ( r e t r i e v e d D a t a [ ” e r r o r ” ] === null && r e t r i e v e d D a t a [ ’ d a t a ’ ] !== u n d e f i n e d ) {
21 // Parcours d e s o b j e t s dans l e s donn é e s
22 fo r ( var key in r e t r i e v e d D a t a [ ’ d a t a ’ ] ) {
23 i f ( r e t r i e v e d D a t a [ ’ d a t a ’ ] . hasOwnProperty ( key ) ) {
24 // Cré a t i o n d ’ une per son n e s a n s a d r e s s e
25 var newPersonne = myApp . m e t i e r . p e r s o n n e . c r e a t e I n s t a n c e ( {
26 i d : r e t r i e v e d D a t a [ ’ d a t a ’ ] [ key ] [ ” i d ” ] ,
27 nom : r e t r i e v e d D a t a [ ’ d a t a ’ ] [ key ] [ ”nom” ]
28 }) ;
29
30 // Parcours d e s o b j e t s d é f i n i s s a n t l e s a d r e s s e s
31 a d r e s s e s D a t a = r e t r i e v e d D a t a [ ’ d a t a ’ ] [ key ] [ ” a d r e s s e s ” ] ;
32 fo r ( var k e y A d r e s s e in a d r e s s e s D a t a ) {
33 i f ( a d r e s s e s D a t a . hasOwnProperty ( k e y A d r e s s e ) ) {
34 // Cré a t i o n e t a j o u t d ’ une a d r e s s e
119
35 a d r e s s e I n s t a n c e = myApp . m e t i e r . a d r e s s e . c r e a t e I n s t a n c e ( {
36 id : adressesData [ keyAdresse ] [ ” id ” ] ,
37 numeroRue : a d r e s s e s D a t a [ k e y A d r e s s e ] [ ”numeroRue” ] ,
38 r u e : a d r e s s e s D a t a [ k e y A d r e s s e ] [ ” rue ” ] ,
39 complementAddr : a d r e s s e s D a t a [ k e y A d r e s s e ] [ ” complementAddr ” ] ,
40 codePostal : adressesData [ keyAdresse ] [ ” codePostal ” ] ,
41 v i l l e : adressesData [ keyAdresse ] [ ” v i l l e ” ] ,
42 pays : a d r e s s e s D a t a [ k e y A d r e s s e ] [ ” pays ” ]
43 }) ;
44 newPersonne . addAdresse ( a d r e s s e I n s t a n c e ) ;
45 }
46 }
47 myApp . modele . p e r s o n n e s . push (newPersonne ) ; // a j o u t dans l e modèle
48 }
49 }
50 } else {
51 a l e r t ( ” I l y a un o b j e t \” e r r o r \” non n u l l ” ) ;
52 }
53 };
54
55 /* *
56 * Mé t h o d e a p p e l é e l o r s q u e l a r e q u ê t e AJAX s e termine ,
57 * que ce s o i t a p r è s une e r r e u r ou a p r è s un s u c c è s .
58 * C e t t e mé t h o d e r e c o n s t r u i t l a vue ( a p r è s r e c o n s t r u c t i o n du modèle ) .
59 */
60 var a j a x C a l l b a c k C o m p l e t e = function ( r e t r i e v e d D a t a ) {
61
64
65 // La vue e s t r é i n i t i a l i s é e : on v i d e l e s é l é ments e t é v é nements
66 $ ( ”#l i s t e P e r s o n n e s ” ) . empty ( ) ;
67 $ ( ”#v u e D e t a i l ” ) . empty ( ) ;
68 $ ( ”#ajouterPersonneForm ” ) . empty ( ) ;
69 $ ( ”#modifierPersonneForm ” ) . empty ( ) ;
70 $ ( ”#aj o ut e rA dre sse Form ” ) . empty ( ) ;
71 $ ( ”#modifierAdresseForm ” ) . empty ( ) ;
72
73 // Provoquer l e pr e mier a f f i c h a g e de l a vue :
74 myApp . g u i . m e d i a t o r . p u b l i s h ( ” per s on n e / changed ” , {
76 }) ;
77
78 // E n r e g i s t r e m e n t d e s é v é nements u t i l i s a t e u r s g é r é s par jQuery
79 myApp . g u i . i n i t J Q u e r y E v e n t s P e r s o n n e ( ) ;
80 myApp . g u i . i n i t J Q u e r y E v e n t s A d r e s s e ( ) ;
81 };
82
83 /* *
84 * C a l l b a c k a p p e l é l o r s de l ’ é v é nement ” p ers o n n e / rea d ” du mé d i a t o r .
85 * E f f e c t u e une r e q u ê t e AJAX pour r é cup é r e r t o u t e s l e s p e r s o n n e s
86 * pour r e c o n s t r u i r e l e modèle de donn é e s .
87 */
88 var r e a d A l l P e r s o n n e = function ( ) {
89 // r e q u ê t e AJAX g e t cod é en JSON
90 var j q x h r = $ . a j a x ( {
120
91 // Envoyer l e s donn é e s de l a p e rs o n n e a v e c l e fo r m a t JSON

92 dataType : ” j s o n ” ,
93 u r l : ” h t t p :// p r o g j s / e x e m p l e s / a p i R e s t f u l / p e r s o n n e ” , // URL du s e r v e u r
94 method : ’ g e t ’ , // Verbe HTTP
95 contentType : ’ a p p l i c a t i o n /x−www−form−u r l e n c o d e d ’ ,
97 data : {
98 // a c t i o n : ” personne−g e t − a l l ”
99 },
102 // Mé t h o d e c a l l b a c k q u i g è r e une é v é e n t u e l l e e r r e u r dans l a r e q u ê t e
103 c o m p l e t e : ajaxC allb ackCompl ete ,
104 // O b j e t d é f i n i s s a n t l e s c a l l b a c k s d ’ e r r e u r s a v e c c o d e s du s e r v e u r
105 s t a t u s C o d e : myApp . p e r s i s t a n c e . s t a t u s C o d e O b j e c t
106 }) ;
107 };
108
109 // E n r e g i s t r e m e n t du c a l l b a c k de l ’ é v é nement de r e c o n s t r u c t i o n du modèle
110 myApp . g u i . m e d i a t o r . s u b s c r i b e ( ” per s on n e / read ” , r e a d A l l P e r s o n n e ) ;
111 }() ] ) ;
Code Source 6.7 : /clientAndAPI/client/index.html

1 <!doctype HTML>
3 <head>
5 <t i t l e>A p p l i c a t i o n i n t e r a c t i v e</ t i t l e>
7 </head>
8 <body>
10 <s c r i p t src=” . . / . . / p a t t e r n − f o n c t / e x 0 4 − s t r u c t u r e A p p l i c a t i o n . j s ”></s c r i p t>
12 <s c r i p t src=” . . / . . / p a t t e r n − f o n c t / e x 0 5 − m o d u l e P a t t e r n R e g e x . j s ”></s c r i p t>
14 <s c r i p t src=” . . / . . / p a t t e r n − p r o t o / e x 0 5 − c r e a t e M o d u l e M e t i e r P r o t o . j s ”></s c r i p t>
16 <s c r i p t src=” . . / . . / p a t t e r n − p r o t o / e x 0 5 − f a b r i q u e O b j e t M e t i e r P r o t o . j s ”></s c r i p t>
18 <s c r i p t src=” . . / . . / p a t t e r n − f o n c t / e x 0 6 − m o d u l e M e t i e r A d r e s s e . j s ”></s c r i p t>
20 <s c r i p t src=” . . / . . / p a t t e r n − f o n c t / e x 0 8 − f a b r i q u e A d r e s s e . j s ”></s c r i p t>
22 <s c r i p t src=” . . / . . / p a t t e r n − f o n c t / e x 1 1 − i n t e r f a c e I m p l e m e n t a t i o n . j s ”></s c r i p t>
24 <s c r i p t src=” . . / . . / p a t t e r n − f o n c t / e x 1 1 − i n t e r f a c e I m p l e m e n t a t i o n M e t i e r . j s ”></s
c r i p t>
26 <s c r i p t src=” . . / . . / p a t t e r n − f o n c t / e x 0 9 − a d r e s s e V i e w . j s ”></s c r i p t>
27
28
29
31 <s c r i p t src=” . . / . . /form− f i l t e r / e x 0 2 − m e d i a t o r I n p u t F i l t e r . j s ”></s c r i p t>
121

33 <s c r i p t src=” . . / . . /form− f i l t e r /ex03−formsGui . j s ”></s c r i p t>
34
35 <!−− Module Mé t i e r myApp . m e t i e r . p e r s o n n e s a v e s c o l l e c t i o n g e t A d r e s s e s ( ) −−>
36 <s c r i p t src=” . . / . . /ihm−demo/personneModule . j s ”></s c r i p t>
37 <!−− C o n s t r u c t i o n en dur d ’ un modèle de donn é e s : c o l l e c t i o n de p e r s o n n e s −−>
38 <s c r i p t src=” . . / . . /ihm−demo/modelModule . j s ”></s c r i p t>
39 <!−− P a t t e r n Mé d i a t o r pour enchainement a r c h i t e c t u r e t r o i s t i e r s −−>
40 <s c r i p t src=” . . / . . /ihm−demo/mediator . j s ”></s c r i p t>
41
44 <!−− Év é nements u t i l i s a t e u r s c o n c e r n a n t l e s p e r s o n n e s −−>
45 <s c r i p t src=” . . / . . /ihm−demo/guiJQueryEventsPersonne . j s ”></s c r i p t>
46 <!−− Év é nements u t i l i s a t e u r s c o n c e r n a n t l e s a d r e s s e s −−>
47 <s c r i p t src=” . . / . . /ihm−demo/guiJQueryEventsAdresse . j s ”></s c r i p t>
48
49 <!−− Impl é mentaton de l ’ a c t i o n ” c l i c k s u r ’ M o d i f i e r ’ de Personne ”−−>
50 <s c r i p t src=” . . / . . /ihm−demo/guiBoutonModifierPersonne . j s ”></s c r i p t>
51 <!−− Impl é mentaton de l ’ a c t i o n ” c l i c k s u r ’ Supprimer ’ de Personne ”−−>
52 <s c r i p t src=” . . / . . /ihm−demo/guiBoutonSupprimerPersonne . j s ”></s c r i p t>
53 <!−− Impl é mentaton de l ’ a c t i o n ” c l i c k s u r ’ Ajouter ’ de Personne ”−−>
54 <s c r i p t src=” . . / . . /ihm−demo/guiBoutonAjouterPersonne . j s ”></s c r i p t>
56 <s c r i p t src=” . . / . . /ihm−demo/guiBoutonAjouterAdresse . j s ”></s c r i p t>
58 <s c r i p t src=” . . / . . /ihm−demo/guiBoutonModifierAdresse . j s ”></s c r i p t>
59 <!−− Impl é mentaton de l ’ a c t i o n ” c l i c k s u r ’ Supprimer ’ de Adresse ”−−>
60 <s c r i p t src=” . . / . . /ihm−demo/guiBoutonSupprimerAdresse . j s ”></s c r i p t>
62 <s c r i p t src=” . . / . . /ihm−demo/guiModifierPersonneFormValidate . j s ”></s c r i p t>
64 <s c r i p t src=” . . / . . /ihm−demo/guiAjouterPersonneFormValidate . j s ”></s c r i p t>
66 <s c r i p t src=” . . / . . /ihm−demo/guiModifierAdresseFormValidate . j s ”></s c r i p t>
68 <s c r i p t src=” . . / . . /ihm−demo/guiAjouterAdresseFormValidate . j s ”></s c r i p t>
69 <!−− Mise à j o u r de l a vue ( panneau ”d é t a i l s ” uniquement ) −−>
70 <s c r i p t src=” . . / . . /ihm−demo/guiDetailsChanged . j s ”></s c r i p t>
71 <!−− Mise à j o u r de l a vue ( re−g éné r e r t o u t e l a vue ) −−>
72 <s c r i p t src=” . . / . . /ihm−demo/guiPersonneChanged . j s ”></s c r i p t>
73
74 <s c r i p t src=” . /persistanceCommon . j s ”></s c r i p t>
75 <s c r i p t src=” . / p e r s i s t a n c e R e a d . j s ”></s c r i p t>
76 <s c r i p t src=” . / p e r s i s t a n c e C r e a t e P e r s o n n e . j s ”></s c r i p t>
77 <s c r i p t src=” . / p e r s i s t a n c e D e l e t e P e r s o n n e . j s ”></s c r i p t>
78 <s c r i p t src=” . / p e r s i s t a n c e U p d a t e P e r s o n n e . j s ”></s c r i p t>
79 <s c r i p t src=” . / p e r s i s t a n c e C r e a t e A d r e s s e . j s ”></s c r i p t>
80 <s c r i p t src=” . / p e r s i s t a n c e U p d a t e A d r e s s e . j s ”></s c r i p t>
81 <s c r i p t src=” . / p e r s i s t a n c e D e l e t e A d r e s s e . j s ”></s c r i p t>
82 <!−− Code HTML de l a vue −− S t r u c t u r e g én é r a l e de l a page HTML −−>
83
84 <button id=” b o u t o n A j o u t e r P e r s o n n e ”>A j o u t e r une p e r s o n n e</button><br />
85 <span id=” l i s t e P e r s o n n e s ” class= ” p a n e l ”></span>
86 <span class= ” p a n e l ”>
87 <span id=” v u e D e t a i l ”>
122
88 </span><br /><br />

89 </span>
90 <span id=”spanMainForm” class= ” p a n e l ”>
91 <form id=” ajouterPersonneForm ” method=” p o s t ” ></form>
92 <form id=” modifierPersonneForm ” method=” p o s t ” ></form>
93 <form id=” a jo ut e rA dre sse Form ” method=” p o s t ” ></form>
94 <form id=” modifierAdresseForm ” method=” p o s t ” ></form>
95 </span>
96
97 <!−− Ajout d ’ un main e t ex é c u t i o n −−>
98 <s c r i p t>
99 /**
100 * Sé r i e d ’ i n s t r u c t i o n s e f f e c t u é e s pour i n i t i a l i s e r l ’ a p p l i c a t i o n /
102 * @augments myApp
103 */
105
106 // Cré a t i o n d ’ un modèle a v e c une c o l l e c t i o n de Personne v i d e
107 myApp . addModule . apply (myApp, [ ” modele ” , {
108 s e l e c t e d P e r s o n n e : null ,
109 personnes : [ ] ,
110 }]) ;
111 // Charger l e modèle :
112 myApp . g u i . m e d i a t o r . p u b l i s h ( ” p e r s o n n e / r e a d ” , {
114 }) ;
115 }) ;
116
117 // ///////////////////////////////////////////////////
120 </s c r i p t>
121 </body>
122 </html>
6.4.3 Création, Mise à jour, et suppression des personnes
Code Source 6.8 : /clientAndAPI/client/persistanceCreatePersonne.js

1 /* *
2 * Dé f i n i t i o n e t e n r e g i s t r e m e n t d e s c a l l b a c k s de c r é a t i o n d ’ une pe r s o n n e
3 * s u r l e s e r v e u r par r e q u ê t e AJAX.
4 */
5 myApp . addModule . apply (myApp . p e r s i s t a n c e , [ ” c a l l b a c k s C r e a t e P e r s o n n e Q u e r y S e r v e r ” ,
function ( ) {
6 /* *
8 * C e t t e mé t h o d e i n f o r m e simplement l ’ u t i l i s a t e u r d e s é v e n t u e l l e s e r r e u r s .
9 * En e f f e t , l a r e q u ê t e n ’ e s t pas s u p p o s é e r e t o u r n e r d e s donn é e s .
10 */
12 var concatErrorMsg=” ” ;
13 i f ( r e t r i e v e d D a t a [ ” e r r o r ” ] !== null ) {
14 fo r ( var key in r e t r i e v e d D a t a [ ’ e r r o r ’ ] ) {
123
15 i f ( r e t r i e v e d D a t a [ ’ e r r o r ’ ] . hasOwnProperty ( key ) ) {
16 concatErrorMsg += key + ” : ” + r e t r i e v e d D a t a [ ’ e r r o r ’ ] [ key ] + ” \n” ;
17 }
18 }
19 a l e r t ( concatErrorMsg ) ;
20 }
21 };
22
23 /* *
27 */
28 var c r e a t e P e r s o n n e = function ( c o n t e x t A r g ) {
29
31 var j q x h r = $ . a j a x ( {
32 dataType : ” j s o n ” , // On e n v o i e l e s donn é e s l a p e r s o n n e cod é e en JSON
33 // L ’URI c o m p l è t e i n c l u s l ’ ID de l a r e s s o u r c e à c r é e r
34 u r l : ” h t t p :// p r o g j s / e x e m p l e s / a p i R e s t f u l / p e r s o n n e / ”
35 + c o n t e x t A rg . p e r s o n n e . g e t A t t r i b u t e ( ” i d ” ) ,
36 method : ’ p o s t ’ , // Verbe HTTP
39 data : {
40 p e r s o n n e : { // A t t r i b u t s de l a p er s o n n e
41 nom : c o n t e x tA r g . p e r s o n n e . g e t A t t r i b u t e ( ”nom” )
42 }
43 },
48 }) ;
49 };
51 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / c r e a t e d ” , c r e a t e P e r s o n n e ) ;
52 }() ] ) ;
Code Source 6.9 : /clientAndAPI/client/persistanceUpdatePersonne.js

1 /* *
2 * Dé f i n i t i o n e t e n r e g i s t r e m e n t d e s c a l l b a c k s de m o d i f i c a t i o n d ’ une pe r s o n n e
4 */
5 myApp . addModule . apply (myApp . p e r s i s t a n c e , [ ” c a l l b a c k s U p d a t e P e r s o n n e Q u e r y S e r v e r ” ,
function ( ) {
6 /* *
10 */
124
17 }
18 }
20 }
21 };
22
23 /* *
27 */
28 var updatePersonne = function ( c o n t e x t A r g ) {
29
31 var j q x h r = $ . a j a x ( {
36 method : ’ p u t ’ , // Verbe HTTP
39 data : {
40 p e r s o n n e : { // A t t r i b u t s de l a p er s o n n e
41 nom : c o n t e x tA r g . p e r s o n n e . g e t A t t r i b u t e ( ”nom” )
42 }
43 },
48 }) ;
49 };
51 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / changed ” , updatePersonne ) ;
52 }() ] ) ;
Code Source 6.10 : /clientAndAPI/client/persistanceDeletePersonne.js

1 /* *
2 * Dé f i n i t i o n e t e n r e g i s t r e m e n t d e s c a l l b a c k s de s u p p r e s s i o n d ’ une p e r s o n n e
4 */
5 myApp . addModule . apply (myApp . p e r s i s t a n c e , [ ” c a l l b a c k s D e l e t e P e r s o n n e Q u e r y S e r v e r ” ,
function ( ) {
6 /* *
10 */
11 var d e l e t e P e r s o n n e = function ( c o n t e x t A r g ) {
12
14 var j q x h r = $ . a j a x ( {
125

16 // L ’URI c o m p l è t e i n c l u s l ’ ID de l a r e s s o u r c e à s u p p r i m e r
19 method : ’ d e l e t e ’ , // Verbe HTTP
22 data : {
23 // O b j e t v i d e ( l e paramètre ID e s t sp é c i f i é dans l ’URI)
24 },
27 }) ;
28
29 };
31 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” per s on n e / d e l e t e ” , d e l e t e P e r s o n n e ) ;
32 }() ] ) ;
6.4.4 Création, Mise à jour, et suppression des adresses
Code Source 6.11 : /clientAndAPI/client/persistanceCreateAdresse.js

1 /* *
4 */
5 myApp . addModule . apply (myApp . p e r s i s t a n c e , [ ” c a l l b a c k s C r e a t e A d r e s s e Q u e r y S e r v e r ” ,
function ( ) {
6 /* *
10 */
17 }
18 }
20 }
21 };
22
23 /* *
27 */
28 var c r e a t e A d r e s s e = function ( c o n te x t A r g ) {
29
31 var j q x h r = $ . a j a x ( {
126

34 u r l : ” h t t p :// p r o g j s / e x e m p l e s / a p i R e s t f u l / a d r e s s e /”
35 + c o nt e x tA r g . a d r e s s e . g e t A t t r i b u t e ( ” i d ” ) ,
36 method : ’ p o s t ’ , // Verbe HTTP
39 data : {
40 a d r e s s e : { // A t t r i b u t s de l ’ a d r e s s e
41 i d P e r s o n n e : co n t ex t A rg . p e r s o n n e . g e t A t t r i b u t e ( ” i d ” ) ,
42 numeroRue : c on t e xt A r g . a d r e s s e . g e t A t t r i b u t e ( ”numeroRue” ) ,
43 r u e : co n t e x t A rg . a d r e s s e . g e t A t t r i b u t e ( ” rue ” ) ,
44 complementAddr : c on t e x t A r g . a d r e s s e . g e t A t t r i b u t e ( ” complementAddr ” ) ,
45 c o d e P o s t a l : co n t ex t A rg . a d r e s s e . g e t A t t r i b u t e ( ” c o d e P o s t a l ” ) ,
46 v i l l e : c o n t e x t Ar g . a d r e s s e . g e t A t t r i b u t e ( ” v i l l e ” ) ,
47 pays : c on t ex t A rg . a d r e s s e . g e t A t t r i b u t e ( ” pays ” )
48 }
49 },
54 }) ;
55 };
57 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” a d r e s s e / c r e a t e d ” , c r e a t e A d r e s s e ) ;
58 }() ] ) ;
Code Source 6.12 : /clientAndAPI/client/persistanceUpdateAdresse.js

1 /* *
4 */
5 myApp . addModule . apply (myApp . p e r s i s t a n c e , [ ” c a l l b a c k s U p d a t e A d r e s s e Q u e r y S e r v e r ” ,
function ( ) {
6 /* *
10 */
17 }
18 }
20 }
21 };
22
23 /* *
127

27 */
28 var u p d a t e A d r e s s e = function ( c o n te x t A r g ) {
29
31 var j q x h r = $ . a j a x ( {
33 // L ’URI c o m p l è t e i n c l u s l ’ ID de l a r e s s o u r c e à m e t t r e à j o u r
36 method : ’ p u t ’ , // Verbe HTTP
39 data : {
40 a d r e s s e : { // A t t r i b u t s de l ’ a d r e s s e
41 i d P e r s o n n e : c on t ex t A rg . p e r s o n n e . g e t A t t r i b u t e ( ” i d ” ) ,
42 numeroRue : c on t e xt A r g . a d r e s s e . g e t A t t r i b u t e ( ”numeroRue” ) ,
43 r u e : co n t e x t A rg . a d r e s s e . g e t A t t r i b u t e ( ” rue ” ) ,
44 complementAddr : c on t e x t A r g . a d r e s s e . g e t A t t r i b u t e ( ” complementAddr ” ) ,
45 c o d e P o s t a l : co n t ex t A rg . a d r e s s e . g e t A t t r i b u t e ( ” c o d e P o s t a l ” ) ,
46 v i l l e : c o n t e x t Ar g . a d r e s s e . g e t A t t r i b u t e ( ” v i l l e ” ) ,
47 pays : c on t ex t A rg . a d r e s s e . g e t A t t r i b u t e ( ” pays ” )
48 }
49 },
54 }) ;
55 };
57 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” a d r e s s e / changed ” , u p d a t e A d r e s s e ) ;
58 }() ] ) ;
Code Source 6.13 : /clientAndAPI/client/persistanceDeleteAdresse.js

1 /* *
4 */
5 myApp . addModule . apply (myApp . p e r s i s t a n c e , [ ” c a l l b a c k s D e l e t e A d r e s s e Q u e r y S e r v e r ” ,
function ( ) {
6 /* *
10 */
17 }
18 }
128
20 }
21 };
22
23 /* *
27 */
28 var d e l e t e A d r e s s e = function ( c o n t e x t A r g ) {
29
31 var j q x h r = $ . a j a x ( {
33 // L ’URI c o m p l è t e i n c l u s l ’ ID de l a r e s s o u r c e à s u p p r i m e r
36 method : ’ d e l e t e ’ , // Verbe HTTP
39 data : {
40 // O b j e t v i d e ( l e paramètre ID e s t sp é c i f i é dans l ’URI)
41 },
46 }) ;
47
48 };
50 myApp . g u i . m ed i a t o r . s u b s c r i b e ( ” a d r e s s e / d e l e t e ” , d e l e t e A d r e s s e ) ;
51 }() ] ) ;
129
Annexe A
Graphisme avec les Canvas HTML5
A.1 Notion de canvas

Les canvas HTML5 fournissent une petite API graphique 2D en javascript qui permet de
réaliser des dessins, des graphiques, etc. sans plugin. Les canvas 2D sont dores et déjà disponible
sur tous les grands navigateurs. L’extension webGL (qui dépasse le cadre de ce cours) permet
de faire des affichage de scènes 3D en accédant aux fonctionnalités d’OpenGL via les shaders
en GLSL. L’extension webGL est implémentée dans tous les Grands Navigateurs mais n’est pas
implémentée à ce jour dans internet explorer car l’éditeur de ce navigateur préfère privilégier
une solution propriétaire.
Voici un exemple avec un canvas qui dessine un triangle.
Code Source A.1 : Génération et sortie du code JSON en PHP
1 <!doctype HTML>
3 <head>
5 <t i t l e>Mon p r e m i e r canvas HTML5</ t i t l e>
6 </head>
7 <body>
8 <!−− Dé c l a r a t i o n d ’ un canvas v i d e a v e c son i d −−>
9 <canvas id=”monCanvas” width=” 2000 ” height=” 1000 ” style= ” position : a b s o l u t e ; ”
></canvas>
10 <s c r i p t>
11 // On r é c u p è r e l e canvas pour d e s s i n e r
12 var myCanvas = document . getElementById ( ”monCanvas” ) ;
13 // On r é c u p è r e un c o n t e x t e du canvas pour u t i l i s e r l e s mé t h o d e s de
dessin
14 var c o n t e x t = myCanvas . g e t C o n t e x t ( ”2d” ) ;
15 // c o u l e u r de r e m p l i s s a g e r o u g e
16 c o n t e x t . f i l l S t y l e = ”#FF0000” ;
17
18 c o n t e x t . beginPath ( ) ;
19 c o n t e x t . moveTo ( 1 0 , 1 0 ) ;
20 context . lineTo (100 , 100) ;
21 context . lineTo (190 , 10) ;
23
24 context . f i l l () ;
25 context . closePath () ;
130
Chapitre A : Graphisme avec les Canvas HTML5
26 </s c r i p t>
27 <h1>Page HTML avec un canvas</h1>
28 <p>
29 </p>
30 </body>
31 </html>
A.2 Exemple d’animation dans un canvas

Voici un exemple qui réalise une animation à l’aide d’un timer qui exécute la fonction animate
toutes les 20ms, soit 50 fois par seconde.
Code Source A.2 : Génération et sortie du code JSON en PHP
1 <!doctype HTML>
3 <head>
5 <t i t l e>Mon p r e m i e r canvas HTML5</ t i t l e>
6 </head>
7 <body>
8 <!−− Dé c l a r a t i o n d ’ un canvas v i d e a v e c son i d −−>
9 <canvas id=”monCanvas” width=” 2000 ” height=” 1000 ” style= ” position : a b s o l u t e ; ”
></canvas>
10 <s c r i p t>
11 var t i m e r = s e t I n t e r v a l ( animate , 2 0 ) ;
12
13 function animate ( ) {
14
15 // On r é c u p è r e l e canvas pour d e s s i n e r
16 var canvas = document . getElementById ( ”monCanvas” ) ;
17 // On r é c u p è r e un c o n t e x t e du canvas pour u t i l i s e r l e s mé t h o d e s de
dessin
18 var c o n t e x t = canvas . g e t C o n t e x t ( ”2d” ) ;
19 // c o u l e u r de r e m p l i s s a g e r o u g e
20 c o n t e x t . f i l l S t y l e = ”#FF0000” ;
21 c o n t e x t . beginPath ( ) ;
22 var d = new Date ( ) ;
23 var n = d . getTime ( ) ;
24 // nombre de m i l l i s e c o n d e s d e p u i s l e 01 /01/1970
25
26 var s e c = n / 1 0 0 0 . 0 ;
27 c o n t e x t . c l e a r Rect ( 0 , 0 , canvas . width , canvas . height ) ;
28
29 context . save ( ) ;
30 c o n t e x t . t r a n s l a t e (200+500 * (1+Math . c o s ( 0 . 5 * s e c ) ) , 200+200 *(1.0+
Math . s i n ( s e c ) ) ) ;
31 // l ’ a n g l e de r o t a t i o n d o i t ê t r e e n t r e 0 e t 2*Math . PI ’
32 c o n t e x t . r o t a t e ( s e c − 2*Math . PI *Math . round ( s e c / ( 2 * Math . PI ) ) ) ;
33 c o n t e x t . moveTo ( 0 , 0 ) ;
34 context . lineTo (100 , 100) ;
37
38 context . f i l l () ;
131
39 context . closePath () ;
40 context . r e s t o r e () ;
41 }
42 </s c r i p t>
43 <h1>Page HTML avec un canvas</h1>
44 <p>
45
46 </p>
47 </body>
48 </html>
132
Annexe B
Programmation Événementielle en
JavaScript
B.1 Rappel sur la Gestion d’Événements en CSS

Dans un style CSS, on peut mettre des styles différents sur une balise HTML donnée, suivant
le contexte utilisateur, via la notion d’événement. Dans l’exmple suivant, le style d’un lien est
modifié suivant que le lien a déja été cliqué, ou si la souris survolle le lien (événement hover).
Code Source B.1 : Génération et sortie du code JSON en PHP

1 /* s t y l e par d é f a u t d e s l i e n s */
2 a :link {
3 text−decoration : none ;
4 color : #00e ; /* b l e u c l a i r */
5 }
6 /* s t y l e d e s l i e n s v i s i t é s */
7 a :visited {
8 text−decoration : none ;
9 color : #c 0 c ; /* mauve */
10 }
11 /* s t y l e d e s l i e n s v i s i t é s */
12 a :hover {
13 text−decoration : u n d e r l i n e ; /* s o u l i g n é */
14 color : #e40 ; /* r o u g e v i f */
15 }
Voici un autre exemple, dans lequel un élément HTML (ici une balise <span> et son contenu)
apparaît en popup pour afficher les détails d’une personne lors du survol de nom de la personne.
La balise span (au sein d’un paragraphe d’une classe CSS spécifique appelé popupDetails)
est par défaut invisible (propriété display à none). Cette même balise span devient visible
lorsque le paragraphe est survollé.

1 < !doctype html>
2 <html l a n g=” f r ”>
3 <head>
4 <meta c h a r s e t=” u t f −8”/>
5 <l i n k r e l=” s t y l e s h e e t ” h r e f=” . / my S tyl e . c s s ”/>
6 <s t y l e >
133
7 body {
8 f o n t −f a m i l y : ”Comic Sans MS” ;
9 f o n t −s i z e : 120% ;
10 }
11 h1{
12 margin : 0 auto ;
13 t e x t −a l i g n : c e n t e r ;
14 }
15 p . popupDetails {
16 background−c o l o r : y e l l o w ;
17 p o s i t i o n : r e l a t i v e ; /* pour p o s i t i o n e r l e span en a b s o l u */
18 max−width : 200 px ;
19 }
20 p . p o p u p D e t a i l s span {
21 d i s p l a y : none ;
22 }
23 p . p o p u p D e t a i l s :hover span {
24 position : absolute ;
25 l e f t : 200 px ;
26 top : −30 ;
27 min−width : 500 px ;
28 background−c o l o r : b l a c k ;
29 c o l o r : white ;
30 border −r a d i u s : 20 px ;
31 padding : 10 px ;
32 display : block ;
33 }
34 </ s t y l e >
35 < t i t l e >Popups en HTML e t CSS</ t i t l e >
36 </head>
37 <body>
38 < !−− dé but du c o r p s HTML −−>
39 <h1><i >Popup</i > en <i >HTML</i > e t <i >CSS</i ></h1>
40 <p c l a s s=” p o p u p D e t a i l s ”>
41 S c a r l e t t Johansson
42 <span>né e l e 22 novembre 1984 à New York ,
43 e s t une a c t r i c e e t c h a n t e use amé r i c a i n e .< br/>
44 ( s o u r c e&nbsp ; : w i k i p é d i a )
45 </span>
46 </p>
47 </body>
48 < !−− f i n du c o r p s HTML −−>
49 </html>
50 < !−− f i n du code HTML −−>
B.2 Événements en Javascript

B.2.1 Le principe des événements en Javascript
Les événements en Javascript permettent, en réponse à une événement sur un élément HTML
du document, d’appeler une fonction callback en Javascript. Ceci suffit à créer une interface
homme machine (IHM ) côté client, basée sur de la programmation événementielle en Javascript.
Une liste (non exhaustive ; Voir sur le web pour la liste complète)
134
Chapitre B : Programmation Événementielle en JavaScript
1. Événements souris
(a) onclick : sur un simple clic

(b) ondblclick : sur un double clic
(c) onmousedown : lorsque le bouton de la souris est enfoncé, sans forcément le relâcher
(d) onmousemove : lorsque la souris est déplacée
(e) onmouseout : lorsque la souris sort de l’élément
(f) onmouseover : lorsque la souris est sur l’élément
(g) onmouseup : lorsque le bouton de la souris est relâché
2. Événements clavier
(a) onkeydown : lorsqu’une touche est enfoncée

(b) onkeypress : lorsqu’une touche est pressée et relâchée
(c) onkeyup : lorsqu’une touche est relâchée
3. Événements formulaire
(a)
(b) onblur : à la perte du focus
(c) onchange : à la perte du focus si la valeur a changé
(d) onfocus : lorsque l’élément prend le focus (ou devient actif)
(e) onreset : lors de la remise à zéro du formulaire (via un bouton ”reset” ou une
fonction reset())
(f) onselect : quand du texte est sélectionné
(g) onsubmit : quand le formulaire est validé (via un bouton de type ”submit” ou une
fonction submit())
B.2.2 Exemple de mise à jour d’un élément

1 < !doctype html>
3 <head>
4 <meta c h a r s e t=” u t f −8”/>
5 <l i n k r e l=” s t y l e s h e e t ” h r e f=” . / my S tyl e . c s s ”/>
6 <s t y l e >
7 body {
8 f o n t −f a m i l y : ”Comic Sans MS” ;
9 f o n t −s i z e : 120% ;
10 }
11 h1{
12 margin : 0 auto ;
13 t e x t −a l i g n : c e n t e r ;
14 }
15 </ s t y l e >
135
16 < t i t l e >Mise à Jour Par Év é nement</ t i t l e >

17 </head>
18 <body>
19 < !−− dé but du c o r p s HTML −−>
20 <h1>Mise à Jour Par Év é nement <code>onchange </code ></h1>
21 <p c l a s s=” p o p u p D e t a i l s ”>
22 <i n p u t i d=” myInputId ” type=” t e x t ” s i z e=” 15 ”
23 onchange=” f o n c t i o n M i s e A J o u r ( ’ myInputContent ’ , ’ myInputId ’ ) ”/>
24 <br/>
25 <span i d=” myInputContent ”></span>
26 </p>
27 <s c r i p t >
28 function f o n c t i o n M i s e A J o u r ( el eme nt Id , i n p u t I d ) {
29 document . getElementById ( e l e m e n t I d ) . innerHTML
30 = document . getElementById ( i n p u t I d ) . v a l u e ;
31 }
32 </ s c r i p t >
33 </body>
34 < !−− f i n du c o r p s HTML −−>
35 </html>
36 < !−− f i n du code HTML −−>
B.2.3 Formulaires Dynamiques an Javascript

Nous voyons ici un exemple d’utilisation du javascript pour créer un formulaire dont les attri-
buts dépendent de la valeur d’un premier champ. Lorsqu’on sélectionne “deuxième année”, un
nouveau champ apparaît. Pour celà, on utilise l’évennement onchange sur l’input de l’année,
qui est géré par la fonction anneeChange. On teste alors la valeur de l’attribut, puis le cas
échéant on génére un nouveau champ dans un div d’id attributSupplementaire.

1 <!doctype html>
3 <head>
5 <t i t l e>F o r m u l a i r e dynamique</ t i t l e>
6 </head>
7 <body>
8 <form method=” p o s t ” action=” r e c e p t i o n . php ”>
9 <p>
10 <l a b e l for=”nom”>Nom</ l a b e l><i nput name=”nom” id=”nom” />
136
Chapitre B : Programmation Événementielle en JavaScript
11 </p>
12 <p>
13 <s e l e c t name=” annee ” id=” annee ” pattern=” ( p r e m i e r e ) | ( deuxieme ) ”
onchange= ’ anneeChange ( ) ; ’>
14 <option value=” c h o i s i s s e z ” selected disabled>−− c h o i s i s s e z −−</option>
15 <option value=” p r e m i e r e ”>Prem ière ann é e</option>
16 <option value=” deuxième ”>Deuxième ann é e</option>
17 </s e l e c t>
18 </p>
19 <div id=” a t t r i b u t S u p p l e m e n t a i r e ”>
20
21 </div>
22 <p>
23 <i nput type=” s u b m i t ” value=”−− OK −−” />
24 </p>
25 </form>
26 <s c r i p t>
27 function anneeChange ( ) {
28 var pa ra gr a p h e = document . getElementById ( ” a t t r i b u t S u p p l e m e n t a i r e ” ) ;
29 p a r a g ra p h e . innerHTML=document . getElementById ( ” annee ” ) . value+” ann é e .<br />” ;
30 i f ( document . getElementById ( ” annee ” ) . value == ” deuxième ” ) {
31 par a g r aph e . innerHTML+=”<l a b e l>O r i e n t a t i o n pr é vue pour l ’ ann é e p r o c h a i n e
:</ l a b e l>”
32 +’<s e l e c t name=” o r i e n t a t i o n ” id=” o r i e n t a t i o n ”>’
33 +’<option value=”LP”>LP</option>’
34 +’<option value=” master ”>master</option>’
35 +”<option value= \” i n g e \”>E c o l e d ’ i n g é</option>”
36 +’<option value=” b o u l o t ”>Boulot</option>’
37 +’<option value=” a u t r e ”>Autre</option>’
38 +’</s e l e c t>’ ;
39
40 }
41 }
42 anneeChange ( ) ;
43 </s c r i p t>
44 </body>
45 </html>

1 < !doctype html>
3 <head>
137
4 <meta c h a r s e t=”UTF−8”/>
5 < t i t l e >F o r m u l a i r e dynamique</ t i t l e >
6 </head>
7 <body>
8 < ?php
9 $nom= ( i s s e t ($_POST [ ”nom” ] ) ) ? $_POST [ ”nom” ] : ”nom i n d é t e rm i n é ” ;
10 $annee = ( i s s e t ($_POST [ ” annee ” ] ) ) ? $_POST [ ” annee ” ] : ”ann é e i n d é temin é e ” ;
11 echo ”Nom : ” . $nom . ”<b r/>” ;
12 echo ”Anné e : ” . $annee . ”<b r/>” ;
13 i f ( $annee==” deuxième ” )
14 echo ” O r i e n t a t i o n : ” . $_POST [ ” o r i e n t a t i o n ” ] ;
15
16
17 ?>
18 </body>
19 </html>
138
Annexe C
Gestion des fenêtres
C.1 Charger un nouveau document
Code Source C.1 : Génération et sortie du code JSON en PHP

1 // c o n s t r u c t e u r
2 function Telephone ( t e l 1 ) {
3 // t e s t de t é l é phone f r a n ¸ a i s à 10 c h i f f r e s
4 // 1) s uppr ime r l e s e s p a c e s , 2) t e s t e r l e s c h i f f r e s
5 i f ( t e l 1 . r e p l a c e ( / \ s /g , ’ ’ ) . match ( /^ ((\+33) | 0 ) [0 −9]{9} $/g ) )
6 t h i s . t e l 1=t e l 1 ;
7 else
8 throw new E r r o r ( ”Numé ro de t é l é phone i n v a l i d e ” ) ;
9 }
10
11 Telephone . p r o t o t y p e . a f f i c h e = function ( ) {
12 document . w r i t e ( ”Té l é phone 1 : ”+t h i s . t e l 1+”<b r/>” ) ;
13 }

1 < !doctype HTML>
3 <head>
4 <meta c h a r s e t=”UTF−8” />
5 < t i t l e >Charger un document</ t i t l e >
6 < s c r i p t s r c=” . / ex01_ c l a s s e s _ t e l e p h o n e . j s ”></s c r i p t >
7 </head>
8 <body>
9 <p>
10 <s c r i p t >
11 try {
12 var numero = prompt ( ” Merci d ’ e n t r e r un numé ro de t é l é phone en France mé
tropolitaine ”) ;
13 var t e l = new Telephone ( numero ) ;
14 tel . affiche () ;
15 } catch ( e r r ) {
16 l o c a t i o n = ” ex01_error . html ” ;
17 }
18 </ s c r i p t >
19 <p>
139
20 </body>
21 </html>

1 < !doctype HTML>
3 <head>
7 </head>
8 <body>
9 <p>
10 Bonjour , I l s ’ e s t p r o d u i t une e r r e u r . Merci d ’ e n t r e r un numé r o v a l i d e .
11 S i l e problème p e r s i s t e , m e r c i de c o n t a c t e r l e s t a g i a i r e q u i a f a i t l e s i t e . . .
12 <button o n c l i c k=” l o c a t i o n = ’ ex01_loadNewDoc . html ’ ; ”>Retour à l a s a i s i e </button>
13 <p>
14 </body>
15 </html>
C.2 Naviguer dans l’historique

la propriété history a deux méthodes back() et forward() qui permettent respectivement
de reculer ou d’avancer dans l’historique.

1 < !doctype HTML>
3 <head>
7 </head>
8 <body>
9 <p>
10 Bonjour , bla , b l a . . . < br/>
11 <a h r e f = ” e x 0 2 _ h i s t o r y B a c k . html ”>C l i q u e z i c i </a> pour a l l e r à l a page s u i v a n t e .
12 <p>
13 </body>
14 </html>

1 < !doctype HTML>
3 <head>
7 </head>
8 <body>
9 <p>
140
Chapitre C : Gestion des fenêtres
10 Bla , b l a . . . < br/>

11 Vous avez r a t é q u e l q u e c h o s e ?
12 <button o n c l i c k=” h i s t o r y . b a c k ( ) ; ”>Retour à l a page pr é c é dente </button>
13 <p>
14 </body>
15 </html>
C.3 Ouvrir une nouvelle fenêtre (popup)

1 < !doctype HTML>
3 <head>
5 < t i t l e >Ouvrir un f e n ê t r e </ t i t l e >
7 </head>
8 <body>
9 <p>
10 Bonjour , bla , b l a . . .
11 <button o n c l i c k=” window . open ( ’ ex03_windowPopup . html ’ , ’ma popup ’ , ’ w i d t h =400 ,
h e i g h t =400 , r e s i z e a b l e=y e s ’ ) ; ”>
12 Plus d ’ i n f o s
13 </b u t t o n >
14 <p>
15 </body>
16 </html>

1 < !doctype HTML>
3 <head>
7 </head>
8 <body>
9 <p s t y l e=” f o n t −s i z e : 100 ; t e x t −a l i g n : c e n t e r ; ”>
10 Coucou !
11 <p>
12 <p>
13 <a h r e f=” j a v a s c r i p t :window . c l o s e ( ) ; ”>Fermer l a f e n ê t r e </a>
14 </p>
15 </body>
16 </html>
141
Annexe D
Document Object Model (DOM)
La programmation côté client permet de modifier certaines parties d’un document HTML
dans recharger toute la page. Il y a plusieurs avantages : on évite de surcharger le serveur et
le trafic réseau et on améliore la réactivité de l’application web pour le plus grand bonheur de
l’utilisateur.
Pour faire cela, le langage Javascript côté client fournit une structure de données permettant
d’accéder aux éléments du document HTML et de modifier les éléments du document HTML.
Cette structure de données s’appelle le Document Object Model, en abrégé DOM. Il existe
un DOM legacy qui s’est sédimenté informellement au travers des versions successives du
javascript en tenant compte des implémentations des différents navigateurs, qui collaboraient
plus ou moins bien pour être mutuellement compatibles. Il existe aussi le DOM tel qu’il a été
finalement spécifié par le W3C.
Les éléments du document HTML ayant, de par leur imbrication, une structure arbores-
cente, le DOM W3C a une structure d’arbre. On peut accèder et manipuler via un ensemble
de propriétés et de méthodes javascript, notamment de l’interface Document et de l’interface
Element et ses classes filles, qui permettent de manipulet les éléments (HTML entre autres)
du document.
D.1 Qu’est-ce que le DOM ?

Le Document Object Model (en abrégé DOM ) corrrespond à l’arborescence des imbrications des
balises HTML d’un document. Voici un fichier HTML simple et une représentation schématique
du DOM correspondant.
Code Source D.1 : Génération et sortie du code JSON en PHP
1 < !doctype HTML>
3 <head>
5 < t i t l e >Un document HTML5</ t i t l e >
6 </head>
7 <body>
8 <h1>Exemple de f i c h i e r <i >HTML5</i ></h1>
9 <p>
10 Un document <i >HTML5</i > e s t une s t r u c t u r e a r b o r e s c e n t e .
11 <p>
12 </body>
142
Chapitre D : Document Object Model (DOM)
13 </html>
Document
<html>
<head> <body>
<title> <meta> <h1> <p>
"Un document HTML5" "Exemple de fichier" <i> "Un document" <i> "est une structure arborescente."
"HTML5" "HTML5"
Le DOM dont nous parlons ici est le DOM du W3C, qui est aujourd’hui supporté par tous
les grands navigateurs.
Le langage Javascript côté client propose une hiérarchie de classes pour parcourir et mani-
puler le DOM d’un document. Il s’agit essentiellement d’une structure de donnée d’arbre, où
chaque noeud (correspondant à une balise ou commentaire ou texte, etc. du document) possède
une collection de noeuds fils, qui sont les éléments ou structures imbriquées.
La bibliothèque jQuery permet un accès plus haut niveau au DOM pour sonder et manipuler
le code du document.
D.2 Sélection et Manipulation de Base sur le DOM

D.2.1 Sélection de tout ou partie des éléments
L’exemple suivant cherche tous les éléments du document et affiche leur nom de balise (tagName
ou nodeName). On apprend aussi à ajouter du code HTML à l’interieur d’un élément (au début
ou à la fin).
L’exemple suivant montre commen sélectionner certains éléments du document, par nom
de balise, classe CSS, etc. On apprend aussi à modifier des propriétés CSS des éléments.

1 <!doctype html>
3 <head>
5 <t i t l e>M o d i f i e r l e s t y l e de c e r t a i n s é l é ments</ t i t l e>
6 <s c r i p t src=” . /jquery−1 . 1 0 . 2 . j s ”></s c r i p t>
7 <s t y l e>
8 p . myClass {
9 background−color : #ddd ;
11 }
143
12 </s t y l e>
13 </head>
14
15 <body>
16 <h1>M o d i f i e r l e s t y l e de c e r t a i n s é l é ments</h1>
17 <div>
18 <h2>P a r t i e 1</h2>
19 <p>C e c i e s t l e t e x t e de l a p a r t i e 1 .</p>
20 </div>
21 <div>
22 <h2>P a r t i e 2</h2>
23 <p class= ” myClass ”>Le t e x t e de l a p a r t i e 2 e s t d i f f é r e n t .</p>
24 </div>
25 <s c r i p t>
26 // Ré cup é r a t i o n d ’ é l é ments jQuery pour l e s b a l i s e s <p> e t <h2>
27 var e l e m e n t s = $ ( ”p , h2 ” ) ;
28 e l e m e n t s . c s s ( ”border” , ”2 px s o l i d ” ) ;
29 // M o d i f i c a t i o n du s t y l e du t i t r e <h1>
30 $ ( ” h1 ” ) . c s s ( ” text−align ” , ” c e n t e r ” ) ;
31 // M o d i f i c a t i o n du s t y l e du ( ou d e s ) p a r a g r a p h e ( s ) de l a c l a s s e CSS myClass
32 $ ( ”p . myClass ” ) . c s s ( ”border −radius ” , ” 20 px ” ) ;
33 </s c r i p t>
34 </body>
D.2.2 Filtrage par le texte

L’exemple suivant montre comment sélectionner des éléments par mots du texte (sensible à la
casse).

1 <!doctype html>
3 <head>
5 <t i t l e>F i l t r a g e du t e x t e</ t i t l e>
144
7 <s t y l e>
8 p {
9 padding : 10 px 0 ;
10 }
11 </s t y l e>
12 </head>
13 <body>
14 <h1>F i l t r a g e du t e x t e</h1>
15 <div>
16 <h2>P a r t i e 1</h2>
18 </div>
19 <div>
20 <h2>P a r t i e 2</h2>
21 <p>Le t e x t e de l a <em>p a r t i e 2</em> e s t d i f f é r e n t .</p>
22 </div>
23 <s c r i p t>
24 $ ( ”p :c o n t a i n s ( ’ d i f f é r e n t ’ ) ” ) . prepend ( ’<s trong>Ce p a r a g r a p h e c o n t i e n t l e mot
” d i f f é r e n t ”</s trong>.<br /> ’ ) . c s s ( ”background−color ” , ”#ddd ” ) ;
25 </s c r i p t>
26 </body>
D.2.3 Application de Méthode aux éléments

L’exemple suivant montre comment appliquer une fonction à chacun des éléments sélectionnés.
Ici, on met le contenu des paragraphes en gras. On ajoute une information au début de chaque
paragraphe de la classe myClass.

1 <!doctype html>
3 <head>
5 <t i t l e>A p p l i q u e r une mé thode à chaque é l é ment</ t i t l e>
145
7 <s t y l e>
8 p . myClass {
11 }
12 </s t y l e>
13 </head>
14
15 <body>
16 <h1>A p p l i q u e r une mé thode à chaque é l é ment</h1>
17 <div>
18 <h2>P a r t i e 1</h2>
20 </div>
21 <div>
22 <h2>P a r t i e 2</h2>
23 <p class= ” myClass ”>Le t e x t e de l a p a r t i e 2 e s t d i f f é r e n t .</p>
24 </div>
25 <s c r i p t>
26 $ ( ”p” ) . each ( function ( ) {
27 $ ( t h i s ) . c s s ( ” font−weight” , ” b o l d e r ” ) ;
28 i f ( $ ( t h i s ) . h a s C l a s s ( ” myClass ” ) ) {
29 $ ( t h i s ) . prepend ( ”<em>p a r a g r a p h e de c l a s s e myClass</em><br />” ) ;
30 }
31 }) ;
32 </s c r i p t>
33 </body>
D.2.4 Événements et Callbacks

EL’exemple suivant montre comment, en réaction au click sur un bouton, transformer es pa-
ragraphes en div.
146
1 <!doctype html>
3 <head>
5 <t i t l e>Év é nement de c l i c k</ t i t l e>
7 <s t y l e>
8 p {
11 }
12 div . myClass {
13 font−weight : b o l d e r ;
15 border −style : dashed ;
16 }
17 em {
18 font −variant : small−caps ;
19 font−s i z e : 120% ;
20 }
21 button {
22 margin : 10 px 0 ;
23 }
24 </s t y l e>
25 </head>
26
27 <body>
28 <h1>Év é nement de c l i c k</h1>
29 <div>
30 <h2>P a r t i e 1</h2>
32 </div>
33 <div>
34 <h2>P a r t i e 2</h2>
35 <p>Le t e x t e de l a <em>p a r t i e 2</em> e s t d i f f é r e n t .</p>
147
36 </div>
37 <button>M o d i f i e r l e s p a r a g r a p h e s</button>
38 <s c r i p t>
39 // Év é nement de c l i c k
40 $ ( ” b u t t o n ” ) . c l i c k ( function ( ) {
41 // A p p l i c a t i o n d ’ une mé t h o d e à chaque p a r a g r a p h e
42 $ ( ”p” ) . each ( function ( ) {
43 // Remplacer l e <p> par un <div> en l a i s s a n t l e HTML i n c h a n g é
44 $ ( t h i s ) . r e p l a c e W i t h ( ’<div class= ” myClass ”>’ + $ ( t h i s ) . html ( )
+ ”</div>” ) ;
45 }) ;
46 }) ;
47 </s c r i p t>
48 </body>
D.2.5 Fitrage d’un Tableau

L’exemple suivant montre comment, en utilisant les utilitaires de jQuery permettant de traiter
des Array Javascript génériques :
1. Filtrer le contenu d’un tableau avec une méthode de choix booléenne pour les éléments
(ici, valeur multiple de 3) ;
2. Générer le HTML en appliquant une méthode à chaque élément du tableau.

1 <!doctype HTML>
3 <head>
5 <t i t l e>F i l t r a g e Grep s u r Tableau</ t i t l e>
6 </head>
148
7 <body>
8 <h1>F i l t r a g e Grep s u r Tableau</h1>
10
11 <p id=” o u t p u t ”><p>
12
13 <s c r i p t>
14 // Cré a t i o n d ’ un t a b l e a u a v e c l e s e n t i e r s de 0 à 19
15 var tab = new Array ( ) ;
16 fo r ( var i=0 ; i<20 ; i ++){
17 tab . push ( i ) ;
18 }
19
20 // Sé l e c t i o n d e s é l é ments du t a b l e a u par l a f o n c t i o n ” m u l t i p l e de 3”
21 var t a b M u l t i p l e D e 3 = $ . g r e p ( tab , function ( key , value ) {
22 i f ( key%3 == 0 )
23 return true ;
24 else
26 }) ;
27
28 // A f f i c h a g e du t a b l e a u d e s m u l t i p l e s de 3
29 var outHTML = ” ” ;
30 // A p p l i c a t i o n d ’ une f o n c t i o n ( g éné r a t i o n d ’HTML)
31 // à chaque é l é ment du t a b l e a u
32 $ . each ( tabMultipleDe3 , function ( key , value ) {
33 outHTML += ” t a b [ ”+key +” ] = ”+value+”<br />” ;
34 }) ;
35 $ ( ”#o u t p u t ” ) . append ( outHTML ) ;
36 </s c r i p t>
37 </body>
38 </html>
149

Programmation Web Javascript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Programmation Web Javascript

Transféré par

Droits d'auteur :

Formats disponibles

,

Tous mes cours sur le Web sont sur le Web :

Cours de programmation WEB sur les documents hypertexte HTML/CSS :

Tutoriel sur le CMS Drupal :

Cours de programmation WEB côté serveur en PHP :

Cours de programmation WEB côté client en JavaScript :

1 Premiers pas en JavaScript 6

2 Programmation Fonctionnelle et Objet en JavaScript 20

2.7.1 Implémentation d’interfaces en JavaScript . . . . . . . . . . . . . . . . 52

3 Constructeurs, Prototype et Patterns Associés 59

4 Formulaires, Filtrage, Pattern Mediator 73

5 Exemple d’Application avec IHM 84

6 Requêtes Asynchrones et API Restful 113

6.4.2 Construction du modèle à partir de la base de données . . . . . . . . . 119

A Graphisme avec les Canvas HTML5 130

B Programmation Événementielle en JavaScript 133

C Gestion des fenêtres 139

D Document Object Model (DOM) 142

Architecture d’une application multi plate-formes

Acteur API Base de

Client Client Appli. etc.

Figure 1 : La structure typique d’une application multi plate-formes

1. L’implémentation côté client dépend de la plate-forme et l’implémentation sur le serveur

Le cas de l’application Web

Client : IHM requêtes Serveur : API

Figure 2 : L’architecture client/serveur de notre application Web

Premiers pas en JavaScript

1.1 Balise <script> et Hello world en JavaScript

Figure 1.1 : Illustration du code source 1.1

Code Source 1.1 : /bases-js/ex01-helloWorldTest.html (cf. Fig 1.1)

1.1.2 Hello Word Avec la Méthode alert de Popup

Figure 1.2 : Illustration du code source 1.2

Code Source 1.2 : /bases-js/ex02-helloWorldTest.html (cf. Fig 1.2)

Code Source 1.3 : /bases-js/ex02-helloWorld.js

1.1.3 Document Template et Modification Dynamique de la Vue

Code Source 1.4 : /bases-js/ex02bis-helloWorldTemplateTest.html

8 <!−− Cré a t i o n d ’ une page ” Template ” , s q u e l e t t e de n o t r e page −−>

Code Source 1.5 : /bases-js/ex02bis-helloWorldTemplate.js

1.2 Types, Variables et Portée

5 <t i t l e>F o n c t i o n s</ t i t l e>

Code Source 1.7 : /bases-js/ex03-function.js

Code Source 1.8 : Ne jamais faire ça !

La bonne pratique consiste à déclarer les éléments d’un programme de sorte

1.4.1 Création d’un objet au moyen d’un littéral

Code Source 1.9 : /bases-js/ex04-objectLitteral.js

23 name : ”Bad Parameter ” ,

Figure 1.3 : Illustration du code source 1.10

Code Source 1.10 : /bases-js/ex05-objectMethod.js (cf. Fig 1.3)

1.4.3 Objets Imbriqués (Composites et Composés)

Figure 1.4 : Illustration du code source 1.11

Code Source 1.11 : /bases-js/ex06-nestedObjects.js (cf. Fig 1.4)

Code Source 1.12 : /bases-js/ex06-objectReturnedInMethod.js

1.4.4 Constructeur d’Object et mot réservé new

Code Source 1.13 : /bases-js/ex07-objectNew.js

1.5 Tableaux (le type Array)

Figure 1.5 : Illustration du code source 1.14

Code Source 1.14 : /bases-js/ex08-arrayLitterals.js (cf. Fig 1.5)

1.5.2 Quelques méthodes prédéfinies sur le type Array

On peut manipuler le tableau avec des méthodes de collection de conception classique :

• Suppression du dernier élément (l’élément supprimé est retourné par la méthode) :

• Suppression du premier élément (l’élément supprimé est retourné par la méthode) :

• Suppression d’une partie des éléments :

• Ajout d’un ou plusieurs élément(s) à la fin :

• Tri d’un tableau : function array.sort(compareFuntion);