Débuter avec jQuery

La bibliothèque qui simplifie l'interaction

1. Préface▲

S'il est un langage de programmation particulièrement atypique, c'est bien JavaScript. Il est relativement simple à appréhender, ce qui signifie, entre autres, qu'il est très souvent utilisé (et jugé) par des personnes qui ne le connaissent pas. Pourtant, lorsque l'on va dans ses recoins, on arrive toujours à être impressionné par ses capacités. Toujours est-il qu'on lui reproche beaucoup de choses : son typage faible, sa prétention de langage orienté objet, mais sans classes, j'en passe. Pour autant, c'est malgré tout un langage qui est devenu incontournable dans le développement web (pour preuve, il suffit d'essayer de naviguer sur les sites les plus populaires, notamment les réseaux sociaux, en désactivant JavaScript dans son navigateur) et développer aujourd'hui un site sans JavaScript est désormais un non sens. Quand on connaît un peu JavaScript, on sort des idées reçues sur les lacunes du langage, mais on prend en considération ses vraies faiblesses (justifiées par son historique), notamment le manque de compatibilité entre navigateurs. Dans un premier temps, on peut opter pour se créer des librairies utilitaires personnelles pour y parer. Puis, on se rend compte que d'autres ont déjà effectué ce travail ; en mieux et en plus complet. On comprend alors que « comme tout le monde », notre intérêt est d'utiliser le travail commun mis à disposition par un ensemble de développeurs compétents et on utilise un framework. De tous ceux disponibles actuellement, celui qui sort manifestement du lot est jQuery.

Cependant, chaque framework est créé dans un certain « esprit » ; il possède sa philosophie de création et d'utilisation. Il est donc nécessaire, au-delà d'apprendre la syntaxe qui lui est propre, de prendre en considération la manière dont il est pensé.

C'est pour vous accompagner dans la découverte de ces deux aspects importants de jQuery que ce livre a été réfléchi. S'il s'était agi uniquement de syntaxe, un simple tableau recensant les méthodes disponibles aurait suffit (et des tableaux de ce type existent dans ce livre), mais l'objectif de cet ouvrage est aussi de vous montrer comment ces méthodes s'intègrent dans un principe global de fonctionnement autour duquel s'articule l'ensemble de jQuery.

Remerciements supplémentaires pour cette version▲

Ce livre n'aurait jamis vu le jour sans la sollicitation et l'aide de Dominique Buraud, fondatrice des éditions Digit Books. Je l'en remercie chaleureusement et lui souhaite bonne chance et réussite dans ses nouveaux défis.

Je remercie aussi mes camarades de Developpez.com ayant activement participé à la mise en ligne de ce livre, en particulier ram-0000 et Winjerome. Leur travail colossal mérite d'être salué !

D'autres personnes méritent d'être remecriées, elles le sont un peu plus loin dans ce chapitre.

1-1. Pourquoi ce livre▲

Parmi toutes les bibliothèques disponibles, jQuery est de loin la plus répandue. Simple à mettre en place et à utiliser, mais surtout basée sur une « philosophie » bien adaptée aux besoins des développeurs, nombre d'entre eux l'ont rapidement adoptée pour simplifier leurs développements JavaScript. Une forte communauté s'est rapidement mise en place autour de ce projet donnant ainsi naissance à de très nombreuses extensions (plugins) qui font qu'actuellement la quasi totalité des fonctionnalités que l'on retrouve habituellement sur un site (galerie d'images, validation de formulaire avant envoi, effets de survols, etc.) sont accessibles à tous avec des scripts jQuery. Pour autant, cela ne veut pas dire que tout le monde connaît l'étendue des possibilités offertes et encore trop d'utilisateurs compliquent leurs codes par manque de connaissances.

C'est pour parer à cela que je me suis lancé dans la rédaction de ce livre.

1-2. Prérequis et public▲

Cet ouvrage s'adresse aux personnes ayant déjà de bonnes bases de (X) HTML et de CSS. JavaScript, et à plus forte raison jQuery, se base sur la structure (X)HTML d'un document pour y apporter des modifications. Ces modifications portent souvent sur le style d'affichage de certains éléments. Il est donc important d'être capable de créer des pages au contenu et aux styles conformes aux standards avant de se lancer dans le dynamisme de la page. Idéalement, la connaissance des bases de JavaScript permettra de mieux comprendre les mécanismes mis en œuvre par jQuery et de rendre son utilisation plus efficace.

1-3. Organisation de l'ouvrage▲

