Upload
phamdien
View
227
Download
0
Embed Size (px)
Citation preview
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