Jav

aScr

ipt

pour

le W

eb 2

.0

97

82

21

21

20

09

7

Code

édi

teur

:G

12009

ISB

N-1

0:

2-2

12-1

2009-5

ISB

N-1

3:

978-2

-212-1

2009-7

La puissance de JavaScript révélée par Ajax et le Web 2.0

JavaScript est longtemps resté un langage au potentiel sous-estimé, mal aimé et souvent malmaîtrisé par les développeurs Web. Jusqu’à l’émergence d’Ajax et du Web 2.0 qui ont mis enlumière les possibilités spectaculaires et insoupçonnées offertes par ce langage.L’objectif du présent ouvrage est de vous amener bien au-delà de l’utilisation usuelle basique deJavaScript, en vous montrant comment développer avec efficacité des applications Web 2.0performantes et faciles à maintenir. Après un rappel de la syntaxe de base du langage, vousapprofondirez les différents aspects avancés du langage et de son environnement : programmationorientée objet, utilisation avancée du DOM, échanges HTTP asynchrones à l’aide XMLHttpRequest,interaction avec (X)HTML et CSS, création de composants graphiques, etc.

Les bonnes pratiques du développement Web 2.0 illustrées par une étude de cas

Une part importante de l’ouvrage est dédiée aux indispensables bibliothèques JavaScript, grâceauxquelles vous gagnerez en temps et en qualité de développement, tout en enrichissant vosapplications de composants graphiques sophistiqués. Vous apprendrez également commentintégrer via le protocole REST les services Web proposés par des sites tels que Google Maps,Yahoo ! ou Amazon.L’accent est mis tout au long de l’ouvrage sur les bonnes pratiques de développement JavaScript :séparation du code (X)HTML, CSS et JavaScript, mise en œuvre de composants, tests unitaires, etc.Cette démarche est illustrée par une étude de cas détaillée, qui fait appel à la bibliothèque Dojo etaux services Google Maps, et dont le code source est en libre accès sur jsweb2.sourceforge.net.

Au sommaireLes fondements de JavaScript. Syntaxe de base • Programmation objet avec JavaScript • Programmation DOM• Ajax : XMLHttpRequest, échanges de données, contournement des restrictions. Bibliothèques JavaScriptgénéralistes. Prototype : éléments de base, support du DOM et d’Ajax • Dojo : éléments de base, support duDOM et d’Ajax. Programmation graphique Web. Les fondements : (X)HTML, CSS, interaction avec JavaScript,XML et XSLT • Création de composants graphiques. Bibliothèques graphiques. Bibliothèques graphiques légères :Prototype, Behaviour, Script.aculo.us • Dojo et ses composants graphiques • Rialto et ses composantsgraphiques. Utilisation de services externes. Google Maps • Exemples de services REST : Yahoo ! et Amazon.Outils de développement. Tests unitaires avec JsUnit • Outils de débogage, de documentation et d’optimisation.

Thierry TemplierDiplômé de l’ESIGETEL, ThierryTemplier est architecte et expert J2EE au sein d’une société de services en informatique à Nantes. Il travaille actuellement sur des projets d’entreprisemettant enœuvre desframeworks Java/J2EE tels que Spring et Hibernate ainsi que des frameworks JavaScript et Ajax tels que Prototype,Dojo et DWR.

Arnaud Gougeon

Diplômé de l’ESIEA, ArnaudGougeon est architecte en systèmes d’information et spécialiste J2EE pour une société nantaise dans le domaine de la banque et de l’assurance. Depuis2001, il a notamment réalisédes applications Web de gestion basées sur les technologies JavaScript et Ajax.

T. T

empl

ier

A.

Gou

geon

Conc

eptio

n:

Nor

d Co

mpo

42 €

T h i e r r y T e m p l i e r

A r n a u d G o u g e o n

JavaScriptpour le Web 2.0

Programmation objet, DOM, Ajax,Prototype, Dojo, Script.aculo.us, Rialto…

JavaScriptpour le Web2.0

12009_JavaScript_XP 6/12/06 10:20 Page 1

Table des matières

Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . V

Objectifs de cet ouvrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . V

Organisation de l’ouvrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . VI

À propos de l’étude de cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . VII

À qui s’adresse l’ouvrage ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . VII

Table des matières . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . IX

CHAPITRE 1

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Le langage JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

ECMAScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

JavaScript dans un navigateur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

JavaScript, fondation du Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Enrichissement des interfaces graphiques . . . . . . . . . . . . . . . . . . . . . . . . . 7

Échanges de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Structuration des applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

LivreGougeon Page IX Mardi, 28. novembre 2006 4:23 16