Le premier chapitre propose une présentation générale de jQuery. Après avoir rappelé l'importance actuelle de JavaScript dans le développement web et indiquer pourquoi utiliser une librairie telle que jQuery, nous verrons comment celle-ci fonctionne et comment l'intégrer dans une page.
Le second chapitre, après avoir rappelé ce qu'est le Document Object Model (DOM), montre comment jQuery interagit avec celui-ci et en particulier comment l'utiliser pour récupérer facilement des éléments du DOM et manipuler une collection d'éléments.
Le troisième chapitre traite de la gestion des événements avec jQuery. Les événements sont un aspect essentiel de la programmation JavaScript, mais certaines incompatibilités entre navigateurs rendent leur utilisation parfois complexe. jQuery offre une interface riche, uniformisée et simple d'utilisation.
Dans le quatrième chapitre, nous allons voir comment modifier le DOM à l'aide de jQuery. La modification du DOM permet de changer le contenu affiché dans la page, il faut donc être capable de générer du contenu (que ce soit du texte ou des portions de HTML) afin de l'utiliser pour remplacer une partie de la page ou de l'ajouter. Il faut aussi être capable de modifier des propriétés (en particulier des noms de classes ou des styles CSS) d'éléments existants.
Le cinquième chapitre utilise les notions déjà évoquées pour mettre en place un exemple concret : une navigation par onglets qui permet de voir comment organiser le code initial (HTML et CSS) en prenant en considération les modifications que l'on fera ensuite à l'aide de jQuery.
Le chapitre six aborde la question des effets. Ceux-ci sont très appréciés pas les utilisateurs et apportent une ergonomie agréable sur un site. Mais JavaScript ne dispose pas à proprement parler de fonctions ou méthodes spécifiques pour les effets, jQuery propose donc nativement d'une collection d'effets préprogrammés parmi les plus usuels.
Le septième chapitre présente la gestion d'AJAX avec jQuery. AJAX est devenu un élément important de la programmation JavaScript et jQuery met à disposition un ensemble très complet de méthodes et de propriétés facilitant son utilisation, que ce soit pour les cas les plus simples ou les plus spécifiques.
Enfin, le huitième chapitre consiste en un exemple récapitulatif dans lequel nous allons modifier la navigation par onglets du chapitre cinq en le transformant en formulaire d'identification et d'inscription. Avec l'aide d'AJAX, nous récupèrerons ou nous enregistrerons, côté serveur, les informations liées à un utilisateur.
Le dernier chapitre présente, dans les grandes lignes, ce qu'apporte la version 1.7 de jQuery.

1-4. Les exemples▲

Les exemples présents dans ce livre peuvent être, pour le plus grand nombre, retrouvés dans les fichiers sources joints. Ils peuvent être lancés directement depuis l'ordinateur et ne demandent aucune installation complémentaire (à l'exception des exemples concernant AJAX).

Ils nécessitent toutefois une connexion à Internet pour pouvoir charger jQuery depuis le site officiel.

Vous pouvez les télécharger depuis : http://www.digitbooks.fr/catalogue/jquery-didier-mouronval.html.

Ils ont, pour la plupart, été conçus pour montrer le fonctionnement d'un aspect spécifique de jQuery de façon la plus explicite possible. À l'exception des exemples récapitulatifs, la considération esthétique n'a pas été prise en compte.

1-5. Les conventions utilisées▲

Voici les conventions typographiques de cet ouvrage :

Italique	Met en exergue les termes nouveaux ou la signification des acronymes.
Noms de chemins/fichiers	Cette couleur distingue les noms de fichiers ou les chemins.
Menus	Désigne les libellés des menus des interfaces graphiques.
Police à chasse fixe	Sélectionnez `Met en valeur les éléments de code dans le texte.`
Les encadrés	Certains sont des apartés et donnent une information supplémentaire. D'autres sont des astuces, des conseils. Ils sont repérables par un fond vert. Enfin, des notes éveillent votre attention sur des points précis.

1-6. À propos de l'auteur▲

Passionné depuis toujours par l'informatique et la programmation, ce n'est que tardivement que Didier Mouronval décide d'en faire son métier. Il se spécialise dans les technologies de l'Internet et du multimédia et devient développeur et intégrateur web.

Rapidement séduit par le langage JavaScript, il s'investit au sein de la communauté de développeurs francophones de www.developpez.com afin de contribuer à améliorer l'image de ce langage. Il deviendra par la suite responsable des rubriques JavaScript et AJAX, puis des rubriques Développement web de ce site.

Il a enfin participé à la réalisation de différents ouvrages sur JavaScript et jQuery et a été formateur JavaScript et PHP pour le compte de video2brain.

1-7. Remerciements▲

Tout d'abord, je tiens à remercier mon entourage et mes proches pour leurs encouragements et leur patience au cours de l'écriture de ce livre.

Mais mes principaux remerciements vont vers Dominique, qui m'a fait confiance (et il lui en a fallu aussi de la patience !) et m'a permis de réaliser ce projet que j'ai eu beaucoup de plaisir à concrétiser ; qu'elle sache que je serai toujours disponible pour revivre cette belle aventure.

Enfin, j'ai une pensée particulière pour tous mes camarades de la communauté developpez.com et en particulier (les « oubliés » ne m'en tiendront, je l'espère, pas rigueur : une liste exhaustive serait beaucoup trop longue) Daniel, Steven, Xavier, Pierre, Caroline et Eric.