Livre de programmation web methodes et pratique

JavaScript pour le Web2.0

Programmation objet, DOM, Ajax, Prototype, Dojo, , Rialto…

Remerciements

Nous remercions Éric Sulpice, directeur éditorial d’Eyrolles, et Olivier Salvatori pour leurs multiples relectures et conseils.

Enfin, merci à toutes les personnes qui ont eu la gentillesse de nous soutenir et de nous relire, notamment Jean-Philippe Retaillé et Stéphane Labbé.

Merci également à Cyril Balit et François Lion, créateurs et développeurs de la bibliothèque Rialto, pour leur précieuse aide dans le chapitre relatif à cette bibliothèque.

Arnaud Gougeon :

Merci à ma femme, Anouk, et à ma famille pour m’avoir soutenu tout au long de l’écriture de cet ouvrage.

Thierry Templier :

Merci à ma femme, Séverine, pour son soutien et son aide précieuse tout au long de ce projet. Merci également à toutes les personnes qui m’ont soutenu tout au long de ce projet.

Avant-propos

JavaScript est un langage de script très populaire, utilisé notamment afin d’implémenter des traitements dans les pages Web. Tout au long de cet ouvrage, nous nous efforçons de détailler les différents concepts de ce langage ainsi que les mécanismes à mettre en œuvre afin de l’utiliser dans ce type de pages.

Le langage JavaScript permet de réaliser des traitements évolués dans les pages Web en offrant la possibilité d’utiliser les différents standards Web supportés par les navigateurs et d’interagir avec eux. Certaines spécificités de ces derniers restent néanmoins à prendre en compte afin de garantir leur portabilité.

Longtemps freinée par le support hétérogène de ces standards, l’utilisation du langage JavaScript a été facilitée par l’apparition de bibliothèques intégrant la prise en compte de ces spécificités quant à la résolution de problématiques particulières.

De solides connaissances sont nécessaires pour mettre en œuvre ce langage dans des applications de type Web 2.0, dont l’interface graphique est plus évoluée et interactive. Heureusement, des bibliothèques JavaScript ont été mises au point afin d’aider au développement de ce type d’application Web.

Loin d’être uniquement dédié aux applications de type Web 2.0, JavaScript ouvre d’intéressantes perspectives afin d’améliorer et d’optimiser les interfaces graphiques des applications Web classiques en se fondant sur les techniques Ajax.

Objectifs de cet ouvrage

Cet ouvrage se veut un guide pratique pour le développement de traitements fondés sur le langage JavaScript dans les pages Web.

Nous avons voulu le rendre accessible au plus grand nombre afin de permettre à tout développeur Web d’utiliser ce langage dans différents contextes et de devenir plus productif dans son utilisation de JavaScript. C’est la raison pour laquelle il détaille aussi bien les mécanismes de base du langage que son utilisation dans des pages Web. Avant tout didactique, il vise à rendre le lecteur directement opérationnel dans l’utilisation des différentes facettes du langage.

Tout au long de l’ouvrage, nous mettons en œuvre diverses bibliothèques JavaScript gratuites et populaires. Ces dernières adressent un ou plusieurs aspects des développements fondés sur ce langage et intègrent les spécificités des différents navigateurs pour la prise en compte des standards Web.

Cette volonté d’accessibilité ne signifie pas pour autant que l’ouvrage soit d’une lecture simple et peu technique. Au contraire, nous y abordons des sujets avancés, tels que les principes de la programmation orientée objet et d’Ajax, ainsi que des bonnes pratiques afin de structurer et optimiser les développements fondés sur JavaScript.

Convaincus que l’on apprend mieux par la pratique, nous proposons au lecteur une étude de cas pratique, sous la forme d’une application de gestion de sites archéologiques. Cette application s’appuie sur la bibliothèque dojo et sur l’outil Google Maps, dont l’ouvrage détaille la mise en œuvre conjointe.

Organisation de l’ouvrage

L’ouvrage commence par décrire les concepts et mécanismes de base de JavaScript. Il aborde ensuite les mécanismes relatifs à la programmation graphique avec ce langage, conjointement avec les langages HTML, xHTML et CSS.

Diverses bibliothèques facilitant l’utilisation des mécanismes abordés sont présentées et mises en œuvre.

Nous avons fait l’effort de dégager autant que de besoin les bonnes pratiques d’utilisation de ce langage.