JavaScript pour le Web 2.0X

PARTIE I

Principes de base de JavaScript

CHAPITRE 2

Fondements de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Exécution de scripts JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Interpréteurs JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Utilisation de JavaScript dans un navigateur . . . . . . . . . . . . . . . . . . . . . . . 15

Principes de base de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Variables et typage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Opérateurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Structures de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Méthodes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Types de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Manipulation des chaînes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Manipulation des nombres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Manipulation des dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Expressions régulières . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Structuration des applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Closures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Gestion des exceptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

CHAPITRE 3

JavaScript et la programmation orientée objet . . . . . . . . . . . . . . . 49

Rappel des principes de la programmation objet . . . . . . . . . . . . . . . . . 49

Classes et objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50L’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Agrégation et composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Le polymorphisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

LivreGougeon Page X Mardi, 28. novembre 2006 4:23 16

Table des matièresXI

Classes JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Classes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Classes pré-instanciées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Classes de l’environnement d’exécution . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Mise en œuvre de classes personnalisées . . . . . . . . . . . . . . . . . . . . . . . . 64

Mise en œuvre de classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64L’héritage de classes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72Pour aller plus loin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

CHAPITRE 4

Programmation DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Spécifications du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Support par les navigateurs Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Structure du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

La classe Node . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87Types des nœuds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Manipulation des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Accès direct aux éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89Accès aux éléments à partir d’un nœud . . . . . . . . . . . . . . . . . . . . . . . . . . . 90Manipulation des nœuds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Utilisation des fragments d’arbre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Manipulation des attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Parcours de l’arbre DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

L’attribut innerHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Utilisation du DOM niveau 0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Modification de l’arbre DOM au chargement . . . . . . . . . . . . . . . . . . . . 100

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

CHAPITRE 5

Mise en œuvre d’Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Ajax et la classe XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

La classe XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106Gestion des échanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

LivreGougeon Page XI Mardi, 28. novembre 2006 4:23 16

JavaScript pour le Web 2.0XII

Échanges de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Données échangées. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Structure des données échangées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Contournement des restrictions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Proxy au niveau du serveur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

iframe cachée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Utilisation dynamique de la balise script . . . . . . . . . . . . . . . . . . . . . . . . . . 120

En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

PARTIE II

Fondations des bibliothèques JavaScript

CHAPITRE 6

La bibliothèque prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Support des éléments de base de JavaScript . . . . . . . . . . . . . . . . . . . . . 126

Support des classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Essai de fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Support des fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Déclencheur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Support des classes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Nombres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Gestion des collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Support du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

Support d’Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Exécution de requêtes Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Mise à jour d’éléments HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Raccourcis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

LivreGougeon Page XII Mardi, 28. novembre 2006 4:23 16

Table des matièresXIII

CHAPITRE 7

Fondations de la bibliothèque dojo . . . . . . . . . . . . . . . . . . . . . . . . . 147

Mécanismes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

Installation et configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

Gestion des modules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Support de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

Vérification de types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

Support de la programmation orientée objet . . . . . . . . . . . . . . . . . . . . . . . 157

Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Programmation orientée objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Mise en œuvre des classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Initialisation des classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Support de l’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Chaînes de caractères et dérivés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

Dates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

Expressions régulières . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Support des collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

Collections de base. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

Structures de données avancées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

Itérateurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

Support du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

Support des techniques Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Fonction dojo.io.bind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Classes de transport disponibles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Support de RPC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Soumission de formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

En résumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

Traces applicatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

Mesure des performances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

LivreGougeon Page XIII Mardi, 28. novembre 2006 4:23 16

JavaScript pour le Web 2.0XIV

PARTIE III

Programmation graphique Web avec JavaScript

CHAPITRE 8

Fondements des interfaces graphiques Web . . . . . . . . . . . . . . . . 197

HTML et xHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Définition de styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203Application des styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Interactions avec JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Détection du navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208Manipulation de l’arbre DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209Gestion des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210Manipulation des styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Concepts avancés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Gestion des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222Utilisation des technologies XML et XSLT . . . . . . . . . . . . . . . . . . . . . . . . 223

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

CHAPITRE 9

Mise en œuvre de composants graphiques . . . . . . . . . . . . . . . . . 231

Généralités sur les composants graphiques . . . . . . . . . . . . . . . . . . . . . . 231

Objectifs des composants graphiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233Relations entre composants graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Structuration des composants graphiques . . . . . . . . . . . . . . . . . . . . . . . 234

Conception orientée objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235Apparence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236Comportement générique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238Gestion des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

Utilisation d’Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Approches de construction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Construction fondée sur le HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242Construction fondée sur JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

