Éric Sarrion JQuery 1. 7 & JQuery UI 2 e édition Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6
Avant-propos Dernier né des frameworks JavaScript, jquery a immédiatement séduit les développeurs web. Simple, efficace, complet, il permet de manipuler les pages HTML au moyen de JavaScript de façon révolutionnaire. Finie la syntaxe compliquée : la fonction jquery (), abrégée en $ (), remplace toutes les méthodes JavaScript que vous connaissez. Faire plus simple aurait été difficile... De plus, jquery évolue! Les versions se suivent de façon régulière, tout en gardant une compatibilité ascendante. Aujourd hui, avec la version 1.7, vous accédez à des concepts nouveaux, comme la gestion d objets Deferred permettant d effectuer des synchronisations de tâches, ou la gestion d objets Callbacks pour agir de façon différée sur un événement. Surfant sur la vague, jquery UI a ajouté des fonctionnalités à jquery, au moyen de plug-ins. La même facilité d utilisation que pour jquery est en œuvre, permettant très simplement d ajouter des fonctionnalités graphiques intéressantes comme le glisser-déposer (drag & drop) ou le multifenêtrage, ou encore l autocomplétion. Avec jquery et jquery UI, vous ajoutez à vos sites web une interaction très complète avec les besoins des utilisateurs. Très (trop) peu de livres étant malheureusement disponibles aujourd hui, en français comme en anglais, sur jquery et jquery UI, la nouvelle édition de ce livre, mis à jour pour jquery 1.7, essaye de combler cette lacune, en regroupant dans un même opus (un peu épais mais très digeste) ces deux sujets, très liés l un à l autre. Complet et didactique les fonctions sont présentées les unes après les autres accompagnées d exemples d utilisation, il permettra aux étudiants intéressés par ce sujet d avenir de comprendre et maîtriser le fonctionnement de jquery et jquery UI. Pour les mêmes raisons, il conviendra parfaitement aux développeurs qui souhaitent améliorer l interface utilisateur de leur site, mais aussi aux chefs de projets qui souhaitent connaître les possibilités offertes par ces deux bibliothèques.
VI jquery 1.7 & jquery UI À l attention des puristes du code... L auteur de ce livre n est pas un puriste du code! Il n a qu une ambition : expliquer de la manière la plus simple possible le fonctionnement de jquery et vous montrer comment l utiliser dans vos propres applications. Pour cela, les exemples sont écrits le plus simplement possible, en simplifiant certaines syntaxes, en particulier dans le code HTML. Par exemple, un puriste écrira ceci pour inclure un fichier JavaScript dans le code HTML : <script type="text/javascript" src="jquery.js"></script> L auteur, se concentrant sur la partie réellement utile du code, écrira plutôt : <script src=jquery.js></script> Vous remarquerez que l attribut type a disparu, et que les valeurs des attributs ne sont pas entourées des guillemets. Bien sûr, les deux syntaxes fonctionnent parfaitement dans tous les navigateurs. La seconde présente l avantage de montrer d un seul coup d œil que le fichier jquery.js est inclus dans le code HTML, sans avoir à lire une longue ligne. Un autre exemple est celui du formatage standard d une page HTML. On sait que les standards du W3C (le World Wide Web Consortium, la haute autorité qui essaye d édicter des règles pour le Web) préconisent d écrire une page HTML de la façon suivante : Format d une page HTML selon les standards du W3C <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>titre de la page</title> </head> <body> <div>contenu de la page</div> </body> </html> On retrouve ici la directive DOCTYPE, suivie de la balise <html>, puis les balises <head> et <body>, chacune d elles pouvant inclure d autres balises.
Avant-propos VII Une fois qu on sait comment une page HTML est formatée en standard, on s aperçoit, en réfléchissant un peu, que le lecteur sera finalement surtout intéressé, pour son apprentissage de jquery, par les réponses aux questions suivantes : quels fichiers CSS et JavaScript sont inclus dans la page ; quel est le code HTML inclus dans la balise <body> ; quelles sont les lignes de code JavaScript utilisées dans cette page. C est pour cela que les programmes qui suivent sont dépouillés de certaines balises, telles les balises <html>, <head> et <body>. Si elles ne sont pas présentes dans notre code, le navigateur web les insère lui-même dans l arborescence HTML qu il construit à partir du code HTML de la page. Cette pratique a un avantage : lorsqu une balise sera obligatoire, cela sera signalé. Le lecteur saura donc que, dans ce cas précis, la balise <body>, par exemple, est obligatoire (ce cas sera fréquent lors de l étude de jquery UI). En fait, au lieu de systématiquement insérer toutes les balises dans la page, nous insérons uniquement celles qui sont strictement nécessaires dans ce cas précis. Cela permet de bien voir le rôle de chacune d entre elles et de comprendre leur utilité. L essentiel est que les programmes de ce livre fonctionnent parfaitement sur tous les navigateurs, ce qui est le cas (sauf erreurs typographiques indépendantes de notre volonté). Structure du livre Ce livre est structuré en deux parties : la première est consacrée à l étude de la bibliothèque jquery, tandis que la seconde explore le plug-in jquery UI (en fait, un ensemble de plug-ins regroupés sous le terme générique de jquery UI). Dans la première partie, on trouvera : une introduction à jquery, permettant de comprendre la suite de l ouvrage (chapitre 1) ; les méthodes utilitaires définies par jquery (chapitre 2) ; l étude des sélecteurs, fondamentaux pour écrire du code jquery (chapitre 3) ; l étude des méthodes fournies par jquery, permettant d accéder au DOM et de le manipuler (chapitres 4 et 5), mais aussi de gérer les événements (chapitre 6), d effectuer des requêtes Ajax (chapitre 7) et de produire des effets visuels (chapitre 8) ; la façon de créer un plug-in pour ajouter des fonctionnalités à jquery (chapitre 9) ;
VIII jquery 1.7 & jquery UI la création d objets Deffered (chapitre 10) et Callbacks (chapitre 11) ; un exemple d application complet utilisant jquery, Ajax et PHP (chapitre 12). Dans la seconde partie, dédiée à jquery UI, on trouvera : une introduction à jquery UI, et son paramétrage en fonction des besoins (chapitre 13) ; l étude des fonctionnalités offertes par jquery UI, permettant de faciliter les interactions des utilisateurs dans la page HTML : onglets, menus en accordéon, boîtes de dialogue, boutons, boîtes de progression, sliders, calendriers, autocomplétion, glisser-déposer (drag & drop), sélection multiple, permutation d éléments, redimensionnement et effets visuels divers (chapitres 14 à 26). Remerciements Tous mes remerciements à Karine Joly et à l équipe Eyrolles, pour leur relecture attentive de ce livre, auquel ils ont eux aussi contribué. Retrouvez l auteur sur son site Internet : http://ericsarrion.fr