L’ouvrage comporte les six grandes parties suivantes :

• •  La première partie introduit les mécanismes de base du langage JavaScript. La manière demettre en œuvre la programmation orientée objet ainsi que le support de la technologie DOM par ce langage y sont décrits et détaillés. Les techniques Ajax sont également abordées afin de permettre l’échange de données par les pages Web sans les recharger.
• •  La partie II concerne les bibliothèques JavaScript de base, dont l’objectif est de faci-liter l’utilisation des divers mécanismes du langage abordés dans la première partie. Sont ainsi introduites les fondations de prototype, une bibliothèque JavaScript légère et populaire, et de dojo, une bibliothèque très complète.
• •  Avec la partie III, l’ouvrage aborde les problématiques graphiques des traitementsJavaScript dans les pages Web. Après avoir rappelé le fonctionnement des langages HTML, xHTML et CSS, nous montrons comment JavaScript peut interagir avec ces langages et comment mettre en œuvre des composants graphiques. L’accent est mis tout au long de cette partie sur la structuration et la séparation des différents langages et traitements mis en œuvre.
• •  Afin de développer des applications graphiques avec le langage JavaScript, bien desaspects doivent être pris en compte et maîtrisés. De nombreuses bibliothèques JavaScript sont disponibles sur Internet afin de masquer ces problématiques et de mettre à disposition des mécanismes et des composants graphiques prêts à l’emploi et portables. La partie IV introduit certaines d’entre elles, notamment prototype, et behaviour. Par la suite, sont décrites les bibliothèques dojo et rialto, plus complètes et offrant des mécanismes de gestion des composants graphiques.
• •  Dans la philosophie du Web 2.0, où le Web correspond à une véritable plate-forme, lapartie V aborde les problématiques relatives à l’intégration et à l’interaction avec des services externes dans des pages Web en se fondant sur le langage JavaScript. Y sont notamment présentés Google Maps, l’outil cartographique de Google, et la manière d’utiliser des données de services des sites Yahoo! et Amazon, accessibles par le biais de l’architecture REST.
• •  La partie VI décrit divers outils connexes au langage JavaScript permettant d’améliorerla qualité des traitements JavaScript ainsi que la productivité de leur développement. Sont abordés les tests unitaires avec JsUnit et l’outillage disponible pour l’écriture et la mise en œuvre de ce type de traitement.

À propos de l’étude de cas

L’étude de cas, une application de gestion de sites archéologiques, est un exemple concret d’utilisation du langage JavaScript, de la bibliothèque dojo et de l’outil Google Maps.

Elle permet au lecteur de voir concrètement comment les différents mécanismes et techniques abordés tout au long de l’ouvrage peuvent être utilisés conjointement afin de développer une application Web riche et interactive.

Loin de n’être qu’un simple exemple, cette application correspond à un prototype servant de fondation à une application de gestion de données archéologiques pour une université

française.

L’étude de cas est accessible en démonstration sur la page du site de SourceForge dédiée à l’ouvrage, à l’adresse .

À qui s’adresse l’ouvrage ?

Cet ouvrage s’adresse à tout développeur Web souhaitant découvrir ou redécouvrir le langage JavaScript. L’accent a été mis sur les mécanismes de base du langage ainsi que sur les possibilités offertes au développement de traitements simples ou évolués dans des pages Web dans l’esprit du Web 2.0.

Il n’est nul besoin d’être expert dans les technologies présentées. Chaque chapitre présente clairement chacune d’elles puis montre comment le langage JavaScript la met en œuvre ou interagit avec. Les différents langages, tels que HTML, xHTML et CSS, ainsi que les techniques mis en œuvre dans les pages Web sont également détaillés.

Pour toute question concernant l’ouvrage, vous pouvez contacter ses auteurs sur la page Web dédiée du site d’Eyrolles, à l’adresse ou sur le site de l’ouvrage, à l’adresse .

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

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

PARTIEI

Principes de base de JavaScript