LivreGougeon Page XIV Mardi, 28. novembre 2006 4:23 16

Table des matièresXV

Exemples d’implémentation de composants graphiques . . . . . . . . . . . 246

Zone de texte et complétion automatique. . . . . . . . . . . . . . . . . . . . . . . . . . 247

Liste de sélection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

PARTIE IV

Bibliothèques JavaScript graphiques

CHAPITRE 10

Les bibliothèques graphiques légères . . . . . . . . . . . . . . . . . . . . . . 255

La bibliothèque prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Manipulation d’éléments de l’arbre DOM . . . . . . . . . . . . . . . . . . . . . . . . . 255

Ajout de blocs HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

Gestion des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Support des formulaires HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

En résumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

La bibliothèque behaviour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

Installation et mise en œuvre de la bibliothèque behaviour . . . . . . . . . . . . 267

En résumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

La bibliothèque script.aculo.us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

Effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Glisser-déposer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

Autocomplétion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278

En résumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

CHAPITRE 11

Support graphique de la bibliothèque dojo . . . . . . . . . . . . . . . . . 283

Modules HTML de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Fonctions de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Gestion des styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

Gestion de l’affichage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

LivreGougeon Page XV Mardi, 28. novembre 2006 4:23 16

JavaScript pour le Web 2.0XVI

Gestion des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

Fonctions de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290Découplage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Gestion des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

Gestion du glisser-déposer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Implémentation des composants graphiques . . . . . . . . . . . . . . . . . . . . . 299

Structuration des composants graphiques. . . . . . . . . . . . . . . . . . . . . . . . . . 300Implémentation d’un composant personnalisé . . . . . . . . . . . . . . . . . . . . . . 306Mise en œuvre des composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310Manipulation de composants graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . 313En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

Composants prédéfinis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

Composants simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318Positionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320Fenêtres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322Menus et barres d’outils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326Composants complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

Étude de cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

Mise en œuvre de dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338Utilisation de composants graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

CHAPITRE 12

La bibliothèque rialto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347

Historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347

Projets annexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

Support de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

Support des techniques Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Composants graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

Structuration des composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357Composants de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359Gestion des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367Positionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

LivreGougeon Page XVI Mardi, 28. novembre 2006 4:23 16

Table des matièresXVII

Fenêtres flottantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376Composants complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378En résumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

Comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

Rialto Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392

PARTIE V

Utilisation de services externes

CHAPITRE 13

Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395

Description et fonctionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395

Mise en œuvre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397Utilisation de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398Enrichissement de l’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400Interaction avec l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405

Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

Extension EInsert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

Support de Google Maps dans dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Étude de cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414

Recherche géographique de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414Positionnement d’un site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

CHAPITRE 14

Services offerts par Yahoo! et Amazon . . . . . . . . . . . . . . . . . . . . . . 419

Yahoo! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419

Service de recherche Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420Service de recherche d’albums musicaux. . . . . . . . . . . . . . . . . . . . . . . . . . 424Utilisation des services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426En résumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430

LivreGougeon Page XVII Mardi, 28. novembre 2006 4:23 16

JavaScript pour le Web 2.0XVIII

Amazon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430

Service ECS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430Utilisation du service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

PARTIE VI

Outils annexes

CHAPITRE 15

Tests d’applications JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443

Les tests unitaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443

Mise en œuvre de JsUnit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443Les cas de test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445Assertion et échec . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449Les suites de tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450Chargement de données pour les tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452

Exécution des tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

Test Runner. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453Le lanceur JsUnit intégré à Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455Automatisation des tests avec JsUnit Server et Ant . . . . . . . . . . . . . . . . . . 457

Simulacres d’objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462

Implémentation de simulacres simples. . . . . . . . . . . . . . . . . . . . . . . . . . . . 462Implémentation de simulacres fondée sur JsUnit . . . . . . . . . . . . . . . . . . . . 463

Réalisation des tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464

Limites des tests unitaires avec JavaScript . . . . . . . . . . . . . . . . . . . . . . 468

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468

CHAPITRE 16

Outillage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

Outils de développement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

ATF (Ajax Toolkit Framework) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472

LivreGougeon Page XVIII Mardi, 28. novembre 2006 4:23 16

Table des matièresXIX

Outils de débogage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476

Console JavaScript de Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476FireBug pour Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477Débogage dans Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480Débogage avec dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482Détection des fuites mémoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483

Outils de documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483

jsDoc. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483

Outils d’optimisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486

Outils de compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486Chargement dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487

Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489

LivreGougeon Page XIX Mardi, 28. novembre 2006 4:23 16