CHAPITRE 2

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

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

                         Interpréteurs JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           13

                         Utilisation de JavaScript dans un navigateur . . . . . . . . . . . . . . . . . . . . . . .           15

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

                         Variables et typage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           16

                         Opérateurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           20

                         Structures de contrôle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           24

                         Méthodes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           27

                         Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           28

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

                         Manipulation des chaînes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           33

                         Manipulation des nombres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           35

                         Manipulation des dates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           36

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

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

                         Fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           41

                         Closures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           45

                         Gestion 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           50

                         L’héritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           52

                         Agrégation et composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           55

                         Le polymorphisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           56

                         En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .           56

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

                              Classes de base. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .            59

                              Classes pré-instanciées. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .            62

                              Classes de l’environnement d’exécution . . . . . . . . . . . . . . . . . . . . . . . . . .            64

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

                              Mise en œuvre de classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .            64

                              L’héritage de classes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .            72

                              Pour 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .            87

                              Types des nœuds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .            88

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

                              Accès direct aux éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .            89

                              Accès aux éléments à partir d’un nœud . . . . . . . . . . . . . . . . . . . . . . . . . . .            90

                              Manipulation des nœuds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .            91

                              Utilisation des fragments d’arbre. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .            93

                              Manipulation 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          106

                              Gestion des échanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          108

Fondations de la bibliothèque dojo 147

PARTIEIII

Programmation graphique Web avec JavaScript

CHAPITRE 8

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

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

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

                         Définition de styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          203

                         Application des styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          204

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

                         Détection du navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          208

                         Manipulation de l’arbre DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          209

                         Gestion des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          210

                         Manipulation des styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          220

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

                         Gestion des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          222

                         Utilisation 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. . . . . . . . . . . . . . . . . . . . . . . . . . . . .          233

                         Relations entre composants graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . .          233

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

                         Conception orientée objet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          235

                         Apparence. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          236

                         Comportement générique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          238

                         Gestion des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          240

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

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

                         Construction fondée sur le HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          242

                         Construction fondée sur JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          244

                         En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .         246

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

                         Fonctions de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          290

                         Découplage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          294

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

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

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

                         Structuration des composants graphiques. . . . . . . . . . . . . . . . . . . . . . . . . .          300

                         Implémentation d’un composant personnalisé . . . . . . . . . . . . . . . . . . . . . .          306

                         Mise en œuvre des composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          310

                         Manipulation de composants graphiques . . . . . . . . . . . . . . . . . . . . . . . . . .          313

                         En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .         317

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

                         Composants simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          318

                         Positionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          320

                         Fenêtres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          322

                         Menus et barres d’outils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          326

                         Composants complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          331

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

                         Mise en œuvre de dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          338

                         Utilisation 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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          357

                         Composants de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          359

                         Gestion des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          367

                         Positionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          370

Amazon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	430
Service ECS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	430
Utilisation du service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	436
En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	440
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . PARTIEVI Outils annexes CHAPITRE 15	440
Tests d’applications JavaScript  . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	443
Les tests unitaires  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	443
Mise en œuvre de JsUnit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	443
Les cas de test. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	445
Assertion et échec. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	449
Les suites de tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	450
Chargement de données pour les tests . . . . . . . . . . . . . . . . . . . . . . . . . . . .	452
Exécution des tests  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	453
Test Runner. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	453
Le lanceur JsUnit intégré à Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	455
Automatisation des tests avec JsUnit Server et Ant . . . . . . . . . . . . . . . . . .	457
Simulacres d’objets  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	462
Implémentation de simulacres simples. . . . . . . . . . . . . . . . . . . . . . . . . . . .	462
Implémentation de simulacres fondée sur JsUnit. . . . . . . . . . . . . . . . . . . .	463
Réalisation des tests  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	464
Limites des tests unitaires avec JavaScript  . . . . . . . . . . . . . . . . . . . . . .	468
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CHAPITRE 16	468
Outillage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	471
Outils de développement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	471
ATF (Ajax Toolkit Framework) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	472

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

                              Console JavaScript de Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          476

                              FireBug pour Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          477

                              Débogage dans Internet Explorer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          480

                              Débogage avec dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          482

                              Détection des fuites mémoire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          483

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

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

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

                              Outils de compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          486

                              Chargement dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .          487

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

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

1

Introduction

JavaScript, le langage de script par excellence des navigateurs Web, offre la possibilité d’implémenter des traitements élaborés dans des pages Web. Il peut être mis en œuvre dans toute application disposant d’un interpréteur pour ce langage.

Bien que le noyau de JavaScript soit standardisé par l’intermédiaire du langage ECMAScript, aucune standardisation n’est disponible quant à ses différents dialectes utilisés dans les navigateurs Web. Diverses spécificités sont donc à prendre en compte dans ces navigateurs pour utiliser JavaScript.

Longtemps freiné par les incompatibilités entre les différentes implémentations des navigateurs, ce langage est devenu le fondement des applications Web 2.0. Il permet désormais de définir des traitements évolués en leur sein afin de gérer notamment l’interaction avec les utilisateurs et les échanges de données avec des applications ou des services accessibles par le biais d’Internet.

Dans ce chapitre introductif, nous explorons les fondements du langage JavaScript ainsi que son historique.

Nous verrons ensuite en quoi ce langage constitue la brique fondamentale des applications Web 2.0 en nous penchant sur la façon dont il s’intègre dans les éléments constitutifs des pages HTML.

Le langage JavaScript

Il existe une certaine confusion autour des termes JavaScript, JScript et ECMAScript. De plus, contrairement à ce que leur nom pourrait laisser penser, JavaScript et Java n’ont que peu de similitudes, hormis celles issues de leur parent commun, le langage C, et qui se limitent à la syntaxe de base.

Historique

Le langage JavaScript a été créé par Brench Eich pour le compte de Netscape Communications Corporation. En novembre 1996, il a servi de fondation à la première version du standard ECMA-262 décrivant le langage ECMAScript. JavaScript correspond donc à un dialecte de ce standard et a évolué indépendamment par la suite.

ECMA (European Computer Manufacturers Association)

Fondé en 1961 et à vocation internationale depuis 1994, ECMA est un organisme de standardisation pour les systèmes d’information et de communication. Son objectif est de développer et promouvoir divers standards afin de faciliter l’utilisation des technologies de l’information et de la communication. ECMA a publié à ce jour plus de 370 standards et rapports techniques, dont les deux tiers ont été adoptés en tant que standards internationaux, et est responsable des standards relatifs aux langages C++, C#, Eiffel et ECMAScript.

Face au succès de JavaScript en tant que langage de script pour les pages Web, Microsoft a sorti, en août 1996, le langage JScript, similaire à JavaScript et correspondant également à un dialecte du langage ECMAScript.

Ainsi, chaque navigateur supporte ECMAScript par l’intermédiaire de son propre dialecte. Par abus de langage, tous ces dialectes sont désignés par le terme JavaScript.

Les tableaux 1.1 et 1.2 récapitulent les niveaux de conformité entre les versions de la spécification ECMAScript et celles de ses principaux dialectes, JavaScript et JScript.

Tableau 1.1   Niveaux de conformité entre ECMAScript et JavaScript

Tableau 1.2   Niveaux de conformité entre ECMAScript et JScript

Tableau 1.2   Niveaux de conformité entre ECMAScript et JScript (suite)

Version de JScript	Version de ECMAScript
4.0 (Visual Studio 6)	-
5.0 (Internet Explorer 5.0, mars 1999)	-
5.1 (Internet Explorer 5.01)	-
5.5 (Internet Explorer 5.5, juillet 2000)	Version 3 (décembre 1999)
5.6 (Internet Explorer 6.0, octobre 2001)	-
.Net ()	-

La section suivante détaille la spécification ECMAScript, dont l’objectif est la description du noyau du langage JavaScript.

ECMAScript

Fondé sur la spécification ECMA-262, ECMAScript consiste en un langage interprété, dont l’objectif est de permettre la manipulation d’objets fournis par l’application hôte.

Cette spécification décrit les divers éléments suivants :

• •  syntaxe et mots-clés ;
• •  conventions et notations ;
• •  types et conversions de types ;
• •  contextes d’exécution ;
• •  expressions et structures de contrôle ;
• •  fonctionnement des fonctions ;
• •  objets natifs.

Ce langage met aussi en œuvre le concept des prototypes. Ce dernier correspond à un style de programmation orientée objet, dans lequel la notion de classe est absente. La réutilisation des traitements se réalise par clonage d’objets existants servant de modèle et non sous forme d’instanciation de classes.

Les différentes versions de la spécification ECMA-262 sont récapitulées au tableau 1.4.

Tableau 1.4   Versions de la spécification ECMA-262

En juin 2004, est paru le standard ECMA-357, plus connu sous le nom de E4X (ECMAScript for XML). Il correspond à une extension du langage ECMAScript, auquel il ajoute un nouveau support de XML. Son objectif est de fournir une solution de rechange au DOM afin d’accéder plus simplement et de manière intuitive aux éléments d’un document XML.

Les différentes spécifications sont disponibles aux adresses suivantes :

• •  ECMAScript : .
• •  E4X : .

JavaScript

D’une manière générale, JavaScript désigne les dialectes du langage ECMAScript tels que récapitulés au chapitre 2.

Ces dialectes enrichissent l’ensemble des objets de base du langage ECMAScript avec d’autres objets provenant de l’environnement d’exécution du script. Cet environnement peut correspondre à un navigateur Web ou à un interpréteur JavaScript embarqué dans une application.

Ces objets peuvent être normalisés, comme c’est quasiment le cas de ceux relatifs à la technologie DOM (Document Object Model), ou être spécifiques du navigateur.

DOM (Document Object Model)

DOM correspond à une représentation en mémoire d’un arbre XML normalisée sous forme d’objets. Dans le cas de pages HTML, cette technologie offre la possibilité de manipuler leur structure en mémoire par programmation. Nous détaillons cette technologie au chapitre 4.

La figure 1.1 illustre les différents éléments JavaScript disponibles dans un navigateur Web.

Figure 1.1

Éléments JavaScript présents dans un navigateur Web

Les objets spécifiques d’un navigateur ne sont pas forcément présents dans tous les navigateurs. De plus, les objets standardisés fournis par les navigateurs peuvent posséder des variantes, les navigateurs pouvant supporter parallèlement diverses versions de la même spécification.

Le langage JavaScript peut être utilisé dans des pages Web mais également dans d’autres types d’applications. Ces dernières doivent intégrer un interpréteur relatif à ce langage afin de le mettre en œuvre.

JavaScript dans un navigateur Web

JavaScript propose différents mécanismes permettant de faire interagir les éléments écrits avec les langages HTML, xHTML et CSS d’une page Web avec les scripts JavaScript. 

HTML et xHTML

Le HTML (HyperText Markup Language) est un langage de balisage utilisé afin de mettre en œuvre des pages Web contenant notamment des liens et des éléments graphiques. Ces pages sont conçues pour être affichées dans des navigateurs Web.

Positionné en tant que successeur du HTML, le xHTML (eXtensible HyperText Markup Language) est un langage distinct, qui reformule le HTML. De ce fait, les pages Web utilisant le xHTML doivent être bien formées au sens XML. Toutes les balises doivent être correctement fermées et les attributs délimités par le caractère « ou '.

CSS

CCS (Cascading Style Sheets) adresse les problématiques d’affichage des pages HTML. Son objectif est de permettre une séparation claire entre la structure d’une page, par le biais des langages HTML ou xHTML, et sa présentation, décrite avec CSS.

La page est d’abord chargée par le navigateur à partir d’un site Web. Cette page correspond à un fichier contenant des éléments HTML ou xHTML. Elle peut également contenir ou faire référence à divers blocs hétérogènes. Par exemple, des scripts JavaScript ainsi que des styles CSS peuvent s’y trouver.

Tous ces éléments permettent au navigateur d’initialiser la page Web, aussi bien au niveau de sa structure que de son interface graphique et de ses traitements.

Les éléments HTML ou xHTML sont utilisés par le navigateur afin d’initialiser la structure de la page en mémoire. Cette structure se fonde sur la technologie DOM (Document Object Model), une représentation objet hiérarchique de la page.

Le navigateur s’appuie sur les styles CSS pour donner une représentation graphique à la page. Notons que la structure HTML ou xHTML de la page peut également influer sur cette représentation.

Les scripts JavaScript permettent d’ajouter des traitements à la page. Ces derniers peuvent être exécutés à son chargement ou en réponse à divers événements.

La figure 1.2 illustre les différents constituants d’une page Web ainsi que leurs interactions.

Structure et représentation initiales de la page

Structure et représentation de la page en mémoire

Interactions avec la structure de la page en mémoire

Traitements de la page

Figure 1.2

Interactions entre les différents constituants d’une page Web

Une fois la page chargée en mémoire, il est possible de la manipuler avec JavaScript en se fondant sur la technologie DOM. Cette dernière permet d’influer sur la structure de la page en ajoutant, modifiant ou supprimant des éléments, mais également sur sa représentation graphique puisque les styles CSS peuvent être vus ou rattachés en tant que propriétés d’éléments HTML.

Nous constatons que le DOM est central dans une page Web et que c’est à partir de lui que la manipulation de la page Web est envisageable.

La figure 1.2 montre que JavaScript peut modifier la structure du DOM mais également être notifié suite à différents événements. Les événements spécifiés au niveau du DOM peuvent correspondre à des événements utilisateur, tels qu’un clic sur un élément HTML, ou à des modifications de la structure DOM en mémoire.

Des observateurs peuvent être enregistrés au niveau de cette structure afin d’être appelés lorsque l’événement se produit. Dans le cas de JavaScript, ces observateurs correspondent à de simples fonctions ou à des méthodes d’objets qui ont accès à l’événement déclencheur.

Maintenant que nous avons décrit le fonctionnement et l’interaction des langages HTML, xHTML et CSS avec JavaScript, nous allons montrer en quoi JavaScript permet de mettre en œuvre des applications Web 2.0.

JavaScript, fondation du Web 2.0

Comme indiqué précédemment, JavaScript constitue la clé de voûte du Web 2.0. Nous détaillons dans cette section les problématiques techniques liées à ce nouveau paradigme d’Internet.

Enrichissement des interfaces graphiques

En se fondant sur les technologies HTML, xHTML et CSS, JavaScript offre la possibilité de réaliser des interfaces graphiques de pages Web plus élaborées et plus interactives.

Le support amélioré de la technologie CSS par les navigateurs a également grandement favorisé cet enrichissement.

Interactivité

JavaScript offre la possibilité d’ajouter de l’interactivité à une page Web.

Les événements peuvent être traités localement par la page par l’intermédiaire de fonctions ou méthodes d’objets JavaScript, comme nous l’avons vu à la section précédente.

En effet, le langage offre la possibilité de déclencher des traitements suite à des événements utilisateur par le biais de la technologie DOM. Les entités JavaScript enregistrées pour l’événement sont alors déclenchées afin de réaliser des traitements.

Ces derniers peuvent aussi bien modifier la structure en mémoire de la page, réaliser des effets graphiques ou interagir avec des applications ou des services accessibles par le biais

d’Internet.

Prise en compte des navigateurs

La plupart des navigateurs du marché possèdent différentes spécificités quant à l’utilisation du DOM, de CSS et de JavaScript. La difficulté consiste donc à assurer le même rendu dans différents navigateurs.

La résolution de ce problème passe par l’utilisation de bibliothèques JavaScript fournissant une abstraction par rapport à ces spécificités par l’intermédiaire de collections de fonctions et de composants graphiques. Ainsi, le code de détection et de prise en compte des navigateurs est désormais externalisé des pages Web et géré au niveau de ces bibliothèques. Les pages Web n’ont plus qu’à utiliser ces composants implémentés en utilisant les divers mécanismes du langage JavaScript.

Les spécificités des navigateurs ne sont pas uniquement relatives aux aspects graphiques des pages Web et peuvent consister en des supports différents des versions des technologies. C’est le cas notamment de la technologie DOM avec les navigateurs Internet Explorer et Firefox. Les bibliothèques JavaScript intègrent également ces aspects.

Nous traitons en détail tous ces aspects à la partie III de l’ouvrage relative à la programmation Web graphique avec JavaScript.

Échanges de données

JavaScript permet de réaliser des requêtes HTTP en recourant aux mécanismes fournis par le langage JavaScript. La plupart des navigateurs récents supportent désormais cette

fonctionnalité.

HTTP (HyperText Transfer Protocol)

HTTP correspond au protocole de transport applicatif de base d’Internet. Il s’agit d’un protocole ASCII transportant des informations sous forme de texte et qui peut fonctionner sur n’importe quel protocole réseau fiable, le plus souvent TCP.

Les pages Web ont désormais la possibilité d’échanger des données avec des applications distantes par l’intermédiaire du protocole HTTP sans avoir à recharger complètement leurs interfaces graphiques.

Jusqu’à présent, l’envoi d’un formulaire vers une ressource ou l’appel d’une ressource par le biais d’une adresse permettait d’échanger des données. L’interface graphique réalisant la requête était cependant perdue et remplacée par l’interface graphique de la ressource appelée.

Ces traitements sont toujours possibles mais peuvent être réalisés dans la page, sans avoir à recharger ni à toucher à son interface graphique. Il devient de surcroît possible d’échanger des données plutôt que du contenu correspondant à des pages Web.