Un Site Web Dynamique Avec Jquery

Un site web
dynamique avec
jQuery !
Par Nassoub
et Sainior
www.openclassrooms.com
Licence Creative Commons 7 2.0
Dernire mise jour le 9/07/2012
Sommaire
2 Sommaire ...........................................................................................................................................
4 Lire aussi ............................................................................................................................................
6 Un site web dynamique avec jQuery ! ................................................................................................
7 Partie 1 : Introduction jQuery ...........................................................................................................
8 jQuery : l'histoire d'un framework ! ....................................................................................................................................
8 Mais... c'est quoi jQuery ? ...........................................................................................................................................................................................
8 jQuery, un framework JavaScript ................................................................................................................................................................................
8 JavaScript ou... jQuery ? .............................................................................................................................................................................................
9 jQuery, un framework ou une librairie ? .......................................................................................................................................................................
10 A quoi va nous servir jQuery ? ..................................................................................................................................................................................
10 Les points forts de jQuery .........................................................................................................................................................................................
11 L'histoire du framework ..............................................................................................................................................................................................
11 Des sites qui utilisent jQuery .....................................................................................................................................................................................
11 De quels outils a-t-on besoin ? ........................................................................................................................................
12 Le choix du navigateur web .......................................................................................................................................................................................
13 Un incontournable : Firebug pour Firefox ! ................................................................................................................................................................
13 Ajoutez Firebug votre navigateur Firefox ! .............................................................................................................................................................
13 Utiliser la bote outils Firebug ! ...............................................................................................................................................................................
14 Un diteur de texte efficace .......................................................................................................................................................................................
15 Un diteur de texte performant et efficace ................................................................................................................................................................
18 Rappels gnraux sur JavaScript ...................................................................................................................................
18 O et quand utiliser JavaScript ? ..............................................................................................................................................................................
18 O placer son code JavaScript ? ..............................................................................................................................................................................
18 Quand et comment l'utiliser ? ....................................................................................................................................................................................
18 Variables et fonctions ................................................................................................................................................................................................
19 De la dclaration des variables .................................................................................................................................................................................
19 Fonctions et arguments .............................................................................................................................................................................................
20 Partie 2 : Les bases du framework ....................................................................................................
20 Vos premiers pas avec jQuery ! ......................................................................................................................................
20 Inclure jQuery dans vos pages ..................................................................................................................................................................................
20 Deux mthodes pour inclure jQuery dans vos pages web ........................................................................................................................................
22 La fonction de base : jQuery() ...................................................................................................................................................................................
22 Une fonction gnrique : jQuery() ou $() ...................................................................................................................................................................
24 viter le conflit ...........................................................................................................................................................................................................
25 Le principe de fonctionnement ..................................................................................................................................................................................
27 Les slecteurs .................................................................................................................................................................
27 Les slecteurs de CSS ..............................................................................................................................................................................................
27 Les slecteurs les plus utiliss ..................................................................................................................................................................................
27 Frres et parents .......................................................................................................................................................................................................
28 Une slection plus pousse ......................................................................................................................................................................................
28 La place d'un lment ...............................................................................................................................................................................................
29 Slection par attributs ...............................................................................................................................................................................................
29 Le slecteur :not() .....................................................................................................................................................................................................
30 Le cas des formulaires ..............................................................................................................................................................................................
30 Le type des lments ................................................................................................................................................................................................
30 Le slecteur $(this) ....................................................................................................................................................................................................
31 Performance des slecteurs .....................................................................................................................................................................................
31 Les slecteurs les plus rapides .................................................................................................................................................................................
31 courter les chanes ..................................................................................................................................................................................................
32 jQuery et les vnements ...............................................................................................................................................
33 Un vnement, des vnements... ...........................................................................................................................................................................
33 C'est quoi un vnement ? ........................................................................................................................................................................................
34 Quelques vnements incontournables ....................................................................................................................................................................
34 Dclenchement d'vnements ..................................................................................................................................................................................
35 Le dclenchement virtuel ..........................................................................................................................................................................................
35 Annuler le comportement d'un lment par dfaut ...................................................................................................................................................
35 Les gestionnaires d'vnements ...............................................................................................................................................................................
35 Rappels .....................................................................................................................................................................................................................
36 L'coute en jQuery ....................................................................................................................................................................................................
37 La dlgation d'vnements .....................................................................................................................................................................................
37 Les espaces de noms ...............................................................................................................................................................................................
38 La suppression en jQuery .........................................................................................................................................................................................
39 Manipuler le code CSS avec jQuery ...............................................................................................................................
40 Une mthode puissante : css() .................................................................................................................................................................................
40 Rcuprer la valeur d'une proprit ..........................................................................................................................................................................
40 Dfinition de proprits CSS .....................................................................................................................................................................................
40 Positionner des lments ..........................................................................................................................................................................................
41 Modifier la position d'un lment ...............................................................................................................................................................................
41 Grer les dimensions ................................................................................................................................................................................................
43 TP : le formulaire interactif ..............................................................................................................................................
43 Explications et pr-requis ..........................................................................................................................................................................................
43 Objectif concret .........................................................................................................................................................................................................
43 Mthodes requises ....................................................................................................................................................................................................
44 Correction ..................................................................................................................................................................................................................
2/150
44 Explications du code jQuery ......................................................................................................................................................................................
48 Amliorations ............................................................................................................................................................................................................
48 Partie 3 : Manipulation du DOM et animations ..................................................................................
49 Des effets sur votre site avec jQuery ! ............................................................................................................................
49 Animez vos lments ................................................................................................................................................................................................
49 Des animations personnalises ................................................................................................................................................................................
50 Deux arguments supplmentaires : step et queue ....................................................................................................................................................
51 Dfinition directe d'attributs .......................................................................................................................................................................................
52 Astuces et cas spciaux ............................................................................................................................................................................................
53 Les effets natifs .........................................................................................................................................................................................................
53 Le retour des trois tats .............................................................................................................................................................................................
54 Des mthodes plus esthtiques ................................................................................................................................................................................
54 Reprenez le contrle des effets .................................................................................................................................................................................
54 Le concept de file d'attente .......................................................................................................................................................................................
56 Arrter les animations ...............................................................................................................................................................................................
57 Manier les attributs ..........................................................................................................................................................
58 Gestion gnrale des attributs ..................................................................................................................................................................................
58 Bref rappel sur les attributs .......................................................................................................................................................................................
58 Rcuprer des valeurs ..............................................................................................................................................................................................
58 (Re)dfinir un attribut .................................................................................................................................................................................................
59 Grer les classes proprement ...................................................................................................................................................................................
59 Ajouter une classe .....................................................................................................................................................................................................
60 Supprimer une classe ...............................................................................................................................................................................................
60 Prsence d'une classe ..............................................................................................................................................................................................
60 Switcher une classe ..................................................................................................................................................................................................
61 Parcourir les lments du DOM ......................................................................................................................................
61 Naviguer dans le DOM ..............................................................................................................................................................................................
61 Rappel sur le Document Object Model ......................................................................................................................................................................
61 Positionnement des lments ...................................................................................................................................................................................
61 La descendance ........................................................................................................................................................................................................
63 Filtrer et boucler les lments ...................................................................................................................................................................................
63 Filtrer les lments ....................................................................................................................................................................................................
64 Boucler les lments .................................................................................................................................................................................................
65 Manipuler le code HTML avec jQuery .............................................................................................................................
66 Insertion de contenu ..................................................................................................................................................................................................
66 Le contenu textuel .....................................................................................................................................................................................................
66 Le contenu HTML ......................................................................................................................................................................................................
69 Le contenu des lments de formulaire ....................................................................................................................................................................
69 Manipulation des lments HTML .............................................................................................................................................................................
69 Cloner des lments .................................................................................................................................................................................................
70 Vider et/ou supprimer un lment .............................................................................................................................................................................
70 Remplacer les lments ............................................................................................................................................................................................
71 Envelopper/dballer des lments ............................................................................................................................................................................
72 Crer des lments la vole ..................................................................................................................................................................................
72 Crer des lments, une histoire de balises .............................................................................................................................................................
72 Passer des attributs proprement ...............................................................................................................................................................................
73 TP : le carrousel ..............................................................................................................................................................
74 Explications et pr-requis ..........................................................................................................................................................................................
74 Objectif concret .........................................................................................................................................................................................................
74 Mthodes requises ....................................................................................................................................................................................................
75 Correction ..................................................................................................................................................................................................................
76 Explications du code jQuery ......................................................................................................................................................................................
79 Amliorations ............................................................................................................................................................................................................
80 Partie 4 : L'AJAX avec jQuery ...........................................................................................................
80 AJAX : les requtes HTTP par l'objet XmlHttpRequest ..................................................................................................
80 AJAX : notre problmatique ......................................................................................................................................................................................
80 AJAX... c'est simple ! .................................................................................................................................................................................................
81 Et le rle de jQuery dans tout a ...............................................................................................................................................................................
81 Rappel sur les requtes HTTP ..................................................................................................................................................................................
81 Le fonctionnement du web ........................................................................................................................................................................................
82 Plusieurs types de requtes ......................................................................................................................................................................................
83 Un langage ct serveur. ..........................................................................................................................................................................................
83 AJAX par JavaScript .................................................................................................................................................................................................
83 Envoyer une requte HTTP : XmlHttpRequest la rescousse ! ...............................................................................................................................
83 Instancier XHR : un calvaire ......................................................................................................................................................................................
84 XmlHttpRequest avec jQuery ....................................................................................................................................................................................
84 Instancier XmlHttpRequest avec jQuery ...................................................................................................................................................................
85 Le fonctionnement de $.ajax() .........................................................................................................................................
86 $.ajax() et ses paramtres .........................................................................................................................................................................................
86 Les paramtres principaux de $.ajax() ......................................................................................................................................................................
88 Les paramtres success, error et complete ! ............................................................................................................................................................
88 Traiter les retours de la fonction ................................................................................................................................................................................
90 Les raccourcis $.get() et $.post() ...............................................................................................................................................................................
90 Allez plus vite avec $.get() et $.post() .......................................................................................................................................................................
92 Srialisez vos formulaires ! .......................................................................................................................................................................................
92 La srialisation ..........................................................................................................................................................................................................
93 Cas concret : un formulaire de connexion avec AJAX ....................................................................................................
94 Prparons le terrain ...................................................................................................................................................................................................
94 Le formulaire de connexion .......................................................................................................................................................................................
94 Ct client : du HTML et un appel AJAX ...................................................................................................................................................................
94 Un formulaire HTML et un appel AJAX. ....................................................................................................................................................................
Sommaire 3/150
95 Ct serveur : un script PHP de connexion ..............................................................................................................................................................
95 Agir ct serveur .......................................................................................................................................................................................................
97 De retour ct client ..................................................................................................................................................................................................
98 Les vnements AJAX ....................................................................................................................................................
99 Les requtes AJAX sur coute ..................................................................................................................................................................................
99 Des vnements, ni plus, ni moins ...........................................................................................................................................................................
100 Cas d'utilisation des vnements : un loader ..........................................................................................................................................................
100 Un cas concret : chargement de commentaires ......................................................................................................................................................
100 La mthode load() ! .......................................................................................................................................................
101 A quoi load() sert-elle ? ...........................................................................................................................................................................................
101 La mthode load() ...................................................................................................................................................................................................
101 Exemple d'utilisation de load() ................................................................................................................................................................................
101 Charger un contenu distant .....................................................................................................................................................................................
101 Aller plus loin avec load() ........................................................................................................................................................................................
102 Envoyer des paramtres avec load() ......................................................................................................................................................................
102 TP : le tchat en AJAX ....................................................................................................................................................
103 Explications et pr-requis ........................................................................................................................................................................................
103 Le systme de tchat ................................................................................................................................................................................................
103 Les technologies utiliser .......................................................................................................................................................................................
103 Commencez ! ..........................................................................................................................................................................................................
103 Correction ................................................................................................................................................................................................................
103 Les fichiers ncessaires ..........................................................................................................................................................................................
105 Rendons tout cela plus dynamique .........................................................................................................................................................................
106 Rcuprer les messages ........................................................................................................................................................................................
108 Amliorations ..........................................................................................................................................................................................................
108 Ides d'amlioration ................................................................................................................................................................................................
109 Partie 5 : Les projets autour de jQuery ...........................................................................................
110 La documentation de jQuery .........................................................................................................................................
110 Le site officiel : jQuery.com ......................................................................................................................................................................................
110 Explorer la documentation .......................................................................................................................................................................................
110 S'orienter correctement dans la doc ........................................................................................................................................................................
111 Lire la fiche d'une mthode ......................................................................................................................................................................................
111 La forme de la mthode ...........................................................................................................................................................................................
111 Description, retour, explications et exemples ..........................................................................................................................................................
112 Les interfaces utilisateur : jQuery UI .............................................................................................................................
113 Les interfaces utilisateurs ........................................................................................................................................................................................
113 Que sont les interfaces utilisateurs ? .......................................................................................................................................................................
113 Comment cela fonctionne-t-il ? ................................................................................................................................................................................
113 Tlchargement et mise en place ...........................................................................................................................................................................
115 Les interactions et les widgets .................................................................................................................................................................................
115 Les interactions .......................................................................................................................................................................................................
115 Les widgets ..............................................................................................................................................................................................................
117 Le framework mobile : jQuery Mobile ............................................................................................................................
117 Une version mobile ..................................................................................................................................................................................................
117 L'intrt d'une version mobile ..................................................................................................................................................................................
117 Plateformes supportes par le framework ...............................................................................................................................................................
117 Mettre en place jQuery Mobile .................................................................................................................................................................................
119 Les bases de l'interface ...........................................................................................................................................................................................
119 Initialiser des pages .................................................................................................................................................................................................
120 Mise en place d'un thme .......................................................................................................................................................................................
120 lments de mise en page ......................................................................................................................................................................................
121 Les vnements et les mthodes ...........................................................................................................................................................................
121 Les vnements jQuery Mobile ...............................................................................................................................................................................
121 Les mthodes jQuery Mobile ...................................................................................................................................................................................
123 Programmez vos jeux avec gameQuery .......................................................................................................................
123 Du fonctionnement de la 2D ....................................................................................................................................................................................
123 La 2D, une histoire d'animation ...............................................................................................................................................................................
123 La 2D avec gameQuery ..........................................................................................................................................................................................
124 Mise en place d'un playground ................................................................................................................................................................................
125 Un arrire-plan en parallaxe ....................................................................................................................................................................................
125 Instancier les sprites d'arrire-plan .........................................................................................................................................................................
126 Animons le tout ! .....................................................................................................................................................................................................
127 Cration de personnage par spritesheet .................................................................................................................................................................
128 Instance du mouvement anim ...............................................................................................................................................................................
129 Lancer l'animation ...................................................................................................................................................................................................
129 Utiliser le modle objet ............................................................................................................................................................................................
129 Rappel sur les objets JavaScript .............................................................................................................................................................................
130 Dfinir les classes ...................................................................................................................................................................................................
131 Gestion des contrles et des collisions ...................................................................................................................................................................
131 Gestion des contrles .............................................................................................................................................................................................
132 Gestion des collisions .............................................................................................................................................................................................
133 D'autres plugins utiles ...................................................................................................................................................
133 Grez vos cookies en jQuery ..................................................................................................................................................................................
133 Stockez vos donnes avec jStorage .......................................................................................................................................................................
133 Utiliser jStorage .......................................................................................................................................................................................................
135 Canvas avec jQuery ................................................................................................................................................................................................
135 jCanvas, quand jQuery rencontre Canvas ..............................................................................................................................................................
136 Partie 6 : Aller plus loin ...................................................................................................................
136 tendre le framework ....................................................................................................................................................
136 La fonction d'extension ............................................................................................................................................................................................
Sommaire 4/150
136 Acclration d'une animation ..................................................................................................................................................................................
136 Utilisation des diffrentes volutions du plugin .......................................................................................................................................................
136 Crer une mthode d'volution ...............................................................................................................................................................................
137 Crez vos slecteurs ...............................................................................................................................................................................................
137 Utilisation de filter() avec fonction anonyme ...........................................................................................................................................................
138 tendre les slecteurs .............................................................................................................................................................................................
138 Ralisez vos propres mthodes ..............................................................................................................................................................................
138 tendre les mthodes de jQuery .............................................................................................................................................................................
139 Dfinir des paramtres dans le plugin .....................................................................................................................................................................
141 Mmento des principales fonctions ...............................................................................................................................
142 Mthodes de base ...................................................................................................................................................................................................
142 Les slecteurs .........................................................................................................................................................................................................
143 Les vnements ......................................................................................................................................................................................................
144 Manipulation du CSS ...............................................................................................................................................................................................
145 Les effets .................................................................................................................................................................................................................
145 Les attributs .............................................................................................................................................................................................................
145 Mthodes de parcours .............................................................................................................................................................................................
145 Manipulation du HTML ............................................................................................................................................................................................
146 Mthodes AJAX .......................................................................................................................................................................................................
147 D'autres frameworks JavaScript ...................................................................................................................................
147 Le principal concurrent : MooTools ! ........................................................................................................................................................................
147 MooTools, un concurrent de jQuery ........................................................................................................................................................................
147 Des ressemblances dans le code ...........................................................................................................................................................................
147 Les divergences ......................................................................................................................................................................................................
148 Les autres frameworks JavaScript ..........................................................................................................................................................................
148 D'autres frameworks JavaScript ..............................................................................................................................................................................
Lire aussi 5/150
Un site web dynamique avec jQuery !
Le tutoriel que vous tes en train de lire est en bta-test. Son auteur souhaite que vous lui fassiez part de vos
commentaires pour l'aider l'amliorer avant sa publication officielle. Notez que le contenu n'a pas t valid par
l'quipe ditoriale du Site du Zro.
Par Nassoub et Sainior
Mise jour : 09/07/2012
Difficult : Facile Dure d'tude : 15 jours
Bien le bonjour vous !
JavaScript est un langage devenu incontournable en l'espace de quelques annes, principalement dans le paysage du web. Et
pour cause ! C'est une technologie complte, qui regroupe un nombre impressionnant d'outils permettant de dynamiser vos
pages web et de leur donner une toute autre dimension. Comme toutes les grandes technologies, JavaScript a une grande
communaut. Et comme toutes les grandes communauts, celle de JavaScript a vite ressenti le besoin d'amliorer les
possibilits du langage, notamment par des frameworks. jQuery est l'un d'eux .
jQuery, crivez moins, faites plus.
La devise de jQuery rsume elle seule l'impact que cet outil, que vous apprendrez aujourd'hui, aura sur votre manire de coder
de demain. Vous crirez moins de code JavaScript, mais pour en faire toujours plus. C'est ce besoin que jQuery cherche
rpondre depuis 2006, et vous constaterez au cours de ce tutoriel que force est d'admettre qu'il y parvient formidablement bien.
jQuery est le framework JavaScript le plus utilis de tous : mme le Site du Zro en fait usage ! Complet, puissant, lgant...
beaucoup sont ses points forts, et rares sont ses points faibles. L'attrait pour cet outil est immense. Seulement voil : comment
se former cette technologie, en France, o la documentation de qualit se fait rare ? Comment aborder jQuery lorsque l'on
est dbutant ? C'est ces problmatiques que nous allons chercher rpondre ensemble par le biais de ce tutoriel. Si vous ne
savez pas ce qu'est jQuery ou ne savez pas ce qu'est un framework ou une librairie, ne fuyez pas ! Comme l'accoutume, nous
partirons de Zro.
Quelques prrequis nous semblent quand mme indispensables pour aborder ce cours dans les meilleures conditions.
Les prrequis pour suivre ce cours :
Des bases solides en JavaScript. Plus vous matriserez JavaScript, plus vite vous assimilerez jQuery. (mise niveau)
Matriser un langage server-side comme PHP est un plus indniable. Cependant, cela ne sera ncessaire que lorsque
nous aborderons AJAX. (mise niveau PHP)
jQuery tant avant tout une technologie oriente web, la connaissance des standards HTML et CSS est absolument
obligatoire. Les normes antrieures HTML5 et CSS3 peuvent tre utilises. Les codes donns au cours de ce tutoriel
respecteront nanmoins les dernires versions des deux standards.
Lire aussi 6/150
Un site web dynamique avec jQuery ! 7/150
Partie 1 : Introduction jQuery
Nous sommes heureux de voir que nous avons pu vous convaincre d'aborder avec nous l'apprentissage du framework jQuery.
Vous allez voir, vous ne le regretterez pas. Seulement... tes-vous sr de savoir ce qu'est un framework ? Ou encore mieux, tes-
vous sr de savoir ce qu'est jQuery ? Nous sommes sur le Site du Zro, alors partons de zro en rpondant ces premires
questions dans cette partie introductive.
Une Introduction jQuery , pas mieux pour introduire un tutoriel jQuery, pas vrai ?
Mme si vous tes aux premiers abords peu intress par l'apprentissage de jQuery, nous vous conseillons quand
mme de lire ces premiers chapitres ; ils vous donneront une vue d'ensemble de ce qui sera tudi dans ce cours. Et qui
sait ? Peut-tre que cela vous fera revoir votre avis sur la question ?
jQuery : l'histoire d'un framework !
Pour bien nous situer dans cet univers de dveloppement web, il est bon de contextualiser un peu la chose. C'est galement le
choix que nous souhaitons faire pour ce tutoriel. Avant de chercher aborder jQuery, commenons dj par poser les bases de
la philosophie du framework dans votre tte. Pas de code ici, juste de l'histoire et des rponses aux questions basiques qui vous
trottent dans la tte.
Vous saurez notamment la fin de ce chapire ce qu'est jQuery, qui l'utilise, quoi sert-il... bref ! Une mise niveau gnrale pour
ceux qui souhaitent apprendre cette technologie, reste trop longtemps hors de porte des Zros.
Tchons de rpondre dans ce premier chapitre toutes ces questions. Vous tes prts ? C'est maintenant que cela commence !
Mais... c'est quoi jQuery ?
Pour bien commencer introduire jQuery, commenons donc par le dfinir, ce sera dj une bonne chose de faite, vous ne
pensez pas ?
jQuery, un framework JavaScript
Vous le savez certainement, vos pages web sont composes de beaucoup de technologies diffrentes.
Comme si ce n'tait pas assez compliqu comme cela, ces satans informaticiens ont eu en plus la bonne ide de nous compliquer
encore plus la tche, en faisant en sorte que ces technologies puissent interagir entre elles. Parmi ces technologies qui font le
web, on retrouve les standards HTML(5) et CSS(3) mais aussi des langages plus "volus" qui permettent de dynamiser les
pages web. L'un d'eux, le plus connu et le plus utilis, est JavaScript.
Un logo de JavaScript
JavaScript ou... jQuery ?
De JavaScript jQuery
JavaScript est un excellent langage, qui a su au fil des annes s'imposer comme une technologie vraiment incontournable dans le
web. Le nombre de sites qui utilisent dsormais JavaScript est tout simplement gigantesque. La cause ? L'avnement du web 2.0,
un web communautaire o les Webmasters cherchent faire interagir toujours plus l'utilisateur avec le site. JavaScript est un
langage tout indiqu pour rpondre ce besoin, expliquant ainsi en partie son succs. Un beau paysage pour JavaScript...
seulement voil, comme on dit : on n'arrte pas le progrs.
Alors trs rapidement, ses utilisateurs ont voulu faire voluer JavaScript, le rendre toujours meilleur. On a voulu que le langage
puisse faire toujours plus de choses, toujours plus proprement et toujours plus simplement. C'est dans cet esprit que la
communaut de JavaScript a dvelopp des frameworks pour le langage, des "cadres de travail". L'un d'eux est le plus utilis de
tous, celui que l'on retrouve un peu partout sur le web. Et c'est aussi celui que l'on va tudier tout au long de ce cours : jQuery !
jQuery, un framework JavaScript
Partie 1 : Introduction jQuery 8/150
Image utilisateur
Ci-contre, vous pouvez voir l'un des logos de jQuery o est indique sa devise : "jQuery. Write Less, Do
More". Cette devise, on peut la traduire tout btement par : "jQuery. Ecrivez moins, faites plus". Cela
rsume vraiment ce que jQuery va vous permettre de faire. En l'utilisant dans votre code JavaScript : vous
crirez moins de code, et vous serez plus productif.
Cela parat flou, et nous vous comprenons. Vous avez encore du mal vous reprsenter ce qu'est jQuery objectivement. Dans
notre ternelle bont, nous allons vous donner une vision plus physique de la chose : jQuery n'est en fait qu'un seul et unique
fichier JavaScript, tlchargeable sur le web et qui porte l'extension .js !
Et oui ! Ce petit fichier, c'est bien jQuery !
Euh... et c'est ce petit truc de rien du tout qui ncessite un cours entier ? Elle me parat pas franchement crdible toute
cette histoire...
Et pourtant !
jQuery n'est pas n'importe quel fichier JavaScript. C'est une norme bibliothque de fonctions JavaScript qui ont t crites et
regroupes en un seul et unique fichier pour plus de simplicit.
Vous tes intrigu par le contenu de ce fichier... et vous avez du mal croire qu'il peut lui seul tre l'objet d'autant
d'engouement. C'est normal. Cliquez plutt sur ce lien pour voir le code de jQuery dans sa version 1.7. Plutt impressionnant
non ? Cela prend tout de suite une autre ampleur.
Ce qu'il faut vous dire, c'est que jQuery est vraiment une grosse bote outils, et pas "un petit fichier de rien du tout". Le nombre
de fonctions qui sont contenues dans ce simple fichier est vraiment grand. Et ces outils n'ont qu'un seul but : vous permettre
d'crire moins de code JavaScript, pour tre toujours plus productif et efficace dans vos dveloppements !
jQuery, un framework ou une librairie ?
Pour cette petite question de vocabulaire, nous allons vous apporter un lment de rponse. Vous avez trs certainement au
cours de vos visites sur le web entendu parler du mot librairie.
Le cas le plus simple : une librairie
Une librairie, en programmation, est une bibliothque de fonctions.
Elles sont composes gnralement par d'autres personnes qui les ont mises disposition de tous, pour gagner du temps dans le
dveloppement. Elles sont souvent constitues d'un ou de plusieurs fichiers qui contiennent les fonctions. Tout ce que le
programmeur a faire, c'est d'inclure la librairie dans son code. Il peut ainsi commencer utiliser les fonctions qui s'y trouvent
pour avancer dans son code.
Mais alors, jQuery c'est exactement a non ? Pourquoi est-ce que vous parlez de frameworks depuis tout l'heure ?
Il existe en fait une petite diffrence toute simple entre framework et librairie, et cette diffrence, nous nous proposons de vous
l'expliquer ds maintenant pour mieux comprendre l'impact que jQuery va avoir sur votre manire de coder.
Un cas plus complexe : un framework
Un framework, c'est quelque chose de dj plus complexe qu'une librairie. Les frameworks sont gnralement beaucoup plus
massifs que les librairies, et pour cause : ils proposent plus de choses.
En fait, lorsque l'on code avec une librairie, ce sont les fonctions qui la compose qui vont s'intgrer notre code. Avec un
framework, ce n'est pas du tout pareil.
Le framework pose les bases d'une application, et il va nous "forcer" programmer selon les codes qu'il nous impose. Ainsi, on
peut dire que c'est notre manire de coder qui s'intgre la vision du framework. Pour jQuery, c'est exactement a.
jQuery est plus qu'une simple librairie mme s'il en a les traits majeurs, il va vraiment vous faire coder en JavaScript d'une
nouvelle manire. Et ceci tel point qu'il est tout fait possible de considrer jQuery comme un langage un peu part, puisqu'il
s'agit vraiment d'une redcouverte totale de JavaScript. Lorsque vous commencerez travailler vraiment avec jQuery, vous
comprendrez rellement tout le sens de cette phrase.
Image utilisateur
Image utilisateur
Rappelez vous qu'il s'agit d'un tutoriel qui a t pens pour les dbutants, alors ne vous inquitez pas. Pour peu que
vous suiviez les chapitres dans l'ordre il vous faudra peu de temps pour assimiler les bases du framework.
Vous voulez un peu savoir ce que ce framework a dans le ventre ? Trs bien ! Voyons maintenant quoi peut (et va !) nous servir
jQuery concrtement dans notre site web.
A quoi va nous servir jQuery ?
jQuery est un framework qui va nous simplifier la vie d'une manire gnrale, et cela va passer par plusieurs fronts.
Nous allons lister quelques petites choses qui feront que demain, cet outil que vous allez apprendre utiliser vous sera
totalement indispensable pour presque tous vos dveloppements en JavaScript.
Les points forts de jQuery
Si vous tes un habitu du JavaScript, vous savez que chaque navigateur web dispose d'un moteur JavaScript qui lui est propre.
Ce moteur, c'est lui qui va "parser" votre code JavaScript, et faire agir le navigateur en fonction de celui-ci.
Par exemple, le moteur JavaScript qui quipe les navigateurs Chrome et Safari intgr au moteur de rendu WebKit
s'appelle SquirrelFish. Il gre le JavaScript d'une manire diffrente du moteur Gecko de Firefox par exemple.
jQuery et la compatibilit
Concrtement, la compatibilit inter-navigateurs signifie qu'un code JavaScript qui fonctionne sur un
navigateur web doit fonctionner sur un autre. Et bien devinez quoi ? jQuery uniformise le tout ! Au
final, un code JavaScript respectant les normes imposes par jQuery sera compatible sur tous les navigateurs web.
Un gain de temps et d'nergie plus quapprciable, vous permettant de vous focaliser vraiment sur le cur de votre code, plutt
que sur des questions de compatibilit entre navigateurs.
jQuery et l'AJAX
Dans le mme registre de compatibilit, l'AJAX avec jQuery a t grandement simplifi.
AJAX est rendu possible grce un objet de JavaScript appel XmlHttpRequest
(XHR)... seulement, instancier un objet XmlHttpRequest peut vite devenir un vritable
calvaire, car d'un navigateur l'autre, cela ne se fait pas du tout de la mme manire.
Grce jQuery, instancier un objet XHR est trs simple.
Une seule fonction instancie l'objet, et elle couvre tous les navigateurs, en plus de
vous fournir des outils pour grer au mieux votre requte ! AJAX devient donc
tonnamment facile et rapide utiliser.
jQuery et les animations
L'un des lments incontournables de jQuery et qui a fait son succs est incontestablement la
possibilit de crer des effets sur sa page. Envie de faire disparatre un bloc avec un effet de fondu, ou
bien faire trembler un bouton submit sur votre page web ? Pas de problme ! jQuery le fait pour vous.
Vous verrez que la masse de fonctions que jQuery vous proposera afin de crer des effets sur vos pages web sera tout
simplement impressionnante. Vous verrez aussi que la densit de la documentation en tmoignera.
jQuery et les formulaires
Un des points forts de jQuery est qu'il va vous permettre d'effectuer un pr-traitement
de vos formulaires HTML ct client, de manire trs avance. Nous pourrons ainsi
relever quels type de formulaires ont mal t remplis et afficher ceci au visiteur.
Attention nanmoins : jQuery ne remplace en aucun cas un traitement ct serveur. Ce framework reste une technologie
ct client, on peut donc facilement contourner ces validations, voire mme les dsactiver.
Ainsi, ne comptez pas QUE sur jQuery pour valider vos donnes. Vous devrez galement prvoir une validation ct serveur,
avec un langage tel que PHP.
Et tout cela, c'est sans parler de toute la panoplie d'outils disponible pour manipuler pleinement le DOM que jQuery vous offre.
Pas de doutes, jQuery est le choix pour lequel vous devez opter aujourd'hui pour donner une nouvelle dimension vos futurs
sites.
Nous ne pouvons que vous encourager vous accrocher et apprendre cette technologie. Avec ce tuto entre les mains, ce
travail d'apprentissage n'en sera que plus facile.
L'histoire du framework
Le framework jQuery est la base l'uvre d'un seul homme, un programmeur
JavaScript hors-pair qui a su, en 2006, initier le projet.
Son nom est John Resig. Depuis 2006, John Resig est rest le chef de projet
de jQuery. C'est ainsi lui qui supervise encore aujourd'hui le dveloppement
de jQuery.
Il travaillait pour le compte de la Mozilla Corporation en tant que
dveloppeur JavaScript.
Malgr le travail colossal que Resig a su faire sur le framework jQuery, vous
imaginez bien que cet homme n'a pas pu lui seul crer un tel outil. Les
autres dveloppeurs de jQuery, ce sont les membres de sa communaut.
En effet ! John Resig a publi le framework sous licence MIT et GNU GPL :
deux licences libres. Cela signifie concrtement que tout le monde peut
travailler sur le framework et participer son amlioration. Vous verrez
notamment plus tard qu'il existe des plug-ins jQuery que vous pourrez crer
vous-mme, afin de toujours plus complter le framework... mais nous n'en sommes encore pas l.
A ce jour, jQuery en est sa version 1.7.2, et a dj subi beaucoup de mises jour. La communaut est en effet trs active, et les
mises jour se font toujours rgulirement.
Des sites qui utilisent jQuery
jQuery est le framework JavaScript le plus utilis sur le web, et ce, pour les qualits que nous vous avons prsentes plus haut.
Voici quelques grands noms du web qui utilisent aujourd'hui jQuery de manire plus ou moins abondante, cela devrait vous aider
faire dfinitivement votre choix.
Site du Zro
Google et ses diffrents services
Mozilla
Amazon
...
Sachez galement que les CMS les plus rpandus sur le web comme Drupal et Wordpress utilisent jQuery !
Cette introduction jQuery et son histoire est maintenant acheve. Nous esprons que cela vous aura plus, et que vous cernez
maintenant un peu mieux ce qu'est jQuery.
Nous allons maintenant nous intresser aux outils dont on va avoir besoin pour coder correctement et efficacement avec
jQuery.
De quels outils a-t-on besoin ?
La prparation est probablement l'lment le plus important, quel que soit le projet que vous souhaitez mener, et ce, pas
seulement en dveloppement.
Afin de maximiser nos chances d'apprendre jQuery dans les meilleures conditions, nous allons nous aussi passer par toute une
phase de prparation. Ici, c'est vous et votre ordinateur que nous allons devoir prparer utiliser jQuery... cela passe surtout par
s'quiper de bons programmes.
Vous verrez, nous n'avons pas besoin d'tre arms jusqu'au dents pour dvelopper avec jQuery, un bon couple
navigateur/diteur suffit.
Le choix du navigateur web
jQuery tant une technologie axe web, le navigateur sera sans aucun doute le programme dont vous aurez le plus besoin ici.
Seulement, comment choisir le bon navigateur web pour travailler, quand on a toute une panoplie de produits tous plus
excellents les uns que les autres ?
Ce choix est d'autant plus difficile lorsque l'on connat les problmes de compatibilit lis l'utilisation de JavaScript dans son
code... mais ici pas de problme, puisque jQuery va nous permettre de ne plus prendre ce paramtre en ligne de compte !
Considrant cet lment, le choix du navigateur se rsumera donc seulement prendre celui avec lequel vous tes le plus l'aise.
Voici une liste vous prsentant les diffrents navigateurs web, honteusement reprise du tutoriel de rfrencement web du Site du
Zro.
Icne Nom OS Tlchargement Dscription
Internet
Explorer
Fourni par
dfaut avec
Windows.
Un navigateur web sign Microsoft et intgr par dfaut toutes les versions du
systme d'exploitation Windows. Si vous tournez actuellement sous Windows,
alors vous disposez de ce navigateur.
Je ne vous recommande pas d'utiliser ce navigateur, car les versions les plus
rcentes ne sont pas disponibles pour les systmes comme Windows XP qui
sont pourtant massivement utilises encore aujourd'hui.
Il y a donc une grosse probabilit que votre version d'Internet Explorer ne soit
pas capable de reconnatre les dernires avances technologiques en matire de
standards web.
Mozilla
Firefox
Tlchargement
Un navigateur web gratuit et extrmement performant sign par la Mozilla
Foundation. Je ne saurais que vous recommander de l'utiliser sans modration.
Google
Chrome
Tlchargement
Un autre navigateur web sign cette fois-ci par Google. Le programme est bas
sur un projet open-source baptis Chromium, mais connat quelques
controverses vis vis du respect des informations personnelles de ses
utilisateurs. Il est nanmoins recommand de l'utiliser tant il est performant.
Chromium Tlchargement
Chromium est le projet open-source sur lequel est bas Google Chrome. Il s'agit
en fait de Google Chrome lav de tous les ajouts de Google. Vous pouvez l'utiliser
si vous tes inquiet au sujet des questions du respect des informations
personnelles.
Opera Tlchargement
Opera est un navigateur web de trs grande qualit propos gratuitement par
l'entreprise Opera Software.
Il est moins utilis que les 4 prcdents mais demeure un excellent produit.
Safari Tlchargement
Safari est le navigateur web d'Apple qui quipe tous les ordinateurs Apple par
dfaut. C'est un peu l'Internet Explorer de la pomme de ce point de vue.
Sachez que jQuery est totalement compatible avec tous ces navigateurs. Vous n'avez pas vous inquiter de ce ct-l.
Maintenant que nous vous avons prsent ces navigateurs majeurs que tout le monde utilise sur le web, nous pouvons quand
mme souligner qu'il y en a un qui ressort nettement plus que les autres. Ce navigateur, c'est Mozilla Firefox !
Et... pourquoi cela ?
Simplement parce que Firefox est vraiment le meilleur de tous les navigateurs lorsqu'il s'agit de dvelopper pour le web. Nous
souhaiterions vous faire dcouvrir (ou redcouvrir) un outil spcialement ddi au dveloppement web, et surtout uniquement
disponible sous Mozilla Firefox.
Cet outil, nomm Firebug vous sera vraiment d'une aide capitale dans vos futurs dveloppement web, en particulier avec
JavaScript et jQuery.
Un incontournable : Firebug pour Firefox !
Firebug est en fait une extension gratuite pour Firefox, qui est vraiment devenue incontournable pour tout dveloppeur web qui
se respecte.
Ajoutez Firebug votre navigateur Firefox !
Elle a t dveloppe par des dveloppeurs indpendants, et vous pourrez
l'ajouter directement votre navigateur Firefox sur le site officiel Mozilla
Addons.
L'installation de Firebug -et de toute autre extension- ncessite le
redmarrage du navigateur Firefox pour tre effective.
Dans une optique d'aide au dveloppement, l'extension Firebug se
caractrise en fait par toute une panoplie d'outils pour le dveloppement
web qui vont venir s'intgrer compltement Firefox dans le but de le
complter et de le rendre beaucoup utile et agrable l'utilisation. Etant
donn que c'est un ajout Firefox, vous devez tre conscient que
l'installation de ces outils rend le navigateur sensiblement plus lourd, donc
plus lent l'excution.
Utiliser la bote outils Firebug !
Pour commencer utiliser Firebug, il serait bien convenu d'arriv l'ouvrir vous ne pensez pas ?
C'est trs simple. Commencez par ouvrir une page web dans votre navigateur Firefox, optez par exemple pour la page d'accueil du
Site du Zro.
Une fois que vous y tes... faites trs attention, car la manipulation que vous allez devoir raliser pour ouvrir Firebug va tre
tellement complexe que... bon ok, j'arrte. Contentez-vous simplement d'appuyer sur F12 et a fera l'affaire.
La magie opre, et Firebug s'ouvre dans Firefox !
Firebug ouvert dans le navigateur Firefox !
Vous pouvez voir que Firebug dispose de 6 onglets, proposant des outils diffrents. Chaque onglet est dcoup en deux zones
ayant toutes une utilit diffrente de l'autre. Trois de ces onglets vont retenir notre attention pour le moment.
Console
C'est de loin celui qui va le plus nous intresser dans nos dveloppements avec jQuery. C'est une console JavaScript
qui vous retournera notamment les erreurs que vous pourriez commettre dans votre script jQuery ; vous permettant
ainsi de les solutionner le plus facilement possible. Autre intrt majeur de la console : elle vous permettra de taper du
code JavaScript et de le tester la vole. Vous pouvez aussi utiliser le site web jsFiddle. C'est un site "bac sable".
Idal pour vous exercer.
HTML
Pour l'onglet HTML, Firebug vous propose un outil vous permettant d'inspecter votre code HTML et de le modifier
la vole. Vous pourrez naviguer dans l'arboresence du document HTML, et la modifier trs facilement. Vous verrez
galement vos modifications s'appliquer en direct sur le rendu de la page ouverte dans le navigateur.
CSS
L'onglet CSS propose exactement la mme chose l'onglet HTML, mais apadt pour les feuilles de style. Ici, vous
pourrez modifier ou supprimer la vole n'importe quelle proprit CSS contenue dans les feuilles de style relies la
page.
Mine de rien, ces outils vont nous tre sacrment utiles pour dvelopper en jQuery. Pour la suite : sachez qu'il existe 3 autres
onglets : Script, DOM et rseau, mais que nous ne souhaitons pas dvelopper dans cette partie du cours sur jQuery. Si vous
souhaitez avoir plus d'informations sur Firebug dans son ensemble, nous pouvons vous conseiller de lire cet excellent tutoriel
sur l'extension Firebug disponible sur le Site du Zro.
Il est galement savoir que Google Chrome propose en natif des outils de dveloppement assez proches de Firebug,
ils s'ouvrent de la mme manire, en appuyant sur la touche F12.
Notre prfrence personnelle va quand mme Firebug, nanmoins, la qualit de ces outils est certaine, et ils pourraient
vous convenir parfaitement si vous tes un grand fan de Google Chrome/Chromium.
Un diteur de texte efficace
Le dernier lment dont vous aurez besoin pour dvelopper avec jQuery... ce sera bien sr un diteur de texte.
Un diteur de texte performant et efficace
Nous ne pouvons pas opter pour n'importe quel diteur de texte pour dvelopper avec jQuery, et c'est d'ailleurs vrai pour
n'importe quel langage. Ce qu'il nous faut, c'est un diteur suffisament perfectionn pour grer la coloration syntaxique. Ils sont
nombreux, mais tout cela pour dire qu'il ne faut pas se laisser aller et utiliser le Bloc Note fourni par dfaut avec Windows.
Nous allons vous conseiller l-encore quelques exemples de programmes utiliser, sachez qu'ils ne sont pas les mmes en
fonction du systme d'exploitation que vous utilisez.
Sous Windows
Le code du framework jQuery ouvert sous Notepad++
Sous Windows, on peut trouver des diteurs vraiment trs performants. Nous utilisons respectivement les diteurs Notepad++,
qui a le mrite d'tre gratuit, et l'diteur Sublime Text 2. Pour ce dernier, sachez que le programme n'est pas gratuit et qu'il faudra
songer l'enregistrer au bout d'une certaine priode.
Ces deux diteurs sont vraiment de qualit. Sachez que Sublime Text 2 vous donne en plus de cela la possibilit de naviguer dans
votre arborescence, un peu la manire d'un IDE.
Un autre programme existe pareil ailleurs : ConTEXT. Pour l'avoir essay, il est lui aussi de trs bonne qualit en plus d'tre
gratuit.
Des environnements de dveloppement complets tels que Netbeans peuvent aussi tre utiliss, c'est selon votre
prfrence.
Sous Linux
L'diteur Gedit sous GNU/Linux Ubuntu 10.04
Sous Linux on a l encore beaucoup d'diteurs diffrents et ils ont tous beaucoup d'atouts dans leur manche.
Si vous tes un habitu de la console et que vous ne souhaitez pas tre dpays, vous pourrez toujours diter vos fichiers avec
Vim ou Emacs. Si en revanche vous prfrez utiliser un diteur graphique, l'diteur de texte Gedit ou Geany sont tous les deux
excellents.
Sous MacOS X
Le logo de l'diteur Smultron sous MacOS X
Le systme d'exploitation de la firme Apple a lui aussi son lot d'diteur. Le plus connu est sans doute Smultron, qui a t cr par
un dveloppeur Sudois.
Choisissez l'diteur de texte avec lequel vous tes le plus l'aise. Si vous avez l'habitude de crer des sites internet, l'diteur que
vous utilisez pour HTML n'a aucune raison de ne pas connatre JavaScript. Et s'il connat JavaScript : c'est qu'il connat jQuery.
Vous arrivez bientt au terme de votre prparation, bientt nous allons pouvoir aborder rellement jQuery et commencer coder
avec lui.
Le chapitre qui suit sera le dernier chapitre introductif au cours. Nous allons faire une dernire petite mise au point... cette fois-ci
au niveau du JavaScript. Vous remettre en mmoire une dernire fois les fondements de ce langage ne sera pas de trop avant
d'apprendre jQuery !
Si vous estimez que le chapitre suivant ne vous sera pas utile, vous tes totalement libre de le sauter. Il est nanmoins
recommand de le lire. Cela ne vous prendra que peu de temps, et ce ne sera que positif pour vous.
Rappels gnraux sur JavaScript
Histoire de mettre tout le monde sur la mme longueur d'onde, nous vous proposons un petit rappel sur les rudiments de
JavaScript, ses bonnes pratiques, quand l'utiliser, et surtout pourquoi. Ce chapitre ne se veut en aucun cas un apprentissage
ultra-rapide du langage, il existe d'ailleurs un big-tutoriel sur le Site du Zro pour cela.
O et quand utiliser JavaScript ?
Avant tout chose, il nous faut dfinir la place que prendra notre code JavaScript dans la page. En effet, la structure se doit d'tre
claire, car on ne dveloppe pas n'importe comment. Pour les connaisseurs, avez-vous pour habitude de placer du code PHP dans
une page portant l'extension .html ? Pour sr que non !
Avec JavaScript, on sera un peu moins regardant ce niveau, mais il est quand mme prfrable de bien diviser son code.
O placer son code JavaScript ?
Cette question, bien qu'elle semble simplette et dnue d'intrt, fait parfois l'objet de dbats sur le web. Certains diront qu'un
code JavaScript DOIT se placer entre les balises <head></head>, car c'est comme cela que le langage HTML a t construit.
En revanche, les non-adhrants cette pratique diront que, pour un soucis de performance, il est largement plus rentable de
placer JavaScript en fin de page, juste avant la fermeture de la balise <body>.
N'oubliez pas que l'on a pour habitude de placer le JavaScript dans des fichiers portant l'extension .js. C'est d'ailleurs la
mthode la plus recommande pour utiliser JavaScript.
Le problme se pose maintenant : qui a raison, et qui a tort ?
Au cours de ce tutoriel, nous ne vous obligerons pas prfrer la premire ou la deuxime pratique, mais il est clair pour nous
que placer son code JavaScript en fin de page est plus logique : la structure HTML, le DOM, se charge ainsi en premier en raison
de la lecture linaire du navigateur, ce qui est le plus important. Vient ensuite JavaScript, qui se chargera d'ajouter tous les effets
et applications voulues. Les codes que nous vous prsenterons seront donc toujours placs en fin de page, ou dans des
documents externes chargs en derniers.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>

<script>
// mon code JavaScript
</script>
</body>
</html>
Il est vident qu'il ne faut pas placer son code JavaScript en plein milieu de la page, c'est totalement illogique et vous
pouvez vous perdre plus facilement si votre script fait beaucoup de lignes !
Quand et comment l'utiliser ?
Une des autres choses retenir, c'est qu'il faut savoir utiliser JavaScript avec parcimonie. Souvenez-vous toujours que c'est un
langage qui s'excute du ct client, et qui est donc facilement contournable grce un bon navigateur. Ainsi, vrifier des
informations peut se faire en JavaScript, mais doit toujours tre assur galement du ct de votre serveur, qui lui n'est pas
accessible. Cela vous vitera bien des problmes !
Paralllement, n'utilisez JavaScript que lorsqu'il est utile, c'est--dire lorsqu'il apporte quelque chose au visiteur. Faire un dluge
de flocons de neige sur la page d'accueil prsente trs peu d'intrt, et aura plutt tendance agacer l'utilisateur. De mme,
ne chargez pas vos informations essentielles avec ce langage : les personnes l'ayant dsactiv, les personnes handicapes et les
robots des moteurs de recherche ne pourront ou ne sauront pas lire votre contenu !
JavaScript doit donc tre sur un site web pour, par exemple, amliorer l'exprience utilisateur, mais surtout pas pour la cration de
contenu.
Variables et fonctions
Parmis les bonnes pratiques adopter en JavaScript, il y a celles qui concernent les variables et les fonctions. Nous ne vous
parlerons que de ces lments pour la simple et bonne raison que leur dclaration ne change pas avec jQuery, contrairement aux
vnements, par exemple. Si vous ne savez pas ce qu'est une variable ou une fonction, nous vous conseillons vivement d'aller
lire un tutoriel consacr JavaScript !
De la dclaration des variables
Les variables en JavaScript se dclarent toujours de la mme faon : il faut prcder le nom du mot-cl var. Il est possible de
dclarer plusieurs variables la suite en les sparant de virgules :
Code : JavaScript
var maVariable = 1, // cette variable vaut 1
maVariable2, // celle-ci est dclare, mais vide
maVariable3 = true; // celle-ci contient le boolen true
Traditionnellement, on dclarera nos variables en dbut de code ; ce n'est pas le langage qui veut cela, c'est juste une faon d'y
voir plus clair.
Concernant les tableaux, plus couramment appels arrays, et les objets, ils se dclarent grce leur structure particulire. Ainsi,
on initialisera un tableau avec des crochets [ ], et un objet avec des accolades { }.
Fonctions et arguments
Les fonctions en JavaScript se dclarent de la mme manire qu'en PHP, par exemple. Beaucoup de langages de programmation
se ressemblent, surtout ce niveau. Ainsi, il suffit d'crire le mot-cl function suivi du nom de la fonction pour dclarer celle-
ci et pouvoir l'utiliser. Elle peut aussi prendre des arguments, qui feront office de variables accessibles uniquement dans la
fonction qui les a instanci. Il est donc possible d'exploiter des donnes diffrentes avec une seule fonction.
Code : JavaScript
function helloWorld(nom){
alert('Hello World, ' + nom + '!');
}
helloWorld('Sainior'); // affichera une alerte "Hello World Sainior
!"
Cas des fonctions anonymes
Il est possible, en JavaScript, de dclarer des fonctions qui ne possdent pas de nom. Assez joliment, on les a appeles
fonctions anonymes . Elles permettent de lancer une fonction directement depuis une variable, par exemple, ou mme une autre
fonction ! Elles seront donc trs utilises dans ce cours, donc assurez-vous bien d'tre au point avec. Pour exemple, si je dclare
une fonction anonyme dans une variable, je pourrai excuter la fonction avec la variable :
Code : JavaScript
var helloWorld = function(){ // cette fonction est anonyme
alert('Hello World !');
}; // attention au point-virgule, il ne faut jamais l'oublier !
helloWorld(); // affichera une alerte "Hello World !"
Encore une fois, jQuery est presque un nouveau langage apprendre. Ainsi, nous ne serons pas aussi rapides dans
nos explications dans les prochains chapitres. Ici, nous souhaitons juste vous rafrachir la mmoire.
Vous tes maintenant au point pour commencer vous lancer avec jQuery ! Ces chapitres d'introduction ont peut-tre t un peu
long, mais nous pensons qu'il est ncessaire que vous soyez sr de vous pour coder dans de bonnes conditions. Alors
n'attendez plus, on commence ds maintenant !
Partie 2 : Les bases du framework
Aprs cette partie introductive, nous sommes maintenant tous au mme niveau, c'tait vraiment ncessaire. Maintenant, vous
savez ce qu'est jQuery et vous savez pourquoi il va tre intressant de l'utiliser. En plus de cela, vous tes maintenant
parfaitement quips pour commencer apprendre le framework, et nous vous avons offert en plus un petit rafrachissement de
vos connaissances en JavaScript. Pas mal non ?
Bref ! Tout a pour dire que maintenant, nous sommes fins prts nous lancer dans l'apprentissage du framework jQuery ! Lisez
bien ces chapitres dans l'ordre, la fin de cette partie, vous connaitrez les bases fondamentales de jQuery, et vous serez prts
aborder avec nous une utilisation un peu plus avance de cette technologie.
Vos premiers pas avec jQuery !
Nous voici maintenant dans la vraie phase d'apprentissage de jQuery. C'est ici que l'on va commencer taper nos premiers codes
sources en jQuery.
Il arrivera souvent au cours de ce tutoriel que nous utilisions par abus de langage l'expression "coder en jQuery".
jQuery n'est pas un langage, c'est bien un framework JavaScript. C'est simplement un petit raccourci que nous allons
utiliser et qui est assez utilis sur le web. Mais comprenez bien par l qu'on entend : "coder en JavaScript en utilisant le
framework jQuery".
Inclure jQuery dans vos pages
Pour commencer travailler avec jQuery sur votre site web, il va falloir tout naturellement l'inclure dans vos pages. Voyons ici
comment l'on va procder.
Deux mthodes pour inclure jQuery dans vos pages web
Vous devez savoir qu'il existe deux mthodes pour inclure jQuery dans vos pages. Les deux marchent et sont tout fait valables,
mais l'une est plutt dconseille alors que l'autre est au contraire vraiment trs conseille.
Inclure jQuery depuis votre serveur (mthode dconseille)
La premire de ces deux mthodes, celle qui n'est pas conseille, consiste inclure jQuery dans vos pages web depuis votre
propre serveur. Pour cela, c'est trs simple.
Dans un premier temps, nous allons devoir nous rendre sur le site officiel de jQuery : jQuery.com.
Nous vous conseillons d'ailleurs de mettre ce site dans vos favoris histoire de toujours l'avoir sur la main, en effet, c'est
galement sur ce site que se trouve la documentation jQuery que nous apprendrons lire et utiliser plus tard.
Pour rcuprer jQuery, vous devez tout simplement cliquer sur l'option "Download" dans le menu du haut. Vous arriverez alors
sur une page vous prsentant les diffrentes release de jQuery. A l'heure o nous crivons ces lignes, la version actuelle est la
1.7.2, et c'est celle que nous utiliserons au sein de ce cours.
Quoiqu'il en soit, la version la plus jour est place un peu en avant par rapport aux autres ; pratique pour l'identifier et la
rcuprer plus rapidement.
Euh... il y a deux release pour la mme version non ? Une version "Minified" et une version "Uncompressed"... qu'est-
ce que je dois choisir ?
Ah oui ! Nous allions y venir !
En fait, c'est trs simple. jQuery vous est toujours fourni en deux exemplaires. Je vous rassure le contenu du fichier est
exactement le mme. Il n'y a pas 2 jQuery, il y en a bien qu'un seul.
jQuery Minified
jQuery Minified est le framework jQuery "compress". En effet, vous avez pu vous rendre compte : jQuery est un fichier
qui est vraiment immense, et dans ce fichier immense vous pouvez voir qu'il y a beaucoup d'espaces et beaucoup de
retours la ligne : pour garder un peu de lisibilit pour les codeurs. Le problme, c'est qu'en faisant a, le fichier
prend vraiment plus de place. La version Minified rpond ce problme : tous les espaces et retours la ligne sont
prend vraiment plus de place. La version Minified rpond ce problme : tous les espaces et retours la ligne sont
retirs. Cela a pour effet de rendre le code compltement illisible, mais en revanche, jQuery sera tlcharg plus vite
par vous et vos visiteurs !
jQuery Uncompressed
jQuery Uncompressed est "l'autre jQuery". Celui qui a conserv les espaces et les retour la ligne pour garder de la
lisibilit, mais qui est plus long charger.
Bien sr, nous vous recommandons vivement d'utiliser la version compresse sur votre site en production, car elle sera
vraiment plus rapide charge. En revanche, pour toute la phase de dveloppement il sera plus sage d'utiliser la
version dcompresse.
Bref, pour en revenir notre inclusion dans nos pages, tlchargeons la version compresse de jQuery. Faites donc un Clic Droit
-> Enregistrer sous, et placez jQuery dans un dossier facile d'accs pour pouvoir l'inclure plus facilement dans votre page web.
La suite est trs simple et trs basique. Ouvrons un document HTML.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Test jQuery</title>
</head>
<body>
<p>On va bosser avec jQuery, c'est super !</p>
<script src="chemin/vers/jquery.js"></script>
</body>
</html>
Et voil ! Si le chemin d'accs vers le fichier est correct, jQuery a bien t reli votre page web... seulement, cette mthode n'est
franchement pas recommand, car elle va faire bosser votre serveur un peu plus, et surtout inutilement.
On va voir tout de suite la deuxime mthode, celle qui est vraiment beaucoup plus recommande par tous les dveloppeurs
jQuery !
Inclure jQuery depuis un serveur distant (Google !)
Et oui ! La mthode la plus recommande pour inclure jQuery dans votre page web est encore d'inclure le fichier directement
depuis un serveur distant.
Seulement voil, il faut trouver quelqu'un de suffisamment fou pour pouvoir hberger un fichier aussi utilis que jQuery et le
mettre disposition de tous les dveloppeurs de la plante qui veulent l'utiliser... et il y a bien une entreprise qui fait a, c'est
Google !
Google n'est pas seulement un moteur de recherche et une suite de sites web, c'est aussi une entreprise qui a montr depuis
toujours un intrt farouche pour l'open-source. C'est ainsi que Google met disposition de tous le framework jQuery hberg
directement sur ses serveurs. Google vous fournit un lien absolu indiquer dans vos pages, et c'est tout bon, jQuery est inclus !
Reprenons le mme code source que tout l'heure, et adaptons-le pour ce deuxime cas de figure.
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Partie 2 : Les bases du framework 21/150
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>
</html>
jQuery est prt l'emploi !
Le lien vers jQuery Minified chez Google est
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
Et le lien vers jQuery Uncompressed chez Google est
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js
jQuery n'est d'ailleurs pas le seul framework libre que Google hberge et propose tout le monde. Si vous voulez voir l'intgralit
des outils proposs par Google, vous pouvez vous rendre sur cette page. Les liens absolus indiquer sont galement rfrencs
sur cette page du site Google ddi aux dveloppeurs.
Et pourquoi cette mthode est-elle la plus recommande des deux ?
La rponse cette question est trs simple : c'est juste pour moins faire travailler notre serveur. En plus de cela, inclure jQuery
depuis un serveur Google permet une mise en cache immdiate, pour toujours acclrer les temps de chargement de votre site.
C'est donc plus une question de performance qu'autre chose.
Ainsi, pensez bien qu' chaque fois que vous travaillerez en jQuery, il vous faudra inclure le framework depuis un serveur Google
!
La fonction de base : jQuery()
jQuery est donc inclus notre page web... c'est bien beau, mais l'idal serait quand mme d'arriver utiliser ce qu'il a nous
proposer non ? Voyons comment faire ds maintenant pour exploiter toute la puissance du framework.
Une fonction gnrique : jQuery() ou $()
L'ensemble du framework jQuery repose sur une seule fonction. C'est la fonction la plus importante du framework, vous devrez
toujours l'utiliser ds qu'il s'agira de dvelopper en jQuery. Cette fonction, c'est tout btement la fonction jQuery() !
Elle va servir tout simplement dire : "Hop l ! A partir de maintenant, c'est du jQuery qu'il va y avoir". Sans cette fonction, le
code jQuery peut ne pas tre interprt correctement. C'est peut-tre l une faiblesse qui n'en est pas une pour le framework :
tout le code qu'on l'on va devoir crire, on va devoir le faire au sein de cette fonction.
Reprenons notre code de tout l'heure et voyons comment appeler la fonction jQuery().
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script

<script>
jQuery(document).ready(function(){
// Du code en jQuery va pouvoir tre tap ici !
});
</script>
</body>
</html>
Nous incluons jQuery min. ici, nous considrons simplement que cette page est en production. Si elle avait t une
page en dveloppement, nous y aurions inclus la version non compresse de jQuery.
Oulah, il y a dj pas mal d'infos dans ce code que nous allons devoir vous expliquer.
Laissons un peu tomber le HTML pour le moment et focalisons-nous sur le JavaScript. Essayez simplement d'imaginer que nous
nous trouvons dans une page HTML complte.
Code : JavaScript
// Du code en jQuery va pouvoir tre tap ici !
});
Alors, comme nous vous le disions, on a dj pas mal de nouveauts dans ce code : la ligne 1 en contient le plus.
Code : JavaScript
jQuery(document)
jQuery prend un argument. Ici, elle cible le "document", qui reprsente tout simplement votre document HTML sur lequel vous
travaillez : votre page web.
Code : JavaScript
// notre code ici
});
La suite de ce code est vraiment trs simple. Vous voyez que le prochain lment qui arrive, est l'vnement ready. Cet
vnement se traduit simplement par "est prt". Une fois que cet vnement est vrifi, on lance une fonction anonyme dans
laquelle on va placer notre jQuery.
Ainsi, cette ligne peut tre traduite par : "quand le document HTML est prt (sous-entendu, est charg), lance une fonction qui
contient le code jQuery."
Cette petite structure de rien du tout signifie vraiment beaucoup de choses : on attend simplement que la page HTML soit
charge avant de commencer parler de jQuery. C'est LA structure que vous devrez utiliser dans 99% des cas pour coder en
jQuery dans votre page. Retenez-la par cur, parce que cela vous fera vraiment gagner du temps.
Et comment on peut vrifier que tout cela est fonctionnel ?
Vous pouvez simplement ajouter un console.log la place des commentaires dans le code ci-dessus pour voir si vous
recevez bien quelque chose dans votre console Firebug l'excution de ce code. Vous pouvez galement utiliser la mthode hard
en utilisant carrment un alert().
Vous pouvez vous y prendre comme ceci :
Code : JavaScript
/*
* Avec un console.log
*/
console.log("jQuery est prt !");
});
/*
* Avec un alert()
*/
alert("jQuery est prt !");
});
Essayez ce code !
Si vous avez un retour dans votre console ou dans votre navigateur, c'est tout bon !
Quoiqu'il en soit n'oubliez pas cette structure... d'ailleurs, on peut un peu la simplifier en ne spcifiant pas le ready() :
Code : JavaScript
/*
* La structure de base simplifie.
*/
jQuery(function(){
});
$() un alias de jQuery()
Vous savez tous qu'un programmeur, c'est par dfinition quelqu'un de trs fainant. Alors comme on a trouv que c'tait trop long
d'crire jQuery() pour appeler la fonction, on s'est dit qu'on allait crer un alias pour pouvoir l'appeler plus facilement. Ainsi, il
faut savoir que la fonction jQuery peut aussi s'appeller avec $(). Le reste du code reste exactement le mme.
Ainsi...
Code : JavaScript
jQuery(function(){
alert('jQuery est prt !');
});
... et...
Code : JavaScript
$(function(){
alert('jQuery est prt !');
});
... vont donner exactement le mme rsultat !
Notez par ailleurs que l'alias $() est vraiment le plus utilis sur le web, tout simplement parce qu'il est plus rapide crire. Ainsi,
dans la suite de ce cours nous utiliserons toujours l'alias $() pour les codes que nous vous fournirons. Vous feriez mieux de vous
aussi prendre l'habitude. Vous verrez, ce n'est pas trs compliqu, vous avez juste vous dire qu'il y a crit "jQuery" la place de
"$" !
viter le conflit
La plupart des bibliothques JavaScript utilisent elles aussi le $ (dollar), ce qui peut tre la source de conflit entre les diffrentes
librairies sur une mme page. Pour viter ce genre de problme, il est possible de passer la variable jQuery une fonction
anonyme pour tre sr que notre alias ne soit pas l'origine de conflits.
Code : JavaScript
(function($){
// notre code ici
})(jQuery);
Paralllement, ready() accepte galement un alias en paramtre de la fonction anonyme. Il est alors possible de simplifier le
code au maximum :
Code : JavaScript
jQuery(document).ready(function($){
// notre code ici
});
// ce code plus court revient au mme :
jQuery(function($){
// notre code ici
});
Le principe de fonctionnement
Comme nous venons de le voir, le framework met en place une fonction dite principale. Le principe de fonctionnement de jQuery
repose en fait entirement sur celle-ci ! Autant dire que vous allez vous servir beaucoup plus du caractre $ (dollar) ds prsent
!
Ainsi, pour agir avec les lments d'une page web, on ralisera ce qu'on appelle couramment un ciblage d'lment , qui
reprsentera une balise, par exemple. On agira ensuite dessus grce des mthodes. Pour que vous ayez un aperu, voici un
code fictif tout simple usant du principe de jQuery :
Code : JavaScript
$('monElement').maMethode();
Je cible dans un premier temps mon lment qui jouera le rle d'objet, grce un slecteur (chose que nous verrons plus en
dtails dans le prochain chapitre). Je peux ensuite agir dessus grce une mthode !
Mais c'est quoi une mthode ?
Une mthode en jQuery est une fonction un peu spciale qui agira directement sur l'objet (ou l'lment cibl, si vous prfrez)
indiqu. Le framework en possde beaucoup, mais il est possible de crer les ntres ! Nous verrons cela dans un chapitre ddi,
lorsque vous serez plus l'aise avec jQuery.
Il est possible de chaner les mthodes, c'est--dire que l'on peut en mettre plusieurs la suite, pour agir sur l'objet en une seule
fois.
Code : JavaScript
$('monElement').premiereMethode().deuxiemeMethode();
/* la premire mthode agit d'abord sur l'objet, avant la deuxime.
On a donc un ordre logique : les mthodes s'enclenchent les unes
derrire les autres */
Si vous avez assimil ce fonctionnement de base, vous avez fait le plus dur.
Bien sr, jQuery est bourr d'outils pour rendre la chose un peu plus vivante.
Vous devez commencer comprendre comment fonctionne concrtement le framework ! C'est une trs bonne chose, car nous
allons monter le niveau d'un cran, et voir les slecteurs dans le chapitre suivant.
Les slecteurs
jQuery a une syntaxe qui permet de slectionner trs facilement des lments sur la page, c'est un de ses plus grands points
forts. Mais, au-del des apparences, la slection de ceux-ci est plus complexe qu'il n'y parat. Les slecteurs en jQuery sont
toute une science que nous allons apprendre pas pas au cours de ce chapitre !
Les slecteurs de CSS
Avant de se lancer dans une foule de slecteurs propres jQuery tous plus compliqus les uns que les autres (non, on plaisante
), il est ncessaire de dbuter par des slecteurs plus basiques. En effet, le framework que nous tudions fonctionne tout
d'abord avec les slecteurs de CSS. Vous les connaissez surement, ou tout du moins la plupart, car vous tes cens connatre
un minimum la syntaxe du CSS pour suivre ce tutoriel.
Cela ne vous dit vraiment rien ?
Les slecteurs les plus utiliss
Peut-tre est-ce le mot slecteur qui vous fait peur. Dans ce cas-l, je pense que votre mmoire va se rafrachir si je vous parle
d'identifiant et de classe. Pour rappel, il est possible d'attribuer une classe ou un identifiant un lment HTML ; on s'en servira
par la suite pour le slectionner avec CSS, ce qui nous permettra de styliser l'lment.
Avec jQuery, vous pouvez trs bien utiliser ces slecteurs ! Ce sont mme ceux-ci qui reviendront le plus souvent dans vos
codes. Pour cela, il suffit de suivre simplement la syntaxe suivante, comme en CSS :
Code : JavaScript
$('p'); // je slectionne tous les paragraphes
$('.maClasse'); // je slectionne les lments ayant .maClasse pour
classe
$('#monId'); // je slectionne l'lment qui possde l'identifiant
#monId
Un identifiant est unique : plusieurs lments d'une seule page ne peuvent pas avoir le mme id !
Frres et parents
Parmi les slecteurs un peu plus complexes que les classes et les identifiants se trouvent les slecteurs de descendance. Ce mot
bizarrement employ dans un contexte tel que le ntre cache en fait un concept trs puissant de parcours. Vous n'tes surement
pas sans savoir qu'il est possible, en HTML, d'imbriquer des balises les unes dans les autres. Eh bien, ce systme fait usage de la
descendance !
Prenons un exemple concret. Je possde un paragraphe, dans lequel j'ai un lien absolu. Ma balise <a href="lien"></a>
est alors imbrique dans les balises <p></p> propres au paragraphe.
On dit que le paragraphe est un lment parent, et le lien un lment enfant.
Comprenez-vous le principe ? La balise parente mon lien est la balise qui contient celui-ci. Ainsi, de cette faon-l, la balise
<body> est parente de toute notre structure HTML !
CSS, et par extension, jQuery, permet de manipuler ce concept de descendance grce des slecteurs spciaux. Le plus connu
est sans doute le slecteur qui fait suivre deux lments au minimum :
Code : JavaScript
$('p .lien');
/* ici, nous slectionnons tous les lments ayant la classe .lien,
et contenus dans un paragraphe qui joue le rle de parent */
Le problme de cette mthode-ci est qu'elle prend en compte tous les lments possdant la bonne classe et contenus dans un
parent. Imaginez que vous ne vouliez slectionner que les lments qui descendent directement du bloc parent, c'est--dire qui
ne sont pas contenus une seconde fois dans un autre bloc. Dans ce cas-l, il vous faudra utiliser un slecteur un peu moins
connu, qui n'est autre que >.
Code : JavaScript
$('p > .lien');
/* ici, nous slectionnons seulement les lments ayant la classe
.lien,
et descendants directement du paragraphe ! */
Il est ensuite possible de pousser le systme encore plus loin, par exemple en utilisant les slecteurs + et ~ qui se chargent de
reprsenter les frres de l'lment. Ce qu'on appelle couramment les frres, dans ce contexte de jQuery, ce sont simplement les
lments qui se suivent directement, comme par exemple deux liens.
Code : JavaScript
$('.lien + .visite');
/* la slection s'effectue sur les lments ayant pour classe
.visite,
et qui sont immdiatement prcds d'un lment ayant pour classe
.lien */
$('.lien ~ .visite');
/* dans ce cas-l, ce sont tous les lments .visite,
prcds immdiatement ou non par un lment .lien */
Alors, pas trop compliqu ?
Jusque l, vous devriez avoir suivi assez facilement. Les slecteurs CSS sont une chose assez peu difficile assimiler, et si vous
avez du mal, pas de soucis avoir, cela viendra avec l'exprience. En attendant ce jour heureux, je vous invite passer aux
slecteurs propres jQuery !
Une slection plus pousse
Les slecteurs de CSS, c'est bien, mais des slecteurs plus sophistiqus ne seraient pas de refus ! En effet, pour les besoins des
dveloppeurs, jQuery met en place une slection d'lments beaucoup plus pousse que CSS. Comprenez bien que ce n'est pas
seulement avec des identifiants et des classes que nous pourrons tablir un vritable systme, ce serait le chaos total et
franchement peu pratique. C'est pourquoi jQuery a mis en place ce que l'on appelle des filtres, qui ont une syntaxe particulire :
deux points suivis du nom du slecteur. Vous en saurez plus en lisant la suite.
La place d'un lment
Parmis les trs nombreux slecteurs proposs par le framework figurent ceux qui permettent de slectionner un lment suivant
sa place sur la page. C'est quelque chose de vraiment pratique qui tait assez compliqu raliser avec du simple JavaScript. Les
plus utiliss et connus sont :
:first, qui slectionnera le tout premier lment donn ;
:eq(index), qui se chargera de retourner l'lment possdant l'index spcifi ;
:last, je pense que vous l'aurez vite compris, permettra de slectionner le dernier lment.
Ainsi, de cette faon, il vous suffira de taper ceci pour faire une slection sur le premier et/ou le dernier lment :
Code : JavaScript
$('p:first'); // slection du premier paragraphe trouv
$('a:last'); // ici, on slectionne le dernier lien de la page
L'index d'un lment
Cela peut vous paratre flou au premier abord, contrairement aux deux autres slecteurs. En effet, qu'est-ce que l'index d'un
lment ?
Eh bien, pour faire le plus simple possible, c'est le numro qui reprsente sa place dans la page. Ainsi, si vous possdez cinq
paragraphes, vous pourrez par exemple slectionner le troisime sans problme. Mais attention il y a un pige : il faut
commencer compter partir de 0. C'est trs important de retenir cela, le systme est similaire sur les tableaux, par exemple.
Alors quel chiffre taperez-vous pour retourner le troisime paragraphe ?
Secret (cliquez pour afficher)
Code : JavaScript
$('p:eq(2)'); // c'tait 2 !
Slection par attributs
Un autre type de slecteurs sont les slecteurs fonctionnant grce aux attributs des lments du DOM. Il est ainsi possible de
raliser de multiples actions sur les balises qui contiennent un attribut donn, tel qu'un identifiant ou une valeur :
Code : JavaScript
$('p[id]'); // retourne seulement les paragraphes ayant un
identifiant
Cibler d'autres faons
Heureusement, il est possible de prciser la requte. Imaginons que vous vouliez rcuprer les lments ayant une valeur
(value) ou un nom (name) bien prcis. Dans ce cas-l, il est possible de le dire jQuery grce la syntaxe suivante :
Code : JavaScript
$('input[name=pseudo]'); // cible seulement l'lment de formulaire
ayant pseudo pour nom
Si au contraire vous voulez cibler tous les autres lments, ceux qui n'ont pas la bonne valeur dans leur attribut, il suffit de
rajouter un point d'exclamation (!) devant le signe "gal" (=) :
Code : JavaScript
$('input[name!=pseudo]'); // retourne les lments n'ayant pas
pseudo pour nom
Le slecteur :not()
Un peu part, ce slecteur particulier permet de cibler les lments qui sont tout sauf ce qui a t indiqu l'intrieur. Il permet
donc une slection puissante, et, depuis jQuery 1.3, permet mme de spcifier plusieurs types de balises en mme temps ! Il
s'utilise trs facilement :
Code : JavaScript
$('p:not(.rouge)'); // slection de tous les paragraphes, sauf ceux
ayant .rouge comme classe
$('input:not(.bleu, .vert)'); // on slectionne tous les lments de
formulaire sauf ceux ayant .bleu et/ou .vert comme classe
Autant dire qu'en terme de praticit, ce slecteur vaut pas mal de points !
Sauver la slection
Il peut parfois se rvler pratique de sauvegarder un objet jQuery. Il est donc possible de rentrer une slection dans une variable,
cette dernire pouvant tre utilise la place de la fonction principale.
Code : JavaScript
var $element = $('monElement');
Par soucis de lisibilit et de comprhension, on fait prcder le nom de notre variable du caractre $. On sait ainsi
directement qu'on a affaire un objet jQuery.
Le cas des formulaires
Pour exploiter la pleine puissance des trs nombreux slecteurs de jQuery, il faut se pencher sur les formulaires en HTML. En
effet, l'interaction tant beaucoup plus prsente ces endroits, il est logique que le framework soit plus enclin les dynamiser.
Ainsi, la slection des lments de formulaire se fera d'une faon un peu diffrente, que nous allons commencer traiter tout de
suite.
Le type des lments
Comme vous le savez surement, les lments de formulaire peuvent changer de type selon ce que l'on veut en faire. La balise ne
change pas et reste la mme, on utilisera dans 90% des cas <input />. En changeant l'attribut type de la balise, il est
possible de spcifier que l'on veut une case cocher, un champ de texte, un bouton...
Suivant ce principe, on pourrait penser qu'il faut faire ceci en jQuery :
Code : JavaScript
$('input[type=button]'); // on slectionne un input de type button
Ce code fonctionne parfaitement, mais ce n'est pas la meilleure faon de procder ! Il y a plus simple, plus rapide et surtout plus
propre. Pour respecter cela, il faut indiquer le type, prcd de deux points :
Code : JavaScript
$('input:button'); // on slectionne un input de type button
Et vous pouvez ensuite faire ceci pour chaque type d'input !
Type Code
text (Texte) input:text
password (Mot de passe) input:password
file (Fichier) input:file
checkbox (Case cocher) input:checkbox
radio (Bouton radio) input:radio
button (Bouton normal) input:button
submit (Bouton d'envoi) input:submit
tat des lments
Dernire petite astuce avant de conclure ce chapitre, vous pouvez tablir une slection suivant l'tat des lments d'un
formulaire. Vous allez nous rpondre qu'il n'y a pas trente-six tats, justement, et vous avez effectivement raison. Neanmoins, ce
sont des slecteurs que nous retrouverons assez souvent, et nous pensons qu'il est intressant de les connatre.
Ainsi, vous pouvez vrifier qu'une case est coche, ou qu'un lment est activ/dsactiv, grce aux slecteurs suivants :
:checked vrifie qu'une case est coche ;
:disabled cible les lments dsactivs ;
:enabled fait le contraire, il slectionne les lments activs.
Le slecteur $(this)
Le slecteur le plus spcial est sans aucun doute $(this). Dans la plupart des langages orients objet, le mot-cl this
reprsente l'objet courant, celui qui est actuellement trait par une fonction, par exemple. jQuery permet la slection de cet objet.
Exemple avec ce code qui traite chaque lment trouv :
Code : JavaScript
$('p').each(function(){

$(this).html('Hello World !'); // $(this) reprsente le
paragraphe courant
});
Performance des slecteurs
Outre le fait de slectionner des lments avec jQuery, il ne faut pas ngliger le reste. Ainsi, tout bon dveloppeur sait que la
performance est un point primordial dans un code, de quelque langage soit-il issu. La librairie jQuery n'est pas exempt : il faudra
vous assurer que votre code est le plus rapide, le plus optimis et le plus ergonomique possible. Cela passe par une foule de
choses, mais nous allons en voir une seule ici : la performance des slecteurs.
Car oui, les slecteurs ne ciblent pas tous les lments la mme vitesse. Ainsi, cibler un lment par un identifiant, par exemple,
sera toujours plus rapide que cibler un lment par sa classe.
Les slecteurs les plus rapides
On note une certaine diffrence de rapidit lorsqu'il s'agit de cibler des lments de diffrentes faons. Le pourquoi est trs
simple : certains slecteurs profitent de fonctions natives implmentes par JavaScript, car ils en descendent directement. On
pensera donc notamment au slecteur par identifiant, qui est le plus rapide des slecteurs : c'est normal, il utilise directement la
fonction getElementById() !
Ainsi, on note une rapidit 5 fois suprieure au deuxime slecteur le plus rapide, qui est le slecteur par balise. Vient ensuite le
slecteur par classe, les autres enregistrant une forte baisse de performance l'utilisation.
Ces diffrences proviennent en fait du parcours du DOM : alors que l'identifiant, tant normalement unique, est cibl directement
par jQuery cause de sa singularit, les classes vont tre traites une une, en parcourant tout le document HTML pour les
trouver. Pour optimiser au maximum une requte par classe, il suffit de cibler tout d'abord le parent de l'lment avec un
identifiant :
Code : JavaScript
$('#menu .sections');
// slection plus rapide que :
$('.sections');
courter les chanes
Les slecteurs peuvent s'enchaner, afin de cibler plus prcisment des lments. Cette astuce possde un lourd inconvnient :
elle ralentit considrablement la vitesse de slection des lments du DOM. En effet, jQuery va devoir tout d'abord trouver le
premier lment, puis va devoir passer au deuxime, et ainsi de suite... Il est alors possible d'augmenter exponentiellement le
temps d'excution du code. Voyons l'exemple suivant :
Code : JavaScript
$('div p a');
$('#lien');
Ces deux ciblages sont identiques, pourtant, la premire slection est, en thorie, environ 15 fois plus lente que la deuxime ! En
effet, dans le premier cas, jQuery va parcourir chaque bloc div du document, pour ne retourner que ceux possdant un
paragraphe. Viennent ensuite ceux-ci, qui vont tre parcourus jusqu' trouver celui qui possde un lien. En revanche, dans le
second cas, le lien va tre cibl directement de part son identifiant unique !
Rappelez-vous donc d'une rgle essentielle lorsque vous utilisez jQuery : plus la chane de slecteurs est courte, plus rapide
sera la slection.
C'est la fin de ce chapitre ! Vous avez vu que les slecteurs de jQuery offrent de nombreuses possibilits de ciblages des
lments d'une page web, et ce n'est que le dbut de ce fabuleux framework ! Vous verrez dans le prochain chapitre comment
grer les vnements, o vous aurez besoin de mettre en pratique tout ce que vous venez de voir. Assurez-vous donc de bien
avoir compris !
jQuery et les vnements
En jQuery, vous aurez presque tout le temps travailler avec ce que l'on appelle des vnements, (events en anglais)... Nous
allons voir ce que c'est dans ce chapitre. Qui sont-ils ? A quoi vont-ils nous servir, surtout et comment les aborder dans notre
code jQuery ?
C'est vraiment un lment cl du framework, donc forcment, c'est un chapitre cl. Bonne nouvelle : c'est plutt simple
comprendre.
Go !
Un vnement, des vnements...
Voyons voir ici ce que sont les vnements... si vous tes assez l'aise avec JavaScript, cette sous-partie n'aura probablement
pas grand chose vous apprendre. Mais bien sr, lisez quand mme car vous tes en train de rapprendre JavaScript travers
jQuery !
C'est quoi un vnement ?
Pour expliquer la chose simplement, dites-vous qu'un vnement est une action remplie par le navigateur, ou plus gnralement
l'utilisateur. Vous connaissez les conditions ? Pour les vnements, c'est un peu le mme principe : on lance un bout de code
quand une action est remplie.
D'ailleurs ! Vous vous en tes peut-tre rendu compte, mais dans les chapitres prcdents, nous avons dj utilis un vnement,
le ready() ! Voyons le code que nous avions :
Code : JavaScript
$(document).ready(function(){
// Le code jQuery ici !
});
C'est la fonction de base de jQuery, vous vous souvenez ? Elle marche autour de l'vnement ready() qui coute le
chargement du document. L'coute d'un vnement, c'est tout simplement le fait d'attacher une action bien prcise remplir un
lment pour dclencher une fonction, appele couteur d'vnement.
"QUAND le document est PRT, on appelle une fonction (dans laquelle on va mettre du
jQuery)."
C'est le fonctionnement de ce code qui tourne autour de l'vnement ready() : tant que le document n'est pas charg, on ne
fait rien. Quand il est charg, on agit. Fort heureusement pour nous, jQuery peut couter plein d'vnements diffrents, on ne se
limitera pas qu' couter si notre page est charge ou non.
On aura par exemple un vnement qui pourra couter la souris de l'utilisateur : quand il va cliquer sur un certain lment
de votre page que vous aurez cibl avec un slecteur, vous pourrez excuter du code jQuery.
Un autre vnement peut couter le clavier de l'utilisateur : quand il va presser des touches de son clavier, vous pourrez
excuter l encore du code.
En gros, on peut dire qu'un vnement fait le lien entre une action remplie, et une fonction (du code) excute.
Encore une fois, si vous tes un habitu du JavaScript vous deviez connatre un peu tout a, si ce n'tait pas le cas, pas de
problme : maintenant vous connaissez le concept. JavaScript permettait de grer les vnements d'une certaine manire. Eh bien
devinez quoi ? En jQuery, c'est totalement diffrent ! Bon point : en JavaScript, grer des vnements ne se faisait pas du tout de
la mme manire d'un navigateur l'autre. Sachez que jQuery uniformise encore le tout !
La syntaxe en elle-mme est super simple, voyons ce que cela donne ici. Utilisons par exemple l'vnement click() qui est un
vnement coutant le clic de la souris.
Code : JavaScript
$("#uneDiv").click(function(){
// Le code a excuter !
});
Si on clique sur l'lment qui possde l'id #uneDiv (<div id="uneDiv"></div>), alors vous allez pouvoir dclencher du
code JavaScript. Plus tard, lorsque l'on sera un peu plus l'aise avec jQuery, on pourra par exemple dcider de faire disparatre
cette div (ou un autre lment !) avec un bel effet, ou mme commencer grer une requte AJAX pour mettre jour le contenu
de cette div... bref ! Les possibilits sont multiples.
Les vnements vous intressent et vous voulez aller plus loin, alors lisez donc la suite.
Quelques vnements incontournables
jQuery tant trs complet il va nous donner l'opportunit d'couter beaucoup d'vnements sur notre page web. Nous allons en
voir quelques uns ici, que nous pensons incontournables.
Dclenchement d'vnements
Parmis les nombreux vnements disponibles, les plus clbres sont sans aucun doute ceux pouvant tre dclenchs par
l'utilisateur. Ce sont eux qui permettent une trs grande interactivit avec le visiteur, c'est donc eux qui seront les plus utiliss en
gnral. Nous allons en voir quelques uns, ceux qui sont connatre absolument !
L'coute sur la souris
La souris d'un ordinateur est un outil qui permet l'utilisateur de raliser de multiples actions : cliquer, bouger, double-cliquer,
descendre dans une page... Bref, un paquet de mouvements prendre en compte. Ce qui est gnial avec jQuery, c'est que l'on va
pouvoir contrler entirement les actions du visiteur, et dclencher de multiples fonctions grce elles !
Vous connaissez sans doute dj click(), qui lance une fonction lors du clic de l'utilisateur sur l'objet associ. Nous vous
proposons ci-dessous une liste d'vnements adapts la souris ; le fonctionnement reste le mme.
Action Fonction
Clic click()
Double-clic dblclick()
Passage de la souris hover()
Rentrer dans un lment mouseenter()
Quitter un lment mouseleave()
Presser un bouton de la souris mousedown()
Relcher un bouton de la souris mouseup()
Scroller (utiliser la roulette) scroll()
L'coute sur le clavier
Tout comme la souris, le clavier peut tout fait tre cout par un script jQuery. L'utilisation la plus frquente que l'on peut en
faire est de dtecter l'appui d'une touche et de lancer une action seulement si la bonne t presse. Les vnements associs ne
sont pas trs nombreux, on en trouvera seulement trois :
keydown(), qui se lance lorsqu'une touche du clavier est enfonce ;
keypress(), qui se lance lorsqu'on maintient une touche enfonce ;
keyup(), qui se lance lorsqu'on relche une touche pralablement enfonce.
Pour connatre la touche enfonce par l'utilisateur, dans chaque cas, il vous faudra employer une fonction anonyme quipe d'un
argument reprsentant le code de la touche, sur lequel on appliquera la proprit keyCode. Cependant, le principal problme de
cette proprit est qu'elle ne fonctionne pas sur tous les navigateurs (souvenez-vous que ceux-ci ont des moteurs JavaScript
diffrents). Il faut donc ruser pour rendre notre code compatible tous navigateurs :
Code : JavaScript
$(document).keyup(function(touche){ // on coute l'vnement keyup()
var appui = touche.which || touche.keyCode; // le code est
compatible tous navigateurs grce ces deux proprits
if(appui == 13){ // si le code de la touche est gal 13
(Entre)
alert('Vous venez d\'appuyer sur la touche Entre !'); // on
affiche une alerte
}
});
Pour connatre le code d'une touche, je vous invite aller consulter cette page.
Le cas des formulaires
Les lments de formulaire possdent eux aussi leur lot d'vnements associs. Par exemple, lorsqu'un champ est focalis, on dit
qu'il prend le focus , car c'est sur lui que se trouve notre pointeur. Un vnement permet de contrler ce genre de chose.
Action Fonction
Focalisation focus()
Slection (p.e. dans une liste) select()
Changement de valeur change()
Envoi du formulaire submit()
Le dclenchement virtuel
jQuery permet de simuler le dclenchement d'vnements grce une simple mthode. Pour faire court, vous n'avez pas besoin
d'attendre que l'utilisateur remplisse une action prcise pour lancer du code : vous pouvez excuter virtuellement un vnement
grce trigger() ! Il suffit de donner le type de l'vnement en tant qu'argument.
Code : JavaScript
$('p').click(function(){
alert('Cliqu !');
});
$('p').trigger('click'); // dclenche l'action au chargement du
script
Annuler le comportement d'un lment par dfaut
Chaque vnement possde son propre groupe d'lments spcifiques traiter : par exemple, la soumission de formulaire ne
s'applique pas tous les cas. Cependant, certains lments ont un comportement par dfaut, dfini par le navigateur. Le cas le
plus courant est le lien hypertexte : son comportement va tre de rediriger l'utilisateur vers l'adresse donne.
Une mthode en jQuery permet d'annuler tous comportement par dfaut. Il s'agit de preventDefault().
Code : JavaScript
$('a').click(function(e){
e.preventDefault(); // annule l'action du lien
});
Les gestionnaires d'vnements
En jQuery, et mme plus globalement en JavaScript, on peut faire appel aux gestionnaires d'vnements. Ce sont des fonctions
auxquelles on donne un type d'vnement couter, ainsi qu'une fonction excuter chaque fois que l'vnement est
dclench. Elles sont plusieurs et nous allons les tudier car elles reprsentent une partie importante de ce chapitre, si ce n'est
LA plus importante !
Rappels
Si vous lisez ce cours, c'est que vous avez quand mme quelques notions en JavaScript. Dans un premier temps, rappelez-vous
la mthode que vous utilisiez pour couter un vnement. Il devait sans doute s'agir de addEventListener(), qui signifie
en franais ajouter un couteur d'vnement . Cette fonction prenait le plus souvent deux arguments : le premier indiquait le
type d'vnement couter, le second tait une fonction de retour excutant du code.
Un troisime paramtre pouvait tre dfini true ou false, et permettait d'utiliser soit la phase de capture, soit la phase de
bouillonnement.
L'coute en jQuery
Sachez qu'avec notre framework, il est possible de raliser la mme chose. L'coute d'un vnement se ralisera avec la mthode
bind() le plus souvent, mais la tendance s'inverse pour laisser place la fonction on(), recommande par les auteurs de
jQuery depuis la version 1.7 : c'est donc trs rcent. Comme chaque dveloppeur doit s'adapter au progrs, nous utiliserons la
seconde mthode dans la suite de ce chapitre, et plus gnralement de ce cours !
Quelle diffrence entre ces deux fonctions ? Pourquoi utiliser l'une, et plus l'autre ?
On note une diffrence majeure de flexibilit : nous allons voir juste aprs qu'il est possible de dlguer des vnements, de faire
vivre des vnements, et videmment d'couter des vnements. Dans les versions plus anciennes de jQuery, il fallait utiliser
trois mthodes diffrentes pour raliser ces choses-l. La mthode on() permet de les regrouper en une seule, elle est donc bien
plus pratique et ergonomique !
Prcdemment, vous avez vu comment dclencher un vnement simple. Les fonctions utilises n'taient en fait que des
mthodes simplifies, permettant aux dveloppeurs de ne pas crer chaque fois un gestionnaire. Nous allons voir prsent
l'coute, la vraie, d'vnements en jQuery.
Rappel : nous utilisons la mthode on().
Pour couter un vnement, il suffit de raliser le mme schma de code qu'avec addEventListener(). C'est--dire que l'on
va donner dans un premier temps le type d'vnement, puis la fonction de callback excuter :
Code : JavaScript
$('button').on('click', function(){
alert('Ce code fonctionne !');
});
Concrtement, ce code se lance de cette faon :
1. on cible un bouton ;
2. on initialise un gestionnaire d'vnement ;
3. on coute le clic de l'utilisateur ;
4. et on excute le code de la fonction de retour.
Un des avantages de cette technique est que l'coute peut se faire sur plusieurs vnements en mme temps, vous n'tes pas
oblig de crer un gestionnaire pour chacun d'eux ! Ainsi, nous pouvons lancer une coute sur le clic et sur le double-clic, en
sparant les deux types par un espace :
Code : JavaScript
$('button').on('click dblclick', function(){ // on coute le clic et
le double-clic !
alert('Ce code fonctionne !');
});
Passer par un objet
Encore plus fort, vous pouvez passer un objet en tant qu'argument cette mthode, afin d'excuter des fonctions diffrentes
pour chaque vnement ! Le concept est trs simple, il suffit de donner le type d'vnement en tant qu'identifiant, auxquel vous
attachez une fonction de retour chaque fois :
Code : JavaScript
$('button').on({
click : function(){
alert('Vous avez cliqu !');
},
mouseup : function(){
alert('Vous avez relch le clic !');
}
});
La dlgation d'vnements
Ce concept est plutt simple comprendre. Il permet en fait de crer un couteur d'vnements sur un lment, et de s'adapter
automatiquement aux lments similaires crs plus tard, de faon dynamique ! Pour que vous compreniez bien, imaginons que
vous ayez un paragraphe simple, sur lequel vous appliquez un vnement. Si vous crez d'autres paragraphes dans la page,
ceux-ci ne seront pas pris en compte par l'couteur !
Avant la version 1.7 du framework, il tait trs courant (et a l'est encore ajourd'hui) d'utiliser la mthode live(), pour dlguer
un vnement un lment cr dynamiquement. C'est une technique dprcie, pour la simple et bonne raison qu'elle devient
lente sur de grosses pages, et les problmes de performance sont trs mal vus des dveloppeurs. De mme, cette mthode
parcoure l'ensemble du document, contrairement on(), qui cible directement un lment ! On a donc une porte restreinte
pour une efficacit croissante : double gain de vitesse d'excution !
La fonction delegate() est presque autant utilise que live(). La diffrence entre ces mthodes est que la premire
fonctionne presque comme on(), et est donc plus propre et ergonomique. Elle n'est pas dprcie, contrairement sa cousine,
mais encore une fois, vous n'aurez pas l'utiliser.
La syntaxe pour dlguer un vnement est trs simple. Il faut donner trois arguments :
le type d'vnement ;
l'lment sur lequel on veut faire une dlgation ;
et la fonction de retour.
Code : JavaScript
$('div').on('click', 'p', function(){
alert('Les paragraphes crs peuvent tre cliqus !');
});
Egalement pour des raisons de performance, il est conseill de lancer la mthode sur le parent non dynamique le plus
proche des lments crs la vole.
Les espaces de noms
Trs utiles, les espaces de noms (namespaces dans la langue de Shakespeare) ont la capacit de dsigner un vnement bien
prcis. Le nommage d'vnement n'tant pas possible avec une fonction, les dveloppeurs de jQuery ont prfr mettre en place
ce systme. A utiliser avec les gestionnaires d'vnements, les espaces de noms ont une syntaxe bien particulire retenir :
event.namespace
event dsigne le type d'vnement qui doit subir un espace de nom.
Le point permet de faire la jonction avec l'espace de nom.
namespace dsigne le nom.
Grce un systme pareil, vous pourrez excuter diffrentes fonctions partir d'un mme type d'vnement. Il suffit de spcifier
l'espace de nom utiliser, et seule la fonction correspondante sera excute.
Code : JavaScript
$('button').on('click.nom', function(){
alert('Premier vnement');
});
$('button').on('click.prenom', function(){
alert('Second vnement');
});
$('button').trigger('click.nom'); // excute le clic, MAIS ne lance
que la premire alerte !
Quatre rgles doivent tre respectes lorsque vous utilisez les espaces de noms. Il ne faut pas en user n'importe comment, car ils
ne sont pas adapts chaque cas d'utilisation :
1.
il est possible de donner plusieurs espaces de noms un vnement ;
en revanche, il n'est pas possible d'appeler plusieurs espaces de noms d'un seul coup !
Exemple : on('click.nom.prenom', ...) dfinira en mme temps click.nom et click.prenom ;
mais trigger('click.nom.prenom') ne marchera pas.
2.
vous pouvez seulement prciser le type d'vnement, sans les espaces de noms, pour tous les dclencher en
mme temps ;
en revanche, il n'est pas possible de ne prciser qu'un espace de nom sans type d'vnement !
Exemple : trigger('click') dclenchera toutes les fonctions associes aux espaces de noms sur le clic ;
mais trigger('.nom') ne marchera pas.
La suppression en jQuery
S'il est possible d'couter un vnement avec on(), il doit tre galement possible de le supprimer ! Et en effet, la fonction
inverse cette mthode se nomme, de manire plutt logique, off(). Elle est assez puissante dans le sens o elle peut
supprimer tous les gestionnaires et couteurs mis en place prcdemment avec on(), de mme qu'on utilisait unbind() pour
annuler bind() ! Fort heureusement, ce n'est pas sa seule utilisation : un argument permet notamment de spcifier quel type
d'vnement il faut annuler.
Code : JavaScript
$('p').on('click', function(){
// du code ici
});
$('p').off('click'); // supprime tous les gestionnaires coutant le
clic
$('p').off(); // supprimer tous les gestionnaires de n'importe quel
vnement
Les vnements directs, mais aussi dlgus, ne seront plus couts.
Annuler la dlgation
La fonction inverse de live(), avant de passer off(), se nommait die(). De mme que pour sa soeur, cette mthode est
dprcie, on peut donc dire qu'il est temps pour die() de mourrir !
Si vous voulez supprimer tous les gestionnaires d'vnements dlgus seulement, il faut donner un second argument la
mthode, qui est l'lment cr dynamiquement. La valeur ** dsigne tous les lments qui profitent de la dlgation
d'vnements :
Code : JavaScript
$('body').on('click', 'p', function(){
// du code ici
});
$('body').off('click', 'p'); // supprime tous les gestionnaires
d'vnements dlgus sur les paragraphes
$('body').off('click', '**'); // supprime tous les gestionnaires
d'vnements dlgus
Vous avez vu, les vnements n'taient pas difficiles comprendre, et en plus de a, c'est plutt simple d'en exploiter toute la
puissance dans notre code jQuery. Peut-tre les gestionnaires vous ont-ils donn du fil retordre ? Si c'est le cas, prenez bien le
temps de relire cette petite partie, car ils sont trs utiliss !
Les bases du framework se mettent de plus en plus en place dans votre tte, et c'est une trs bonne chance. Bientt vous serez
tonnez de ce qu'il est possible de faire avec votre site web ! La prochaine tape : la manipulation de votre code CSS. Modifier
des lments de votre design dynamiquement, un rve inavou ?
Manipuler le code CSS avec jQuery
La manipulation du code CSS en jQuery se fait de manire rapide et efficace. En effet, il est possible d'accder toutes les
proprits existantes, et plus encore, comme rcuprer des donnes stylisantes. Les diffrentes positions sont galement une
part importante de la modification du style par jQuery ; ce chapitre sera ddi l'tude de tout cela.
Une mthode puissante : css()
Parmis les nombreuses mthodes de jQuery, il en est une que vous utiliserez trs souvent en ce qui concerne la modification du
style de vos pages. Il s'agit de la mthode au nom trs loquent : css().
Rcuprer la valeur d'une proprit
La mthode css() peut prendre plusieurs sortes d'arguments. Le plus simple est de spcifier le nom de la proprit, afin de
rcuprer sa valeur. Imaginez que vous ayez un paragraphe dont le texte est de couleur verte. Pour rcuprer cette donne, vous
devrez faire ceci en jQuery :
Code : JavaScript
$('p').css('color'); // ma mthode ira chercher la valeur de la
proprit "color" et retournera "green"
Dfinition de proprits CSS
Vous vous doutez bien que s'il est possible de rcuprer la valeur d'une proprit CSS spcifique, il est aussi possible d'en dfinir
et d'en modifier. Pour cela, il suffit de passer un deuxime argument la mthode, qui contiendra la valeur donner l'attribut :
Code : JavaScript
$('p').css('color', 'red'); // ma mthode modifiera la proprit
"color" et la dfinira "red"
Cela crasera l'ancienne valeur s'il y en avait une !
Il est galement possible de dfinir plusieurs proprits CSS en mme temps, grce un objet JavaScript que l'on passera en tant
qu'argument. Il suffira de sparer les diffrents attributs par une virgule :
Code : JavaScript
$('p').css({
color : 'red', // couleur rouge
width : '300px', // largeur de 300px
height : '200px' // hauteur de 200px
});
Une chose est retenir pour cette troisime faon de faire : il ne faut pas oublier que les tirets ne sont pas accepts dans les
identifiants d'un objet ! Pour parer ce problme, il vous faut soit mettre la premire lettre de chaque mot en majuscule, sans
sparer ceux-ci, soit mettre le nom de la proprit entre guillemets ou apostrophes :
Code : JavaScript
$('p').css({
borderColor : 'red', // bordure rouge
paddingRight : '30px', // marge intrieure de 30px
'margin-left' : '10px' // marge extrieure de 10px
});
La proprit float doit tre mise entre guillemets ou apostrophes, car c'est un mot-cl en JavaScript ! Il risque donc
d'y avoir un conflit si vous ne le faites pas.
Positionner des lments
La position des lments d'une page web peut se dfinir avec la mthode css(), en modifiant les proprits left, top,
right et bottom. Paralllement, des mthodes en jQuery permettent de faire ceci de manire plus propre :
offset(), qui dfinit la position d'un lment par rapport au document, c'est donc une position absolue ;
position(), qui dfinit la position d'un lment par rapport son parent, c'est donc une position relative.
Ces mthodes ne fonctionnent qu'avec deux objets, qui sont left (axe horizontal ) et top (axe vertical ). Souvenez-vous que les
donnes ont pour origine le coin en haut gauche de la page. Ainsi, pour rcuprer la valeur de la position d'un lment :
Code : JavaScript
$('p').offset().left; // retourne la valeur "left" de l'lment
(position absolue)
$('p').position().top; // retourne la valeur "top" de l'lment
(position relative)
Modifier la position d'un lment
Il est possible de spcifier une nouvelle position un lment, en passant par les mthodes prcdentes. Il suffit de passer un
objet en tant qu'argument, en donnant les nouvelles valeurs (en pixels) aux identifiants left et top :
Code : JavaScript
$('p').offset({
left : 30,
top : 200
});
$('p').position({
left : 200
});
Chaque mthode transforme l'objet donn (l'lment de la page web), et lui dfinit automatiquement une position absolue ou
relative.
Grer les dimensions
De mme que pour les positions d'un lment, les dimensions peuvent tre gres directement avec css(). Cependant,
plusieurs autres mthodes sont trs pratiques pour grer la hauteur et la largeur d'un bloc. Il s'agit des fonctions suivantes :
height(), qui retourne la hauteur formate en pixels ;
width(), qui fait la mme chose avec la largeur ;
innerHeight() et innerWidth(), qui prennent en compte les marges intrieures ;
outerHeight() et outerWidth(), qui prennent en compte les marges intrieures et la bordure d'un lment.
Le box model est un concept connatre lorsque l'on manipule les dimensions avec jQuery. Conrtement, il faut retenir qu'il y a
plusieurs types de largeur et d'hauteur. Les marges intrieures, les bordures et les marges extrieures sont des lments prendre
en compte, et c'est pourquoi jQuery a cr plusieurs mthodes pour rpondre ce systme.
Mais comment prendre en compte les marges extrieures ?
Pour cela, il faut passer la valeur true aux mthodes outerHeight() et outerWidth().
Code : JavaScript
$('p').height(); // retourne la hauteur stricte du paragraphe
$('p').innerWidth(); // retourne la largeur (avec marges
intrieures) du paragraphe
$('p').outerWidth(); // retourne la largeur (avec marges intrieures
+ bordures) du paragraphe
$('p').outerHeight(true); // retourne la hauteur (avec marges
intrieures + bordures + marges extrieures) du paragraphe
Le style CSS d'une page web est facilement modifiable, et il est possible de raliser d'excellentes choses si on couple ce systme
avec les vnements. Si vous n'avez pas tout fait compris le chapitre, nous vous invitons le relire, car c'est une part
importante de jQuery.
Le prochain chapitre sera sous forme de TP : vous allez enfin pouvoir mettre en pratique vos nouvelles connaissances !
TP : le formulaire interactif
Bienvenue dans votre premier Travail Pratique !
Cela va tre l'occasion pour vous de mettre en pratique tout ce que vous venez d'apprendre travers les chapitres de cette partie
sur les bases de jQuery. Prparez-vous bien, et n'hsitez pas relire les chapitres que vous n'avez pas compris. Vous allez vous
charger de crer un formulaire interactif !
Explications et pr-requis
Le but de ce travail pratique est de raliser un formulaire interactif, que l'on animera grce jQuery. Ce sera un formulaire trs
basique, avec quatre ou cinq champs au maximum, qui verront leur style CSS changer suivant l'action de l'utilisateur. Le but est
en fait de vrifier les informations entres : nombre de caractres, vrifier que la confirmation du mot de passe est identique
celui-ci, vrifier si tous les champs sont remplis, etc.
Objectif concret
Ce formulaire devra contenir quatre champs :
un champ text pour le pseudonyme ;
un champ password pour le mot de passe ;
un deuxime champ password pour la confirmation du mot de passe ;
et un dernier champ text pour ce que vous voulez, comme l'adresse e-mail par exemple.
De mme, deux boutons devront permettre respectivement d'envoyer les donnes, et de vider les champs. Pas de langage
serveur pour ce TP : tout devra se drouler dans le ct client. videmment, vous devrez vous assurer par la suite, lorsque vous
coderez pour des projets destins au grand public, que les donnes sont bonnes du ct serveur, c'est trs important car le
JavaScript peut tre contourn !
Pour le moment, le but est juste de vous faire pratiquer. Vous devrez vous assurer que l'utilisateur rentre les bonnes infos, de la
bonne manire :
tous les champs devront contenir au moins 5 caractres ;
le mot de passe et la confirmation devront tre bien sr identiques ;
si les champs sont vides lors de l'envoi, on affiche un message d'erreur.
Pour indiquer l'erreur au visiteur, il vous suffira d'utiliser CSS : une bordure de champ de couleur rouge ferait par exemple l'affaire.
De la mme manire, si le champ est bon, vous pourriez changer la couleur du champ adquat en vert.
Mthodes requises
Pour pouvoir raliser cela, vous allez devoir user des vnements, vous ne pourrez rien faire sans. De mme, la manipulation du
CSS doit tre matrise afin de pouvoir animer les champs. N'oubliez pas que vous devez traiter tous les cas, car il ne faut jamais
faire confiance l'utilisateur.
Pour rcuprer le contenu d'un champ, vous devrez utiliser une mthode que nous n'avons pas encore traite : val(). La
proprit length vous permettra, elle, de rcuprer la longueur d'une chane de caractre.
Nous vous donnons la structure HTML que nous utilisons, mais absolument rien ne vous empche de crer la votre !
Code : HTML
<div id="erreur">
<p>Vous n'avez pas rempli correctement les champs du formulaire
!</p>
</div>
<form>
<label for="pseudo">Pseudonyme</label> <input type="text"
id="pseudo" class="champ" /><br /><br />
<label for="mdp">Mot de passe</label> <input type="password"
id="mdp" class="champ" /><br /><br />
<label for="confirmation">Confirmation</label> <input
type="password" id="confirmation" class="champ" /><br /><br />
<label for="mail">E-mail</label> <input type="text" id="mail"
class="champ" /><br /><br />
<input type="submit" id="envoi" value="Envoyer" /> <input
type="reset" id="rafraichir" value="Rafrachir" />
</form>
Le bloc contenant le message d'erreur DOIT tre invisible par dfaut : nous vous suggrons d'utiliser la proprit
display : none.
Correction
Alors, avez-vous russi ?
Nous vous proposons une correction. Si vous n'avez pas russi obtenir quelque chose de correct, nous vous conseillons
vivement d'tre attentif la correction, vous comprendrez ainsi vos erreurs, et ne les referez plus (n'est-ce pas ? ).
La structure HTML que nous avons utilis est la suivante, pour rappel :
Code : HTML
<div id="erreur">
<p>Vous n'avez pas rempli correctement les champs du formulaire
!</p>
</div>
<form>
<label for="pseudo">Pseudonyme</label> <input type="text"
id="pseudo" class="champ" />
<label for="mdp">Mot de passe</label> <input type="password"
id="mdp" class="champ" />
<label for="confirmation">Confirmation</label> <input
type="password" id="confirmation" class="champ" />
<label for="mail">E-mail</label> <input type="text" id="mail"
class="champ" />
<input type="submit" id="envoi" value="Envoyer" /> <input
type="reset" id="rafraichir" value="Rafrachir" />
</form>
Formulaire basique, contenant quatre champs et deux boutons, prcd d'un bloc invisible contenant un message d'erreur. La
suite tait plutt simple : il ne fallait surtout pas oublier d'inclure le fichier du framework, sinon vous ne pouviez pas utiliser
jQuery :
Code : HTML
<div id="erreur">
<p>Vous n'avez pas rempli correctement les champs du formulaire !</p>
</div>
<form>
<label for="pseudo">Pseudonyme</label> <input type="text" id="pseudo"
class="champ" />
<label for="mdp">Mot de passe</label> <input type="password" id="mdp"
class="champ" />
<label for="confirmation">Confirmation</label> <input type="password"
id="confirmation" class="champ" />
<label for="mail">E-mail</label> <input type="text" id="mail" class="champ"
/>
<input type="submit" id="envoi" value="Envoyer" /> <input type="reset"
id="rafraichir" value="Rafrachir" />
</form>

<script
Le reste, c'tait faire au niveau du jQuery !
Explications du code jQuery
La premire des choses laquelle penser tait de s'assurer que le document tait charg. Pour cela, vous deviez utiliser
l'vnement ready(), comme appris au dbut de cette partie.
Code : JavaScript
// notre code ici
});
Une des bonnes pratiques adopter est de mettre vos objets jQuery dans des variables. Cela n'est pas obligatoire, mais a
permet un gain d'optimisation consquent, ainsi qu'une plus grande lisibilit dans le code. En suivant cela, il fallait dterminer
quels lments slectionner :
le champ du pseudonyme ;
les champs du mot de passe et de la confirmation ;
le champ de l'e-mail ;
le bouton d'envoi ;
le bouton de rafrachissement du formulaire ;
le message d'erreur ;
et enfin tous les champs en gnral (ceux ayant la classe .champ).
Code : JavaScript

var $pseudo = $('#pseudo'),
$mdp = $('#mdp'),
$confirmation = $('#confirmation'),
$mail = $('#mail'),
$envoi = $('#envoi'),
$reset = $('#rafraichir'),
$erreur = $('#erreur'),
$champ = $('.champ');
});
Le plus facile tant fait, je vous propose ensuite de dterminer quel vnement vous deviez utiliser. La bonne faon de faire tait
d'couter le clavier de l'utilisateur, grce l'vnement keyup(), et ce sur chaque champ du formulaire. Il suffisait ensuite de
vrifier avec une condition que la longueur de la chane de caractre tait suprieure 5, grce la mthode val() et la
proprit length que nous vous avions donns :
Code : JavaScript
// le code prcdent se trouve ici
$champ.keyup(function(){
if($(this).val().length < 5){ // si la chane de caractres est
infrieure 5
$(this).css({ // on rend le champ rouge
borderColor : 'red',
color : 'red'
});
}
else{
$(this).css({ // si tout est bon, on le rend vert
borderColor : 'green',
color : 'green'
});
}
});
Le principe tait similaire pour vrifier que la confirmation et le mot de passe tait identique :
Code : JavaScript
$confirmation.keyup(function(){
if($(this).val() != $mdp.val()){ // si la confirmation est
diffrente du mot de passe
color : 'red'
});
}
else{
color : 'green'
});
}
});
Nous devons maintenant nous occuper des boutons d'envoi et de rafrachissement. Dans le premier cas, il faut vrifier chaque
champ un un, pour voir si l'un d'entre eux est vide. Si c'est effectivement le cas, il faudra l'indiquer l'utilisateur en affichant le
message d'erreur, et galement en rendant rouge le champ vide.
Il y a plusieurs faons d'y parvenir, et celle que nous utiliserons ici n'est pas la meilleure. Il existe une mthode spcialement
adapte pour traiter chaque lment trouv un un, mais nous ne vous avons pas encore appris comment l'utiliser. A la place,
vous pouviez crer une fonction qui se chargeait de vrifier que le champ donn n'tait pas vide :
Code : JavaScript
function verifier(champ){
if(champ.val() == ""){ // si le champ est vide
$erreur.css('display', 'block'); // on affiche le message
d'erreur
champ.css({ // on rend le champ rouge
color : 'red'
});
}
}
En coutant le clic sur le bouton d'envoi, on pouvait ensuite lancer la fonction de vrification sur chaque champ :
Code : JavaScript
$envoi.click(function(e){
e.preventDefault(); // on annule la fonction par dfaut du
bouton d'envoi
// puis on lance la fonction de vrification sur tous les
champs :
verifier($pseudo);
verifier($mdp);
verifier($confirmation);
verifier($mail);
});
Le reste tait simplissime. Il fallait couter le clic sur le bouton de rafrachissement, et annuler tous les styles CSS sur le
formulaire :
Code : JavaScript
$reset.click(function(){
$champ.css({ // on remet le style des champs comme on l'avait
dfini dans le style CSS
borderColor : '#ccc',
color : '#555'
});
$erreur.css('display', 'none'); // on prend soin de cacher le
message d'erreur
});
Et voil, nous avons dsormais termin ! Avouez que ce n'tait tout de mme pas sorcier.
Code : JavaScript

var $pseudo = $('#pseudo'),
$mdp = $('#mdp'),
$confirmation = $('#confirmation'),
$mail = $('#mail'),
$envoi = $('#envoi'),
$reset = $('#rafraichir'),
$erreur = $('#erreur'),
$champ = $('.champ');
$champ.keyup(function(){
if($(this).val().length < 5){ // si la chane de caractres
est infrieure 5
color : 'red'
});
}
else{
color : 'green'
});
}
});
$confirmation.keyup(function(){
if($(this).val() != $mdp.val()){ // si la confirmation est
diffrente du mot de passe
color : 'red'
});
}
else{
color : 'green'
});
}
});
$envoi.click(function(e){
e.preventDefault(); // on annule la fonction par dfaut du
bouton d'envoi
// puis on lance la fonction de vrification sur tous les
champs :
verifier($pseudo);
verifier($mdp);
verifier($confirmation);
verifier($mail);
});
$reset.click(function(){
$champ.css({ // on remet le style des champs comme on
l'avait dfini dans le style CSS
borderColor : '#ccc',
color : '#555'
});
$erreur.css('display', 'none'); // on prend soin de cacher
le message d'erreur
});
function verifier(champ){
if(champ.val() == ""){ // si le champ est vide
$erreur.css('display', 'block'); // on affiche le message
d'erreur
champ.css({ // on rend le champ rouge
color : 'red'
});
}
}
});
Le code entier faisant moins de 100 lignes, autant vous dire que si vous n'aviez utilis que du JavaScript pur, vous en auriez eu
au moins le double ! C'est ce moment l qu'on se rend compte de l'efficacit de jQuery. Nous esprons que ce TP vous aura
permis de progresser, car la pratique est le meilleur moyen pour obtenir un certain niveau.
Amliorations
Ce formulaire peut encore tre amlior, dans le sens o vous pourriez restreindre encore plus les possibilits de l'utilisateur, en
interdisant de dpasser un certain nombre de caractres dans le pseudo, par exemple. De mme, le style est pour l'instant ultra
basique, rien ne vous empche de le sophistiquer, pour que l'exprience utilisateur soit pousse son maximum.
Quelques amliorations au niveau de la scurit pourraient tre apportes :
vous pourriez vrifier le format de l'adresse e-mail, grce une expression rgulire, faite avec l'objet Regex de JavaScript
;
vous auriez pu galement vrifier que le mot de passe tait sr, en faisant par exemple un mini-indicateur de sret qui se
baserait sur le nombre de caractres, leur diversit, ...
il est possible d'afficher un message d'aide pour chaque champ, lorsque l'utilisateur tape du texte dans ceux-ci ;
...
Le formulaire tant trs basique, des champs auraient eu leur place, comme le sexe, l'ge, la localisation ou mme le prnom.
Essayez de faire cela vous-mme, cela ne sera que bnfique et positif pour votre apprentissage, croyez-nous !
Ce TP ne vous a-t-il pas trop fatigu ? Non ? Tant mieux, car la suite va tre encore pire !
La prochaine partie sera consacre la manipulation du code HTML la vole, directement dans la page, grce aux fonctions de
parcours, aux attributs et la manipulation du DOM. Vous verrez galement comment matriser l'animation de vos lments avec
jQuery, ce qui est une trs bonne chose quand on sait que c'est l'un des plus gros points forts du framework ! Trve de
bavardage, nous vous invitons passer la suite, pour que vous puissiez subir un nouveau TP le plus vite possible.
Partie 3 : Manipulation du DOM et animations
La manipulation du DOM se fait d'une manire adapte en jQuery. Nous allons en voir les diffrents aspects, et nous traiterons
galement l'animation, une part extrmement utilise par la majorit des dveloppeurs en jQuery !
Des effets sur votre site avec jQuery !
Vous voil dans la troisime partie !
Nous allons passer la vitesse suprieure, car vous avez les bases en jQuery. Dans cette partie, nous verrons comment parcourir
le DOM, modifier le code HTML la vole, et comment animer concrtement votre site web. Cette dernire chose sera tudie
dans ce chapitre, avec ce qu'on appelle les effets.
Animez vos lments
Une des plus puissantes fonctionnalits de jQuery est sans doute l'animation. En effet, le framework vous permet de lancer des
effets sur absolument tout et n'importe quoi. Mais concrtement, comment cela se passe-t-il ? Le mcanisme est en fait trs
simple si on l'aborde de manire thorique : c'est simplement une proprit CSS qui se droulera pendant un interval de temps,
donn en millisecondes.
Une mthode native de jQuery permet de grer l'animation des lments : il s'agit de animate().
Des animations personnalises
La mthode animate() est trs puissante dans le sens o elle peut recevoir une foule d'arguments diffrents. Le principe
d'utilisation le plus frquent que vous aurez appliquer est de passer un objet la mthode, contenant les proprits CSS
animer. Oui, vous l'aurez de suite compris : c'est la mme chose que pour la mthode css() !
La diffrence avec cette dernire mthode, c'est que animate() peut dfinir en plus :
duration : le temps de droulement de l'animation, toujours en millisecondes ;
easing : la faon d'acclerer de l'animation, c'est--dire comment va-t-elle voluer au cours du temps ;
complete : et enfin une fonction de callback, qui est l'action appele lorsque l'animation est termine.
Ces arguments sont facultatifs ; par dfaut, ils sont rgls respectivement normal, swing et null. Nous verrons plus tard
ce que ces valeurs signifient, et comment les modifier.
Code : JavaScript
$('p').animate({
width : '150px',
fontSize : '35px', // ne pas oublier la syntaxe de
l'identifiant !
marginTop : '50px'
});
Lors du lancement de cette animation, mon paragraphe s'largira, se dplacera par rapport la hauteur du document, et verra sa
taille de police se fixer 35px.
duration : le temps de droulement
Le temps de droulement d'une animation est un facteur important : en effet, si votre animation est trop rapide, l'utilisateur risque
de ne pas la voir. D'un autre ct, si elle est trop lente, il s'ennuiera et trouvera votre site web lourd et sans intrt. Il va donc
vous falloir trouver la bonne dure pour lancer votre animation. Cela dpendra notamment de son ampleur sur le visiteur : par
exemple, si vous faites disparatre un sous-menu, cela sera plus rapide que si vous agrandissez un paragraphe de faon
gigantesque. Il faut vous adapter.
L'argument peut prendre deux types de valeur : une chane de caractre (string) ou un nombre entier (int), qui reprsentera le
temps en millisecondes (nous insistons l-dessus, beaucoup de dbutants font l'erreur). La chane de caractre ne peut tre
qu'un de ces trois mots :
slow, qui quivaut une dure de 600 millisecondes ;
normal, la valeur par dfaut, qui est gale 400 millisecondes ;
et fast, qui reprsente une dure de 200 millisecondes seulement.
Code : JavaScript
Partie 3 : Manipulation du DOM et animations 49/150
$('p').animate({
width : '150px'
}, 'fast'); // premier exemple avec la valeur fast (200ms)
$('p').animate({
width : '150px'
}, 1000); // second exemple avec 1000ms (= 1s)
easing : l'volution de l'animation
L'volution de l'animation est la faon dont va se drouler celle-ci : est-ce qu'elle va aller de plus en plus vite au cours du temps ?
Va-t-elle rester constante ? Actuellement, jQuery ne propose malheureusement que deux faons de drouler l'animation :
swing, qui est la valeur par dfaut, fait aller l'animation de plus en plus vite au cours du temps, et ralentit la fin ;
linear, qui force l'animation se drouler la mme vitesse durant toute l'opration.
Pour user de plus de fonctions, il faudra passer par un plugin externe tel que jQuery UI. Nous apprendrons plus tard comment les
mettre en place.
Code : JavaScript
$('p').animate({
width : '150px'
}, 'linear'); // l'animation se droulera de faon linaire
complete : la fonction de retour
La fonction de retour, plus communment appele callback, est une action qui se lancera une fois l'animation termine. Il suffit
de donner une fonction anonyme en guise d'argument :
Code : JavaScript
$('p').animate({
width : '150px'
}, function(){
alert('Animation termine !');
});
La fonction de retour se lancera autant de fois qu'il y a d'lments anims sur la page : si par exemple vous avez trois
paragraphes et que vous lancez le code ci-dessus, trois alertes s'afficheront.
Deux arguments supplmentaires : step et queue
Ces deux arguments, step et queue, ne peuvent tre modifis qu'avec une certaine manire de rgler les arguments de la
mthode animate(). Ils ne sont pas directement accessibles : il vous faudra passer par un objet comme second argument.
Passer par un objet
Vous savez que le premier argument de la mthode est un objet, contenant chaque proprit animer. Ce qui est intressant, c'est
que les autres arguments peuvent se trouver sous forme d'objet eux aussi. Ainsi, ces deux animations feront exactement la mme
chose :
Code : JavaScript
$('p').animate({
width : '150px'
}, 1000, 'linear', function(){
});
// ce code est gal celui-ci :
$('p').animate({
width : '150px'
}, {
duration : 1000,
easing : 'linear',
complete : function(){
}
});
Ainsi, vous pourrez aussi agir sur les deux arguments step et queue :
step lancera une fonction chaque tape de l'animation, c'est--dire chaque proprit CSS traite ;
queue dterminera si une animation doit se terminer avant d'en lancer une seconde, et prendra un boolen en tant que
valeur.
Le second argument est utile si vous avez un chanage d'animation ou plusieurs animations la suite ; si vous voulez les lancer
toutes en mme temps, vous devrez mettre la valeur false : ainsi, les mthodes n'attendront pas la fin de la prcdente avant de
se lancer. Dans le cas contraire, queue devra tre dfini true.
Code : JavaScript
$('p')
.animate({
width : '150px'
}, {
duration : 1000,
queue : false
})
.animate({
fontSize : '35px'
}, 1000);
// les deux animations se lanceront en mme temps
Dfinition directe d'attributs
Il est possible que vous vouliez attribuer une acclration diffrente chaque proprit CSS anime. C'est tout fait possible de
faire cela depuis la version 1.4 du framework ! On utilisera en gnral la premire faon de faire, mais sachez qu'il en existe
deux : on peut passer par un tableau (array) ou une proprit dans le second argument (object).
Pour la premire mthode, vous devrez donner la nouvelle valeur de la proprit CSS dans un tableau, suivie du type
d'acclration (swing ou linear pour le moment).
Code : JavaScript
$('p').animate({
fontSize : ['50px', 'linear'], // cette proprit s'animera de
faon linaire
width : '200px' // les autres s'animeront de la faon dfinie
ensuite : swing
}, 'swing');
La seconde mthode est un peu plus complique mettre en place, dans le sens o vous devrez donner un objet un identifiant
d'un objet (qui, rappelons-le, est lui-mme un argument de la mthode d'animation). La proprit dfinir se nomme
specialEasing :
Code : JavaScript
$('p').animate({
fontSize : '50px',
width : '200px'
},
{
easing : 'swing'
specialEasing : { // on dfinit la proprit
fontSize : 'linear' // puis on liste toutes les proprits
CSS dans un objet en donnant leur volution
}
});
Astuces et cas spciaux
Il nous reste encore quelques petites choses mettre au point avant de passer la suite. En effet, nous n'avons pas encore parl
de certaines pratiques, qui mritent pourtant une place dans ce tutoriel.
Animer les couleurs
Vous l'aurez peut-tre remarqu si vous avez test quelques codes de votre ct, jQuery ne permet pas encore de traiter les
animations sur les couleurs. C'est bien dommage, car elles sont un lment important du style d'une page web. Pas de panique,
car un dveloppeur jQuery a cr un petit plugin open-source (sources libres) permettant de faire cela.
Nous vous invitons le tlcharger cette adresse (fichier jquery.color.js inclure dans votre page). Une fois inclus,
vous pourrez animer toutes les couleurs de n'importe quelle proprit :
Code : JavaScript
$('p').animate({
color : 'red',
backgroundColor : 'green'
});
Ajout de valeurs
Une astuce trs pratique en jQuery, c'est qu'il est possible d'ajouter une valeur une proprit CSS. Le principe est similaire
l'ajout de valeur en JavaScript : vous devez passer par les prfixes += ou -=.
Cela ne fonctionne qu'avec les donnes qui sont des nombres entiers (int).
Code : JavaScript
$('p').animate({
width : '+=50px', // ajoute 50px la largeur
height : '-=20px' // enlve 20px la hauteur
});
Animer les barres de dfilement
En CSS, il est impossible d'agir sur les barres de dfilement. C'est diffrent en JavaScript, et surtout en jQuery, qui met un point
d'honneur pouvoir les animer ! Les deux proprits influencer sont donc les suivantes :
scrollTop, qui agit sur la barre de dfilement verticale ;
scrollLeft, qui agit sur la barre horizontale (si elle existe).
Elles s'animent exactement de la mme faon que les autres proprits.
Les trois tats additionnels
Pas vraiment utiliss ni trs connus, ces trois tats ne sont autres que show, hide et toggle. Pourquoi disons-nous qu'ils ne
sont pas trs utiliss ? Parce que des mthodes spciales existent, et sont bien plus rapides mettre en place pour avoir le mme
rsultat.
Nanmoins, nous pensons que vous pouvez en avoir parfois l'utilit. Et si ce n'est pas le cas, un peu de culture ne vous fera pas
de mal, n'est-ce pas ?
Ces tats permettent d'agir seulement sur la proprit qui les utilise. Concrtement, ils ralisent ces actions :
show affiche la proprit ;
hide se charge de la cacher ;
toggle, lui, va faire la navette entre les deux : si la proprit est cache, il l'affiche, et vice versa.
Ils s'utilisent donc de cette faon :
Code : JavaScript
$('p').animate({
width : 'show' // anime la largeur pour afficher le paragraphe
});
$('p').animate({
width : 'hide' // anime la largeur pour cacher le paragraphe
});
$('p').animate({
width : 'toggle' // anime la largeur pour cacher ou afficher le
paragraphe
});
Les effets natifs
Certains puristes nous diront qu'on ne peut pas parler de nativit avec un framework, car ce n'est pas un langage proprement
parl. Nanmoins, jQuery est tellement part et redfinit tellement de notions que nous pensons pouvoir nous permettre de faire
ce petit abus de langage.
Maintenant que c'est clair, vous vous posez surement une question : que sont les effets natifs de jQuery ?
Le retour des trois tats
Nous avions parl brivement des trois tats show, hide et toggle, qui pouvaient tre utiliss avec les proprits CSS
directement dans la mthode animate(). C'tait bien jusqu' maintenant, mais sachez que des mthodes spciales existent
justement pour faire cela !
Comme vous l'aurez surement devin, il s'agit des fonctions :
show() ;
hide() ;
et toggle().
Ces mthodes fonctionnent toutes de la mme faon, et prennent le mme type d'arguments : duration, qui est, pour rappel, la
dure de droulement en millisecondes, et complete, l'ternelle fonction de retour. Ils sont facultatifs.
Code : JavaScript
$('p').hide('slow'); // cache le paragraphe en 600ms
$('p').show('fast', function(){
alert('Paragraphe affich !');
}); // affiche le paragraphe en 200ms, et lance une alerte la fin
de l'animation
Le cas de toggle()
La mthode toggle() est un peu particulire, tant donn qu'elle agit sur l'objet jQuery en fonction de son tat courant : s'il est
cach, elle l'affiche, s'il est affich, elle le cache. L o vous devez vous rendre compte de son utilit, c'est qu'elle accepte un
argument de condition. Vous pouvez agir dessus grce un boolen, par exemple. Si on lui indique true, elle affichera l'lment,
si on lui indique false, elle fera l'inverse.
Code : JavaScript
$('p').toggle(true); // aura le mme rle que show()
$('p').toggle(false); // aura le mme rle que hide()
Des mthodes plus esthtiques
Afficher et cacher des lments, c'est bien, le faire esthtiquement, c'est mieux ! Ainsi, jQuery propose six mthodes permettant
de faire exactement la mme chose que les fonctions vues prcdemment, mais de faon plus travaille. Comprenons-nous bien :
la finalit est exactement la mme.
Drouler et enrouler
Vous avez sans doute dj vu des sites web utilisant ce genre de chose, pour un systme de drouler / enrouler notamment.
Pour raliser cela, rien de plus simple :
slideDown() droule l'lment pour l'afficher ;
slideUp() enroule l'lment pour le cacher ;
slideToggle() enroule ou droule selon l'tat courant de l'lment.
Les arguments ne changent pas, ils sont les mmes que pour show(), hide() et toggle().
Apparition et disparition
On va jouer ici sur l'opacit de l'lment influenc.
fadeIn() affiche l'lment progressivement ;
fadeOut() cache l'lment, en ajustant l'opacit galement.
fadeToggle() affiche ou cache l'lment, grce l'opacit.
Le framework met galement disposition une fonction permettant de contrler l'opacit finale de l'lment anim. Il s'agit de
fadeTo(), qui prend en argument obligatoire un nombre dcimal (float) entre 0 et 1 indiquant l'opacit.
Code : JavaScript
$('p').fadeTo('normal', 0.5); // ajuste l'opacit et la fixe 0.5
L'argument de dure de l'animation est dfini comme tant facultatif ; nanmoins, vous devez l'indiquer, sans quoi la
mthode ne fonctionnera pas.
Reprenez le contrle des effets
Faire des effets avec jQuery, c'est bien, mais avoir un total contrle sur eux, c'est encore mieux ! Rappelez-vous toujours que la
politique du framework est de vous offrir un maximum de souplesse et de possibilits dans votre code. Ainsi, il existe des
mthodes qui ont pour rle de vous aider matriser vos effets : quand les dclencher, les arrter, les ordonner, et mme les
influencer !
Vous allez voir dans cette partie tout ce qui traite la manipulation des animations.
Le concept de file d'attente
Vous ne le savez peut-tre pas, mais ce systme, vous l'utilisez chaque fois que vous animez un lment d'une page web. Les
mthodes permettant d'animer sont toutes bases dessus : ainsi, si vous avez quatre animations diffrentes, elles se drouleront
dans l'ordre chronologique, en attendant que la prcdente se termine avant de se lancer. C'est ce qu'on appelle les files
d'attente en jQuery. Plus concrtement, en employant le jargon technique, c'est simplement un tableau qui va lister les fonctions
et les excuter une une jusqu' arriver au terme. En anglais, on l'appelera queue.
Manipuler le tableau de fonctions
Il est possible de manipuler le tableau de fonctions, la queue, grce une mthode au nom loquent : queue(). Cette fonction
est utiliser sur un lment qui subit une ou plusieurs animations. En modifiant certains arguments, vous serez ainsi capable de
modifier directement l'array !
Code : JavaScript
$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();
var fileAttente = $('p').queue('fx'); // je stocke la file
d'attente, le tableau, dans une variable
alert(fileAttente.length); // renvoie 4
On peut spcifier le nom de la file d'attente, en donnant un argument comme dans l'exemple ci-dessus. Le nom par
dfaut est fx .
Pour rajouter une fonction dans la file d'attente, il suffit de passer ladite fonction en tant qu'argument.
Code : JavaScript
$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();
$('p').queue(function(){
alert('Nouvelle fonction dans la file !'); // alerte s'affichant
la fin de la file
});
Enfin, la dernire chose possible faire est de carrment remplacer le tableau par un nouveau, que vous aurez cr directement.
Cela n'a pas normment d'intrt, mais c'est notamment utile dans le cas o vous voulez vider l'array, ce qui a pour effet
d'annuler toute animation.
Code : JavaScript
$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();
$('p').queue('fx', []); // fait disparatre le paragraphe, puis vide
la file d'attente
Ordonner la file d'attente
Prparez votre cerveau rsoudre des casses-tte, parce que la mthode que nous allons voir est un peu difficile utiliser. Il
s'agit de dequeue(), une fonction qui permet de stopper l'animation en cours de la file d'attente, et de passer la suivante.
Prenons un petit exemple concret :
Code : JavaScript
$('p')
.animate({
fontSize : '+=100px'
})
.queue(function(){
alert('Bonjour !');
$(this).dequeue();
})
.animate({
fontSize : '-=50px'
})
.queue(function(){
alert('Au revoir !');
$(this).dequeue();
});
Si on analyse l'action de ce code, il se passe ceci :
a. la taille de la police augmente de 100 pixels,
b. une nouvelle fonction est ajoute la file,
c. une alerte affiche Bonjour ! ,
d. la mthode dequeue() permet de lancer l'animation suivante ;
e. la taille de la police baisse de 50 pixels,
f. une nouvelle fonction est ajoute la file,
g. une alerte affiche Au revoir ! ,
h. la mthode dequeue() permet de ne pas entraver les futures animations sur l'lment.
On utilisera le slecteur $(this) pour lancer la mthode dequeue().
Suppression de fonctions non excutes
Pour une raison x ou y, vous pouvez tout fait stopper la file d'attente grce une mthode. Le rle de clearQueue() est de
supprimer toutes les fonctions de la file d'attente qui n'ont pas encore t excutes. Une autre mthode nous permet de faire
cela de faon un peu moins labore, que nous verrons ensuite.
Code : JavaScript
$('p').animate({
fontSize : '100px'
})
.queue(function(){ // on ajoute une fonction la file d'attente
alert('Bonjour !');
})
.clearQueue(); // empche l'alerte de s'afficher
Arrter les animations
Mthode trs utilise s'il en est, stop() a pour fonction premire de... stopper une animation, c'est exactement a. Elle peut
prendre deux arguments au maximum, zro au minimum. On l'utilisera le plus souvent pour viter de lancer le mme effet plusieurs
fois de suite sans pouvoir l'arrter : un code JavaScript, a fait ce qu'on lui dit de faire sans se soucier d'autre chose. Par exemple,
imaginez qu'un utilisateur, lorsqu'il clique sur un bouton, lancer une animation spcifique. S'il clique plusieurs fois de suite sans
attendre la fin de l'animation, celle-ci va s'excuter autant de fois qu'on le lui aura indiqu !
Arrter une animation est donc une scurit, l'assurance qu'elle ne se lancera pas des dizaines et des dizaines de fois sans
pouvoir rien y faire. Les deux arguments possibles permettent :
de stopper une ou toutes les animations suivantes (boolen indiquer) ;
de laisser l'animation courante se drouler jusqu' son terme (galement un boolen).
Les cas que vous pourriez dfinir sont donc les suivants :
$('p:animated').stop(); arrte l'animation courante ;
$('p:animated').stop(true); annule toutes les animations suivantes, dont l'animation courante ;
$('p:animated').stop(false, true); arrte l'animation courante, mais laisse l'lment aller son tat final ;
$('p:animated').stop(true, true); annule toutes les animations suivantes, mais laisse l'lment courant
aller son tat final.
Le slecteur :animated cible tous les objets jQuery actuellement anims.
Dsactivation
Enfin, pour terminer, sachez qu'une proprit permet de dsactiver toutes les animations de la page. Il suffit de passer true la
proprit jQuery.fx.off.
Ouf ! C'tait un chapitre assez consquent, vous ne trouvez pas ?
Les chapitres suivants seront un peu moins difficiles avaler, mais il faudra rester concentr, car nous abordons la manipulation
du DOM.
Manier les attributs
Aprs un chapitre assez long, qui concernait les animations, nous vous proposons de voir ce que sont les attributs, et comment
les influencer avec jQuery. C'est une part assez importante galement, donc soyez attentif et n'hsitez pas vous arrter pour
faire quelques essais.
Gestion gnrale des attributs
Avant de se lancer dans une foule d'explications toutes plus passionnantes les unes que les autres, il faut dj savoir ce que l'on
va traiter. Dans notre cas, il s'agit des attributs.
Bref rappel sur les attributs
En HTML, les attributs sont contenus dans des balises. Ils dfinissent en quelque sorte comment le navigateur doit interprter
un lment d'une page web. Pour tre bref et concis :
Citation : M@teo21
Les attributs sont un peu les options des balises. Ils viennent les complter pour donner des informations supplmentaires.
Sachez qu'il est possible d'influencer ces attributs avec jQuery, et donc de raliser une foule de choses rien qu'avec une seule
mthode, au moins aussi utilise que css() et animate() : attr() !
Rcuprer des valeurs
La fonction premire de attr() est de pouvoir rcuprer la ou les valeur(s) d'un attribut d'une balise. Il suffit de passer le nom
de l'attribut souhait en tant qu'argument :
Code : JavaScript
var cheminImage = $('img').attr('src'); // rentre le contenu de
l'attribut src dans une variable
(Re)dfinir un attribut
La seconde utilisation possible de cette mthode est de dfinir, ou redfinir un attribut en passant par un deuxime argument.
Comprenez par l que mme si l'attribut donn n'existe pas dans la balise, il sera cr automatiquement. De mme, la nouvelle
valeur donne crasera celle en place si elle est dj dfinie.
Code : JavaScript
$('img').attr('src', 'nouveauChemin/photo.png'); // change
l'attribut src en crasant l'ancienne valeur
$('img').attr('title', 'Nouvelle photo'); // cr l'attribut title
dans l'lment s'il n'existe pas
L'attribut type des lments de formulaires ne peut pas tre chang, car Internet Explorer l'interdit. La fonction est
donc bloque sur tous les navigateurs.
Passer par un objet
Par souci de performance, on prfra passer par un objet si l'on a plusieurs attributs influencer en mme temps. Les multiples
appels d'un mme objet jQuery sont viter, car ils sont gourmands et vos visiteurs risquent de ne pas apprcier si l'attente se
rvle trop longue. Il est alors possible de chaner les mthodes pour ne pas rcuprer plusieurs fois de suite le mme objet
jQuery, mais l encore, vous devrez taper plusieurs fois la mme fonction, ce qui au final se rvlera aussi lent.
Il existe alors une solution, qui est utiliser si vous tes dans ce cas-l. Il est possible de donner un objet en tant que paramtre
la mthode attr(), qui contiendra chaque attribut modifier et leurs nouvelles valeurs respectives.
Code : JavaScript
$('img').attr('src', 'nouveauChemin/photo.png');
$('img').attr('alt', 'Nouvelle photo');
$('img').attr('title', 'Nouvelle photo');
// mauvaise mthode
$('img').attr({
src : 'nouveauChemin/photo.png',
alt : 'Nouvelle photo',
title : 'Nouvelle photo'
});
// bonne mthode
Utilisation d'une fonction anonyme
Une fonction anonyme peut tre dclare en tant que valeur de l'attribut, c'est--dire en second argument. L'utilit est assez
contextuelle, mais sachez que cette mthode permet de rcuprer deux donnes et d'en faire usage :
l'index de l'lment trait (commence par 0), reprsent par un premier argument dans la fonction de retour ;
la valeur actuelle de l'attribut trait, reprsent par un second argument.
Code : JavaScript
$('img').attr('alt', function(index, valeur){
return index + 'me lment - ' + valeur;
});
Vous devrez obligatoirement retourner la nouvelle valeur de l'attribut.
Supprimer un attribut
Jusque l, il est possible d'craser un attribut en lui affectant une valeur nulle. Ce n'est pas trs propre, mais a fonctionne.
Pourtant, une mthode a t conue spcialement pour raliser cela : removeAttr(). Il suffit de lui passer le nom de l'attribut
en argument, et elle se charge de le supprimer dfinitivement du DOM.
Code : JavaScript
$('img').removeAttr('title'); // supprime l'attribut title des
images
Grer les classes proprement
Il est bien videmment possible de grer les classes des lments de votre page avec la mthode que l'on a vu prcdemment.
Seulement, un problme se pose : comment faire si l'on veut rajouter une classe sans supprimer celle actuellement en place ? Les
dveloppeurs de jQuery se sont penchs sur le sujet, et ont fini par crer des mthodes spcialement adaptes aux classes. On
en dnombre quatre pour le moment, et nous allons les voir ensemble.
Ajouter une classe
La mthode addClass() permet d'ajouter une classe l'lment spcifi. Veillez bien faire la diffrence avec la sous-partie
prcdente : nous avions dfini des attributs, mais pas ajout. L'ajout de classe signifie que la fonction prend en compte la ou les
classe(s) dj en place. Ainsi, vous pouvez donner plusieurs classes dynamiquement un lment, ce qui tait impossible avec
attr() ! De mme, il est possible d'ajouter plusieurs classes en mme temps en les sparant par des espaces.
Code : JavaScript
$('.vert').attr('class', 'rouge'); // cet lment aura la classe
.rouge
$('.vert').addClass('rouge'); // cet lment aura les classes .vert
et .rouge
$('.vert').addClass('rouge bleu jaune'); // cet lment aura les
classes .vert, .rouge, .bleu et .jaune
Vous pouvez excuter une fonction anonyme en tant qu'argument de la mme faon que dans la partie prcdente.
Supprimer une classe
La suppression de classe se fait galement avec une mthode adapte, qui ressemble fortement celle permettant de supprimer
un attribut. removeClass() prend le nom d'une ou de plusieurs classe(s) en paramtre, et les supprime de l'lment sans
influencer les autres.
Code : JavaScript
$('p').removeClass('vert'); // supprime la classe .vert de
l'lment
$('p').removeClass('vert rouge bleu'); // supprimer les classes
.vert, .rouge et .bleu
Prsence d'une classe
Pour vrifier qu'un lment possde bien une classe, il existe la fonction hasClass(). ELle ne peut prendre qu'un seul
argument, et malheureusement qu'une seule classe la fois. Elle est beaucoup utilise dans les conditions, car elle retourne un
boolen (soit true, soit false).
Code : JavaScript
if( $('p').hasClass('vert') ){ // si l'lment possde la classe
.vert
alert('Ce paragraphe est vert !'); // on affiche une alerte
}
Switcher une classe
Vous connaissez dj les mthodes telles que toggle(), qui permettent de basculer d'un tat l'autre. Lorsqu'on travaille avec
les classes, il est parfois judicieux d'utiliser ce concept. Ainsi, la fonction toggleClass() permet d'ajouter ou de supprimer
une classe donne !
Code : JavaScript
$('p').toggleClass('vert'); // ajoute la classe .vert si elle
n'existe pas, sinon, la supprime
Vous pouvez contrler l'action de cette mthode grce un second argument, sous la forme de boolen : true permettra
d'ajouter la classe, alors que false la supprimera.
Code : JavaScript
// ces deux codes sont quivalents :
$('p').addClass('vert');
$('p').toggleClass('vert', true);
// ces deux codes sont quivalents :
$('p').removeClass('vert');
$('p').toggleClass('vert', false);
Les attributs sont un passage obligatoire sur le chemin de la matrise du framework jQuery. Vous avez vu qu'ils sont extrmement
utiles, et croyez-nous : vous n'avez pas fini de les utiliser.
Dans le prochain chapitre, nous apprendrons nous dplacer dans le DOM, pour exploiter chaque lment d'une page web
dynamiquement !
Parcourir les lments du DOM
Le parcours du DOM permet de se dplacer aisment sur la page, afin de rcuprer certains lments HTML. Un peu comme pour
les slecteurs, il faudra bien comprendre le principe de la descendance, car c'est un concept trs puissant et trs utilis dans les
langages orient objet comme JavaScript, rappelez-vous-en !
Naviguer dans le DOM
Rappel sur le Document Object Model
Le Document Object Model, beaucoup plus couramment appel DOM, permet littralement de naviguer entre les lments
HTML. Nous rappelons qu'il s'agit d'une interface de programmation, utilise exclusivement pour les documents XML et HTML,
qui se base sur la structure. C'est grce ce concept qu'il est possible d'agir sur une page web avec JavaScript, et plus
prcisment ses fonctions ; sans cela, nous ne pourrions pas dsigner les lments !
Vous vous en doutez, nous faisons constamment appel au DOM, mme si en jQuery, on s'en rend beaucoup moins compte. En
effet, mme si nous n'avons pas encore appris utiliser les fonctions de parcours, sachez que la slection d'lments, par
exemple, use de certaines fonctions JavaScript qui ont besoin du DOM (c.f. getElementById()).
Positionnement des lments
La position des lments dans la structure d'une page HTML est trs importante. C'est pourquoi on vous rpte souvent : ayez
un code propre, une structure claire et bien range, et vous aurez beaucoup plus de facilit manipuler vos lments en
JavaScript ! Une smantique bien faite, c'est un gain de temps et d'nergie. Prenons pour exemple un code HTML trs mauvais,
que l'on peut malheureusement rencontrer sur le web :
Code : HTML
<div id="bloc">
<a href="#" id="lien">Un lien</a><a href="#" id="lien">Un autre
lien</a>
<div>
<span class="paragraphe">Contenu</span>
<div></div>
</div>
Nous esprons sincrement que vous n'crirez JAMAIS ce genre d'aberration...
Dans un cas comme celui-l, la slection simple ne sera pas altre ; en revanche, si vous devez parcourir le DOM pour ne pas
devoir refaire une requte d'lment inutile, alors bonne chance ! Une bonne smantique est primordiale, nous ne vous le
rpterons jamais assez.
La descendance
Si on vous rabche depuis quelques temps que la descendance est un concept trs utilis en programmation oriente objet, ce
n'est pas pour rien : souvent apparente l'hritage, cette technique se base sur le principe de parents et d'enfants. Dans un
contexte comme le ntre, cela peut paratre un peu tir par les cheveux comme mthode de travail, et pourtant, sans cela, il serait
beaucoup plus compliqu de raliser de vritables applications en jQuery !
Quelques chapitres auparavant, nous avons abord rapidement la chose avec les slecteurs, et plus prcisment ceux-ci :
$('.parent .enfant') ;
$('.parent > .enfant').
En effet, nous vous avions expliqu qu'une structure HTML permettait d'imbriquer des blocs les uns dans les autres : ceux tant
l'intrieur sont appels enfants, ceux qui entourent un lment sont des parents. Le parcours du DOM va normment se baser
sur ce concept, retenir et matriser absolument. Nous allons tudier quelques fonctions qui permettent d'accder aux lments,
qu'ils soient parents, enfants, ou mme frres !
Parents, enfants et anctres
Commenons par une des fonctions de parcours les plus utilises : parent(). Plus facile retenir, tu meurs ! Comme vous
vous en doutez, cette mthode va nous permettre d'accder au bloc parent de l'lment actuellement cibl. Lorsque nous agirons
sur notre objet jQuery, ce ne sera donc plus ce dernier qui sera influenc, mais bien le bloc qui l'entoure.
Code : JavaScript
$('a').css('color', 'blue'); // rend le lien cibl seulement de
couleur bleue
$('a').parent().css('color', 'blue');
// ici, c'est le parent de l'enfant (un paragraphe, si l'on
respecte la smantique) qui verra son texte devenir bleu
Il est possible de prciser la requte, en slectionnant la classe, l'identifiant et le type de l'lment rcuprer en tant
qu'argument :
Code : JavaScript
$('a').parent('.texte'); // retourne seulement l'ensemble des blocs
parents ayant la classe .texte
Inversement, la fonction children() permet de cibler l'lment enfant descendant directement de l'lment slectionn. Cette
mthode quivaut donc au slecteur >, mais permet, comme la fonction parent(), de prciser la recherche avec un argument.
Code : JavaScript
$('div').children(); // cible l'lment enfant direct du bloc div
$('div').children('p'); // cible seulement l'ensemble des
paragraphes enfants du bloc div
Cette mthode est nanmoins quelque peu restrictive : elle ne va cibler que les enfants directs d'un lment. Que se passerait-il si
l'on voulait rcuprer tous les fils et petits-fils d'un bloc ? On ne pourrait tout simplement pas, ou tout du moins avec
children(). Car oui, bien heureusement, jQuery possde la fonction find(), qui va se charger de trouver tous les enfants
d'un lment, quelle que soit leur position par rapport ce dernier ! Il suffit alors de donner le type d'lment trouver, et
find() se charge du reste :
Code : JavaScript
$('body').find('p'); // cible l'ensemble des paragraphes contenus
dans le corps du document, quelle que soit leur position !
La dernire mthode usant de ce principe de descendance est parents(). N'oubliez pas le "s", car elle est lgrement
diffrente de la fonction parent(), et ne s'utilise pas tout fait de la mme faon ! Concrtement, cette dernire retournait
seulement la premire occurrence trouve : ds qu'elle tombait sur un parent, elle s'arrtait sans aller plus loin. Il se peut que vous
vouliez agir sur tous les parents d'un lment en mme temps. Par soucis de prcision, on ne parlera ici plus de parents, mais
d'anctres.
Code : JavaScript
$('a').parents(); // cible tous les lments anctres du lien :
paragraphe, bloc(s), balise <body>...
La fraternit d'lments
Aprs le pre et le grand-pre, nous demandons le frre ! Eh oui, comme pour les mthodes dveloppes prcdemment,
nous sommes dans l'obligation d'tudier les fonctions ciblant les lment frres de la slection. Le frre d'un lment, c'est tout
simplement la balise prsente directement ct de celui-ci.
Il y a quatre faons de faire appel ce concept :
prev(), qui slectionne l'lment frre prcdant directement l'objet cibl ;
next(), qui slectionne l'lment frre suivant directement l'objet cibl ;
prevAll(), qui slectionne tous les lments frres prcdant l'objet cibl ;
nextAll(), qui slectionne tous les lments frres suivant l'objet cibl.
Filtrer et boucler les lments
Moins utiliss mais tout de mme d'une praticit flagrante, les filtres et les conditions permettent de cibler des lments de
manire plus prcise et concise que les mthodes apparentes la descendance. En effet, jusqu'ici, vous ne savez que
slectionner les lments enfants, parents, anctres ou frres d'un objet. En revanche, le ciblage par l'index, par exemple, vous est
totalement inconnu. Afin de combler ces lacunes, nous vous invitons lire la suite.
Filtrer les lments
Filtre par slecteur
La mthode principale permettant de filtrer des lments se nomme filter(). Elle va permettre de supprimer tous les objets ne
correspondant pas la recherche de la slection, ce qui est trs pratique dans le cas o vous souhaitez ne rcuprer que certains
lments et pas d'autres, dans une recherche plus globale. La requte est spcifier en tant qu'argument, et peut tre vraiment
trs prcise dans le cas o il est possible de donner plusieurs slecteurs d'un seul coup en les sparant de virgules !
Code : JavaScript
$('p').filter('.texte'); // supprime de la slection tous les
paragraphes n'ayant pas la classe .texte
$('p').filter('.texte, #description');
// supprime de la slection tous les paragraphes n'ayant pas la
classe .texte ou l'identifiant #description
La mthode not() permet de faire la mme chose, mais prend en argument les objets ne pas prendre en compte.
Filtre par index
Vous avez dj rencontr le slecteur :eq() plus tt dans le cours. Il suffisait de l'utiliser avec un index pour slectionner un
lment grce celui-ci. Il existe galement la mthode eq() qui elle s'excute sur un objet. Elle va donc parcourir le tableau
d'occurrences trouves et slectionner seulement celui qui possde l'index indiqu en argument.
Code : JavaScript
$('p').eq(2); // cible le troisime paragraphe trouv (l'index
commence 0)
Petite astuce, vous pouvez spcifier un nombre ngatif : jQuery commencera alors compter partir du dernier index. Si vous
possdez quatre paragraphes et que vous donnez la valeur -1 la mthode, alors votre objet sera le quatrime paragraphe.
Moins utilise, la mthode slice() permet de prendre une portion d'un tableau d'objets, grce leur index. Elle prend un
argument obligatoire, et un second facultatif :
1. start, qui est la position (ou l'index) du premier lment filtrer ;
2. end, qui est la position (ou l'index) du dernier lment filtrer, non pris en compte par la slection.
Il s'agit donc littralement de couper un tableau contenant l'ensemble de nos lments cibls. Seuls ceux tant compris entre les
index spcifis seront gards, les autres tant alors supprims de la slection :
Code : JavaScript
$('div').slice(1, 3); // garde seulement les blocs div ayant
l'index 1 ou 2
Vrifier le type d'un lment
La fonction is() est peu utilise, mais il est bon de la connatre dans le cas o vous rencontrez un code qui la contient pour
une quelconque raison. Elle renvoie simplement un boolen, true si elle dduit que l'argument donn correspond au type de
l'lment analys, false si ce n'est pas le cas :
Code : JavaScript
var vrai = $('div').is('div');
var faux = $('div').is('p');
console.log(vrai); // affiche true
console.log(faux); // affiche false
Boucler les lments
Non content de sa puissance, jQuery rvolutionne le concept des boucles en permettant une nouvelle forme : le bouclage
d'lments. Assez particulier, ce systme est toutefois bien utile : il va traiter chaque occurrence trouve et excuter une fonction
dfinie dessus. Il s'agit de la mthode each(). Elle va agir sur chaque objet trouv, en effectuant littralement une boucle. Cela
va vous permettre par exemple d'excuter des fonctions qui, normalement, s'arrte au premier lment rencontr, les autres tant
laiss l'abandon.
Code : JavaScript
$('p').each( function(){
alert( $(this).text() ); // $(this) reprsente l'objet courant
} );
Il est possible de rcuprer l'index de l'lment courant grce un argument, placer dans la fonction de retour.
Si la fonction retourne false, alors la boucle s'arrte brutalement. Si au contraire elle retourne true, alors la boucle passe
directement l'lment suivant. Il existe d'autres utilisations de cette mthodes, notamment avec sa sur $.each(), mais nous
ne les aborderons pas ici car elles ne sont pas vraiment courantes et utilises.
Maintenant que vous savez parcourir le DOM, que vous matrisez les notions de descendance, de fraternit et de filtrage
d'lments, vous pouvez enfin passer la manipulation du code HTML lui-mme. Le prochain chapitre regroupe beaucoup de
fonctions connatre et savoir utiliser. C'est aussi le dernier chapitre avant le prochain TP, donc prparez vous bien l'assimiler
!
Manipuler le code HTML avec jQuery
Nous arrivons enfin au dernier chapitre d'apprentissage dans cette troisime partie consacre au DOM ! C'en est d'ailleurs le
cours le plus intressant, mais aussi le plus long dans la mesure o il y a beaucoup de fonctions retenir ; pas d'inquitude
avoir cependant, car nous allons voir pas pas comment manipuler le contenu, mais aussi la structure d'une page HTML !
Insertion de contenu
Enfin, nous y voil ! Vous allez apprendre insrer du contenu directement dans votre page web, grce jQuery. Petite note de
vocabulaire, le faire d'insrer quoi que ce soit dans un document HTML se dit couramment "crer du contenu la vole". Ne
soyez donc pas tonn de voir cette expression lorsque l'on vous parle de jQuery !
Nous allons voir comment insrer du contenu, ce qui est la base de la manipulation du code HTML. Sachez tout d'abord qu'il
existe trois sortes de contenu :
le contenu textuel, ce qui correspond du texte, tout simplement, sans fioritures telles que des balises ;
le contenu HTML, qui reprsente le contenu textuel avec les balises structurelles en plus ;
et le contenu des lments de formulaire, qui est la valeur des diffrents champs de texte, de mot de passe, de textarea...
Ces diffrentes sortes de contenu ne se manipule pas tout fait de la mme manire, nous allons donc apprendre utiliser les
trois mthodes correspondantes, ainsi que quelques autres fonctions bien utiles, pour par exemple ajouter des lments une
place bien prcise.
Le contenu textuel
Commenons par le plus simple : le contenu textuel. Il n'est vraiment pas difficile de le manipuler, dans la mesure o il n'existe
qu'une seule fonction pour le faire : text(). Cette mthode permet soit de rcuprer le contenu textuel d'un lment s'il existe,
soit de le modifier en donnant la nouvelle version en argument. Petite note retenir, les balises donnes ne fonctionneront pas,
car les chevrons (< et >) seront convertis automatiquement en entits HTML (respectivement < et >).
Rappel : en JavaScript, vous utilisez la proprit textContent pour le modifier.
Rcupration du contenu
Pour rcuprer le contenu d'un lment, il suffit d'utiliser la mthode text() tout simplement, ni plus ni moins. Elle ne
retournera qu'une chane de caractre (string), qui contiendra le contenu textuel seulement : pas de balises ouvrantes ni
fermantes, pas de chevrons HTML, juste du texte.
Code : JavaScript
$('p').text(); // renvoie le texte contenu l'intrieur du
paragraphe
Chose importante retenir, la fonction s'arrte la premire occurrence trouve : si vous avez plusieurs paragraphes et que vous
lancez le code ci-dessus, vous n'obtiendrez que le contenu du premier paragraphe du document, ayant l'index 0. De mme, elle
prend parfaitement bien en compte les espaces divers et les retours la ligne.
Dfinition de contenu
Comme dit prcdemment, la dfinition de contenu avec text() se fait par argument. Faites bien attention l'utiliser
correctement : cette mthode crase le contenu actuel pour le remplacer par le nouveau ! Nous verrons comment ajouter, au lieu
d'craser, du contenu un peu plus tard dans ce chapitre.
Code : JavaScript
$('p').text('Nouveau contenu !'); // remplace le contenu actuel du
paragraphe par "Nouveau contenu !"
Le contenu HTML
Passons ds prsent au plus intressant : le contenu HTML. Nous vous rappelons qu'il s'agit juste du contenu textuel, avec les
balises structurelles en plus. Vous allez donc voir une fonction text() un peu amliore, html(). Elle fonctionne tout
simplement comme la proprit innerHTML que vous utilisez en JavaScript simple, pour la simple et trs bonne raison qu'elle
est base dessus (cette fonction ne marchera donc pas sur des documents XML). En bref, rien de trs compliqu, si vous avez
des balises l'intrieur de votre lment, elles seront bien comprises dans le retour :
Code : JavaScript
$('div').html(); // renvoie le code HTML contenu dans ce bloc div
$('div').html('<p>Nouveau <strong>code</strong> !</p>'); // remplace
le code HTML actuel par celui-ci
Pour la rcupration de code HTML, la mthode s'arrte, comme pour text(), la premire occurrence trouve.
Seulement, cette fonction ne prsente pas un trs grand intrt si l'on veut ajouter du contenu au lieu de simplement remplacer.
craser les donnes actuelles peut parfois tre embtant, c'est pourquoi il existe heureusement d'autres mthodes permettant
d'insrer du code HTML avant ou aprs le contenu dj prsent.
Ajouter du contenu HTML avant le contenu actuel
La mthode prepend() ajoute le contenu HTML pass en argument avant le contenu HTML actuellement en place, tout en
restant dans la limite des balises (pour vous en rappeler : pre comme previous, prcdent en franais). On a donc une insertion
l'intrieur et au dbut de l'lment.
Code : JavaScript
$('p').prepend('<strong>Texte insr avant le contenu
actuel.</strong> ');
Rsultat :
Code : HTML
<p>
<strong>Texte insr avant le contenu actuel.</strong> Contenu
actuel.
</p>
Au lieu d'une chane de caractre, vous pouvez galement passer en argument un objet jQuery ; cela aura pour effet d'aller
rcuprer l'lment indiqu, et de l'insrer directement l'intrieur :
Code : JavaScript
$('p').prepend( $('h1') );
Rsultat :
Code : HTML
<p>
<h1>Un titre H1</h1>
Contenu actuel.
</p>
Cette technique agit un peu comme un couper-coller : l'objet donn en argument ne sera pas dupliqu, mais dplac !
Ajouter du contenu HTML aprs le contenu actuel
Paralllement la mthode prepend(), append() ajoute le contenu HTML pass en argument aprs le contenu HTML
actuellement en place. videmment, l'insertion s'effectue toujours l'intrieur des balises de l'lment. Cette fonction marche
exactement de la mme manire que sa cousine :
1.
append() :
objet.append(contenu)
2.
appendTo() :
contenu.appendTo(objet)
Code : JavaScript
$('p').append(' <strong>Texte insr aprs le contenu
actuel.</strong>');
$('p').append( $('h1') );
Deux cas spciaux : prependTo() et appendTo()
Pour ceux qui aiment commencer leur repas par le dessert, il existe deux mthodes qui permettent de faire exactement la mme
chose que celles que l'on vient de voir, mais de faon inverse. Il s'agit de prependTo() et appendTo(), qui fonctionnent
l'envers : on va tout d'abord slectionner l'objet dplacer, puis l'objet receveur, celui qui va accueillir le contenu souhait. Pour
mieux comprendre, nous vous invitons regarder ce schma d'un peu plus prs :
Code : JavaScript
$('p').append( $('h1') );
// ici, on ajoute le contenu du
titre aprs avoir slectionn
notre lment
$('h1').appendTo( $('p') );
/* alors qu'ici, on slectionne
d'abord le contenu du titre,
et on le dplace aprs le contenu
actuel de notre lment receveur
*/
$('p').prepend( $('.description')
);
// on ajoute le contenu de
.description avant le contenu de
notre paragraphe
$('.description').prependTo('p');
// on peut spcifier directement
l'lment, sans passer par un
objet
Cration de contenu l'extrieur de l'lment
S'il est possible d'insrer du code HTML l'intrieur d'un lment, il est galement possible d'en insrer l'extrieur ! Cela
implique alors une modification du parent de cet lment, et non de l'lment lui-mme : celui-ci n'est pas modifi, mais la balise
qui l'entoure voit son contenu chang. De mme que pour prepend() et append(), before() et after() permettent
respectivement d'ajouter du contenu HTML avant et aprs l'lment cibl.
Code : JavaScript
$('p').before('<p>Paragraphe prcdent</p>');
$('p').after('<p>Paragraphe suivant</p>');
Rsultat :
Code : HTML
<p>Paragraphe prcdent</p>
<p>Paragraphe cibl</p>
<p>Paragraphe suivant</p>
quivalents de prependTo() et appendTo(), insertBefore() et insertAfter() permettent d'inverser la logique
des choses : pour utiliser ces mthodes, vous devez d'abord cibler l'objet dplacer, puis spcifier l'objet receveur en argument :
Code : JavaScript
$('h1').insertBefore('p'); // insre un titre H1 et son contenu
avant un paragraphe
$('.description').insertAfter('h1'); // insre un lment
.description et son contenu aprs un titre H1
Le contenu des lments de formulaire
Afin de clore cette petite partie, nous allons voir une dernire mthode, dont l'utilit n'est pas des moindres : val().
quivalente la proprit value en JavaScript, elle va nous servir manipuler le contenu des lments de formulaire, ce qui est
en gnral entr par l'utilisateur. Elle fonctionne exactement de la mme manire que text() (elle n'admet aucune balise
structurelle).
Code : JavaScript
$('input').val(); // retourne le contenu de l'lment input
$('input').val('Nouvelle valeur !'); // modifie le contenu actuel
de l'lment (crase puis crit)
Manipulation des lments HTML
Ds prsent, voyons plus loin dans la manipulation du DOM. Aprs s'tre amus avec le contenu, qu'il soit textuel, ou issu de
formulaires, nous allons maintenant apprendre manier efficacement les lments HTML, c'est--dire tout ce qui peut tre dfini
comme objet jQuery.
Mais qu'entendons-nous par manipulation des lments ?
Ici, la manipulation semble priori basique : vous allez voir comment dupliquer, vider, supprimer, remplacer ou mme envelopper
des lments ! Seulement, il faut savoir qu'il existe quelques subtilits relatives aux mthodes mises en place par jQuery.
Souvenez-vous que c'est un point fort du framework ; mme si son utilisation se veut simple et accessible, du moins plus que le
JavaScript pur, il faut quand mme matriser certaines notions pour affirmer tre un bon dveloppeur jQuery (amateur).
Cloner des lments
Parmi les manipulations possibles existe le clonage d'lment. La mthode clone() (on devrait vous faire deviner le nom des
mthodes) a pour effet de dupliquer l'lment cibl. Pas de soucis jusque l, nous direz-vous, il suffit juste d'utiliser cette
fonction sur un objet et hop, le tour est jou. La subtilit dans ce cas-l, c'est que votre clone d'lment ne sera pas ajout au
document, car vous ne lui avez rien ordonn : il restera l, vaquant, ne sachant que faire, perdu et coup du monde.
Il va alors falloir lui indiquer o se placer. Et comment insrer du contenu ? Avec les mthodes tudies prcdemment, telles que
append() ou prepend() !
Code : JavaScript
var $clone = $('.objet').clone(); // on clone notre lment
$('body').append($clone); // puis on l'ajoute la fin de notre
document !
// on peut galement tout crire sur une seule ligne grce au
chanage de mthode :
$('.objet').clone().appendTo('body');
Cette fonction clone l'lment original dans sa totalit : les attributs, le contenu, etc. Seulement, en l'utilisant ainsi, il est
impossible de cloner galement l'vnement ventuellement associ. Pour faire cela, il suffit de passer true en
argument la mthode.
Vider et/ou supprimer un lment
Viennent ensuite les actions de vidage ou de suppression d'lments. Respectivement, bien que leur nom soit assez loquent,
empty() et remove() sont les deux mthodes appropries. Mais quelle diffrence entre vider et supprimer un lment ?
Dites-vous que toute la subtilit rside dans le contenu et les balises : vider un lment supprimera simplement son contenu,
qu'il soit textuel ou structurel, alors que supprimer un lment fera disparatre ce dernier en totalit, c'est--dire son contenu,
mais aussi lui-mme !
Code : JavaScript
$('p').empty(); // vide l'lment, seules subsisteront les balises
<p></p> et leurs attributs
$('p').remove(); // supprime l'lment, avec son contenu, rien n'en
restera
$('div').remove('.suppression'); // supprime les lments portant la
classe .suppression parmi les blocs div trouvs
Remplacer les lments
On continue ! Aprs le clonage et la suppression, parlons du remplacement. Trs simple galement, tout comme clone(), les
deux mthodes replaceWith() et replaceAll() permettent de remplacer un lment par un autre. Cela va fonctionner
comme un couper-coller : l'lment cibl va tre remplac par un autre, dans le cas d'un objet, mais celui ci va se dplacer au lieu
de se cloner. Encore une fois, vous n'tes pas oblig de spcifier un objet en tant qu'argument, vous pouvez tout aussi bien
mettre du nouveau contenu.
Une minute, on vient de voir deux mthodes. Fonctionnent-elles de la mme manire ?
La seule diffrence entre les fonctions replaceWith() et replaceAll(), c'est que la premire va prendre en argument
l'objet ou le nouveau contenu insrer, alors que l'autre va faire l'inverse, c'est--dire que vous devrez spcifier l'lment
remplacer en argument.
Code : JavaScript
$('.pomme').replaceWith('<p>Cet lment a t remplac !</p>');
// on remplace l'lment .pomme par un nouvel lment cr pour
l'occasion
$('.pomme').replaceWith( $('.poire') );
// ici, l'lment .pomme est remplac par l'lment .poire, ce
dernier va se dplacer
$('.poire').replaceAll('.pomme');
// inversement, on ordonne aux lments .poire de remplacer tous
les lments .pomme trouvs
Rappelez-vous bien que c'est tout l'lment qui est remplac, pas seulement son contenu ; veillez donc y mettre un
nouvel lment complet la place !
Envelopper/dballer des lments
Enfin, pour clore cette partie, vous allez apprendre envelopper et dballer des lments. Ce sont des actions plus ou moins
utilises, car elles ne prsentent pas normment d'intrt, mais il est tout de mme bon de savoir les effectuer, car elles
permettent notamment de crer ou de supprimer des parents trs rapidement. Nous parlons ici des mthodes wrap() et
unwrap(). Plus concrtement, la premire fonction va agir autour de l'lment cibl : elle va y insrer les bonnes balises
indiques, et ce, automatiquement. L'argument a nanmoins une forme un peu particulire, qui va vous prparer la suite de ce
chapitre, c'est--dire la cration d'lments la vole.
La forme de cet argument est plutt simple ; il suffit d'crire une balise HTML normalement, en la fermant directement. Vous savez
qu'il existe des balises auto-fermantes, telles que <img /> ? Eh bien, jQuery uniformise la chose en donnant cette convention
toutes les balises. C'est une habitude prendre, car mme si elle n'est pas obligatoire (vous pouvez tout aussi bien crire la balise
ouvrante et la balise fermante, cela fonctionnera aussi bien), c'est une des conventions qui font la diffrence entre un mauvais et
un bon codeur jQuery.
Pour dballer vos lments, il suffit d'utiliser unwrap() sans argument. Cela aura pour effet de dtruire l'lment parent de celui
qui est cibl.
Code : JavaScript
$('strong').wrap('<p />'); // entoure les balises <strong></strong>
de balises de paragraphe
$('span').wrap('<p class="description" />'); // il est possible de
donner des attributs au nouveau parent
$('span').unwrap(); // dtruit le parent de tous les span
Vous pouvez bien videmment crer plusieurs parents d'un seul coup, en imbriquant les balises correctement comme
dans une structure HTML normale.
Envelopper plusieurs lments frres
Le principal problme de wrap(), c'est qu'elle va entourer chaque lment trouv sur le document. Avec elle, il est impossible
d'entourer plusieurs lments frres, qui se trouvent cte cte. Comme d'habitude, nous vous donnons la solution :
wrapAll() ! Elle s'utilise exactement de la mme manire, si ce n'est qu'elle va prendre en compte le fait que des lments
soient frres :
Code : JavaScript
$('li').wrapAll('<ul />'); // entoure tous les <li></li> d'un seul
parent commun
Envelopper seulement le contenu
Dernire possibilit, est-il raliste de vouloir entourer le contenu seulement d'un nouveau parent ? La rponse est bien
videmment positive ! La fonction wrapInner() va vous permettre de raliser ce genre de chose :
Code : JavaScript
$('p').wrapInner('<strong />'); // entoure le contenu de balises
<strong></strong>
Rsultat :
Code : HTML
<p>
<strong>Le ciel est bleu.</strong>
</p>
Crer des lments la vole
Enfin, vous l'attendiez, nous allons apprendre ds maintenant comment crer des lments la vole ! Rappelez-vous que cette
expression signifie qu'on va fabriquer de nouveaux lments depuis notre code jQuery, sans passer par la case chargement du
DOM. En JavaScript pur, la bonne faon de procder, ou du moins la plus rapide, tait d'utiliser la fonction native
createElement(). De notre ct, seule la fonction principale jQuery() va nous servir !
Crer des lments, une histoire de balises
La cration de nouveaux lments en jQuery se fait de manire extrmement simple : on inscrit une ou plusieurs balises dans
l'argument de la fonction principale, et celles-ci sont automatiquement cres. Se pose alors le problme que nous avons dj
rencontr : l'lment se trouve vaquant, et n'est pas plac dans le DOM, ce qui est assez embtant. Pour parer ce soucis, il suffit
d'utiliser les mthodes de placement que vous avez appris prcdemment dans ce chapitre (quand on vous dit que ce chapitre
traite de fonctions trs importantes ).
Code : JavaScript
$('<div />').appendTo('body'); // cr un nouveau bloc div, et le
place la fin du corps du document
Du contenu peut galement tre cr en mme temps, de mme que des attributs peuvent tre initialiss (cela est possible grce
la proprit native innerHTML de JavaScript) :
Code : JavaScript
var $lien = $('<a href="http://www.siteduzero.com/">Le Site du Zro
!</a>');
// la variable contiendra l'lment lui-mme, ainsi que son contenu
// n'oubliez pas de placer l'lment ensuite
Passer des attributs proprement
La cration d'attributs pour notre nouvel lment peut se faire directement lors de la fabrication de celui-ci. Seulement, le code
peut vite devenir redondant et illisible si vous procdez avec cette mthode lorsque vous avez beaucoup d'attributs crer.
Histoire d'amliorer le confort des dveloppeurs, jQuery s'est vu ajouter, lors de sa version 1.4, la possibilit de donner un objet
en second argument la mthode principale, contenant la liste de tous les attributs du nouvel lment, la manire d'attr(). Il
est ainsi possible de donner un grand nombre d'attributs sans influencer la lisibilit du code jQuery :
Code : JavaScript
$('<div />', {
id : "bloc", // identifiant de l'lment
css : { // style css de l'lment
color : "red",
fontSize : "30px"
}
// etc...
});
Il est galement possible d'initialiser un ou des vnement(s) en tant que proprit !
L'attribut class
Faites attention une petite erreur que font beaucoup de dbutants. JavaScript est un langage orient objet, il utilise donc le
concept de classes, que l'on peut dfinir grce au mot-cl class. Si vous voulez dfinir la classe d'un lment, structurellement
parlant, il vous faudra mettre le nom de cette proprit entre guillemets ou apostrophes pour ne pas entrer en conflit avec
JavaScript.
Le cas Internet Explorer
L'ternel irrductible navigateur de Microsoft nous joue parfois des tours, mme si l'on code avec jQuery ! Faites donc attention
dans le cas o vous crez un lment de formulaire <input />, et que vous dfinissez ses attributs type et/ou name. En
effet, Internet Explorer ne supporte pas de voir ces proprits dans un objet, la cration de l'lment. Pour contourner ce
problme, vous devrez passer soit par la cration directe dans la balises, soit par la mthode attr() avant d'insrer l'lment
dans le document (rappelez-vous que la proprit type n'est pas supporte par cette fonction).
Code : JavaScript
$('<input />', {
type : "text",
name : "pseudo"
}); // non support par IE
$('<input type="text" />').attr({
name : "pseudo"
}); // bonne faon de procder
Vous savez maintenant comment crer des lments la vole dans vos documents HTML !
La manipulation du DOM est un passage incontournable lorsque vous codez avec jQuery. Vous venez de voir une foule de
fonctions maintenant prtes l'emploi, mais rassurez-vous, si vous ne les retenez pas toutes, vous pourrez toujours revenir sur
ce chapitre un peu plus tard. Retenez pour le moment seulement les principales mthodes, celles qui sont indispensables. En
annexes, un mmento des fonctions connatre vous sera propos.
Vous allez prsent vous lancer dans votre deuxime TP. Celui-ci portera sur la cration d'un carrousel simple, qui est, vous le
verrez, une animation trs sympathique normment utilise sur le web !
TP : le carrousel
Bien ! Vous voil arriv sur un nouveau Travail Pratique ! Ce chapitre va clore la troisime partie, qui tait consacre aux
animations et la manipulation du DOM. Nous esprons que tout t clair pour vous, et que vous russirez ce TP les doigts
dans le nez.
Votre travail consiste raliser un carrousel grce jQuery.
Certains vont sans aucun doute se demander : "qu'est-ce qu'un carrousel ?". Et en effet, mme si c'est un petit effet de plus en
plus prsent sur le web, beaucoup ne connaissent pas le nom de cette fabuleuse chose. Un carrousel, c'est tout simplement
un dfilement d'images, le plus souvent prsent sur l'index d'un site web. Cela permet de gagner de la place, tout en restant trs
esthtique, et faire une prsentation originale. Nous vous invitons aller voir quelques exemples de carrousel plus ou moins
sophistiqus aux adresses suivantes :
Grafikart.fr (index) ;
CodeCanyon.net (jQuery Banner Rotator) ;
Wowslider.com ;
Objectif concret
Vous l'aurez maintenant compris, votre travail va tre de raliser vous-mme un carrousel. Simple dans un premier temps, vous
pourrez toujours l'amliorer par la suite si vous tes motiv ! Ce carrousel, qu'on appellera galement slider assez couramment,
devra simplement comporter quelques fonctions basiques :
Il devra possder deux boutons, un pour afficher l'image prcdente, l'autre pour afficher la suivante ;
Il saura dfiler seul, c'est--dire que les images dfileront d'elles-mmes sans que l'on ait intervenir ;
Il pourra tre trs flexible dans la mesure o il sera possible de mettre autant d'images que l'on souhaite.
Tout ce dont vous avez besoin pour raliser cela, c'est de la patience, et les connaissances que vous venez d'engranger !
Mthodes requises
Vous allez devoir piocher dans chaque chapitre pour pouvoir mener bien votre travail. En effet, ce TP est complet dans le sens
o il utilise tous les domaines de jQuery : les vnements, les slecteurs, les fonctions de parcours, la manipulation du DOM...
Vous allez devoir tout mettre profit, et c'est exactement ce que nous voulons.
Vous devrez donc partir d'un squelette en HTML, trs simple, puisqu'il ne s'agit en fait que d'un bloc contenant une liste
d'images. Rien d'extraordinaire, et le CSS n'a rien a lui envier, car il sera lui aussi trs trs simple, sauf deux subtilits ne pas
manquer. En effet, l'astuce est de dfinir une taille fixe votre carrousel, les images tant empiles les unes sur les autres grce
une position absolue.
Une fois ceci termin, tout se passe ensuite du ct de jQuery. L'astuce est de jouer sur la prsence des images, grce la
proprit display de CSS. N'hsitez pas non plus manipuler les index, car c'est comme cela que vous pourrez dterminer
quelle image doit tre affiche. Enfin, les boutons prcdent et suivant devront tre ajouts la vole, pour empcher l'utilisateur
ayant dsactiv JavaScript de les voir et de cliquer dessus sans voir de rsultat.
setTimeout(), ou rpter une fonction rgulirement
Une mthode native de JavaScript va vous tre fabuleusement utile pour faire dfiler automatiquement les images. Il s'agit de
setTimeout(), qui prend deux arguments : le nom de la fonction excuter, et l'intervalle de temps (en millisecondes)
attendre avant de le faire. L'astuce, c'est de relancer la fonction l'intrieur d'elle-mme pour raliser une boucle infinie :
Code : JavaScript
function maBoucle(){
setTimeout(function(){
alert('Bonjour !'); // affichera "Bonjour !" toutes les
secondes
maBoucle(); // relance la fonction
}, 1000);
}
maBoucle(); // on oublie pas de lancer la fonction une premire
fois
Si vous souhaitez partir sur de bonnes bases, nous vous suggrons de prendre notre structure HTML et le style CSS minimal :
Code : HTML
<div id="carrousel">
<ul>
<li><img src="http://lorempixel.com/700/200/" /></li>
<li><img src="http://lorempixel.com/g/700/200/" /></li>
<li><img src="http://lorempixel.com/700/200/abstract/" /></li>
</ul>
</div>
Les images utilises ici proviennent de lorempixel.com et ne sont pas toutes libres de droit.
Code : CSS
#carrousel{
position:relative;
height:200px;
width:700px;
margin:auto;
}
#carrousel ul li{
position:absolute;
top:0;
left:0;
}
Vous avez maintenant toutes les cls pour raliser ce carrousel ! N'oubliez pas de consulter la documentation de jQuery si vous
en avez besoin, et de faire usage de Firebug, par exemple, pour localiser un soucis dans votre code. Si vous avez vraiment du
mal, n'hsitez pas poser votre question sur le forum JavaScript !
Correction
Votre carrousel fonctionne bien ? Ou en est-il toujours la phase thorique ? Quoi qu'il en soit, nous vous proposons comme de
juste une correction. Suivez-la bien pas pas, et vous saurez quelles ont t vos erreurs si vous en avez commis.
Comme pour le premier TP, nous vous avions fourni le code HTML minimal permettant de constituer une base de travail :
Code : HTML
<ul>
</ul>
</div>
Notre carrousel possde donc une structure bien simple : une liste non-ordonne d'images. Il est difficile d'tre plus minimaliste.
La premire chose faire tait videmment d'inclure jQuery, si vous avez oubli de faire cela, alors nous vous conseillons
vivement de revoir certains chapitres.
Code : HTML
<ul>
</ul>
</div>

<script
Il fallait galement inclure correctement le style CSS minimal du carrousel, qui consistait dfinir les positions absolues des
images et la position relative du carrousel. C'est un point trs important, sans cela, vous auriez des soucis de disposition trs
embtants !
Explications du code jQuery
De mme que pour l'inclusion de la librairie, il fallait tout d'abord s'assurer que le DOM tait correctement charg, grce
l'vnement ready() lanc sur le document :
Code : JavaScript
// notre code ici
});
Plusieurs variables devaient ensuite tre dfinies. Une bonne chose faire avant de se lancer dans un code jQuery est de lister
tous les objets que l'on va devoir utiliser, ainsi que toutes les informations dont on a besoin. Ici, il suffisait de cibler seulement
deux lments : le bloc du carrousel, et les images contenues par celui-ci. Ce genre de rflexion tait plutt facile, contrairement
la suite : qu'a-t-on besoin de connatre pour avancer dans notre systme ?
Nous vous avions mis sur une petite piste : les index des images. Grce un systme de compteur, vous pouviez contrler
l'affichage des images par leur index. Il tait donc d'usage de dfinir le nombre d'images qu'il y avait dans la liste, puis de
soustraire 1 pour obtenir l'index de la dernire diapositive (rappelez-vous que l'on commence de compter les index partir de 0, et
non de 1).
Une fois ceci fait, il fallait obtenir l'image courante, c'est--dire la premire image sur laquelle le slider devait commencer. Soyons
classique, et partons de la toute premire image, celle qui possde l'index 0. Grce la fonction eq(), vous pouviez la cibler trs
facilement.
Code : JavaScript
var $carrousel = $('#carrousel'), // on cible le bloc du carrousel
$img = $('#carrousel img'), // on cible les images contenues
dans le carrousel
indexImg = $img.length - 1, // on dfinit l'index du dernier
lment
i = 0, // on initialise un compteur
$currentImg = $img.eq(i); // enfin, on cible l'image courante,
qui possde l'index i (0 pour l'instant)
Une fois les variables cres, il fallait s'assurer que toutes les images sauf une taient invisibles. La proprit CSS display :
none vous permettait de faire cela : on cache toutes les images, puis on affiche seulement l'image courante.
Code : JavaScript
$img.css('display', 'none'); // on cache les images
$currentImg.css('display', 'block'); // on affiche seulement l'image
courante
Crer les contrles : image prcdente et image suivante
La base de notre systme pose, employons nous prsent travailler sur les contrles des images, c'est--dire les fonctions
d'affichage des images prcdentes ou suivantes. La structure HTML ne comprenait pas les deux lments permettant d'interagir
avec la page, il fallait donc les crer au moyen d'une mthode de manipulation du DOM. Nous vous suggrons append(), bien
que vous pouviez tout aussi bien employer d'autre fonctions.
Nous avons choisi de crer un bloc div contenant deux span, ayant respectivement la classe .prev et .next.
Code : JavaScript
$carrousel.append('<div class="controls"> <span
class="prev">Precedent</span> <span class="next">Suivant</span>
</div>');
En coutant le clic sur ces lments, il tait possible de dterminer s'il fallait passer l'image suivante, ou l'image prcdente.
Dans les deux cas, il suffisait de jouer avec l'index des diapositives : si l'on va l'image suivante, l'index s'incrmente de 1, si on
va l'image prcdente, il se dcrmente de 1.
Code : JavaScript
$('.next').click(function(){ // image suivante
i++; // on incrmente le compteur
$currentImg = $img.eq(i); // on dfinit la nouvelle image
$currentImg.css('display', 'block'); // puis on l'affiche
});
$('.prev').click(function(){ // image prcdente
i--; // on dcrmente le compteur, puis on ralise la mme
chose que pour la fonction "suivante"
$img.css('display', 'none');
$currentImg = $img.eq(i);
$currentImg.css('display', 'block');
});
On se heurte alors un nouveau problme : si l'on clique trop de fois sur une des deux fonctions, alors le compteur ne suit plus
les index des images. On peut alors se retrouver avec une image courante qui n'existe pas, et qui ne peut donc pas s'afficher. Pour
remdier ce problme, il suffit de s'assurer grce une condition que le compteur ne dpasse pas le dernier index, et ne puisse
pas aller en dessous de 0 :
Code : JavaScript
if( i <= indexImg ){
}
else{
i = indexImg;
}
});
if( i >= 0 ){
}
else{
i = 0;
}
});
Crer le dfilement d'images automatique
Enfin, pour terminer, vous deviez crer un dfilement d'images automatique. Nous vous conseillions pour cela d'utiliser la
fonction setTimeout() couple une autre fonction pour crer une boucle infinie, et rpter le dfilement. Celui-ci ne va que
dans un sens, ce qui est logique : il dfile vers la droite, c'est--dire qu'il affiche chaque fois l'image suivante. Rien de bien
compliqu : il suffit d'incrmenter le compteur. Seulement, il convenait de faire attention ce qu'il ne dpasse pas l'index de la
dernire image, en le remettant 0 le cas chant.
Code : JavaScript
function slideImg(){
setTimeout(function(){ // on utilise une fonction anonyme

if(i < indexImg){ // si le compteur est infrieur au dernier
index
i++; // on l'incrmente
}
else{ // sinon, on le remet 0 (premire image)
i = 0;
}
slideImg(); // on oublie pas de relancer la fonction la fin
}, 7000); // on dfinit l'intervalle 7000 millisecondes (7s)
}
slideImg(); // enfin, on lance la fonction une premire fois
Et voil, le carrousel est termin !
Code : JavaScript

var $carrousel = $('#carrousel'), // on cible le bloc du carrousel
$img = $('#carrousel img'), // on cible les images contenues
dans le carrousel
indexImg = $img.length - 1, // on dfinit l'index du dernier
lment
i = 0, // on initialise un compteur
$currentImg = $img.eq(i); // enfin, on cible l'image courante,
qui possde l'index i (0 pour l'instant)
$currentImg.css('display', 'block'); // on affiche seulement l'image
courante
class="prev">Precedent</span> <span class="next">Suivant</span>
</div>');
if( i <= indexImg ){
}
else{
i = indexImg;
}
});
if( i >= 0 ){
}
else{
i = 0;
}
});
function slideImg(){
setTimeout(function(){ // on utilise une fonction anonyme

if(i < indexImg){ // si le compteur est infrieur au dernier
index
i++; // on l'incrmente
}
else{ // sinon, on le remet 0 (premire image)
i = 0;
}
slideImg(); // on oublie pas de relancer la fonction la fin
}, 7000); // on dfinit l'intervalle 7000 millisecondes (7s)
}
slideImg(); // enfin, on lance la fonction une premire fois
});
Amliorations
Nous venons de vous prsenter un carrousel trs basique. La plupart de ceux que vous rencontrerez sur la toile sont beaucoup
plus sophistiqus, mais rappelez-vous qu'ils fonctionnent presque tous de la mme manire ! Que diriez-vous donc d'amliorer le
votre ? Voici quelques pistes :
le dfilement d'images n'est pas trs esthtique : la place du systme de display, essayez de mettre en place des
effets d'animation sympatiques !
pour le moment, les contrles sont trs basiques : il n'est pas possible d'aller une image prcise en cliquant une seule
fois. Que diriez-vous de raliser une liste de boutons reprsentant chacun une diapositive ?
de mme, il est possible de faire des miniatures des images et de les afficher en dessous du carrousel pour faire une bien
meilleure navigation !
...
Les possibilits sont infinies, on peut toujours trouver de nouvelles ides, qu'elles soient bonnes ou non. N'hsitez pas
regarder comment certains carrousel sont fait, vous risquez d'avoir de fabuleuses surprises !
Voil un TP qui ne vous aura pas fait chmer !
Nous allons prsent entrer dans une quatrime partie, qui sera entirement consacre AJAX. Si vous ne connaissez pas
vraiment le principe, ce n'est pas bien grave, car cette technologie a t compltement revisite par jQuery. Concrtement, vous
apprendrez raliser des requtes HTTP grce une fonction trs utilise, qui va par exemple vous permettre de traiter des
formulaires sans rechargement de la page !
Partie 4 : L'AJAX avec jQuery
Vous tes sur les bons rails pour devenir un vrai expert jQuery ! Vous connaissez bien les bases du framework, et en plus vous
savez manipuler le DOM avec lui : autant dire que vous savez presque tout faire. Ds maintenant : pratiquez ! C'est le meilleur
moyen pour ne jamais cesser de progresser.
Il y a nanmoins encore une chose que nous devons voir ensemble absolument : l'AJAX. Vous verrez que le framework nous
simplifie tellement la vie que vous ne pourrez plus concevoir un seul appel AJAX sur votre site sans employer jQuery. Le niveau
va quand mme monter d'un cran, alors on s'accroche !
AJAX : les requtes HTTP par l'objet
XmlHttpRequest
Vous qui tes dveloppeur JavaScript, vous savez trs certainement qu'utiliser AJAX sur son site peut rapidement devenir une
galre sans nom.
Comme son habitude : jQuery va nous simplifier la tche. Voyons comment l'on va pouvoir grer un appel AJAX grce au
framework.
AJAX : notre problmatique
AJAX (Asynchronous JavaScript and XML) n'est pas une technologie, c'est le rsultat d'un ensemble de technologies du web
qui fonctionnent ensemble pour arriver un objectif simple : rafrachir une partie de page web sans recharger la page complte.
AJAX... c'est simple !
Imaginons un fil de commentaires
Commenons penser un systme en AJAX, pour vous donner une meilleure ide de ce dont il s'agit. Imaginez un article sur le
web, qui possde son propre fil de commentaire : classique. Maintenant, ce que nous voulons, c'est que les visiteurs puissent
commenter notre article et mettre jour le fil de commentaire sans que la page soit recharge entirement. Le but du jeu est donc
qu'au moment de la soumissions du formulaire, une logique se mette en route ct jQuery, qui fera que le commentaire sera ajout
en base de donnes, et qu'il soit automatiquement ajout au fil, le tout sans recharger la page !
C'est totalement possible... et c'est mme trs rpandu. Si vous tes fan des rseaux sociaux, comme Facebook, vous avez
forcment t confront l'un de ces fils de commentaire dans votre vie de geek.
Fil de commentaire recharg en AJAX
Bon ! Maintenant une question doit vous titiller !
Comment diable cela se met-il en place dans le code ?
jQuery ne suffit pas !
Nous avons parl d'un fil de commentaire qui se recharge en AJAX plus haut, et nous avons mme voqu l'ide d'une base de
donnes. Vous devriez donc comprendre que jQuery est aussi capable d'interagir avec ce qu'il se passe ct serveur !
Si c'est ce que vous pensez, sachez que ce n'est que partiellement vrai. Pour interagir avec une base de donnes, jQuery va
devoir appeler des scripts ct serveur, qui eux sont capables de le faire. Vous commencez comprendre ? AJAX repose sur ce
fondement mme, la communication asynchrone d'un langage ct client, avec un langage ct serveur. Vous devinez la suite,
pour mettre en place un appel AJAX sur son site, jQuery ne va plus nous suffir. Voil ce dont on va avoir besoin :
Un langage ct client : nous utiliserons bien sr JavaScript, avec jQuery.
Un langage ct serveur : nous utiliserons ici le PHP.
Un appel AJAX sans le vocabulaire technique
Dans ce tutoriel, lorsque nous utilisions jQuery, nous l'avons utilis uniquement sur nos propres pages web : modification du
DOM, ajout d'animations, modification du CSS... nous ne visions rien d'autre que ce qui tait accessible ct client. Ici nous
voulons taper plus loin : appeler des scripts PHP et interagir avec notre serveur directement depuis jQuery. Le script PHP appel
fais son travail : envoi de mail, insertion en base de donnes... et surtout, il renvoie un rsultat que jQuery va intercepter. Ce
rsultat, c'est ce que jQuery utilisera pour mettra jour la page ! C'est comme a que le fil de commentaire de Facebook
fonctionne.
Un appel AJAX avec le vocabulaire technique
Nous coutons l'vnement clic sur le bouton d'envoi.
Lorsque cet vnement est ralis, nous envoyons une requte HTTP en POST vers un script PHP depuis jQuery.
PHP nous renvoie le commentaire post dans un format lger. Nous n'avons plus qu' l'ajouter au DOM avec jQuery... et
avec une petite animation au passage.
Certaines expressions comme "requte HTTP" vous semblent peut-tre obscures, mais ne vous en faites pas, on est l
pour apprendre tout a ensemble.
Nous aimerions vous faire remarquer quelque chose d'autre, souvenez-nous ce que signifie AJAX ? Asynchronous JavaScript
and XML. Depuis tout l'heure nous vous parlons de JavaScript, de jQuery et de PHP... mais il est pass o le XML l-dedans ?
Sachez que lappellation AJAX est sujette dbat. XML se situe en fait au niveau du retour que PHP fait et que jQuery
intercepte. Si nous souhaitons ajouter un nouveau commentaire, mieux vaut que le retour soit un peu structur pour le rendre
plus facilement exploitable pour nous, XML est alors tout indiqu. En fait, on peut aussi dcider de renvoyer du HTML ou mme
du texte pur, c'est comme vous voulez. Nanmoins on utilise gnralement un autre format, le JSON qui est plus simple traiter et
plus lger. On utilisera donc JSON ici, comme un peu tout le monde. C'est pourquoi beaucoup de personnes sont tentes de
parler d'AJAJ... gardez a pour votre culture, mais pour tre vraiment honnte avec vous, on s'en moque un peu. En bref, tout
cela pour dire que PHP doit vraiment nous renvoyer quelque chose, et c'est ce quelque chose que nous allons devoir utiliser
pour rafrachir la page.
Notez qu' partir de maintenant, nous allons devoir travailler plus souvent avec un langage ct serveur. Nous
utiliserons PHP lors de ce tutoriel, et c'est pourquoi nous vous incitons le connatre. Sachez que l'approche que nous
donnerons de ce langage restera nanmoins trs concise : nous sommes l pour apprendre jQuery, pas PHP. AJAX
n'impose pas PHP, si vous dveloppez dans d'autres langages cela fonctionnera galement.
Nous parlons depuis tout l'heure d'un fil de commentaire qui se recharge en AJAX, mais c'est loin d'tre la seule utilisation
possible d'AJAX. Nous pouvons potentiellement tout faire... car toute la puissance de PHP est notre disposition. On voit de
plus en plus d'applications ralises compltement grce AJAX, citons Google Maps pour l'exemple ! En guise de TP, nous
raliserons un tchat en AJAX pour clore cette grande partie du tutoriel.
Et le rle de jQuery dans tout a
Il nous simplifie la vie
Pour aborder la question d'un point de vue sensiblement plus technique : nous devons vous avouer que la base de chaque appel
AJAX est une requte HTTP. JavaScript est donc suffisamment puissant et volu pour nous permettre d'envoyer des requtes
HTTP. Le boulot de jQuery ? C'est de simplifier normment l'appel et le suivi de cette requte HTTP, et, en prime, de faciliter
normment le traitement du retour que fait PHP. jQuery nous simplifie encore la vie, mme tel point que raliser un appel AJAX
grce jQuery est presque une promenade de sant.
Faisons quand mme un point sur les requtes HTTP avant de commencer taper du code. Vous ne savez pas vraiment ce qu'est
HTTP ? Alors lisez la suite de ce chapitre. Si vous savez dj ce qu'est HTTP, vous pouvez passer directement la troisime
partie de ce chapitre.
Rappel sur les requtes HTTP
Avant de commencer taper du code, nous estimons bon de rappeler ce qu'est une requte HTTP et de quoi est-elle constitue,
ce serait quand mme dommage d'essayer d'envoyer quelque chose en JavaScript, alors que nous ne savons mme pas ce qu'est
ce "quelque chose" !
Le fonctionnement du web
Un monde de clients et de serveurs
Partie 4 : L'AJAX avec jQuery 81/150
Vous savez srement comment fonctionne le web : c'est un ensemble d'ordinateurs comme le vtre fonctionnant en rseau. On
peut ranger ces ordinateurs dans deux catgories : les clients et les serveurs. Les serveurs sont des ordinateurs sur lesquels se
trouvent les sites web, ils sont gnralement trs trs puissants et fonctionnent en permanence. L'autre groupe, les clients, sont
les ordinateurs qui demandent les pages web. Votre machine, comme les ntres, sont donc des clients. Les visiteurs d'un site web
sont des clients.
Certains sites web trs fort trafic ncessitent d'normes ressources serveur pour pouvoir servir leurs clients, on utilise
donc plusieurs serveurs pour un seul site. C'est le cas du Site du Zro qui utilise quelques serveurs, ou encore le cas de
Google, qui en utilise plusieurs millions. De la mme manire, un serveur peut trs bien grer plusieurs centaines de
sites web, pour peu qu'il soit assez puissant et que ces sites n'aient pas trop de trafic.
Pour obtenir une page web, un client demande donc un serveur une page web. Le serveur cherche dans son disque dur la
recherche de la page demande, et il la renvoie au client. Si des fichiers JavaScript sont rattachs cette page, le serveur les fait
parvenir aussi au client. Le navigateur web du client lit ensuite le code HTML et interprte le code JavaScript que le serveur lui a
renvoy, et il affiche la page au visiteur. Plutt simple non ?
Une langue commune : le protocole HTTP
Nanmoins, pour que le web fonctionne, il faut que le client et le serveur parlent la mme langue (on parle en fait de protocole
plutt que de langue ). Le protocole utilis sur le World Wide Web est le protocole HTTP. La "demande" que le client fait est
ce que l'on appelle une requte HTTP ; ce que le serveur rpond, c'est la rponse HTTP . Voil ce que pourrait tre un
change entre un client et un serveur.
Citation : Echange client/serveur
Client : Hey le serveur, voil ma requte HTTP : envoie moi la page www.site.com/index.html
Le serveur fouille dans son disque dur la recherche de la page index.html. Des fichiers JavaScript y sont rattachs. Il
renvoie le tout au client.
Serveur : "Voil la page que tu m'as demand avec les fichiers JavaScript : c'est ma rponse HTTP, plus !"
Voil comment a tourne. Vous n'avez pas vous soucier de comment votre requte HTTP est gnre ni comment elle est
envoye au serveur, c'est assez complexe, et nous n'avons pas vraiment besoin de savoir a pour grer des appels AJAX. Si
vous avez assimil cette ide de dialogue entre client et serveur, c'est tout bon.
Plusieurs types de requtes
Le type GET
Il existe plusieurs types de requte HTTP. L'un d'eux est le type GET. En anglais, GET signifie obtenir . Vous l'utiliserez lors de
vos rappels AJAX lorsque vous souhaiterez obtenir des donnes. Un exemple ? Imaginez un systme pour recharger des
commentaires ds que l'on clique sur un bouton Plus de commentaires .
L'appel AJAX est ici ddi la rcupration de donnes, nous ne faisons qu'obtenir les commentaires. Nous pouvons galement
envoyer des donnes grce GET. C'est mme courant, connaissez-vous les URL contenant des variables ? Gnralement les
caractres ?, = et & y sont prsents.
Code : Autre
http://site.com/article.php?page=1&auteur=robert
Nous pourrons galement spcifier ce genre de choses en GET.
Le type POST
Le type POST est un type ddi l'envoi de donnes, mais nous pouvons aussi en recevoir. Un autre exemple ? Imaginez un
systme pour envoyer un email en AJAX. Lorsque vous allez cliquer sur le bouton Envoyer , nous allons envoyer des
donnes au serveur, pour qu'il les envoie par email, avant de nous retourner un message de succs ou d'erreur. C'est vraiment
trs simple.
Un grand nombre de types de requtes HTTP existent, mais ils ne nous seront pas ncessaires pour traiter nos appels
AJAX. Les types GET et POST couvriront 99% de nos besoins.
Un langage ct serveur.
Transformer votre ordinateur en serveur
Votre ordinateur peut tout fait tre transform en serveur. Il va falloir passer par l pour continuer ; tant donn que nous allons
travailler avec le langage PHP, nous devons avoir un environnement de travail digne de ce nom. Lisez ce tutoriel de M@teo21
pour installer les programmes ncessaires afin obtenir un serveur en local sous Windows, Mac et Linux.
Vous allez nous trouver lourds, mais vraiment, il est plus que recommand de vous mettre niveau en PHP si vous ne
connaissez pas ce langage. Mieux vaut prvenir encore une fois avant de commencer.
Nous considrons que vous connaissez maintenant les tenants et les aboutissants d'AJAX. Notre but va donc tre d'envoyer
une requte HTTP au serveur depuis JavaScript grce jQuery. Nous devrons ensuite intercepter la rponse HTTP du serveur,
et rafrachir notre page web grce cette rponse.
AJAX par JavaScript
Nous allons ici commencer taper un peu de code !
Envoyer une requte HTTP : XmlHttpRequest la rescousse !
JavaScript a la particularit d'intgrer en natif une classe appele XmlHttpRequest (XHR) : vous n'avez rien tlcharger,
XmlHttpRequest fait partie intgrante de JavaScript. En instanciant un objet partir de cette classe, vous pouvez envoyer une
requte HTTP vers le serveur grce cet objet XHR : c'est comme a que cela marche !
Ce sont des notions de programmation oriente objet, et si vous n'tes pas trs l'aise avec ces notions, ce qui est loin
d'tre dramatique ceci dit, vous pouvez toujours relire ce chapitre du cours JavaScript pour vous remettre dans le bain.
Cet objet XmlHttpRequest va plus loin que a, car il vous permet vraiment de grer beaucoup d'aspects de votre requte HTTP,
et nous allons dcortiquer a ensemble dans la suite de ce tutoriel. C'est vraiment quelque chose de vaste qu'on va vous aider
dgrossir.
Le concept d'AJAX existe depuis bien avant XHR : il a t nanmoins grandement popularis par l'apparition de cette
classe.
Instancier XHR : un calvaire
Tout cela c'est trs beau, mais il existe nanmoins un petit problme : instancier un objet XHR peut devenir difficile... car il faut
prendre en compte le problme de compatibilit entre les navigateurs. Les navigateurs Internet Explorer antrieurs la version 7
utilisaient une implmentation diffrente de XHR : ActiveX, dvelopp par Microsoft. Il va donc falloir prendre en compte ces
navigateurs pour que notre appel AJAX soit mis en uvre sur ces ceux-ci.
Voici un code en JavaScript pur instanciant un objet XHR couvrant les navigateurs utilisant ActiveX et XHR. En jouant avec des
conditions, on arrive trs bien instancier un objet de type XHR pour chaque navigateur, c'est pas super pratique, mais on y
arrive.
Ce code est repris du tutoriel AJAX et l'change de donnes en JavaScript du Site du Zro.
Code : JavaScript
var xhr = null;

if(window.XMLHttpRequest || window.ActiveXObject){
if(window.ActiveXObject){
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}else{
xhr = new XMLHttpRequest();
}
}else{
alert("Votre navigateur ne supporte pas l'objet
XMLHTTPRequest...");
return;
}
C'est propre et a marche. Vous pouvez utiliser a sans problme sur votre site. Il y a quand mme un tout petit soucis ici : c'est
vraiment long taper, et nous vous le disions, pas pratique du tout. Voici 16 lignes de code, utilises uniquement pour rgler un
problme de compatibilit entre les navigateurs... si on demandait jQuery de faire a notre place, ce serait mieux non ?
XmlHttpRequest avec jQuery
XmlHttpRequest devient nettement plus facile instancier avec jQuery. Une seule ligne de code, cela va aller trs vite !
Instancier XmlHttpRequest avec jQuery
Instancier un objet XmlHttpRequest devient extrmement simple, cela va tre rendu possible par la fonction jQuery.ajax()
ou $.ajax(). Cette seule et unique fonction va nous permettre d'instancier l'objet XmlHttpRequest qui fait tant couler
d'encre... Vous n'avez mme pas besoin d'utiliser le mot-cl new pour instancier l'objet : cette fonction de jQuery le fait
implicitement !
Code : JavaScript
$.(document).ready(function(){
/*
* Utilisons $.ajax pour crer une instance de XmlHttpRequest
*/

$.ajax();
});
Et hop, XmlHttpRequest est instanci. Vous pouvez dsormais procder l'envoie d'une requte HTTP grce cet objet. Bien
sr, ce code se veut le plus simple et le plus basique possible ; vous pouvez coupler cette fonction avec tous les vnements,
effets ou autre que vous voulez.
Nous avons pris tout l'heure comme exemple un fil de commentaire qui se rechargerait en AJAX ds que l'on cliquerait sur un
bouton plus de commentaires . Imaginons que ce bouton existe dans le DOM, et qu'il dispose de l'identifiant #more_com.
On va couter l'vnement click() sur ce bouton et ds qu'il sera ralis, on instanciera un objet XHR !
Code : JavaScript
/*
* Ecoutons l'vnement click()
*/
$("#more_com").click(function(){
$.ajax();
});
});
Simple, rapide et efficace !
Et niveau compatibilit, vous tes SR que c'est vraiment au point ?
Oh que oui. jQuery reste fidle lui-mme : ce code fonctionne sur tous les navigateurs qui supportent XmlHttpRequest et
ActiveX de Microsoft ! Bien sr, rien n'est magique. Si vous utilisez un navigateur qui date de Mathusalem et qui ne supporte
pas du tout AJAX, ne vous attendez pas ce qu'un objet soit instanci. vous de vous tenir jour.
C'est forcment un peu droutant au dbut, mais comprenez bien que si vous voyez $.ajax() quelque part, c'est qu'un objet
XmlHttpRequest est instanci. Avec cette fonction, jQuery fait tout implicitement.
XHR permet d'envoyer des requtes HTTP depuis JavaScript, cette classe est donc la base des appels AJAX. La fonction
$.ajax() de jQuery nous permet d'instancier un objet trs rapidement partir de cette classe, autant dire que cette partie du
tutoriel est l pour vous permettre de matriser cette fonction ! Et croyez-nous, c'est quand mme du boulot.
Si vous tes amen utiliser AJAX avec du JavaScript "nu", ou tout simplement que vous prfrez tout faire par vous-mme,
nous pouvons vous conseiller le tutoriel AJAX du Site du Zro. Il a la particularit d'expliquer AJAX sans l'utilisation de
frameworks.
Nous n'avons fait qu'instancier un objet XHR, mais nous n'exploitons encore pas sa puissance. Autrement dit, nous n'avons
encore rien fait ! Voyons voir comment on va pouvoir s'y prendre, toujours l'aide de jQuery et de cette fameuse fonction
$.ajax().
Le fonctionnement de $.ajax()
La fonction $.ajax() va tre incontournable pour nos appels AJAX en jQuery, nous l'employons pour envoyer une requte
HTTP. Nous allons dsormais avoir trs souvent recours cette fonction, alors commenons par voir ce qu'elle a dans le ventre.
C'est l'objet de ce chapitre.
$.ajax() et ses paramtres
Pour tirer pleinement profit de la puissance de $.ajax(), voyons comment l'on va pouvoir exploiter ses paramtres, qui sont, pour
certains, vitaux pour l'envoie de votre requte HTTP.
Nous poursuivrons ici avec l'exemple du fil de commentaire recharg par un bouton voqu dans le chapitre prcdent.
Nous voquerons des scripts PHP appels more_come.php et send_mail.php ici. Nous n'tudierons pas ces
codes PHP, mais nous vous demandons de nous faire confiance : ils existent, et ils fonctionnent. La preuve est que la
rponse HTTP est bien renvoye.
Les paramtres principaux de $.ajax()
Le fichier cibl
Lorsque vous envoyez une requte HTTP, vous demandez quelque chose au serveur. Dans notre cas de figure, il s'agit
simplement du script ct serveur qui va aller chercher les commentaires dans la base de donnes et nous les retourner. C'est
plutt logique non ?
Pour spcifier quelle est la ressource cible (notre script PHP) nous allons devoir utiliser le paramtre url de $.ajax().
Code : JavaScript

$.ajax({
url : 'more_com.php' // La ressource cible
});

});
Nous considrons ici que le fichier PHP excut ct serveur s'appelle more_com.php. C'est un lien relatif, le fichier PHP se
trouve donc dans le mme rpertoire que le fichier JavaScript, et le fichier HTML auquel il est li. Ce code marche, mais il ne fait
rien. Nous allons devoir spcifier le type de la requte.
Le type de la requte : POST ou GET ?
Devons-nous envoyer une requte de type POST ou GET ? Utiliser le type POST est ici compltement insens, tant donn que
nous ne souhaitons pas envoyer d'informations au serveur (nous ne postons pas un formulaire par exemple). Nous allons donc
envoyer une requte de type GET. Cela passe ici par le paramtre type.
Code : JavaScript

$.ajax({
url : 'more_com.php', // La ressource cible
type : 'GET' // Le type de la requte HTTP.
});

});
Notez ce sujet que le type GET est le type que jQuery prend par dfaut. Vous n'avez pas besoin de le spcifier lorsque
vous voulez faire une requte de type GET. Pour vous habituer utiliser le paramtre type et vous faire comprendre
qu'il est bien l, nous continuerons l'employer dans nos prochains exemples.
Envoyer des lments en GET
Si votre requte est de type GET, rien ne vous empche de faire passer des paramtres avec GET pour les utiliser ct serveur
dans l'array $_GET. Pour cela, vous pouvez utiliser le paramtre data. Avec un peu de concatnation, on s'en sort trs bien.
Code : JavaScript

$.ajax({
type : 'GET' // Le type de la requte HTTP.
data : 'utilisateur=' + nom_user;
});

});
Avec ceci, du ct serveur, $_GET['utilisateur'] contiendra la valeur de la variable nom_user. C'est plutt simple.
Le type de donnes recevoir
Nous devons spcifier maintenant le type de donnes que nous allons recevoir de PHP. Rappelez-vous, nous pouvons recevoir
tout et n'importe quoi : du XML, du HTML, du texte, du JSON... peu importe ! On utilisera en principe JSON dans nos projets,
mais nous allons utiliser ici du HTML afin de vous montrer que c'est tout fait utilisable.
Code : JavaScript
$("#more_come").click(function(){

$.ajax({
type : 'GET', // Le type de la requte HTTP
/**
* Le paramtre data n'est plus renseign, nous ne faisons plus
passer de variable
*/
dataType : 'html' // Le type de donnes recevoir, ici, du
HTML.
});

});
Nous en avons fini avec les requtes de type GET ! Tout ce qu'il nous reste faire maintenant, c'est de les traiter ct serveur !
Nanmoins, nous allons voir maintenant comment grer une requte de type POST.
Envoyer des requtes de type POST
Pour nous donner un petit exemple dans cette petite partie sur les requtes POST, nous vous demandons d'oublier cinq minutes
l'histoire du fil de commentaire. Pensons plutt l'envoi d'un mail depuis une page de contact. Le visiteur tape un message dans
un formulaire HTML, et ce message vous est envoy par email en AJAX. Si nous souhaitons raliser ce systme, il faut envoyer
des informations au serveur avec notre requte HTTP, pour cela, il faut commencer spcifier un type POST pour $.ajax().
Code : JavaScript
$("#envoyer").click(function(){

$.ajax({
url : 'send_mail.php', // Le nom du script a chang, c'est
send_mail.php maintenant !
type : 'POST', // Le type de la requte HTTP, ici devenu
POST
dataType : 'html'
});

});
Tout est pareil, on a juste bascul sur du POST dans le paramtre type, mais ce n'est pas vraiment suffisant.
Nous allons devoir faire passer nos variables JavaScript notre script PHP. Ces variables contiennent les informations du
formulaire, et PHP en a besoin pour agir ct serveur. C'est trs simple, l'argument data revient ici.
Code : JavaScript
$("#envoyer").click(function(){

$.ajax({
url : 'send_mail.php',
type : 'POST', // Le type de la requte HTTP, ici devenu
POST
data : 'email=' + email + '&contenu=' + contenu_mail, // On
fait passer nos variables, exactement comme en GET, au script
more_com.php
dataType : 'html'
});

});
Nous avons une bonne nouvelle pour vous, votre requte HTTP fonctionne ! Si les scripts more_come.php ou
send_mail.php fonctionnent aussi, ils ralisent leur boulot ct serveur, avant de nous envoyer une rponse. Seulement, on
a toujours un petit problme ct client, nous n'avons rien pour traiter le retour ! Nous allons remdier cela tout de suite, grce
trois nouveaux paramtres de $.ajax().
Les paramtres success, error et complete !
Votre requte HTTP est donc prte, et pour peu que votre script ct serveur soit prsent et fonctionnel, elle a toutes les
chances de marcher. Aprs avoir fait son boulot, le serveur nous renvoie quelque chose. Manque de bol, nous n'avons rien pour
grer le retour de $.ajax(). Les paramtres complete, success et error vont nous tre trs utiles !
Traiter les retours de la fonction
L'appel AJAX a russi : success
jQuery ne nous laisse pas en plan et va nous proposer un paramtre pour grer le retour de notre fonction $.ajax() en cas de
russite. Le paramtre s'appelle success, et il ne sera excut QUE si l'appel AJAX a abouti. Ce paramtre prend en charge une
fonction qui sera excute. C'est logique, lorsque l'appel AJAX aura russi, cette fonction est automatiquement appele ; c'est
elle que l'on utilise pour mettre jour notre page ! Comme quoi, tout vraiment t pens.
Code : JavaScript

$.ajax({
url : 'more_com.php',
type : 'GET',
dataType : 'html', // On dsire recevoir du HTML
success : function(code_html, statut){ // code_html contient
le HTML renvoy

}
});

});
L'argument statut est une chane de caractre automatiquement gnre par jQuery pour vous donner le statut de votre
requte.
L'appel AJAX n'a pas russi : error
Si l'appel AJAX a rencontr une erreur, on va avoir de quoi grer l'erreur de la mme manire qu'avec success. Le paramtre qui
va tre employ ici sera error. Le paramtre excute une fonction si l'appel AJAX a chou.
Code : JavaScript

$.ajax({
type : 'GET',
dataType : 'html',
success : function(code_html, statut){ // success est
toujours en place, bien sr !

},
error : function(resultat, statut, erreur){
}
});

});
La fonction excute par error prend en charges trois arguments : le rsultat, le statut, et l'erreur. Vous connaissez le second
argument, c'est le mme que pour success, il ne nous sera pas utile. Le premier est un objet XHR renvoy par jQuery. Le
dernier est en revanche nettement plus intressant. C'est en fait une exception, vous pouvez ici placer une chane de caractre
afficher votre visiteur si l'appel AJAX n'a pas fonctionn.
Un dernier paramtre de $.ajax() : complete
Vous le devinez, complete va s'excuter une fois l'appel AJAX effectu.
Le paramtre va prendre deux arguments, l'objet resultat dont nous avons parler plus haut ainsi qu'un statut. Vous commencez
tre habitu, n'est-ce pas ?
Code : JavaScript

$.ajax({
type : 'GET',
dataType : 'html',
success : function(code_html, statut){

},
},
complete : function(resultat, statut){
}
});

});
C'est l'intrieur de ces fonctions que nous allons devoir traiter la suite des vnements : nous voulons maintenant ajouter les
commentaires reus du serveur notre fil de commentaires sur notre page. Imaginons un bloc div portant l'identifiant
#commentaires qui contienne les commentaires dj chargs dans la page. Nous allons vouloir y ajouter les commentaires
reus.
Pour cela, il faut ajouter un petit quelque chose dans le success, mais vous devriez savoir le faire tout seul.
Code : JavaScript
// On reprend le mme id que dans le prcdent chapitre

$.ajax({
type : 'GET',
dataType : 'html',
success : function(code_html, statut){
$(code_html).appendTo("#commentaires"); // On passe
code_html jQuery() qui va nous crer l'arbre DOM !
},

},
complete : function(resultat, statut){
}
});

});
Et voil ! La fonction $.ajax() est complte ! De l, vous tes libre d'ajouter tous les effets que vous souhaitez afin de
rendre la chose un peu plus anime !
Beaucoup de choses peuvent vous sembler confuses, tout cela se mettra doucement en place lorsque nous parlerons
des vnements AJAX. Nanmoins, ces connaissances sont trs largement suffisantes pour mettre en place votre
premier appel AJAX.
Les raccourcis $.get() et $.post()
Nous avons l'honneur de vous dire que vous savez maintenant grer un appel en AJAX simple en jQuery ! Tout passe par la
fonction $.ajax() et ses paramtres, seulement il existe deux raccourcis bien utiles que nous allons voir ici.
Allez plus vite avec $.get() et $.post()
Des raccourcis qui fonctionnent diffremment
Avouez qu'crire une fonction $.ajax() pour ensuite dfinir son type GET/POST dans le paramtre adquat, c'est lourd. On a
voulu simplifier la vie aux dveloppeurs en leur permettant de crer directement une requte GET ou POST. Ces raccourcis sont
les fonctions $.get() et $.post(). Toutes les deux fonctionnent de la mme manire, elles font appel implicitement
$.ajax() en lui spcifiant un type GET pour $.get() et un type POST pour $.post().
Et l'objet XmlHttpRequest, il est quand mme instanci ?
Bien sr, vous ne vous rappelez pas du fonctionnement de $.ajax() ? Ds qu'elle est appele, un objet de type XHR est cr
; $.get() et $.post() font toutes les deux appel cette fonction, l'objet est donc bel et bien instanci. Un peu de code pour
vous montrer a.
Code : JavaScript
/**
* $.get() vaut $.ajax() avec un type get
* Ces lignes reviennent faire un $.get();
*/
$.ajax({
type : 'get'
});
/**
* De la mme manire $.post() vaut $.ajax() avec un type post
* Ces lignes reviennent faire un $.post();
*/
$.ajax({
type: 'post'
});
Nous esprons que vous devinez qu'il nous reste quand mme deux ou trois choses rgler, sinon, relisez les deux premires
parties de ce chapitre !
Un appel AJAX en GET avec $.get()
La fonction $.get() se veut tre un raccourci de $.ajax() avec un type GET. Nous insistons bien sur le terme de raccourci,
car mme les arguments s'inscrivent de manire simplifie par rapport tout l'heure. Les arguments demands sont les mmes :
l'URL du fichier appel ;
les donnes envoyes* ;
une fonction qui va grer le retour ;
le format des donnes reues.
L'argument marqu d'une astrisque dsigne les donnes envoyes. Nous pouvons galement faire passer des
variables en GET avec des URL ayant le bon format ; ?prenom=lorem&nom=ipsum en est un exemple.
Nous allons vous montrer un code mettant en application la fonction $.get().
Code : JavaScript
$.get(
'fichier_cible.php', // Le fichier cible ct serveur.
'false', // Nous utilisons false, pour dire que nous n'envoyons
pas de donnes.
'nom_fonction_retour', // Nous renseignons uniquement le nom de
la fonction de retour.
'text' // Format des donnes reues.
);
function nom_fonction_retour(texte_recu){
// Du code pour grer le retour de l'appel AJAX.
}
C'est du classique, la seule diffrence par rapport tout l'heure est la rapidit d'criture de l'appel AJAX. Une dernire chose
notable : la fonction de retour. Nous prfrons renseigner son nom dans $.get(), et la dfinir plus bas pour une meilleure
lisibilit.
Cette dernire prend un argument : il est automatiquement cr par $.get() et il contient les donnes reues du serveur. Nous
n'avons qu' le passer en argument de notre fonction de retour, et cela fonctionne ! De l, nous pouvons imaginer tout type de
traitement possible pour nos donnes. Un appel de type GET avec $.get() devient donc particulirement facile grer.
Un appel AJAX en POST avec $.post()
$.post() fonctionne de la mme manire que $.get() : c'est un raccourci pour crer rapidement un appel AJAX de type
POST. Les arguments qu'elle prend sont identiques ceux de sa soeur :
l'URL fichier appel ;
les donnes envoyes ;
une fonction qui va grer le retour ;
le format des donnes reues.
Avec POST, il devient obligatoire d'envoyer des variables, c'est la raison d'tre mme de ce type.
Imaginons l'envoi d'un email en AJAX avec la fonction $.post().
Code : JavaScript
$.post(
'send_mail.php', // Le fichier cible ct serveur.
{
sujet : $("#sujet").val(); // Nous supposons que ce
formulaire existe dans le DOM.
contenu : $("#contenu").val();
},
'nom_fonction_retour', // Nous renseignons uniquement le nom de
la fonction de retour.
'text' // Format des donnes reues.
);
function nom_fonction_retour(texte_recu){
// Du code pour grer le retour de l'appel AJAX.
}
C'est pareil ! Oui, ceci prs que nous faisons cette fois-ci rellement passer des variables. Pour le reste, la fonction fonctionne
vraiment de la mme manire que $.get().
Utiliser $.ajax() ou $.get() et $.post() ?
Pour notre part, nous vous conseillons vraiment d'utiliser les deux raccourcis pour grer vos appels AJAX dans votre projet.
Pour une simple et bonne raison : c'est juste plus simple taper, comprendre, et rcrire. N'oubliez pas la devise de jQuery :
crivez moins, faites plus !
Srialisez vos formulaires !
Un raccourci trs sympathique peut tre exploit lorsque vous grez un appel AJAX de type POST impliquant l'utilisation d'un
formulaire. Il s'agit de la srialisation.
La srialisation
La mthode serialize() de jQuery
Vous souhaitez envoyer les variables issues d'un formulaire HTML un script PHP en AJAX : c'est l'exemple typique de
l'utilisation de la fonction $.ajax(). Un problme va se poser lorsque vous devrez spcifier vos variables et leurs contenus :
vous devrez concatner dans une chane de caractres toutes ces variables, exactement comme on l'a vu...
Code : JavaScript
$.ajax({
/**
* Nous rutilisons $.ajax() pour illustrer l'exemple
*/
// Concentrons nous sur le paramtres data
data : 'valeur1=' + valeur1 + '&valeur2=' + valeur2 +
'&valeur3=' + valeur3,
});
Cela fonctionne, mais ce n'est franchement pas facile taper. Alors oui, si on n'a que quelques variables spcifier, c'est faisable,
mais si notre formulaire HTML est vraiment trs long cela devient vite un calvaire.
La solution ce problme, c'est la srialisation du formulaire. Elle est rendue possible grce la mthode serialize() de
jQuery. Son but est de transformer les champs d'un formulaire en chane de caractres avec les variables et leurs contenus
concatns.
Un exemple de srialisation
Voici le formulaire sur lequel nous souhaitons appliquer serialize().
Code : HTML

<form id="formulaire" method="POST" action="traitement.php">
<input type="text" name="valeur1" />
<input type="submit" name="submit" />
</form>
Le but est d'obtenir
data : 'valeur1=' + valeur1 + '&valeur2=' + valeur2 + '&valeur3=' + valeur3 afin de
l'envoyer en AJAX. Voil comment nous devons procder pour automatiser cela :
Code : JavaScript
$("#formulaire").submit(function(e){ // On slectionne le
formulaire par son identifiant
e.preventDefault(); // Le navigateur ne peut pas envoyer le
formulaire
var donnees = $(this).serialize(); // On crer une variable
content le formulaire srialis

$.ajax({
//...
data : donnees,
//...
});
});
Et voil ! Votre formulaire est srialis... et cela fonctionne ! On vient de gagner un temps fou, pas vrai ?
Nous ne srialiserons pas les formulaires dans les prochains exemples de ce tutoriel. C'est juste une petite astuce que
nous vous donnons et qui fait gagner vraiment beaucoup de temps, surtout si le formulaire en question est gros.
Ce chapitre est charnire, assurez-vous de l'avoir compris et s'il le faut, lisez et relisez ces lignes. $.post() et $.get() sont
la base des appels AJAX en jQuery, si vous ne l'avez pas compris vous n'irez nulle part. Lisez la documentation sur
jQuery.ajax() ! Cela vous aidera sans aucun doute.
Vous savez lancer des requtes HTTP vers des scripts distants, c'est bien. Mais tout cela reste trs abstrait : nous n'avons
encore aucun script rel ct serveur pour traiter nos appels AJAX. Donnons donc une dimension bien plus concrte tout cela
en crant nos scripts ct serveur. Tout va se mettre en place ce moment-l ! Nous coderons dans le chapitre suivant un
systme de connexion trs basique en AJAX.
Cas concret : un formulaire de connexion avec
AJAX
Dans le chapitre prcdent, nous avons parl de tout le fonctionnement d'AJAX ct client mais pas ct serveur. Il nous
manque donc une partie cl pour faire fonctionner un appel AJAX.
Nous allons ici nous attaquer un cas d'utilisation concret d'AJAX : un systme de connexion instantane. Ce sera l'occasion de
voir non seulement ce qu'il se passe ct client, mais aussi ct serveur.
Prparons le terrain
Au cours de ce chapitre, nous allons crer ensemble un formulaire de connexion en AJAX grce jQuery.
Le formulaire de connexion
Une mise en aplication
Ce cas concret nous permettra de revoir tout ce qu'il est ncessaire pour la mise en place d'un appel AJAX sur son site web.
Nous devrons d'abord crer le formulaire de connexion en HTML qui demandera un nom d'utilisateur ainsi qu'un mot de passe.
Ensuite, nous utiliserons jQuery afin de lancer un appel AJAX vers un script PHP appel login.php. Enfin, nous enverrons
ce script les donnes que l'utilisateur a tap dans le formulaire.
Ce fichier PHP comparera les informations reues avec des donnes pr-enregistres. Si elles correspondent, nous renverrons un
texte indiquant le succs de l'opration. Sinon, nous renverrons une erreur.
Ct client : du HTML et un appel AJAX
Nous allons ici crer tout ce qui sera ncessaire d'tre affich du ct client. Nous verrons juste aprs comment crer et grer
l'appel AJAX ct serveur.
Un formulaire HTML et un appel AJAX.
La page HTML
Pour commencer, nous allons devoir crer une page HTML trs simple. Elle devra tre lie jQuery, mais surtout proposer un
formulaire HTML afin de laisser le visiteur entrer un pseudo et un mot de passe. Nous allons crer cette page HTML tout de
suite.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Un formulaire de connexion en AJAX</title>
</head>
<body>
<h1>Un formulaire de connexion en AJAX</h1>
<form>
<p>
Nom d'utilisateur : <input type="text" id="username" />
Mot de passe : <input type="password" id="password" />
<input type="submit" id="submit" value="Se connecter !" />
</p>
</form>
<script
</body>
</html>
C'est trs basique, vous devriez comprendre tout ce qui est inscrit dans cette page web.
Ajoutons notre appel AJAX
Une bonne pratique est de crer un nouveau fichier pour chaque appel AJAX que nous souhaitons faire sur notre page web et
ensuite de la lier la page HTML grce la balise <script>. Nanmoins, nous allons ici crer l'appel AJAX directement dans
une balise <script> sur notre page HTML, simplement pour une question de lisibilit et de facilit de lecture pour ce tutoriel.
Etant donn que nous souhaitons utilisons un formulaire, nous allons faire transiter nos donnes grce POST. C'est donc la
fonction $.post() de jQuery que nous allons utiliser ici.
Code : HTML
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<script>
$("#submit").click(function{
$.post(
'connexion.php', // Un script PHP que l'on va crer
juste aprs
{
login : $("#username").val(); // Nous rcuprons la
valeur de nos inputs que l'on fait passer connexion.php
password : $("#password").val();
},
function(data){ // Cette fonction ne fait rien encore,
nous la mettrons jour plus tard
},
'text' // Nous souhaitons recevoir "Success" ou
"Failed", donc on indique text !
);
});
});
</script>
</body>
</html>
Un air de dj vu ? Normal, nous venons de voir a dans le prcdent chapitre. Rien de bien nouveau pour vous.
Ct serveur : un script PHP de connexion
Nous allons ici crer un script PHP qui va recevoir les donnes AJAX et les traiter afin de connecter le membre.
Agir ct serveur
Un script PHP
Ct serveur, nous allons devoir vrifier si les donnes ont bien t entres dans le formulaire HTML. Nous utilisons ici le
langage PHP, cela se gre trs bien avec quelques conditions. Voici un code que vous devriez tre capable de comprendre.
Nous allons utiliser le tableau $_POST pour effectuer nos vrifications. Cela marche exactement comme si vous aviez soumis
votre formulaire en HTML : rien ne change ! Des donnes sont bien passes en POST et sont prsentes dans la requte HTTP.
Nous pouvons y accder grce $_POST. La premire chose faire est de vrifier que les donnes nommes username et
password sont bien cres et ne sont pas vides.
Code : PHP
<?php

if( isset($_POST['username']) && isset($_POST['password']) ){
}
?>
Certains frameworks PHP comme Symfony2 mettent votre disposition des fonctions toutes prtes pour vrifier que
l'appel en cours est bien un appel AJAX... simplifiant ainsi le traitement ct serveur. Nous pouvons vous conseiller ce
framework, il est PHP ce que jQuery est JavaScript.
Si ces deux donnes existent, nous allons pouvoir continuer notre traitement ct PHP.
Prochaine tape : charger les donnes utilisateur
Ici, nous allons devoir comparer les donnes entres dans le formulaire des donnes pr-enregistres. En ralit, vous
comparerez certainement les donnes entres des valeurs en base de donnes. Ici, nous allons faire les choses plus
simplement, et comparer de manire trs basique les donnes des variables dans notre script.
Code : PHP
<?php
/**
* Nous crons deux variables : $username et $password qui valent
respectivement "Sdz" et "salut"
*/
$username = "Sdz";
$password = "salut";
}
?>
De l, nous allons pouvoir effectuer notre comparaison avec les donnes entres en base de donnes. Si les informations
correspondent, nous allons renvoyer le texte Success en dmarrant une session ; si les informations ne correspondent pas,
nous allons renvoyer le texte Failed .
Code : PHP
<?php
/**
* Nous crons deux variables : $username et $password qui valent
respectivement "Sdz" et "salut"
*/
$username = "Sdz";
$password = "salut";
if($_POST['username'] == $username && $_POST['password'] ==
$password){ // Si les infos correspondent...
session_start();
$_SESSION['user'] = $username;
echo "Success";
}
else{ // Sinon
echo "Failed";
}
}
?>
Et voil ! Ct PHP, c'est trs basique, mais a marche ! Bien sr, dans la ralit vous pouvez faire tout ce que vous voulez :
excuter des requtes SQL, envoyer des emails... bref, tout ce que PHP est capable de faire en temps normal est faisable ici : rien
n'a chang !
De retour ct client
Non, ce n'est pas fini !
Forcment, quel que soit le rsultat ct serveur, il faut afficher quelque chose au visiteur pour ne pas le laisser en plan. C'est ici
que nous allons grer le rsultat de notre appel AJAX grce aux attributs de $.post().
Vous rappelez-vous de la fonction que nous avions ajout $.post() ? Eh bien c'est l'heure de la mettre jour. On sait que
notre script PHP nous renvoie forcment deux chanes de caractres : success ou failed . On va donc simplement jouer du
ct jQuery avec quelques conditions... et devinez quoi, la valeur data a t remplie automatiquement par jQuery grce
l'affichage que nous avons fait en PHP !
Rajoutons un bloc div en HTML qui portera l'identifiant #resultat afin d'y ajouter un retour pour le visiteur.
Code : HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="resultat">

</form>
<script>
$("#submit").click(function{
$.post(
'connexion.php', // Un script PHP que l'on va crer
juste aprs
{
login : $("#username").val(); // Nous rcuprons la
valeur de nos input que l'on fait passer connexion.php
password : $("#password").val();
},
function(data){
if(data == 'Success'){
// Le membre est connect. Ajoutons lui un
message dans la page HTML.
$("#resultat").html("<p>Vous avez t connect
avec succs !</p>");
}
else{
// Le membre n'a pas t connect. (data vaut
ici "failed")
$("#resultat").html("<p>Erreur lors de la
connexion...</p>");
}

},
'text'
);
});
});
</script>
</body>
</html>
C'est tout bon, ce code marche, et vous pouvez le tester !
Vous devez maintenant avoir une meilleure ide de la manire d'utiliser AJAX concrtement sur votre site web. C'tait trs simple :
nous allons pouvoir apprendre quelques nouvelles notions inhrentes l'utilisation d'AJAX en jQuery avant votre travail
pratique, c'est le cas des vnements AJAX.
Les vnements AJAX
Nous matrisons maintenant les principales caractristiques d'AJAX, et nous avons l'honneur de vous dire qu' ce moment
prcis du cours, vous tes capable de grer des appels AJAX sur votre site en toute autonomie.
Nous aurions pu nous arrter l, mais cela aurait t un crime de ne pas vous parler des vnements AJAX. Les choses que vous
auriez pu ne pas comprendre dans le chapitre prcdent vous se mettre en place dans votre tte l'aide de ce chapitre.
Les requtes AJAX sur coute
Vous connaissez bien sr les vnements, nous travaillons avec eux depuis le tout dbut de ce tutoriel. Les vnements que
nous vous proposons d'couter maintenant concernent directement AJAX, mais ils fonctionnent de la mme manire que les
autres : ils s'activeront en fonction de l'tat de votre requte AJAX.
Des vnements, ni plus, ni moins
Ces vnements, qui servent mettre sur coute les requtes AJAX, fonctionnent exactement de la mme manire que tous les
autres vnements que nous avions vus jusqu' maintenant. C'est--dire que vous pouvez les employer grce la mthode
on(), mais aussi directement sous la forme de fonctions qui leurs sont ddies.
couter le dbut d'une requte AJAX
Le premier vnement que nous vous proposons de connatre est l'vnement ajaxStart(). Cet vnement permet tout
simplement d'couter le dbut d'une requte AJAX, il sera ralis ds que l'utilisation de la fonction $.ajax() - et donc
$.get() ou $.post() - sera faite.
Code : JavaScript
$("p").ajaxStart(function(){
console.log("L'appel AJAX est lanc !");
});
Ici, ds qu'un appel AJAX prsent sur cette page sera lanc, une fonction va envoyer dans la console le texte : L'appel AJAX
est lanc !
Mais... quoi a sert ?
Bien sr, dans cet exemple, cela ne sert vraiment rien. Mais dans la ralit, vous pourriez utiliser cet vnement afin de le
spcifier votre visiteur... vous de voir selon vos besoins si vous devez ou non utiliser cet vnement.
couter le succs d'une requte AJAX
Pour couter le succs d'une requte AJAX se droulant depuis la page sur laquelle nous travaillons, nous pouvons utiliser
l'vnement ajaxSuccess(). Il s'utilise de la mme manire qu'ajaxStart(), mais coute quand lui le succs d'une
requte, pas son dbut.
Code : JavaScript
$("p").ajaxSuccess(function(){
console.log("L'appel AJAX a russi !");
});
couter l'chec d'une requte AJAX
Vous l'avez devin, pour couter l'chec d'une requte AJAX, un autre vnement est disponible ; il s'appelle ajaxError(). Il
est ralis quand une requte AJAX en cours sur la page choue.
Code : JavaScript
$("p").ajaxError(function(){
console.log("L'appel AJAX a chou.");
});
Nous voil avec dj trois vnements pour couter les principaux tats de notre requte AJAX. Voyons maintenant un cas
d'utilisation concret, car nous pensons que l'utilit de ces outils reste encore a tre dmontre.
Cas d'utilisation des vnements : un loader
Nous allons ici aborder l'utilisation des vnements AJAX dans un cas concret.
Un cas concret : chargement de commentaires
Un chargement lanc au dbut de la requte
Reprenons ici l'exemple vu prcdemment lorsque nous voulions rcuprer des commentaires en base de donnes, lors du clic
sur le bouton portant l'identifiant #more_com. Ici, nous allons rendre la chose un petit plus attrayante avec l'utilisation des
vnements AJAX. Nous afficherons un loader (une image indiquant le chargement) anim lorsque la requte AJAX dmarrera.
Code : JavaScript
$("<div id='loading'></div>").insertAfter("#more_com"); // Nous
ajoutons un lment aprs le bouton
$("#loading").css({ // Nous appliquons du CSS cet lment pour y
afficher l'image en background
background : "url(load.gif)", // On affiche l'image en arrire-
plan
display : "none" // Nous cachons l'lment
});
$.get(

'more_com.php',
false,
'fonction_retour',
'text'
);
$("#loading").ajaxStart(function(){ // Nous ciblons l'lment
#loading qui est cach
$(this).show(); // Nous l'affichons quand la requte AJAX
dmarre
});
});
Lisez ce code, vous verrez, c'est trs simple comprendre finalement. Voil une utilisation concrte de ajaxStart().
Il existe galement un vnement ajaxComplete() que vous pourriez utiliser pour cacher nouveau le loader.
Ainsi, son affichage ne durera que la dure de la requte AJAX.
Nous avons maintenant pass en revue tout ce qu'il tait indispensable de connatre d'AJAX avec jQuery. Si vous tes intress
par les vnements AJAX, vous pouvez dcouvrir les 3 autres vnements AJAX restants dans la documentation, vous devriez
tre compltement capable de les utiliser par vous-mme ce stade.
Le chapitre suivant concerne une autre fonction AJAX de jQuery, mais pour tre franchement honnte, il n'est pas obligatoire de
le lire. Mais sait-on jamais, cela pourrait vous tre utile tt ou tard.
La mthode load() !
La fonction $.ajax() et ses drives ne sont pas les seules manires de grer un appel AJAX en jQuery sur votre site web.
Une autre fonction un peu moins connue existe : load().
A quoi load() sert-elle ?
Voyons ici quoi la mthode load() de jQuery va nous servir.
La mthode load()
AJAX plus simplement
Nous parlons ici toujours d'AJAX ; vous devez donc le deviner, la premire chose que load() va faire sera d'instancier un
objet XmlHttpRequest.
Son fonctionnement est en revanche beaucoup plus simple et basique que les fonctions reposant sur $.ajax(). En effet, le
but de load() va tre de rcuprer le contenu que vous allez lui spcifier en paramtre. La mthode va ensuite savoir l'injecter
toute seule dans le DOM. C'est l sa principale utilit, ds que vous devrez rcuprer un contenu qui ne ncessite pas forcment
une logique (appel une BDD, conditions...) qui se trouve sur le serveur et que vous devez l'ajouter votre DOM, vous devrez
immdiatement penser load().
Bon, nous devons vous avouer que cela n'arrive pas franchement tous les jours, mais cela peut toujours tre utile de savoir
qu'une telle mthode existe dans jQuery.
Exemple d'utilisation de load()
Nous allons ici vous montrer un cas concret d'utilisation de la mthode load().
Charger un contenu distant
Utiliser load() et ses paramtres
La mthode load() va prendre d'abord en paramtre la ressource cible. Nous allons opter pour un fichier HTML statique,
tant donn que l'utilit premire de la fonction est de charger du contenu statique en AJAX.
Nous considrons qu'un bloc div portant l'identifiant #container existe dans le DOM. C'est avec ce bloc que load() va
devoir travailler. Nous allons charger l'intrieur un fichier appel contenu.html.
Code : JavaScript
$("#container").load("contenu.html"); // contenu.html se trouve au
mme niveau dans larborescence.
Et cela suffit ! Ce qui se trouve dans le fichier contenu.html est alors inject par jQuery dans le bloc div. Voil pourquoi
nous vous disions que load() se voulait vraiment plus simple et basique que les fonctions reposant sur $.ajax().
Aller plus loin avec load()
Une utilisation plus pousse
Nous venons devoir que load() pouvait tre utilise de manire simple et basique. Nanmoins, cette utilisation peut poser
problme. Lorsque vous l'utilisez de cette manire, tout le contenu de ce fichier HTML va tre ajout l'lment donn, et cela
concerne galement les feuilles de style qui pourraient tre rattaches au fichier inclus.
Pour viter cela, nous allons donc devoir affiner un petit peu notre fonction. Nous voudrions par exemple rcuprer uniquement
une certaine balise dans ce contenu mais pas tout le reste.
Code : JavaScript
$("#container").load("contenu.html #content"); // un lment portant
l'id "content" existe dans contenu.html
Et voil, ainsi, nous ne rcuprerons que l'lment portant l'identifiant qui nous intresse dans la page contenu.html, et
nous pourrons l'ajouter simplement notre lment courant.
Envoyer des paramtres avec load()
Avec une requte de type POST
Bien que ce ne soit pas son utilisation premire, load() permet galement d'envoyer des donnes au serveur en requte POST.
Nous pouvons pour cela lancer un appel AJAX avec load() en ciblant un fichier PHP, et en lui faisant passer des donnes.
Code : JavaScript
/**
* Nous reprenons notre exemple de formulaire de connexion
*
*/
$("#container").load("connexion-avec-ajax.php", { // N'oubliez pas
l'ouverture des accolades !
login : $("login").val(),
password : $("password").val()
});
Vous pouvez tester ce genre de choses dans vos scripts, cela fonctionne. Ct serveur, les valeurs deviennent rcuprables dans
le tableau POST avec $_POST['login'] et $_POST['password'] comme nous l'avons vu dans les chapitres
prcdents. Le rle de load() tant d'injecter le retour dans l'lment cibl, vous n'avez vraiment rien d'autre faire ici.
Notre prfrence va nanmoins l'utilisation des fonctions $.get() et $.post() pour effectuer des appels AJAX
plus "complexes", nous vous conseillons donc de les utiliser, mme si load() se veut peut-tre plus simple
d'utilisation.
Vous connaissez maintenant cette autre fonction pour AJAX de jQuery, c'est super. Nous devons maintenant passer votre
prochain travail pratique, ralisons ensemble un tchat en AJAX !
TP : le tchat en AJAX
Mettons en pratique ce que vous venez d'apprendre tout au long de cette partie sur AJAX.
Nous allons ici crer un petit tchat en AJAX, qui permettra aux visiteurs de laisser un message qui sera rendu visible directement
tous les autres participants la conversation.
Dans ce travail pratique, vous vous chargerez de crer un tchat en AJAX. Nous allons dtailler ici la manire dont il faut
procder.
Le systme de tchat
Les tchats en AJAX sont trs rpandus sur le web, on en trouve gnralement sur les pages d'accueil des forums o les membres
peuvent laisser un message qui sera instantanment transmis tous les autres membres, pour peu qu'ils soient connects au
forum.
Un TP simple
Nous voulons un systme similaire, bien que plus simple. son arrive sur la page, l'utilisateur verra deux zones qui lui seront
proposes. Sur le haut de la page, il verra les messages du tchat qui seront posts. Sur la partie infrieure de la page, il trouvera
un petit formulaire HTML, dans lequel il pourra renseigner son pseudo et son message. Un bouton lui permettra d'envoyer son
message, et celui-ci sera ajout au tchat sans rechargement de page.
Toutes les 5 secondes, une vrification sera faite : des nouveaux messages ont-ils t posts ? Si oui, ils seront affichs. Si non,
on affichera un petit message d'information : aucun message n'a t ajout dans les 5 dernires secondes .
Les technologies utiliser
Pas de rechargement : AJAX !
Nous avons voqu l'ide que l'utilisateur doit pouvoir poster son message sans recharger la page, il va donc nous falloir utiliser
de l'AJAX, comme nous l'avons vu dans toute cette partie du cours. Il va falloir utiliser plusieurs scripts ct serveur : l'un
enverra les messages dans une base de donnes, et l'autre surveillera la base de donnes intervalle de 5 secondes, pour voir si
de nouveaux messages ont t posts.
Commencez !
Pensez tout ce que nous avons dit dans ce cours. Crez votre application comme si vous n'utilisiez pas AJAX, et quand elle
fonctionne parfaitement, ajoutez-y la bte ! C'est certainement la meilleure manire de ne pas se perdre et de rester organis.
Toutes les possibilits du PHP vous sont ouvertes : AJAX ne doit jamais tre vu comme une limite, juste comme un moyen
d'amliorer vos applications !
Bonne chance !
Correction
Alors, c'tait bien, vous avez pu vous torturer l'esprit mais enfin dcouvrir la solution ce problme ? Comment a, non ?
Enfin qu'importe, maintenant que vous avez pu rflchir, nous allons pouvoir vous proposer l'une des nombreuses solutions ce
problme.
Les fichiers ncessaires
Le fichier HTML
Notre problmatique tait de crer un tchat en AJAX, et vous saviez que l'utilisateur devait avoir un formulaire HTML pour lui
permettre de renseigner pseudo et message. Pourquoi ne pas commencer par ici ? tant donn que c'est la base de notre
application, autant prendre ce formulaire comme point de dpart. galement, nous avons besoin d'une zone o viendront se
placer les messages du tchat.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Le tchat en AJAX !</title>
</head>

<body>
<div id="messages">

</div>
<form method="POST" action="traitement.php">
Pseudo : <input type="text" name="pseudo" id="pseudo" /><br />
Message : <textarea name="message" id="message"></textarea><br
/>
<input type="submit" name="submit" value="Envoyez votre message
!" id="envoi" />
</form>
</body>
</html>
C'est trs basique, comme d'habitude, vous devriez tre capable de comprendre tout cela.
Prochaine tape : le PHP et le SQL
Oui ! C'est un tuyau que nous allons vous donner. Lorsque vous souhaitez raliser une application utilisant de l'AJAX, pensez
toujours la crer d'abord en PHP classique, puis ajoutez-y l'AJAX ! Vous tirerez deux avantages cette pratique :
Une meilleure organisation.
L'assurance que votre application fonctionnera mme si JavaScript est dsactiv.
Nous allons donc devoir ds maintenant crer notre fichier PHP qui va se charger d'envoyer les informations tapes dans le
formulaire en base de donnes. Ce fichier PHP va devoir exploiter une base de donnes. Nous allons donc devoir crer une base
de donnes. Elle sera trs simple, elle contiendra une seule table message contenant le pseudo de l'auteur et son message.
Code : SQL
CREATE TABLE IF NOT EXISTS `messages` (
ìd` int(11) NOT NULL AUTO_INCREMENT,
àuteur` varchar(100) NOT NULL,
`message` text NOT NULL,
PRIMARY KEY (ìd`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
C'est tout bon, crez cette table (nous utilisons MySQL) dans une base de donnes quelconque et vous aurez le mme schma
que nous.
Focalisons-nous sur le PHP
Nous allons maintenant devoir crer un fichier PHP qui envoie en base de donnes ce qui a t tap dans le formulaire HTML.
Nous utiliserons PDO, les fonctions mysql_* tant dprcies.
Code : PHP - traitement.php
<?php
// on se connecte notre base de donnes
try
{
$bdd = new PDO('mysql:host=localhost;dbname=tchat', 'root', '');
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
if(isset($_POST['submit'])){ // si on a envoy des donnes avec le
formulaire
if(!empty($_POST['pseudo']) AND !empty($_POST['message'])){ //
si les variables ne sont pas vides

$pseudo = mysql_real_escape_string($_POST['pseudo']);
$message = mysql_real_escape_string($_POST['message']); //
on scurise nos donnes
// puis on entre les donnes en base de donnes :
$insertion = $bdd->prepare('INSERT INTO messages VALUES("",
:pseudo, :message)');
$insertion->execute(array(
'pseudo' => $pseudo,
'message' => $message
));
}
else{
echo "Vous avez oubli de remplir un des champs !";
}
}
?>
Voil un code basique en PHP. Rien ne vous empche de faire plus de vrifications, videmment, car on n'est jamais trop prudent.
Passons maintenant l'tape qui nous intresse !
Rendons tout cela plus dynamique
La premire chose faire est d'inclure jQuery dans le fichier HTML.
Vous pourrez ensuite vous charger d'initialiser une requte AJAX, et rcuprer les donnes qui vous intressent dans le
formulaire. Comme la requte sera de type POST, vous pouviez soit utiliser $.ajax(), soit $.post(). Pour un maximum de
souplesse et de simplicit, nous allons utiliser la premire mthode dans ce TP :
Code : JavaScript - main.js
var pseudo = encodeURIComponent( $('#pseudo').val() ); // on
scurise les donnes
var message = encodeURIComponent( $('#message').val() );
if(pseudo != "" && message != ""){ // on vrifie que les variables
ne sont pas vides
$.ajax({
url : "traitement.php", // on donne l'URL du fichier de
traitement
type : "POST", // la requte est de type POST
data : "pseudo=" + pseudo + "&message=" + message // et on
envoie nos donnes
});
}
Le problme, c'est que ce code va s'excuter ds le chargement de la page. Nous, on veut envoyer des donnes aprs le clic sur
le bouton d'envoi ! Il suffit alors d'utiliser un vnement ici :
$('#envoi').click(function(e){
e.preventDefault(); // on empche le bouton d'envoyer le
formulaire
scurise les donnes
if(pseudo != "" && message != ""){ // on vrifie que les
variables ne sont pas vides
$.ajax({
traitement
data : "pseudo=" + pseudo + "&message=" + message // et
on envoie nos donnes
});
}
});
Enfin, pour un maximum de dynamisme, nous allons ajouter le message directement dans la zone prvue cet effet :
$('#envoi').click(function(e){
e.preventDefault(); // on empche le bouton d'envoyer le
formulaire
scurise les donnes
if(pseudo != "" && message != ""){ // on vrifie que les
variables ne sont pas vides
$.ajax({
traitement
data : "pseudo=" + pseudo + "&message=" + message // et
on envoie nos donnes
});
$('#messages').append("<p>" + pseudo + " dit : " + message +
"</p>"); // on ajoute le message dans la zone prvue
}
});
L'envoi de messages est boucl ! Il n'y a plus qu' rcuprer les messages posts en vrifiant toutes les cinq secondes dans la
BDD s'il y en a de nouveaux.
Rcuprer les messages
Il faut maintenant s'occuper de rcuprer les messages en base de donnes. D'abord, nous allons rcuprer les dix derniers
posts, en PHP classique. Puis, intervalle de 5 secondes, il s'agira de vrifier s'il y en a eu de nouveaux, et si c'est le cas, de les
afficher.
Le fichier d'index revisit
C'est un code trs classique en PHP :
Code : PHP - index.php
<!DOCTYPE html>
<html>
<head>
<title>Le tchat en AJAX !</title>
</head>

<body>
<div id="messages">

<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=tchat', 'root',
'');
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
// on rcupre les 10 derniers messages posts
$requete = $bdd->query('SELECT * FROM messages ORDER BY id DESC
LIMIT 0,10');
while($donnees = $requete->fetch()){
// on affiche le message (l'id servira plus tard)
echo "<p id=\"" . $donnees['id'] . "\">" .
$donnees['pseudo'] . " dit : " . $donnees['message'] . "</p>";
}
$requete->closeCursor();
?>
</div>
<form method="POST" action="traitement.php">
Pseudo : <input type="text" name="pseudo" id="pseudo" /><br />
Message : <textarea name="message" id="message"></textarea><br />
<input type="submit" name="submit" value="Envoyez votre message !"
id="envoi" />
</form>
<script
<script src="main.js"></script>
</body>
</html>
Le plus rcent se trouvera en premire position. Nous allons maintenant voir comment crer un code jQuery permettant de
charger les nouveaux messages.
Charger les messages intervalle de 5 secondes
Pour lancer une action toutes les 5 secondes, il suffisait d'utiliser setTimeout(), que nous avons dj rencontr dans ce
tutoriel. En crant une fonction se rptant indfiniment, il suffisait d'indiquer un intervalle de 5000 millisecondes et le tour tait
jou. Le reste, c'tait de l'AJAX classique avec du jQuery et du PHP.
function charger(){
setTimeout( function(){
// on lance une requte AJAX
$.ajax({
url : "charger.php",
type : GET,
success : function(html){
$('#messages').prepend(html); // on veut ajouter les
nouveaux messages au dbut du bloc #messages
}
});
charger(); // on relance la fonction
}, 5000); // on excute le chargement toutes les 5 secondes
}
charger();
La base tant pose, il fallait penser une petite chose : depuis quel message doit-on commencer compter dans la base de
donnes ? En effet, nous n'allons pas chaque fois charger tous les messages, mais seulement les nouveaux. Il faut donc passer
l'id du message le plus rcemment affich au fichier PHP, pour qu'il rcupre tous les messages ayant un id plus lev.
Et comment rcuprer cet id ? Tout simplement en le prenant dans l'identifiant du premier paragraphe ! Souvenez-vous, nous
l'avions affich prcdemment dans le fichier d'index.
function charger(){
setTimeout( function(){
var premierID = $('#messages p:first').attr('id'); // on
rcupre l'id le plus rcent
$.ajax({
url : "charger.php?id=" + premierID, // on passe l'id
le plus rcent au fichier de chargement
type : GET,
success : function(html){
$('#messages').prepend(html);
}
});
charger();
}, 5000);
}
charger();
Et voil, il ne restait plus qu' aller chercher les messages en base de donnes :
Code : PHP - charger.php
<?php
// ...
if(!empty($_GET['id'])){ // on vrifie que l'id est bien prsent et
pas vide
$id = (int) $_GET['id']; // on s'assure que c'est un nombre
entier
// on rcupre les messages ayant un id plus grand que celui
donn
$requete = $bdd->prepare('SELECT * FROM messages WHERE id > :id
ORDER BY id DESC');
$requete->execute(array("id" => $id));
$messages = null;
// on inscrit tous les nouveaux messages dans une variable
while($donnees = $requete->fetch()){
$messages .= "<p id=\"" . $donnees['id'] . "\">" .
$donnees['pseudo'] . " dit : " . $donnees['message'] . "</p>";
}
echo $messages; // enfin, on retourne les messages notre
script JS
}
?>
Termin ! Bon, on reconnat qu'il fallait penser quelques subtilits, mais le rsultat est l. Nous esprons que vous avez compris
o sont vos erreurs si vous en avez fait, et que ce TP vous aura appris des choses. Quoi qu'il en soit, pratiquez !
Amliorations
Nous sommes dsols de dtruire votre rve, mais ce tchat en AJAX ne va pas tre directement rutilisable sur votre site.
Ne copiez pas ces sources directement sur votre site web... elles sont bourres de failles de scurit ! En effet, nous
n'avons ajout que des vrifications des donnes basiques, aussi bien ct serveur que ct client. L'objectif ici tait
simplement de tester nos connaissances en AJAX.
Ides d'amlioration
Ajouter des vrifications ct client. Cela vous permettra de revoir en mme temps le TP sur le formulaire interactif !
Empcher les utilisateurs d'utiliser les mmes pseudos, vous utiliserez des sessions pour y arriver.
Un peu de BBcode, pourquoi pas ?
La possibilit d'entrer son email et/ou l'URL de son site dans le formulaire ?
Envoyer un email de notification aux utilisateurs du tchat chaque fois qu'un nouveau message y est post.
Embellir un peu le tchat avec du CSS.
...
Les possibilits sont infinies, c'est vous de voir. Vous pouvez galement dcider de construire des systmes totalement
diffrents, tant que cela vous fait pratiquer, croyez-nous, c'est bon prendre.
Vous venez de raliser votre premire mise en application concrte d'AJAX avec jQuery, nous n'avons dsormais plus grand
chose vous apprendre sur AJAX, vous de complter votre formation permanente par toujours plus de pratique !
Partie 5 : Les projets autour de jQuery
jQuery est passionnant, et une nbuleuse de projet a peu peu vu le jour autour du cur du framework que nous apprenons
utiliser depuis le dbut de ce tutoriel. Le premier de ces projets prend la forme d'une documentation trs complte de jQuery que
nous apprendrons lire.
Parmi ces autres outils officiels, certains tendent aussi les possibilits du framework ou l'adaptent pour la navigation mobile. Il
vous permettront d'tre un dveloppeur jQuery plus efficace et plus polyvalent.
La documentation de jQuery
RTFM : Lis le p***** de manuel !
Si un jour vous posez une question un peu bte sur un forum jQuery, on risque de vous dire a. Rassurez-vous, ce n'est pas une
insulte, on veut simplement vous faire comprendre que vous pourriez trouver rponse votre problme en lisant le manuel,
savoir : la documentation officiel de jQuery. Apprenons la lire ensemble.
Le site officiel : jQuery.com
Comme tous les grands projets, jQuery est bien document et support : une chance pour nous.
jQuery est support officiellement pour la jQuery Foundation, ce sont eux qui se chargent de maintenir officiellement jQuery, de
tenir un fil conducteur entre tous les dveloppeurs parpills travers le monde, et de centraliser les bugs remonts par la
communaut. Vous imaginez bien qu'il faut un minimum d'organisation pour maintenir un projet pareil.
La jQuery Foundation organise frquemment des vnements autour du framework qui regroupent des dveloppeurs et
utilisateurs du framework ainsi que des fans de nombreuses nationalits diffrentes.
La jQuery Foundation a mis en place plusieurs sites web pour y parvenir dont jQuery.com, qui est un peu le site mre du projet
jQuery. C'est ici que l'on peut tlcharger le framework sous sa forme de fichier .js, et de s'assurer que l'on n'utilise pas un
framework vrol.
Nous intgrons, depuis le dbut, jQuery depuis les serveurs de Google. N'ayez aucune inquitude : ils sont de
confiance. Beaucoup de dveloppeurs jQuery l'intgrent depuis ces serveurs.
Si nous discutons de ce site maintenant, ce n'est pas pour rien. Sa grande force est d'hberger la documentation officielle de
jQuery, laquelle tout le monde ou presque se rfre. La documentation est donne sous forme d'un wiki trs accessible... mais
attention, tout est en anglais ! Si vous ne matrisez pas la langue de Shakespear un minimum, il va falloir songer vous y mettre :
un dveloppeur se doit de connatre cette langue.
La documentation du framework est accessible l'adresse docs.jquery.com, et elle se divise en plusieurs sections, que nous
allons dtailler. Vous pouvez dj jeter un oeil aux sections majeures que vous propose la documentation ; si vous avez lu ce
cours depuis le dbut avant d'arriver jusqu'ici, les intituls doivent invitablement vous rappeler un ou plusieurs lments vus
dans ce cours.
Le site jQuery.com propose galement une section offrant des tutoriels (EN) d'initiation au framework. Ils peuvent tre
potentiellement un bon complment ce cours, n'hsitez pas prendre quelques minutes pour aller les lire.
Explorer la documentation
Une fois sur la main page de la documentation, vous devez vous demander o vous diriger. Plusieurs sections s'offrent vous :
vous pouvez commencer apprendre jQuery, aller consulter les supports externes comme les forums, ou encore vous orienter
vers des ressources externes. Ce qui nous intresse, c'est la liste et le mode d'emploi de chaque fonction offerte par le framework.
Pour trouver tout a, il suffit d'aller voir la jQuery API Reference , qui ordonne les diffrentes sections relatives aux mthodes
de jQuery.
Vous pouvez aussi cliquer ici.
S'orienter correctement dans la doc
Vous devez vous dire que c'est trs mal rang pour le moment ; en effet, on a une liste de toutes les mthodes de jQuery, par
ordre alphabtique. Pour mettre un peu d'ordre dans tout cela, il existe bien heureusement les sections dont nous parlions
prcdemment : vous n'tes pas sans savoir que chaque mthode appartient un groupe spcifique, comme les slecteurs, les
animations, les vnements, etc.
Ces groupes, vous pourrez les retrouver dans le menu de gauche. Il suffit de cliquer sur l'un deux pour obtenir la liste de toutes
les mthodes qui y appartiennent.
Certaines mthodes appartiennent plusieurs groupes diffrents ; nous vous tonnez donc pas de retrouver, par
Partie 5 : Les projets autour de jQuery 110/150
exemple, la mthode addClass() dans les sections CSS et Class Attribute.
Utiliser la fonction de recherche
Si vous connaissez dj, de manire plus ou moins approximative, le nom de la mthode que vous cherchez, vous pouvez
essayer de gagner du temps en utilisant le champ de recherche Search jQuery prvu en haut de la page. En tapant par exemple
ajax , je me retrouverai avec toutes les fonctions apparentes cette section.
Lire la fiche d'une mthode
Chaque mthode n'est pas explique n'importe comment. La documentation obit elle aussi des rgles de mise en page, et nous
allons apprendre ici les dchiffrer.
La forme de la mthode
Lorsque vous arrivez sur la page de prsentation et d'explication d'une mthode, vous pouvez constater une premire chose : on
vous prsente chaque forme que celle-ci peut prendre, notamment avec ses diffrents arguments. Prenons pour exemple la page
de la mthode css().
Vous pouvez voir sur l'exemple que la mthode peut avoir deux formes :
css( propertyName ) ;
et css( propertyName, value ).
Comme vous le savez dj, la premire forme permet de rcuprer la valeur d'une proprit, et la seconde permet de la
modifier.
En cliquant sur l'une ou sur l'autre, vous serez dirig vers les explications correspondantes ; profitez-en, on vous donne des
exemples chaque fois ! Et justement, nous allons voir comment se prsentent ces fameuses explications.
Description, retour, explications et exemples
Description, retour, explications et exemples : c'est globalement le schma que vous devez retenir de la documentation de
jQuery. On vous donne dans un premier temps la forme de la mthode (nous venons de voir de quoi il s'agit). droite, vous
trouverez le type de donnes retournes par la fonction (chane de caractres, nombre entier, nombre dcimal, boolen, etc).
En-dessous se trouve la description ; c'est en gnral cette partie qu'il faut regarder en premier si vous ne connaissez pas une
mthode. La description est vraiment trs explicite, pour peu que vous compreniez l'anglais de manire plus ou moins correcte.
Si on descend encore un peu, on trouve un bloc dcrivant cette fois-ci les arguments que prend la mthode : que doit-on donner
comme valeur, l'argument est-il facultatif, etc.
Notez qu'un argument facultatif est toujours plac entre crochets [ ].
Enfin, vous trouverez les explications dtailles, puis quelques exemples susceptibles de vous clairer, avec codes de test
l'appui.
Vous voyez, lire la documentation de jQuery se fait trs rapidement et trs simplement !
La documentation est un outil indispensable, quelque soit la technologie que vous utilisez. Avec jQuery, on a la chance d'avoir
une documentation complte et bien construite : profitez-en !
Les interfaces utilisateur : jQuery UI
Au fil de son succs, le framework s'est dclin en plusieurs plugins, pour la majorit des crations amateurs, comme vous le
savez dj. Sachez qu'il existe galement des plugins officiels, raliss par la firme jQuery elle-mme. Pour le moment au nombre
de deux, jQuery UI et jQuery Mobile sont des plugins jQuery que vous utiliserez peut-tre au cours de votre nouvelle vie
d'utilisateur de la librairie. Comme le titre de ce chapitre l'indique, nous allons prsenter le premier : jQuery UI.
Les interfaces utilisateurs
Que sont les interfaces utilisateurs ?
Avant de se lancer dans le vif du sujet, dfinissons d'abord ce que fait exactement la librairie jQuery UI. Son nom signifie en fait
jQuery User Interface , qui veut dire Interface Utilisateur en franais. Et d'aprs Wikipdia :
Citation : Wikipdia
En informatique l'interface utilisateur est le dispositif qui permet l'usager de manipuler la machine.
Voil une dfinition bien vague, qui ne s'applique pas de manire prcise notre cas (la machine reprsente, dans ce contexte,
votre site web). En revanche, le principe est bien l : l'utilisateur va pouvoir manipuler lui-mme ce qu'il est autoris toucher.
Plus concrtement, les interfaces utilisateurs de jQuery UI permettent des actions plus pousses et intuitives, telles que le
Drag'n'Drop (glisser-dposer), lauto-compltion, le redimensionnement, la slection d'lments, etc. C'est donc un gain norme
au niveau de l'exprience sur votre site web !
Comment cela fonctionne-t-il ?
Le plugin jQuery UI est en fait un regroupement de plusieurs mini-plugins, composant les interfaces utilisateurs (vous pouvez
composer vous-mme votre bouquet d'actions sur le site web officiel). Ensuite, c'est comme d'habitude : une fois incluses, les
interfaces s'appellent comme des mthodes, sur les lments adquats. videmment, il existe des rgles respecter, mais nous
verrez cela plus en dtails ensuite. Un petit exemple avec le redimensionnement :
Code : JavaScript
$('#fenetre').resizable();
/*
Je lance le plugin Resizable sur mon lment.
Cela aura pour effet de permettre l'utilisateur de redimensionner
ce bloc #fenetre
*/
Tlchargement et mise en place
Pour tlcharger les fichiers qui vous permettront de raliser bon nombre de choses, rendez-vous sur la page Download du site
ddi jQuery UI. Vous pouvez voir que le plugin peut tre dcompos en plusieurs parties :
le UI Core , qui dfinit le code indispensable au bon fonctionnement des interfaces utilisateurs ;
les interactions , qui sont toutes les interfaces qui permettront l'utilisateur d'interagir directement avec la page ;
les widgets , qui sont des plugins tiers, moins consquents, et qui ralisent des actions plus cibles ;
et les effects , qui sont simplement des effets additionnels ceux de jQuery.
Les botes cocher sur le site vous invitent ne tlcharger que les interfaces qui vous seront utiles. Comme ce doit tre la
premire fois que vous dcouvrez jQuery UI, nous vous conseillons de toutes les tlcharger.
Choisir son thme
Le code jQuery fonctionne de manire complmentaire avec un fichier CSS, qui
va dfinir le style des diffrentes interfaces. Vous pouvez voir dans le menu de
droite une petite section vous permettant de choisir votre thme.
Par dfaut, il en existe dj une belle flope, mais si aucun ne vous plat, vous
pouvez customiser vous-mme vos interfaces utilisateur, grce un outil nomm
Themeroller. Son fonctionnement est vraiment trs intuitif, vous pourrez le
dgoter sur cette page.
Version du plugin
En-dessous du choix du thme se trouve le choix de la version du plugin. Ne
vous posez pas de question, et ne touchez rien, vous tlchargerez
automatiquement la version la plus rcente et la plus stable du moment.
Actuellement, la version est la 1.8.21, mais il se peut que l'on vous en propose une plus rcente.
Cliquez ensuite sur le bouton Download, et patientez !
Architecture des fichiers
Une fois l'archive entre vos mains, vous pouvez la dcompresser. l'intrieur, vous trouverez plusieurs dossiers, dont l'utilit est
variable : certains sont indispensables au bon fonctionnement de votre systme, alors que d'autres peuvent tout bonnement tre
supprims. Voyons ce qu'il en est grce un petit schma :
Le dossier js/ contient les frameworks jQuery et jQuery UI ; leur inclusion pouvant se faire par des serveurs externes, nous ne
les utiliserons pas dans ce chapitre. Vous pouvez donc galement supprimer le dossier. De la mme manire, le dossier css/
nous indiffre, tant donn que son contenu est retrouvable dans development-bundle/themes/.
Au final, vous pouvez vous retrouver avec seulement le dossier development-bundle/, qui est le seul rellement
indispensable. Pour allger un peu ce dossier et s'y retrouver de manire plus efficace, vous pouvez supprimer les dossiers
demos/ et doc/, qui contiennent des informations retrouvables facilement sur le site officiel.
Inclusion du plugin
Comme vous vous en doutez srement, avant d'inclure jQuery UI, il faut galement inclure jQuery. En effet, c'est l'ordre logique
des choses : jQuery UI a besoin de jQuery pour fonctionner, ce dernier doit donc tre inclus en premier !
Rappelez-vous que les serveurs de Google permettent un gain de performance ; la firme propose, en plus de jQuery, le plugin
jQuery UI ! Si vous n'avez pas fait une composition d'interfaces utilisateur particulire, vous pouvez trs bien utiliser le fichier du
clbre moteur de recherche. Vous devrez galement inclure le fichier CSS relatif votre thme.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Votre page</title>

<link rel="stylesheet" href="jquery-ui/development-
bundle/themes/base/jquery.ui.all.css" />
</head>
<body>

<script
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-
ui.min.js"></script>
</body>
</html>
Vous tes maintenant fin prt travailler !
Les interactions et les widgets
Les interactions
Les interfaces utilisateur offrant le plus de possibilits sont sans doute les interactions. Ces actions permettent l'usager d'agir
directement sur la page pour obtenir diffrents rsultats. Elles sont trs utilises sur les systmes d'exploitation (Windows, Linux,
MacOS...), notamment, vous devez donc dj les avoir exprimentes : glisser, dposer, redimensionner, slectionner et ranger.
chaque action sa mthode, en voici la liste :
glisser : draggable() ;
dposer : droppable() ;
redimensionner : resizable() ;
slectionner : selectable() ;
ranger : sortable().
Chaque mthode doit agir sur un lment, qu'elle va se charger de dformer sa guise. Heureusement, il existe des rgles
permettant de ne pas faire n'importe quoi avec ces interactions, ainsi que des paramtres offrant la possibilit de restreindre
certaines actions l'utilisateur.
Nous n'allons pas vous lister chaque proprit ; ce serait vraiment trop long, et il faudrait un tutoriel entier pour vous apprendre
toutes les subtilits du plugin jQuery UI. Le chapitre prcdent vous a permis d'apprendre lire la documentation. Nous vous
invitions consulter celle de jQuery UI, trouvable ici, si vous recherchez une certaine proprit.
Prcisions sur le Drag'n'Drop
Vous avez srement dj entendu parl du Drag'n'Drop . C'est une action de plus en plus rpandue sur les sites web, car elle
permet de glisser un lment dans un autre. Cela ne vous dit rien ? Pourtant, vous avez forcment dj utilis le Drag'n'Drop,
notamment sur votre systme d'exploitation, par exemple lorsque vous dplacez un fichier manuellement ! jQuery UI met en place,
pour sa part, un tel systme, grce deux mthodes complmentaires : draggable() et droppable().
Vous devez, avec la premire, instancier un objet pouvant tre dplac, puis, avec la seconde, dfinir une zone de dpt.
Les widgets
Les widgets, contrairement aux interactions, ont une fonction bien dfinie. Il doivent instancier quelque chose de prcis, tel
qu'une barre de progression ou une bote modale. Ils sont actuellement au nombre de huit :
Accordion, qui permet de raliser un menu en accordon (les sections sont rtractables) ;
Autocomplete, dont le rle est de mettre en place un systme d'auto-compltion (exemple sur le moteur Google) ;
Button, qui va transformer vos lments de formulaire afin de les rendre plus intuitifs et esthtiques ;
Datepicker, un widget permettant de crer un mini-calendrier dans un formulaire ;
Dialog, qui met en place une bote modale (type alert() personnalis) ;
Progressbar, une simple barre de progression ;
Slider, un gestionnaire de barres de rglage ;
et enfin Tabs, qui permet de mettre en place un systme d'onglets.
Encore une fois, il vous suffit d'instancier les mthodes correspondantes pour utiliser ces widgets. Nous vous redirigeons vers
la documentation pour plus de prcisions, avec exemples l'appui !
Voil pour cette petite prsentation de jQuery UI !
Nous n'avons pas parl des effets additionnels du plugin, pour la simple et bonne raison qu'ils s'utilisent de la mme faon que
les effets natifs, tels que fadeIn()/fadeOut(). La documentation est vraiment bien faite et bien fournie, vous trouverez
tout ce dont vous avez besoin pour utiliser jQuery UI. Si vraiment vous souhaitez aller plus loin, nous vous encourageons aller
lire le tutoriel de jQuery UI sur le Site du Zro !
Vous pouvez ds prsent passer au chapitre suivant, qui prsentera le second plugin officiel : jQuery Mobile.
Le framework mobile : jQuery Mobile
Apparu il y a peu de temps, jQuery Mobile est un nouveau framework qui fait de plus en plus parler de lui, cette poque o la
navigation mobile crot de faon hallucinante. Cela permet aux dveloppeurs de raliser de vritables applications pour leur(s)
site(s) web, et d'offrir une exprience utilisateur trs sophistique sur presque toutes les plateformes. Comme d'habitude, le mot
d'ordre est simplicit , et nous allons voir qu'il est vraiment trs ais de mettre en place une version mobile de son site.
Une version mobile
l'heure actuelle, les versions mobiles des sites web se dveloppent trs rapidement et son de plus en plus compltes. Mais
pourquoi cela rencontre-t-il un tel succs ? Comment faire la mme chose ? Est-ce rserv une lite ? Enfin, quelles sont les
plateformes les plus enclines supporter ces applications ? Nous allons rpondre chacune de ces questions, et plus si
affinits.
L'intrt d'une version mobile
La premire question que l'on pourrait se poser est : quoi bon mettre en place une version mobile de mon
site ? . En effet, cela semble peu intressant, quand on pense que les tlphones portables et autres
plateformes du genre n'ont pas pour utilit premire de naviguer sur Internet. cette opinion nous rpondrons
: monumentale erreur !
La navigation sur mobiles est de plus en plus courante, l'heure o les smartphones se dveloppent et
deviennent de plus en plus puissants. Car sachez-le : l'poque actuelle, 19.4 millions de franais consultent
le web depuis leurs tlphones portables. Il est donc primordial d'avoir des sites adapts, pour prvenir la
navigation mobile et surtout la rendre attrayante pour le visiteur, surtout quand on considre que 40% des
mobinautes se dirigent vers un site concurrent aprs une mauvaise exprience.
C'est ici qu'intervient jQuery Mobile.
Plateformes supportes par le framework
Le march des smartphones est absolument immense en 2012, on estime d'ailleurs le chiffre d'affaire total plusieurs milliards de
dollars. En consquence, on trouve normment de diffrentes sortes de tlphones, et chacun possde ses spcificits.
Exemple : le clbre iPhone possde son systme d'exploitation attitr, l'iOS, ainsi que son navigateur, Safari, alors que les
tlphones de Google tournent sur Android.
Nous devons donc rgler un soucis de compatibilit, et nous assurer que notre site s'affiche correctement sur tous les
navigateurs mobiles du march.
Les principaux navigateurs mobiles sont les suivants : Opra Mini, Safari, et le navigateur d'Android.
Nous n'allons pas utiliser jQuery pour rien : le framework mobile intgre une compatibilit ahurissante des diffrentes plateformes
actuellement en vente. En voici un petit extrait pour vous faire comprendre :
Apple iOS 3.2-5.0
Android 2.1-2.3
Android 3.1
Android 4.0
Windows Phone 7-7.5
Blackberry 6.0
Blackberry 7
...
Vous pouvez retrouver la liste complte des systmes d'exploitation et des plateformes supportes par jQuery Mobile sur cette
page. Vous verrez d'ailleurs que trois groupes existent : le A, le B, et le C. Le premier dfinit les plateformes parfaitement bien
supportes ; le second, celles qui ne prennent pas en charge la navigation AJAX ; et le troisime, celles qui ne peuvent pas tre
dynamises correctement. La liste est vraiment trs courte dans le groupe C, ce qui montre bien qu'en utilisant ce framework,
vous pourrez presque tout couvrir !
Mettre en place jQuery Mobile
Maintenant que nous avons fait le point et que vous connaissez l'importance de la navigation mobile l'heure actuelle, nous
allons voir comment offrir un service pareil nos visiteurs.
On doit d'abord s'assurer que la version mobile du site ne s'affiche que pour la navigation correspondante ; les visiteurs
navigant sur leur ordinateur ne veulent srement accder qu' la version classique. Il vous faut donc crer un nouveau fichier,
diffrent de votre index, vers lequel on sera redirig automatiquement si le site dtecte une navigation mobile. Pour raliser une
telle redirection, deux solutions :
le faire par fichier .htaccess ;
le faire en PHP.
Nous allons voir comment raliser ces deux types de redirection.
Redirection par htaccess
Ce type de redirection est bas sur les user-agents rcuprs avec Apache. Ce sont simplement les informations que chaque
navigateur renvoie, et qui permettent de dterminer plusieurs choses, comme son nom. Nous allons donc les utiliser pour
dterminer si nous devons rediriger le visiteur ou pas. Inscrivez simplement les lignes suivantes dans un fichier appel
.htaccess :
Code : Apache
RewriteCond %{HTTP_USER_AGENT} "ipod|iphone|ipad|android|palm" [NC]
RewriteRule (.*) http://www.votre-site.com/votre-fichier-mobile.html
[R=301,L]
La premire ligne lit le user-agent, et s'il contient une information relative aux mots-cls indiqus (ici le nom de certaines
plateformes mobiles), on passe la seconde ligne, qui se charge de diriger le visiteur sur le fichier adquat.
Redirection avec PHP
Cette mthode est peut-tre plus intressante dans le sens o vous pourrez contrler la redirection : vous aurez ainsi la
possibilit d'ajouter un lien permettant au visiteur de revenir la version classique, ou de continuer vers la version mobile. On va
se baser ici, une fois encore, sur les user-agents, que l'on rcuprera avec une variable superglobale, qui est
$_SERVER['HTTP_USER_AGENT']. Il suffira de chercher une chane de caractres prcise l'intrieur pour dterminer sur
quel smartphone navigue l'internaute, l'aide la fonction strpos() qui retourne la position numrique de la premire
occurrence trouve.
Code : PHP
<?php
// on cherche un user-agent apparent une plateforme mobile dans
la variable
$iphone = strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone');
$ipad = strpos($_SERVER['HTTP_USER_AGENT'], 'iPad');
$android = strpos($_SERVER['HTTP_USER_AGENT'], 'Android');
$blackberry = strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry');
// puis on dtermine si une chane de caractres a t trouve
if($iphone || $ipad || $android || $blackberry > -1){
header('Location: http://www.votre-site.com/votre-fichier-
mobile.html'); // si c'est le cas, on redirige
die; // puis on arrte le chargement de la page actuelle
}
?>
Vous devez placer ce code au tout dbut de votre fichier index.php, avant mme le doctype.
Si vous le souhaitez, vous pouvez crer plus de variables pour couvrir plus de plateformes mobiles ; vous pouvez
d'ailleurs trouver la liste des user-agents sur cette page.
Inclusion du framework
Une fois la dtection du navigateur rgle, vous pouvez vous employer travailler avec jQuery Mobile. Il faut tout d'abord
l'inclure dans votre page, soit un utilisant un CDN (comme Google ou jQuery.com lui-mme), soit en le chargeant depuis votre
serveur. Sans oublier le fichier CSS !
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Page pour Mobile</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-
1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-
1.6.4.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-
1.0.1.min.js"></script>
</head>
<body>
</body>
</html>
Une fois toutes ces bases poses, on va pouvoir commencer faire quelque chose de beaucoup plus concret !
Les bases de l'interface
jQuery Mobile possde un fonctionnement un peu particulier. En effet, il est possible d'avoir plusieurs pages dans un seul
fichier : c'est le multi-page. Cela est rendu possible grce aux nouveaux attributs arrivs avec HTML5, les fameux data-*. Ils
permettent de passer des valeurs personnalises trs proprement, et sont 100% valides.
Initialiser des pages
En donnant le rle de page un lment grce l'attribut data-role, vous l'isolez et lui donnez une importance qui permettra
au navigateur de le considrer comme un fichier part entire. Il suffit alors de rpter l'opration pour avoir plusieurs pages au
sein de votre fichier. Exemple :
Code : HTML
<div data-role="page">

</div>

</div>
De mme, vous pouvez alors structurer chaque page comme vous le feriez de manire classique, c'est--dire avec une en-tte, du
contenu, et un pied de page. Encore une fois, les attributs data-*, et plus prcisment data-role, vont nous y aider :
Code : HTML
<div data-role="header">

</div>
<div data-role="content">

</div>
<div data-role="footer">

</div>
</div>
Ces attributs et ces valeurs ne sont valables que pour jQuery Mobile, ne les prenez pas pour des gnralits utilisables
avec d'autres frameworks.
Ne crez tout de mme pas trop de pages au sein d'un seul fichier, car il se peut que vous soyez victime d'une perte de
performance si le fichier devient trop lourd.
Lier les pages entre elles
En utilisant le multi-pages, vous devez vous demander comment lier ces pages entre elles si elles cohabitent dans un seul et
mme fichier. La solution rside dans l'utilisation d'ancres HTML. Exemple :
Code : HTML
<div data-role="page" id="page1">
<a href="#page2">Aller la page 2 -></a>
</div>
</div>
<div data-role="page" id="page2">
<a href="#page1">Aller la page 1 -></a>
</div>
</div>
Mise en place d'un thme
Comme jQuery UI, jQuery Mobile embarque un framework CSS qui lui est propre, et qui lui permet de styliser ses lments.
Plusieurs thmes par dfaut existe dj, et ils sont au nombre de cinq : a , b , c , d , et e . Ils sont trs facilement
utilisables grce l'attribut data-theme, que vous pouvez mettre sur n'importe quel lment. En consquence, il est possible
de mlanger les styles des thmes :
Code : HTML
<div data-role="page" data-theme="a">
<div data-role="header" data-theme="b">

</div>

</div>
<div data-role="footer" data-theme="b">

</div>
</div>
Ce code donnera le thme a la page, mais l'en-tte et le pied de page auront le thme b . Vous pouvez trs bien raliser
votre propre thme grce au Themeroller.
lments de mise en page
Concrtement, vous pouvez peu prs tout faire avec jQuery Mobile : ajouter des listes, mettre des boutons, des formulaires,
etc. Tout passe par les attributs data-*, pour savoir comment raliser quelque chose, nous vous invitons vous rendre sur la
documentation qui indique quelle valeur donner data-role pour chaque lment. Exemple pour une liste avec icnes :
Code : HTML
<ul data-role="listview">
<li><a href=""><img src="images/user.png" alt="Espace membre"
class="ui-li-icon">Espace membre</a></li>
<li><a href=""><img src="images/about.png" alt=" propos"
class="ui-li-icon"> propos</a></li>
<li><a href=""><img src="images/donate.png" alt="Donation"
class="ui-li-icon">Donation</a></li>
</ul>
Les vnements et les mthodes
Les vnements jQuery Mobile
La plateforme tant bien diffrente d'un ordinateur, vous vous doutez que les vnements ne sont pas les mmes que pour
jQuery. L'utilisateur sera dans l'incapacit de cliquer ou de taper sur un clavier, tant donner que les smartphones sont par
dfinition tactiles. Les laboratoires de jQuery ont bien sr trouv une parade, et ont mis en place de nouveaux vnements
spcialement adapts pour les mobiles.
Il faut alors considrer le clic comme l'action de toucher. Quant au clavier, la plupart des smartphones intgrent un clavier qui
s'affiche seulement lorsque c'est ncessaire. L'accs aux vnements dpendants du clavier ne changent donc pas !
Voici la liste des vnements relatifs au touch :
Nom Action
tap un touch sur la page
taphold un touch maintenu sur la page
swipe un touch maintenu avec mouvement du doigt
swipeleft un touch maintenu avec mouvement vers la gauche
swiperight un touch maintenu avec mouvement vers la droite
scrollstart lorsqu'on commence scroller (utiliser lascenseur de la page)
scrollstop lorsqu'on arrte de scroller
Il existe galement orientationchange, qui va se dclencher lorsqu'on incline le tlphone (passage du mode portrait au
mode paysage et vice versa).
Vous pourrez travailler avec l'tat des pages, car il existe une foule d'vnements qui en sont dpendants. Par exemple, au
chargement d'une page, il est commun d'utiliser pageload. Vous pouvez retrouver la liste complte ici.
Les mthodes jQuery Mobile
Le framework possde des proprits et des mthodes qui lui sont propres, accessibles avec l'objet $.mobile. Vous pourrez
alors bnficier de nouveaux contrles, dont nous allons voir les principaux.
Contrler la transition d'une page
Les pages tant charges en AJAX, le ct esthtique a t mis en avant. Vous pouvez alors noter un effet lorsque vous
naviguez de page en page. Cet effet peut tre personnalis au moyen de la proprit defaultPageTransition ; il suffit
alors de lui passer pour valeur le nom d'un effet. Voici les plus connus et utiliss :
fade, la valeur par dfaut, qui affiche le page avec un fondu ;
slide, qui fait glisser la page suivante par dessus la page actuelle ;
flip, qui va retourner la page et afficher la suivante.
Code : JavaScript
$.mobile.defaultPageTransition = "flip";
Veillez cependant ne pas trop en abuser, car le navigateur d'Android, qui est trs utilis, ne supporte pas bien les effets de
transition. L'autre solution consiste les dsactiver pour ce navigateur et seulement lui, au moyen d'une petite astuce base,
encore une fois, sur les user-agents :
Code : JavaScript
var ua = navigator.userAgent.toLowerCase(); // on rcupre le user-
agent
if(ua.indexOf("android") > -1){ // si on trouve un user-agent
Android
$.mobile.maxTransitionWidth = 1; // alors on dsactive les
transitions
}
Envoyer une requte AJAX au changement de page
Le framework mobile embarque une mthode qui permet de fusionner deux choses : une transition, et une requte AJAX. Cela
permet un gain de performance, mais rend aussi le code bien plus propre et lisible. Il suffit alors d'utiliser changePage(), avec
quelques arguments :
la cible, simplement l'URL de la page qui transmettre des donnes ;
et un objet, qui prend en charge la requte AJAX au moyen de proprits classiques comme le type, ou les donnes
envoyer.
Code : JavaScript
$.mobile.changePage('sendmail.php', {
type : 'POST',
data : 'sujet=' + sujet + '&contenu=' + contenu
});
Prcharger une page
Pour un confort absolument optimal, vous pouvez prcharger les pages grce loadPage(). Cela permet de mettre la page
suivante en attente, et le visiteur n'aura pas attendre son chargement pour y accder. C'est donc un gain considrable pour
l'exprience utilisateur.
Vous avez juste indiquer quelle page doit tre prcharge :
Code : JavaScript
$.mobile.loadPage('next.html');
Vous pouvez galement envoyer une requte AJAX au moyen d'un objet en second argument, comme avec
changePage().
Vous avez prsent les bases de la cration de version mobile ! Rien ne vous empche de pousser votre curiosit et d'aller lire la
trs bonne documentation au sujet de jQuery Mobile.
Nous en avons maintenant termin avec l'tude des plugins et frameworks officiels de la jQuery Foundation. Les chapitres
suivants viseront parfaire votre apprentissage avec la dcouverte de plugins trs clbres dans le monde du dveloppement de
jQuery !
Le clbre Super Marios Bros.
Programmez vos jeux avec gameQuery
N il y a peu de temps, ce plugin va vous permettre de raliser vos propres jeux vidos en jQuery ! Il a t cr par un
dveloppeur suisse, dont le souhait est de rendre la cration de jeux vidos sur navigateurs plus facile. En effet, vous n'tes pas
sans savoir que les nouvelles normes HTML5 et CSS3 permettent de nouvelles choses en terme d'exprience utilisateur. Les jeux
vidos sur navigateur ont vu le jour il y a dj quelques annes, mais leur cration s'est vue grandement facilite par l'arrive de
nouvelles technologies.
Fini les jeux en Flash, place gameQuery !
Du fonctionnement de la 2D
Le plugin gameQuery permet donc de raliser des jeux vidos. Comme vous vous en doutez, il y a des restrictions et surtout des
limites : ne vous attendez pas raliser le nouveau Starcraft, ni un jeu rvolutionnaire en 3D ! Avoir les pieds sur Terre est
primordial lors de la conception d'un jeu, donc nous voulons tre clairs : vous ne pourrez faire que de la 2D.
La 2D, une histoire d'animation
Le concept de 2D (deux dimensions) est apparu dans les jeux vidos la cration de ceux-ci ; en
effet, ce domaine a subi des volutions au cours du temps pour devenir ce qu'il est aujourd'hui.
Ainsi naissent les jeux vidos dans les annes 1950. cette poque, ils n'taient pas trs
volus, du fait des restrictions techniques. Cependant, ils ont rapidement volus, jusqu'
devenir un vritable business : on notera notamment l'arrive des personnages de Mario, Sonic,
ou encore Kirby, qui restent encore des protagonistes trs jous.
Le fonctionnement de jeux vidos en deux dimensions est toujours le mme, que ce soit dans
Super Mario Bros. ou Sonic The Hedgehog. En effet, les animations diverses se font image par
image, que l'on appelle des sprites. Chaque personnage possde une panoplie de sprites
dfinissant ses mouvements, ce groupe d'images tant appel spritesheet (feuille de sprites).
Grce une fonction spcifique, ces sprites dfilent un un. On estime qu'une animation est fluide partir de 24 images par
seconde, chaque spritesheet sera donc compose d'une vingtaine d'images environ. De mme, l'cran est dcompos en
plusieurs layers (calques), qui reprsentent chacun un plan diffrent : l'arrire-plan, qui dfinira le dcor, le moyen-plan, et parfois
l'avant-plan. Nous verrons que gameQuery gre ces systmes de manire trs simple et intuitive !
Extrait d'une spritesheet du personnage de Sonic
La 2D avec gameQuery
Parlons jQuery, prsent que les bases de l'animation 2D ont t poses. Le plugin gameQuery ne gre pas n'importe comment le
jeu vido, il faut donc respecter certaines rgles. Nous allons voir quelques autres mots de vocabulaire ici, et dfinir exactement
la mthode de travail du plugin.
Organisation de l'cran de jeu
L'cran du jeu, aussi appel game screen, est en fait un ensemble d'lments graphiques superposs (rappelez-vous le systme
de layers, avec les diffrents plans). Le plugin gre cet cran comme une bote, dans laquelle on range plusieurs images,
constituant notre jeu. Cette bote est appele playground, et chaque lment graphique est un sprite. Dans ce playground,
chaque sprite va constituer un calque ; les habitus de logiciels de graphisme comme Photoshop ou The Gimp connaissent bien
le principe.
Mais que se passe-t-il si on veut avoir plusieurs sprites sur le mme plan ?
Dans un cas comme celui-l, il faut utiliser les groupes. Un groupe peut contenir un ou plusieurs sprites, et fera office de calque.
Pour plus de clart, nous proposons un petit schma, inspir de la documentation du plugin :
Vous pouvez constater qu'un groupe de sprites est considr comme le parent de ceux-ci : si l'on dplace le groupe, les images
qu'il contient seront dplaces ; si on le supprime, les sprites enfants seront galement supprims. On retrouve donc ici le
principe de la parent, et il est possible d'imbriquer des groupes dans des groupes, ce qui offre un vaste contrle sur votre jeu !
Et concrtement, comment accder tous ces lments ?
Effectivement, la thorie est passionnante, mais vous ne savez toujours pas ce que symbolisent ces concepts. La rponse est
pourtant d'une simplicit enfantine ou presque : jQuery travaillant avec le DOM, gameQuery dfinit chaque sprite et chaque
groupe comme des lments HTML ! Ils seront donc accessibles trs simplement, grce aux slecteurs, ce qui nous permettra
d'agir dessus avec des mthodes spcifiques.
Mise en place d'un playground
La partie thorique est maintenant termine, et nous allons enfin commencer utiliser gameQuery pour raliser dans un premier
temps une ou deux animations plutt simples. Tout d'abord, il va falloir inclure le plugin dans la page pour l'utiliser, juste aprs
jQuery. Notre code viendra se placer en toute fin, et il dfinira les animations, les collisions, et tout ce qui est apparent un jeu
vido.
La premire chose faire est de mettre en place le playground, la fameuse bote qui va contenir les lments graphiques de notre
jeu. Il se met en place grce une mthode, playground(), que l'on devra appeler sur un simple bloc div :
Code : HTML
<div id="playground">

</div>
Code : JavaScript
var $playground = $('#playground'); // on entre l'objet jQuery dans
une variable pour viter de l'appeler plusieurs fois
$playground.playground();
partir de l, notre playground est presque correctement instanci. En effet, il faut galement lui donner une taille, pour savoir
o se situent les limites graphiques du jeu. Cela se fait par un objet, que l'on passera en argument dans la mthode :
Code : JavaScript
var $playground = $('#playground'), // on entre l'objet jQuery dans
une variable pour viter de l'appeler plusieurs fois
h = 300,
w = 800; // on dfinit les dimensions du playground
$playground.playground({
height : h,
width : w // puis on passe ces variables en paramtre
});
Une fois le playground instanci, il suffira d'y accder depuis l'objet $.playground().
Tout est correctement lanc, on va donc pouvoir commencer ranger les lments graphiques dans notre playground !
Un arrire-plan en parallaxe
Le cadre de dveloppement du jeu tant pos, nous allons nous concentrer sur quelque chose de plus concret. Pour garder une
certaine logique, l'arrire-plan va tre instancier en premier (nous parlerons galement de background). La plupart des jeux
vidos en 2D (hormis les RPG) possdent un arrire-plan qui va s'animer, soit automatiquement, soit lors du dplacement du
personnage.
Pour garder un effet raliste, l'arrire-plan va se diviser en plusieurs images, qui vont bouger vitesse diffrente suivant leur
position. Imaginez cela dans la ralit : lorsque vous vous dplacez en voiture, par exemple, l'horizon dfile lentement devant vos
yeux, du fait de sa position loigne. Inversement, si vous regardez la route, vous la verrez bouger trs vite ! C'est ce que l'on
nomme l'effet parallaxe . Cet effet est de plus en plus utilis sur le web pour faire de jolies animations, et nous allons nous en
servir pour notre background !
Instancier les sprites d'arrire-plan
Avant de raliser l'animation en elle-mme, il va falloir charger nos diffrentes images constituant l'arrire-plan. Nous allons partir
sur une base de trois images, ce qui est largement suffisant dans un premier temps, pour un petit jeu simple.
Dfinir le groupe
Nous avons besoin de crer un arrire-plan. Comme il va se diviser en plusieurs sprites, il sera sous forme de groupe. Ajoutons
donc un groupe notre playground :
Code : JavaScript
$.playground() // on accde au playground
.addGroup('background', { height : h, width : w }); // puis on
ajoute le groupe "background"
Analysons les nouveauts de ce petit code. Nous avons dfinit le playground, comme convenu, puis nous avons utilis la
mthode addGroup() pour lui ajouter un groupe. Cette fonction prend deux arguments : le nom du groupe, qui nous permettra
d'y accder avec un slecteur, et les dimensions (la plupart du temps, vous n'aurez qu' indiquer celles du playground).
Le nom du groupe sera galement l'identifiant de l'lment qui le reprsente. Il sera alors trs facile d'accder ce
dernier pour lui ajouter des lments graphiques !
En gnral, un jeu n'est pas compos que d'un arrire-plan (on a bien dit en gnral ). Il vous faudra alors ajouter
plusieurs groupes, chacun ayant une tche spcifique : initialiser un personnage, un arrire-plan, une arme, un vhicule, etc. La
subtilit dans ce cas-l, c'est que l'on devra revenir l'objet premier, ici notre playground. Eh oui ! Souvenez-vous que le
chanage de mthodes est bien pratique, mais que celles-ci s'excute la suite ; chaque mthode va donc se lancer sur la
dernire. Dans notre cas, cela pose problme : nous voulons ajouter des groupes au playground, et seulement lui. Il faudra donc
revenir cet objet chaque ajout, grce la mthode end() :
Code : JavaScript
// Exemple d'ajout de plusieurs groupes la suite
$.playground()
.addGroup('background', { height : h, width : w }) // ajout du
groupe "background"
.end() // on revient l'objet playground
.addGroup('player', { height : h, width : w }); // ajout du
groupe "player"
Charger les sprites dans le groupe
Le groupe tant correctement cr, nous pouvons prsent nous employer lui ajouter des sprites, car c'est quand mme le but
de cette manipulation. Chaque image devra tre instancie grce l'objet Animation de gameQuery. Nous allons donc
crer une instance pour chaque sprite (trois, dans notre exemple), en donnant l'URL menant l'image en paramtre de l'objet :
Code : JavaScript
// premire instance
var image1 = new $.gameQuery.Animation({
imageURL : "background1.png"
});
// seconde instance
});
// troisime instance
});
La suite est vraiment trs simple : il faut utiliser la mthode addSprite() sur notre groupe pour ajouter chaque image dans
celui-ci ! Cette fonction prend, une fois encore, deux arguments :
1. le nom du sprite, mme principe que pour le groupe (permet d'accder l'objet par l'identifiant) ;
2. un objet, qui contiendra plusieurs paramtres :
animation : l'image devant tre anime, on donnera ici l'objet correspondant et prcdemment instanci ;
height : la hauteur de l'image (facultatif : 32 pixels par dfaut) ;
width : la largeur de l'image (facultatif : 32 pixels par dfaut) ;
posx : la position sur l'axe de l'image (facultatif : 0 par dfaut) ;
posy : la position sur l'axe de l'image (facultatif : 0 par dfaut).
Et pour accder au groupe prcdemment cr, il suffit de passer par son identifiant, qui est le mme que son nom :
Code : JavaScript
$('#background') // on accde notre groupe
.addSprite('image1', { // on ajoute un sprite
animation : image1, // premier objet instanci
height : h,
width : w,
// nous crons ici un arrire-plan, les dimensions sont donc
gales celles du playground
})
.addSprite('image2', { // on rpte l'opration
animation : image2,
height : h,
width : w
})
.addSprite('image3', { // on rpte l'opration
animation : image3,
height : h,
width : w
});
Animons le tout !
Tout est correctement plac et instanci, nous devons donc nous occuper de ce qui nous intresse vraiment : l'animation ! Avant
toute chose, vous devez savoir quand l'animation doit se dclencher : est-ce qu'elle est continue ? Ou doit-elle se lancer
seulement lors d'une action spcifique, comme le dplacement du personnage ?
Pour plus de simplicit, et comme nous n'avons encore pas vu la cration d'un personnage, nous allons lancer l'animation ds le
chargement des diffrents lments graphiques.
La mthode registerCallback()
Pour animer ses lments, gameQuery possde une mthode quelque peu similaire la fonction native setInterval() de
javaScript. Il s'agit de registerCallback(), qui va lancer une ou plusieurs fonctions tous les intervalles de temps (que l'on
donnera en millisecondes, comme d'habitude). Dans notre cas, il s'agit de faire dfiler nos images de droite gauche, vitesse
diffrente.
Supposons donc que la premire image soit celle positionne au fond, la deuxime est celle du milieu, et la dernire se trouve au
premier plan. En modifiant la proprit left en CSS de chaque image, nous pourrons obtenir notre effet de dfilement.
Code : JavaScript
$.playground()
.registerCallback(function(){
var left = parseInt( $("#image1").css("left") ) - 1; // l'image de
fond se dplace lentement, on la dplace donc de 1 pixel chaque
intervalle
$("#image1").css("left", left);
left = parseInt( $("#image2").css("left") ) - 3; // l'image du
milieu se dplace plus rapidement, on la dplace de 3 pixels
chaque intervalle
left = parseInt( $("#image3").css("left") ) - 5; // l'image de
devant se dplace rapidement, on la dplace de 5 pixels chaque
intervalle
}, 30); // enfin, on dfinit l'intervalle de temps 30ms
parseInt() permet de s'assurer que la valeur est de type int (nombre entier).
Vous devriez noter un problme si vous essayez le code ci-dessus. En effet, une fois que les images sont hors du playground,
on ne voit plus rien ! Il faut donc rinitialiser la position horizontale si l'image se trouve entirement hors du game screen :
Code : JavaScript
$.playground()
.registerCallback(function(){
var left = parseInt( $("#image1").css("left") ) - 1; // l'image de
fond se dplace lentement, on la dplace donc de 1 pixel chaque
intervalle
if(left < 0 - w) left = w;
left = parseInt( $("#image2").css("left") ) - 3; // l'image du
milieu se dplace plus rapidement, on la dplace de 3 pixels
chaque intervalle
left = parseInt( $("#image3").css("left") ) - 5; // l'image de
devant se dplace rapidement, on la dplace de 5 pixels chaque
intervalle
}, 30); // enfin, on dfinit l'intervalle de temps 30ms
Lancer le jeu
Oh l'arnaque ! On ne voit rien du tout l'cran, le code ne marche pas ?
Peut-tre que oui... et peut-tre que vous n'avez tout simplement pas lanc le jeu ! Une fois toutes nos manipulations effectues,
il faut utiliser la mthode startGame() pour lancer le jeu dans le playground. Cela permet par exemple de ne dbuter que
lorsque le joueur a appuy sur un bouton. Quoi qu'il en soit, n'oubliez pas cette fonction, sinon vous ne verrez rien :
Code : JavaScript
$.playground().startGame(); // on lance le jeu !
Cration de personnage par spritesheet
Que de chemin dj parcouru ! Vous connaissez dsormais les bases fondamentales de gameQuery. Seulement, il reste encore
quelques mthodes apprendre absolument, car on ne peut pas dire que ce soit trs dynamique pour le moment. L'animation que
nous venons de raliser est correcte, mais un peu bricole, ce n'est pas du tout comme cela que l'on doit procder pour animer
des mouvements de personnage, par exemple.
Les images d'arrire-plan sont en gnral statiques, il suffit donc de les faire dfiler en CSS. Un personnage est, comme nous
l'avons vu, bas le plus souvent sur une spritesheet, qui va dfinir les diffrentes positions constituant un mouvement anim.
C'est partir de cette spritesheet que le personnage va pouvoir tre cr, et c'est galement elle qui sera anime, grce une
mthode spcifique.
Instance du mouvement anim
Une sance de rflexion s'impose : quels mouvements devra-t-il tre capable de faire ? Pour illustrer nos explications, nous
utiliserons un mouvement basique, la course vers la droite.
Comme pour les diffrentes images composant l'arrire-plan, nous allons devoir instancier les diffrentes spritesheets que nous
voulons utiliser. Il suffit d'utiliser la mme classe que tout l'heure.
Code : JavaScript
var course = new $.gameQuery.Animation({
imageURL : 'course.png'
});
Seulement, comme nous venons de le dire, nous voulons raliser une animation partir de cette image. Il va donc falloir toffer
quelque peu les paramtres de notre objet, en spcifiant :
numberOfFrame : le nombre de frames utiliser ;
delta : la hauteur ou la largeur d'une frame ;
rate : l'intervalle de temps (en millisecondes) entre deux frames ;
et type : l'orientation de la spritesheet (horizontale ou verticale).
Une frame correspond un sprite dans le jargon de l'animation.
Peut-tre tes-vous un peu perdu parmi tous ces termes. Nous vous proposons un nouveau schma visant clairer ces
explications :
La spritesheet est ici horizontale, tout simplement parce que l'animation va se drouler vers la droite, et non vers le bas. Elle est
galement compose de 4 frames. En la prenant pour exemple, nous pourrions instancier une nouvelle animation :
Code : JavaScript
var repos = new $.gameQuery.Animation({
imageURL : 'repos.png',
numberOfFrame : 4, // nous avons ici 4 frames
delta : 40, // on dfinit la largeur d'une frame 40px
rate : 100, // 100ms sparent chaque frame
type : $.gameQuery.ANIMATION_HORIZONTAL // on passe une
constante en valeur ; si l'image tait verticale, on aurait donn
$.gameQuery.ANIMATION_VERTICAL
});
Vous savez maintenant instancier une animation par spritesheet !
Lancer l'animation
Il s'agit maintenant de lancer l'animation grce notre objet. Souvenez-vous qu'il faut ajouter un sprite au playground pour
l'afficher et l'exploiter. Vous allez donc devoir utiliser la mthode que nous avons dj vue : addSprite().
Code : JavaScript
// ...
// nous venons d'instancier une nouvelle animation
$.playground()
.addSprite('repos', {
animation : repos, // on lance l'animation
width : 40,
height : 50 // on dfinit les dimensions de notre
personnage
});
Il ne vous reste plus qu' lancer le jeu et... miracle ! Notre personnage s'anime !
Contrler le lancement
Tout cela, c'est trs bien, seulement... L'animation s'excute ds la chargement de la page. Or, dans un jeu, le personnage ne
bouge que lorsqu'on lui ordonne, gnralement. Il va donc nous falloir contrler le lancement de nos animations, au moyen de la
mthode setAnimation(). Elle est trs simple utiliser : il suffit de la lancer sur le sprite correspondant, que l'on a cr dans
le playground, en lui indiquant en argument l'animation qu'elle doit charger. Exemple :
Code : JavaScript
// nouvelle instance
var repos = new $.gameQuery.Animation({
imageURL : 'repos.png',
numberOfFrame : 4,
delta : 40,
rate : 100,
type : $.gameQuery.ANIMATION_HORIZONTAL
});
// on ajoute un sprite au playground, sans lancer d'animation
$.playground()
.addSprite('repos', {
width : 40,
height : 50
});
// puis on lance l'animation correspondante au moyen de la mthode
adquate
$('#repos').setAnimation(repos);
// enfin, on oublie pas de lancer le jeu
$.playground().startGame();
Vous aurez ici le mme rsultat que prcdemment... sauf que vous pouvez trs bien placer le lancement de l'animation
dans un vnement ! Au dclenchement de celui-ci, l'animation se lancera.
Utiliser le modle objet
Un jeu vido est le plus souvent (pour ne pas dire tout le temps) ralis grce la programmation oriente objet, qui permet de
garder un code clair, propre et rang. Nous allons donc revoir ensemble les bases de la POO en JavaScript pour voir comment
l'utiliser avec gameQuery, et ainsi partir avec une certaine logique de cration indispensable la conception d'un jeu.
Rappel sur les objets JavaScript
Ce que l'on appelle un objet en POO est une instanciation d'une classe. Ainsi, lorsqu'on ralise une instance, on cr un nouvel
objet. Cette instance se fait grce au mot-cl new :
Code : JavaScript
var Objet = new Classe(); // cration d'un nouvel objet
var Objet2 = new Classe(argument); // cration d'un nouvel objet
avec spcification d'un argument
Par convention, on crira la premire lettre du nom de notre objet en majuscule.
Le JavaScript est un langage un peu particulier. Ainsi, si l'on veut employer le vocabulaire exact, un objet sera une instance d'une
fonction, et non d'une vraie classe que l'on pourrait rencontrer en PHP par exemple. On peut donc crer trs facilement une
nouvelle classe en JavaScript :
Code : JavaScript
function Classe(argument){ // nouvelle classe
this.nom = argument; // nouvelle proprit
this.afficher = function(prenom){ // nouvelle mthode
alert(prenom);
};
}
Si vous n'avez jamais rencontr les objets et que vous ne connaissez pas du tout leur principe, nous vous invitons aller lire cet
excellent tutoriel sur JavaScript, et plus particulirement ses objets.
Dfinir les classes
Lorsque vous vous lancez dans la cration d'un jeu vido, il vous faut tout d'abord rflchir quelques petites choses : combien
de personnage y aura-t-il ? Combien d'ennemis devrai-je crer ? Quelles actions seront possibles ? Ceci n'est qu'un aperu des
nombreuses questions que vous devez vous poser.
Une fois cette tape termine, il vous faut dfinir les diffrentes classes qui vont vous permettre de grer votre jeu. Ainsi, vous
aurez une classe pour le joueur, une pour les ennemis, etc. Vous devrez aussi utiliser un concept trs populaire dans le milieu de
la POO : l'hritage. En JavaScript, c'est l encore un peu particulier, car on doit dfinir un prototype hritant d'une classe mre
pour crer une nouvelle classe fille.
Petit rappel sur l'hritage
L'hritage est un concept trs puissant qui mrite en gnral un chapitre entier. Seulement, nous considrons que vous avez des
notions de JavaScript, donc nous allons tre bref pour rappeler en quoi consiste ce systme.
Concrtement, en POO, l'hritage permet de crer une classe (la fille) partir d'une autre classe (la mre). En faisant cela, la fille
peut utiliser tous les attributs et toutes les mthodes de la mre car elle en hrite ! Attention, le contraire n'est pas vrai : une
classe mre ne peut pas utiliser les attributs et mthodes d'une de ses filles.
Grce ce concept, il est possible d'avoir plusieurs classes ayant des mthodes et attributs en commun : cela veut dire qu'elles
sont soeurs. En JavaScript, aprs avoir cr notre classe, il suffit d'initialiser un prototype pour la faire hriter d'une classe mre.
Code : JavaScript
function Classe(x){
this.x = x;
}
Classe.prototype = new Mere(); // hritage de la classe Mere()
Dcoupe des lments du jeu
Imaginons que le joueur de notre jeu puisse choisir entre trois personnages ; ces personnages auraient la capacit de sauter, et
de courir. Seulement, chacun devrait avoir des spcificits pour rendre le choix plus utile. Ainsi, le premier pourrait par exemple
cracher du feu, le second pourrait voler, et le troisime serait capable de se protger.
Pour raliser ce schma avec un modle orient objet, il suffit donc de crer une classe mre, que chaque personnage
possderait, et qui leur permettrait de sauter et courir. Il faudrait ensuite dfinir trois classes filles correspondantes chaque
protagoniste, qui leur donnerait leur pouvoir particulier.
Ce schma montre bien l'utilit de l'hritage, et vous pouvez le rutiliser pour normment de choses !
Code : JavaScript
function Joueur(){
this.sauter = function(){
};
this.courir = function(){
};
}
function Premier(){
this.cracherFeu = function(){
};
}
Premier.prototype = new Joueur();
function Second(){
this.voler = function(){
};
}
Second.prototype = new Joueur();
function Troisieme(){
this.proteger = function(){
};
}
Troisieme.prototype = new Joueur();
Pour garder un code lisible, partitionnez votre code : faites un fichier par classe !
Gestion des contrles et des collisions
La dernire chose aborder dans ce chapitre est la gestion des contrles et des collisions. C'est le dernier point que vous devez
voir avant de pouvoir commencer vraiment programmer vos jeux vidos en jQuery !
Gestion des contrles
Pour grer les diffrents contrles de votre personnage, nous vous conseillons vivement de faire appel la condition switch. Elle
est vraiment adapte dans ce cas-l, car nous allons couter le clavier de l'utilisateur et dterminer sur quelle touche il a appuy.
Nous devrons alors vrifier que les codes des touches correspondent bien la bonne action, grce la proprit keyCode que
nous avons dj vue :
Code : JavaScript
$(document).keydown(function(e){ // on coute le clavier de
l'utilisateur
switch(e.keyCode){
case 68: // touche D
// on se dplace droite
break;
case 81: // touche Q
// on se dplace gauche
break;
case 32: // touche ESPACE
// on saute
break;
}
});
Retrouvez la liste des codes des touches du clavier sur cette page.
Gestion des collisions
La gestion des collisions avec gameQuery se fait simplement grce une mthode qui va retourner la liste des lments qui ont
effectivement touch notre objet jQuery. En bouclant par exemple sur cette liste, on pourra effectuer les actions que l'on voudra,
comme faire disparatre les ennemis concerns. Cette mthode est collision(), et prend un filtre en guise d'argument, qui
sera le ou les lment(s) devant ragir la collision :
Code : JavaScript
var liste = $('#personnage').collision('#ennemi'); // on cherche le
nombre de collision qu'il y a eu entre personnage et ennemi
if(liste.length > 0){ // si la liste est suprieure 0
alert('Il y a eu collision !'); // alors il y a eu collision
}
Vous tes maintenant capable de raliser des jeux vidos en jQuery ! Bien sr, ils seront assez simples dans un premier temps,
sans compter que le plugin a encore de beaux jours devant lui ! N'hsitez pas venir faire tour de temps en temps, il se peut qu'il
y ait du nouveau sur cette page.
D'autres plugins utiles
Nous pourrions continuer d'crire des dizaines et des dizaines de chapitres sur des plugins que nous recommandons !
Malheureusement, on ne peut pas s'offrir ce luxe, le tutoriel ne pouvant pas accueillir une masse trop normes de chapitres ; ce
serait d'ailleurs quelque peu indigeste pour vous.
Nous vous avons donc prpar une petite liste de plugins connatre de nom, vous verrez que certains sont vraiment bien
raliss.
Grez vos cookies en jQuery
La framework n'intgre malheureusement pas nativement une gestion des cookies. C'est bien dommage, car ceux-ci sont trs
utiles pour stocker des informations dans le navigateur des visiteurs. Il existe un petit plugin assez simple, qui permet d'utiliser
une mthode capable de crer, modifier ou supprimer des cookies.
La premire chose faire est de le tlcharger sur le dpt Github : jQuery Cookie. Une fois inclus, vous pouvez utiliser les
mthodes associes.
Crer, lire et supprimer un cookie
La mthode principale est $.cookie(). Pour crer un nouveau cookie trs simplement, il suffit de passer deux arguments : son
nom, et sa valeur.
Code : JavaScript
$.cookie('tutoriel', 'jQuery'); // cr un cookie tutoriel de
valeur jQuery
Vous pouvez galement spcifier le moment o le cookie expirera, et galement le domaine o il est accessible, grce un objet et
des proprits :
Code : JavaScript
// cr un cookie tutoriel de valeur jQuery , qui expirera
dans 7 jours et accessible partout sur le site
$.cookie('tutoriel', 'jQuery', {
expire : 7,
path : '/'
});
Il est galement possible d'utiliser un protocole HTTPS (scuris) dans la transmission de cookie, avec la proprit secure qu'il
suffit de passer true. a peut tre intressant si vous voulez protger des donnes utilisateur.
Pour accder un cookie, vous avez juste indiquer son nom pour rcuprer sa valeur :
Code : JavaScript
var tutoriel = $.cookie('tutoriel'); // rcupre la valeur du
cookie tutoriel
Pour le supprimer, il suffit de lui donner une valeur nulle, comme en PHP par exemple :
Code : JavaScript
$.cookie('tutoriel', null); // le cookie tutoriel ne possde
plus aucune valeur, il est comme supprim
Stockez vos donnes avec jStorage
L'arrive de HTML5 a amen avec elle de nouvelles fonctionnalits. On notera notamment l'API File, le Drag & Drop, mais aussi
le LocalStorage. C'est un concept trs pratique qui permet de stocker des donnes directement sur l'ordinateur de vos visiteurs,
vitant ainsi d'ventuelles pertes de donnes ! a nous est tous arriv de rdiger un texte assez long, puis de faire une fausse
manipulation, pour finalement voir son dur travail envol en moins d'une seconde. Le LocalStorage permet d'viter cela, pour peu
que le navigateur de votre visiteur soit jour et supporte cette technologie.
Utiliser jStorage
Le LocalStorage est plutt long mettre en place. jStorage est un plugin jQuery permettant de simplifier grandement son
utilisation. Il est tlchargeable sur son dpt Github : jStorage.
Stocker les donnes
La premire chose connatre est l'objet qui va nous permettre d'accder aux diffrentes mthodes du plugin. Il s'agit de
$.jStorage. Vous devrez utiliser la mthode set(), avec deux arguments, pour stocker des donnes textuelles. Exemple :
Code : JavaScript
var contenu = $('#contenu').val(); // on rcupre le contenu d'un
lment de formulaire
$.jStorage.set('texte', contenu); // on stocke les donnes grce au
LocalStorage
Plus de risque de perte de donnes ! Le premier argument donner est ce qu'on appelle la cl. C'est grce elle que l'on va
pouvoir rcuprer nos donnes plus tard. Le deuxime argument est simplement le contenu stocker.
Rcuprer une donne
Rien de plus simple dans ce cas-l, il suffit d'utiliser un getter (une fonction permettant d'obtenir une donne), avec la mthode...
get() ! En donnant le nom d'une cl en argument, il est possible de rcuprer son contenu :
Code : JavaScript
var contenu = $.jStorage.get('texte');
Mthodes de vrification
Le LocalStorage est encore une technologie instable : certains navigateurs ne la comprennent pas, et la rende inutilisable. Il peut
tre bon, par exemple, de vrifier que ce systme est disponible sur le navigateur du visiteur, au moyen de la mthode
storageAvailable() (available = disponible en franais). Elle retournera true si le navigateur supporte le
LocalStorage :
Code : JavaScript
if($.jStorage.storageAvailable()){ // si le LocalStorage est
disponible
// on l'utilise ici
}
Notez que peu de navigateurs ne le supportent pas (Opra version 10.10 notamment), mais il est tout de mme bon de les prendre
en compte.
De mme, vous vous doutez bien que vous ne pourrez pas stocker indfiniment de donnes sur l'ordinateur de vos visiteurs. Il y
a donc une restriction de stockage, le plus souvent fixe 5MB de donnes. Cela vous donne de la marge, mais on n'est jamais
trop prudent : vrifiez qu'il reste de la place avec la mthode storageSize(), qui retourne la place disponible restante. Si
cette valeur est gale 0, il faudra penser supprimer des donnes.
Supprimer une cl
Pour supprimer des donnes, il suffit de connatre le nom de la cl associe, et de la donner la mthode deleteKey() qui se
chargera du reste. Si vous n'avez plus besoin de certaines choses, supprimez-les ! Cela fera de la place sur le navigateur du
visiteur.
Code : JavaScript
$.jStorage.deleteKey('texte'); // suppression des donnes associes
cette cl
Si vous souhaitez en savoir plus sur le LocalStorage, nous vous invitons lire cet excellent article.
Canvas avec jQuery
S'il y a un lment qui a fait beaucoup parler de lui avec HTML5, c'est bien Canvas. En effet, grce lui, il est possible de raliser
des graphismes 2D trs simplement en passant par JavaScript. Voyons comment jQuery adapte ses mthodes pour rendre le
dessin encore plus acessible.
jCanvas, quand jQuery rencontre Canvas
Le pari que s'est donn Caleb Evans, c'est de rendre plus facile l'utilisation des fonctions relatives au dessin dans Canvas. Il a
alors cr jCanvas (versions).
Pour utiliser ce plugin, il est ncessaire de l'inclure, mais aussi d'initialiser un lment <canvas>, avec une hauteur et une
largeur. Une fois fait, vous la libert, car il suffit d'accder celui-ci avec un simple slecteur :
Code : HTML
<canvas width="500" height="300">
<p>Votre navigateur ne supporte pas l'lment Canvas !</p>
</canvas>
Code : JavaScript
var $canvas = $('canvas'); // on accde au canvas
jQuery apporte ici une dimension pratique ; en JavaScript, il est ncessaire d'initialiser un contexte 2D, par exemple, pour
commencer dessiner. Avec jCanvas, rien faire ! Vous pouvez en plus profiter de tous les atouts du framework, comme le
chanage de mthode..
Code : JavaScript
var $canvas = $('canvas');
$canvas
.drawArc()
.drawLine();
Le plugin dispose d'une documentation trs bien ralise, disponible cette adresse. Vous y trouverez tout ce que vous voulez,
de la liste des diffrentes mthodes l'extension du plugin lui-mme !
Et voil, vous tes maintenant lanc dans le monde fabuleux des plugins jQuery ! Cest vous de voler de vos propres ailes
prsent, et de chercher les plugins qu'il vous faut sur la toile. Voici tout de mme quelques bonnes adresses aller consulter,
vous pourriez y trouver de vritables perles :
jQuery Plugins, un site entirement consacr aux plugins de jQuery ;
jQuery Rain, un site dans la mme veine que le prcdent ;
La Ferme du Web, un blog qui se tient la pointe des technologies rcentes.
Il en existe bien d'autres, mais nous comptons sur vous pour les trouver.
Partie 6 : Aller plus loin
Nous traitons en annexe de ce tutoriel des technologies, des concepts ou des bonnes adresses qui gravitent autour de jQuery.
Vous aurez peu de code ici : il s'agit d'annexes, et vous n'tes franchement pas oblig de les lire. Nanmoins, cela sera sans doute
intressant pour vous : allez plus loin !
tendre le framework
Une dernire chose reste floue : tendre jQuery. Comme tous les frameworks modernes, jQuery intgre un systme qui permet
de lui ajouter des fonctionnalits. C'est comme cela qu'on cr des plugins, par exemple, mais il existe d'autres possibilits moins
connues, et pourtant pratiques.
Vous allez apprendre dans ce chapitre utiliser la mthode extend().
La fonction d'extension
Lorsque vous rajoutez des fonctionnalits jQuery, quelles qu'elles soient, on dit que vous tendez le framework. C'est le
principe des plugins : on tend jQuery pour lui attribuer de nouvelles mthodes, que l'on ne pouvait pas utiliser avant. Eh bien,
pour rajouter de nouvelles mthodes d'volution d'animation, vous allez devoir, justement, tendre jQuery au moyen de la
mthode extend().
Elle fonctionne avec deux arguments le plus souvent :
la cible, qui est l'objet tendre (nous verrons cela plus en dtails ensuite) ;
un objet, qui intgre et dfinit les options additionnelles.
Le premier argument, ce que nous appelons couramment la cible dans ce cas, doit tre spcifi pour indiquer jQuery quelle
fonctionnalit va se voir ajouter des options. Il suffit d'indiquer un objet, tel que jQuery.easing ou jQuery.cssHooks.
Le second objet va contenir toutes les nouvelles options ajouter.
Acclration d'une animation
Vers le milieu du cours, nous avions parl de la mise en place d'une animation, et son fonctionnement concret : elle possde
notamment un temps de droulement, peut lancer une fonction de retour, mais surtout possde une faon d'voluer au cours du
temps. C'est cela que nous allons nous intresser maintenant : la proprit easing ne peut prendre actuellement que deux
valeurs, qui sont swing et linear.
La communaut, trouvant cela trop limit, s'est lance dans la conception d'volutions plus sophistiques. Ainsi, plusieurs
plugins ont vu le jour, permettant d'user de plus de faons de faire voluer une animation. Le plus clbre est sans aucun doute
jQuery Easing, qui reprend en fait une petite partie du code de jQuery UI, et nous allons le dcortiquer pour comprendre
comment il fonctionne et comment raliser nous-mme ces diffrents effets. Vous pourrez trouver le code du plugin sur cette
page.
Utilisation des diffrentes volutions du plugin
Aprs avoir pris soin de bien inclure le plugin aprs jQuery, vous pourrez utiliser les nouvelles volutions d'animation dans la
proprit easing ! Il suffit pour cela de donner le nom correspondant :
Code : JavaScript
$('#element').animate({
width : '300px'
},
{
duration : 'slow',
easing : 'easeInQuad'
});
Vous pourrez trouver toutes les valeurs possibles sur la page de prsentation du plugin, ou sur la page de tests de jQuery UI.
La partie suivante est assez technique, et facultative. Si vous n'aimez pas trop les maths, vous pouvez passer
directement au Q.C.M. au bas de la page.
Crer une mthode d'volution
Ce qui nous intresse le plus dans cette petite partie, c'est de pouvoir crer une mthode d'volution nous-mme, et surtout
comprendre comment cela fonctionne. Nous esprons que vous aimez les mathmatiques, car ils sont trs prsents ici !
Rassurez-vous nanmoins, rien de bien compliqu.
La premire des choses faire est d'tendre jQuery au moyen d'extend(), et plus prcisment l'objet jQuery.easing, qui
contient toutes les donnes relatives aux acclrations des animations.
De plus, si vous regardez le code du plugin jQuery Easing, vous pourrez voir que chaque option possde en guise de valeur une
fonction de retour ; c'est cette fonction anonyme qui va dterminer, mathmatiquement, comment faire voluer une animation :
Code : JavaScript
jQuery.extend(jQuery.easing, // on veut tendre les mthode
d'volution d'animation
{
easeInQuad : function(x, t, b, c, d){ // nouvelle option,
nouvelle mthode d'volution
return c * (t /= d) * t + b;
}
});
Je n'ai rien compris la fonction, pouvez-vous m'expliquer ?
Pas de panique, nous comprenons parfaitement votre raction ! vrai dire, nous tions comme vous ce moment-l : qu'est-
ce que c'est que ce charabia ? Heureusement, nous sommes l pour vous apprendre faire vous-mme vos fonctions
d'volution.
Fonctionnement de l'volution
Comme le mot volution est plutt vague, nous allons plutt parler, dsormais, d'acclration : cela sera plus simple la
comprhension. Ci-dessus, vous avez eu un aperu d'un ajout d'option l'objet jQuery.easing. On met en fait en place une
fonction anonyme qui va se charger de retourner une certaine valeur.
Cette valeur, sachez qu'elle reprsente justement l'acclration de votre animation. Elle doit tre obligatoirement un nombre
compris dans l'intervalle [0;1], c'est donc un nombre virgule (float). Pour la calculer, vous devez utiliser les arguments suivants :
x, qui reprsente le temps actuellement coul, de valeur comprise entre 0 et 1 ;
t, qui fait la mme chose que x, mais avec une valeur en millisecondes ;
d, qui est la dure totale de l'animation (que vous avez donc donne dans avec la proprit duration) ;
b, qui est gal 0 ;
c, qui est gal 1.
Une fois cette valeur en poche, jQuery va utiliser une quation qui va lui permettre de dterminer le coefficient d'volution d'une
animation. Pour les plus curieux d'entre vous, cette quation est la suivante : , o est la valeur de
dpart de la proprit anime, la valeur calcule par votre nouvelle option, et la valeur de fin de la proprit.
Vous n'avez plus qu' vous casser la tte sur la valeur de retour ! Sachez tout de mme que ce n'est pas trs utile de faire cela,
le plus souvent on se contentera des mthodes d'acclration mises disposition par jQuery et ses complments.
Crez vos slecteurs
Si par un malheureux hasard vous ne trouvez pas votre bonheur dans la grande liste de slecteurs disponibles, il vous reste la
solution de crer vous-mme l'expression qui vous permettra de cibler vos lments comme vous le voulez. C'est moins
compliqu que d'tendre l'objet $.easing, mais nous vous conseillons tout de mme de rester attentif.
Utilisation de filter() avec fonction anonyme
Avant de se lancer dans l'extension du framework, vous devez savoir qu'il existe une solution plus pnible, mais toute aussi
efficace. Il est possible d'utiliser la mthode filter() avec une fonction anonyme, pour retourner les lments qui nous
intressent. Par exemple :
Code : JavaScript
$('.elements').filter( function(){
return $(this).css('width') == "100px"; // retourne tous les
lments ayant une largeur d'exactement 100px
} );
Seulement, si vous devez utiliser cette mthode plusieurs fois dans un code dj consquent, cela peut vite devenir trs
Partie 6 : Aller plus loin 137/150
redondant et peu ergonomique, ce qui est l'antithse du principe de jQuery. Il vous faudra alors dfinir un nouveau slecteur.
tendre les slecteurs
L'objet tendre est un peu particulier : il s'agit de jQuery.expr[':']. Cet objet contient tous les filtres de jQuery, citons
par exemple :input, :text ou encore :not(). C'est en gnral ces filtres que l'on ajoutera des nouvelles valeurs, car c'est
le plus simple et le plus rapide. Commenons donc par utiliser extend() :
Code : JavaScript
$.extend( jQuery.expr[':'], {
// nos nouveaux filtres ici
} );
Il faut ensuite ajouter des proprits l'objet, proprits qui seront en fait des fonctions anonymes, qui se chargeront, comme la
mthode filter(), de retourner les bons lments. Il faut nanmoins connatre quelques variables bien utiles :
a, qui reprsente le ou les lment(s) courant(s) ;
i, qui est l'index de l'lment filtr (facultatif) ;
m[3], qui reprsente la valeur de filtre entre parenthses (facultatif).
Il existe un quatrime paramtre, r, qui contient le tableau complet des lments. On ne le spcifie quasiment jamais, il n'est donc
pas utile de le retenir.
Une fois tout ceci en tte, vous pouvez trs bien transposer votre retour de filter() en slecteur. Si on reprend l'exemple
prcdent :
Code : JavaScript
$.extend( jQuery.expr[':'], {
largeur : function(a, i, m){
return $(a).css('width') == m[3]; // retourne les lments
ayant la largeur donne
}
} );
// exemple :
$('elements:largeur("100px")'); // slectionne seulement les
lments ayant une largeur de 100px exactement
Et voil, ce n'tait pas si compliqu !
Ralisez vos propres mthodes
Vous n'tes pas sans savoir qu'un des points forts de jQuery rside dans sa capacit intgrer des plugins. Nous avons dj
parl de l'extension du framework, et vous tes galement au courant que cela permet de crer de nouvelles mthodes.
Seulement, il existe deux sortes de cration d'un plugin, et nous allons les comparer pour dterminer laquelle est la meilleure.
tendre les mthodes de jQuery
Avec la fonction d'extension
Vous devez vous en douter, la premire possibilit est de passer par la fonction d'extension extend(), et d'tendre l'objet des
mthodes pour en crer de nouvelles. Cela a l'avantage d'tre trs rapide et trs simple mettre en place, il suffit de connatre le
nom de l'objet : jQuery.fn.
Code : JavaScript
$.extend( jQuery.fn, { // on tend l'objet jQuery.fn
// nos nouvelles mthodes ici
maMethode : function(argument){
alert(argument); // notre mthode devra afficher un message
donn
}
} );
$('element').maMethode('Bonjour !'); // affichera une alerte
contenant le message Bonjour !
Nous sommes conscients que le code ci-dessus est parfaitement inutile.
L'avantage de cette mthode d'extension est qu'il est possible de dfinir plusieurs mthodes la suite. Si vos fonctions ne sont
pas trs consquentes, ce n'est pas un problme, mais que se passera-t-il si vous avez un code de plusieurs milliers de lignes ?
Votre fichier sera illisible, et vous vous perdrez dans la masse. C'est pourquoi on recommande de faire un fichier par plugin, et
d'utiliser une mthode d'extension plus adapte dans ce cas prcis.
En passant directement par l'objet
Le principe est vraiment simple : au lieu d'utiliser la mthode extend(), et de donner deux arguments pas vraiment clairs, on va
passer directement par l'objet jQuery.fn en lui dfinissant une nouvelle mthode. Exemple :
Code : JavaScript
jQuery.fn.maMethode = function(argument){
// fonctionnement de la mthode ici
};
Vous pouvez trs bien utiliser l'alias $, mais veillez ne pas entrer en conflit avec d'autres frameworks, comme nous
l'avons vu au dbut du tutoriel.
La subtilit dans la cration d'un plugin, c'est que pour accder l'lment courant (celui qui est actuellement cibl et sur lequel
on lance la mthode), on ne pourra pas utiliser l'objet $(this), mais seulement this, ce qui est diffrent : le premier reprsente
l'objet jQuery courant, alors que le second dsigne l'lment courant. Exemple :
Code : JavaScript
this.css('color', 'red');
};
Pour tre parfait, il reste s'assurer qu'on ne casse pas la chane. jQuery permettant de chaner les mthodes, il faut que chaque
mthode renvoie l'lment courant. Et il suffit de le faire avec this !
Code : JavaScript
this.css('color', 'red');
return this; // on ne casse pas la chane !
};
Dfinir des paramtres dans le plugin
Vous savez dfinir une nouvelle mthode... mais ce n'est pas trs utile s'il n'est pas possible de la personnaliser avec des
arguments et des paramtres ! Bien sr, vous savez utiliser les arguments classiques, comme nous l'avons fait juste avant. Mais
que se passera-t-il lorsque vous en aurez plusieurs dizaines ? Votre mthode sera aussi souple qu'un morceau d'acier, et vous
devrez retaper tout votre code pour la mettre jour.
Comme toujours, il existe une solution.
Mettre les arguments dans un objet
Beaucoup de mthodes utilisent ce systme, comme css() ou animate(). On passe un objet en argument, qui contient
toutes les proprits modifier. On ne parle alors plus d'argument, mais de paramtres. On prfrera de loin cette faon de faire,
car elle permet une merveilleuse rtro-compatibilit.
On va donc devoir spcifier un argument dans la fonction, ainsi qu'un objet au sein de celle-ci, qui va contenir les valeurs par
dfaut des paramtres. Il suffira de fusionner ces deux entits, et le tour sera jou !
Code : JavaScript
var param = {
couleur : 'black',
duree : '50'
}; // on dfinit les paramtres et leurs valeurs par dfaut
param = $.extend(param, argument); // on fusionne l'argument et
l'objet
this.css('color', param.couleur); // on peut alors accder aux
paramtres trs simplement
};
$('element').maMethode({
couleur : 'red'
}); // on peut alors appeler la nouvelle mthode avec un nouveau
paramtre sur un lment !
Une fonction de callback
Pratiquement toutes les mthodes natives de jQuery permettent de lancer une fonction anonyme une fois leur droulement
termin. C'est quelque chose de trs simple mettre en place, finalement, car il suffit d'un nouveau paramtre, de le fixer null
par dfaut, et de le lancer seulement s'il existe. Avec une condition, c'est trs simple !
Code : JavaScript
var param = {
couleur : 'black',
duree : '50',
callback : null
}; // on dfinit les paramtres et leurs valeurs par dfaut
param = $.extend(param, argument); // on fusionne l'argument et
l'objet
this.each(function(){
$(this).css('color', param.couleur);
if(param.callback){ // si un callback existe
param.callback(); // on lance la fonction
}
});
};
$('element').maMethode({
couleur : 'red'
}); // on peut alors appeler la nouvelle mthode avec un nouveau
paramtre sur un lment !
Vous connaissez maintenant tout ce qu'il y a savoir sur la cration d'un plugin jQuery.
Si jQuery rpond 99% de nos attentes, il se peut que, parfois, vous cherchiez quelque chose qu'il n'intgre pas. Pas de soucis !
Vous pouvez trs bien le crer vous-mme, et le rajouter jQuery ! tendre le framework se fait de plus en plus sur la toile, et
c'est vraiment un point fort, souvenez-vous de cela.
Mmento des principales fonctions
ceux qui n'ont jamais su se passer d'antisches ou de notes pour faire les courses, cette page vous est destine. Nous
vous avons regroup les principales fonctions, ranges selon leur catgorie, connatre absolument pour faire du jQuery
correctement. Cette liste n'est bien sr pas exhaustive et n'a pas la prtention de remplacer la documentation officielle. Ne venez
donc pas ici en premier lieu pour effectuer une recherche !
Mthodes de base
chaque utilisation de jQuery, vous devez vous assurer de plusieurs choses : que vous avez charg le framework, mais aussi
que le DOM s'est correctement cr.
CDN Lien
jQuery
Code : HTML
<script src="http://code.jquery.com/jquery.min.js"></script>
Google
Code : HTML
<script
Mthode Explication
$(document).ready(function()); Ds que le DOM est prt, on excute du jQuery.
$(function()); Idem, en employant un raccourci.
Code minimal pour utiliser jQuery :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Titre</title>
</head>
<body>

<script
<script>
$(function(){
// du code jQuery ici
});
</script>
</body>
</html>
Les slecteurs
Indispensables au ciblage des lments de la page, les slecteurs sont une part incontournable de jQuery :
Slecteur CSS Explication
$('*'); Cible tous les lments (inclus <html>, <head> et <body>).
$('element'); Cible tous les lments tant de type correspondant.
$('#element'); Cible l'lment ayant l'identifiant donn (obligatoirement unique).
$('.element'); Cible tous les lments ayant la classe donne.
$('parent enfant'); Cibles tous les enfants directs ou indirects de l'lment parent.
$('element, element2'); Cible d'abord les premiers lment trouvs, puis les seconds, etc.
$('parent > enfant'); Cible tous les enfants directs de l'lment parent.
$('frere + element'); Cible tous les lments prcds directement d'un frre.
$('frere ~ element'); Cible tous les lments prcds directement ou indirectement d'un frre.
Slecteur par attribut Explication
$('element[attribut]'); Cible tous les lments possdant l'attribut donn.
$('element[attribut="valeur"]');
Cible tous les lments possdant l'attribut donn et
dont la valeur est gale celle spcifie.
$('element[attribut!="valeur"]');
dont la valeur est diffrente de celle spcifie.
$('element[attribut*="valeur"]');
dont la valeur contient, entre autres, la chane
spcifie.
$('element[attribut1][attribut2][attributN]');
Cible tous les lments dont les attributs
correspondent ceux donns.
Filtres Explication
$(':animated'); Cible tous les lments actuellement anims.
$(':eq(N)'); Cible tous les lments dont l'index est gal N.
$(':even'); Cible tous les lments dont l'index est pair.
$(':odd'); Cible tous les lments dont l'index est impair.
$(':first'); Cible le premier lment trouv.
$(':last'); Cible le dernier lment trouv.
$(':focus'); Cible tous les lments ayant actuellement le focus.
$(':header'); Cible tous les lments de type header (<h1>, <h2>, <h3>, etc).
$(':not(selecteur)'); Cible tous les lments ne correspondant pas au slecteur donn.
Slecteurs pour formulaire Explication
$(':input'); Cible tous les lments de formulaire.
$(':button'); Cible tous les lments de formulaire de type button.
$(':checkbox'); Cible tous les lments de formulaire de type checkbox.
$(':checked'); Cible toutes les botes coches.
$(':file'); Cible tous les lments de formulaire de type file.
$(':password'); Cible tous les lments de formulaire de type password.
$(':radio'); Cible tous les lments de formulaire de type radio.
$(':submit'); Cible tous les lments de formulaire de type submit.
$(':text'); Cible tous les lments de formulaire de type text.
Les vnements
Utilisez les vnements pour dclencher une fonction sur l'action de l'utilisateur. jQuery prend en charge beaucoup
d'vnements, profitez-en !
Gestionnaires d'vnements Explication
on() Initialise un gestionnaire d'vnements.
off() Supprimer un gestionnaire d'vnements.
trigger() Simule un vnement.
vnement du clavier Explication
keydown() Se dclenche l'enfoncement d'une touche.
keyup() Se dclenche au relchement d'une touche.
keypress() Se dclenche l'enfoncement et au maintient d'une touche.
Il est possible de rcuprer le code de la touche enfonce grce la proprit keyCode.
vnement de la souris Explication
click() Se dclenche au clic.
dblclick() Se dclenche au double-clic.
hover() Se dclenche au passage sur l'lment cibl.
mousedown() Se dclenche l'enfoncement du bouton de la souris.
mouseup() Se dclenche au relchement du bouton de la souris.
mouseenter() Se dclenche l'entre du curseur sur l'lment cibl.
mouseleave() Se dclenche la sortie du curseur de l'lment cibl.
mousemove() Se dclenche au mouvement de la souris.
toggle() Se dclenche chaque clic, et alterne deux fonctions.
vnement AJAX Explication
ajaxStart() Se dclenche au dbut d'une requte AJAX.
ajaxComplete() Se dclenche une fois la requte AJAX termine.
ajaxSuccess() Se dclenche si la requte AJAX s'est termine avec succs.
ajaxError() Se dclenche si une erreur est survenue lors de la requte AJAX.
Manipulation du CSS
Modifier le style d'une page la vole est une possibilit rendue trs simple par jQuery, notamment grce sa mthode css()
trs puissante. Il existe nanmoins d'autres mthodes parfois plus adaptes selon les cas.
Mthode Explication
css() Rcupre ou modifie une ou plusieurs proprit(s) CSS.
height() Rcupre la hauteur de l'lment cibl.
width() Rcupre la largeur de l'lment cibl.
innerHeight()
Rcupre la hauteur de l'lment cibl en prenant en compte ses marges intrieures mais pas les
bordures.
innerWidth() Rcupre la largeur de l'lment cibl en prenant en compte ses marges intrieures mais pas les bordures.
outerHeight()
Rcupre la hauteur de l'lment cibl en prenant en compte ses marges intrieures, extrieures, et ses
bordures.
outerWidth()
Rcupre la largeur de l'lment cibl en prenant en compte ses marges intrieures, extrieures, et ses
bordures.
offset() Rcupre les coordonnes absolues de l'lment cibl.
position() Rcupre les coordonnes relatives de l'lment cibl.
scrollTop() Rcupre la position verticale de la barre de dfilement par rapport la page.
scrollLeft() Rcupre la position horizontale de la barre de dfilement par rapport la page.
Les effets
Au-del du style CSS se situe l'animation, rendue possible grce bon nombre de mthode dont la plus clbre est sans doute
animate().
Mthode Explication
animate()
Anime une ou plusieurs proprit(s) CSS, l'aide d'arguments tels que la dure ou l'acclration de
l'animation.
hide() Fait disparatre un lment (et lui donne la proprit display:none).
show() Fait rapparatre un lment.
fadeOut() Fait disparatre un lment (qui aura la proprit display:none) avec un effet de fondu.
fadeIn() Fait rapparatre un lment avec un effet de fondu.
slideUp() Fait disparatre un lment avec un effet de glissement.
slideDown() Fait rapparatre un lment avec un effet de glissement.
stop() Arrte l'animation en cours.
Les attributs
Ces mthodes permettent d'accder aux attributs des lments, et de les manipuler.
Mthode Explication
attr() Rcupre ou modifie l'attribut d'un lment.
removeAttr() Supprime l'attribut d'un lment.
addClass() Ajoute une classe un lment.
removeClass() Supprime une classe d'un lment.
Mthodes de parcours
Cette section rpertorie les mthodes permettant de parcourir l'arbre DOM.
Mthode Explication
find() Permet de trouver un enfant particulier.
children() Trouve l'enfant direct de l'lment cibl.
parent() Trouve le premier parent de l'lment cibl.
parents() Trouve tous les anctres de l'lment cibl.
each() Boucle sur chaque lment.
Manipulation du HTML
Ici se trouvent les mthodes permettant de modifier la structure HTML de la page.
Mthode Explication
html() Rcupre ou modifie le contenu HTML de l'lment cibl.
text() Rcupre ou modifie le contenu textuel de l'lment cibl.
val() Rcupre ou modifie la valeur d'un lment de formulaire.
append() Ajoute du contenu HTML ou textuel la fin de l'lment cibl.
prepend() Ajoute du contenu HTMK ou textuel au dbut de l'lment cibl.
appendTo() Mme utilit que append().
prependTo() Mme utilit que prepend().
before() Ajoute du contenu HTML ou textuel avant l'lment cibl.
after() Ajoute du contenu HTML ou textuel aprs l'lment cibl.
clone() Duplique un lment (ncessite de place le clone dans le DOM).
empty() Vide un lment.
remove() Supprime un lment.
wrap() Enveloppe un lment.
Mthodes AJAX
Enfin, vous trouverez ici les principales fonctions relatives aux requtes asynchrones d'AJAX.
Mthode Explication
$.ajax() Excute une requte AJAX de type GET ou POST.
$.post() Excute une requte AJAX de type POST (raccourci de $.ajax()).
$.get() Excute une requte AJAX de type GET (raccourci de $.ajax()).
load() Charge du contenu HTML de manire asynchrone.
serialize() Permet de srialiser un formulaire.
D'autres frameworks JavaScript
JavaScript est l'un des langages les plus utiliss, et si la communaut a t capable de crer un framework tel que jQuery, elle ne
s'est pas arrte l. D'autres outils ont galement t crs pour faciliter le dveloppement de sites web avec JavaScript.
Nous allons parler ici des concurrents de jQuery, et vous allez voir, il y en a normment.
Le principal concurrent : MooTools !
MooTools est un framework JavaScript qui poursuit exactement le mme objectif que jQuery : mettre les dveloppeurs JavaScript
dans les meilleures conditions pour dvelopper efficacement.
MooTools, un concurrent de jQuery
MooTools et jQuery : des ressemblances
Au-del de leur objectif qui est le mme, MooTools et jQuery sont galement ns la
mme priode. Alors que John Resig posait les premires lignes de ce qui allait devenir
jQuery, Valerio Proietti travaillait quant lui sur le projet MooTools. A la base, MooTools
s'inspire beaucoup d'un autre framework JavaScript appel Prototype, qui est aujourd'hui
quasiment mort.
MooTools est trs utilis !
Bien que moins utilis que jQuery, MooTools se retrouve nanmoins sur 5% des sites web, ce qui est absolument norme quand
on connat le nombre de sites actuel. MooTools est galement dot d'une norme communaut qui saura certainement vous aider
si vous rencontrez un problme lors de son utilisation. Imaginez simplement le monde de jQuery, mais trs sensiblement plus
restreint en volume, et vous obtenez MooTools.
Mais du coup quel est le meilleur ? MooTools ou jQuery ?
Vous savez, cette chelle-l, cela dpend un peu des gots et des couleurs, certaines personnes sont fans de MooTools et
n'aiment pas du tout jQuery, pour d'autres c'est l'inverse. Pour notre part, nous avons simplement appris jQuery un beau jour et
nous avons t immdiatement sduits par ses possibilits. Depuis, nous ne l'avons plus laiss.
Du ct licence
Les deux frameworks sont crs autour de la philosophie de l'open-source. Les deux frameworks sont ainsi distribus sous une
licence libre trs permissive, la licence MIT. Vous tes donc libre de rcuprer le code source du framework, d'y appliquer vos
propres modifications, et pourquoi pas de les redistribuer la communaut. C'est de cette manire que ces deux projets sont
devenus ce qu'ils sont : les deux frameworks JavaScript les plus utiliss au monde.
Lire le texte de la licence MIT
Des ressemblances dans le code
Vous savez dj que le signe $ est trs utilis par jQuery, c'est un alias de la fonction centrale du framework, donc autant dire qu'il
revient presque partout. Du ct de Mootools, on a aussi dcid d'utiliser le signe $. Vous ciblerez ainsi les lments de votre
DOM grce la fonction $() et ainsi de suite.
MooTools est bien sr aussi complet que jQuery, et il propose toute la panoplie d'outils que jQuery propose. Ainsi, on va avoir
de quoi grer des plugins, de raliser des effets sur ses pages web. On va pouvoir galement grer des appels AJAX sur sa page,
modifier le DOM... bref, tout ce que l'on aime chez jQuery, on va pouvoir aussi le retrouver chez MooTools.
Les divergences
Les divergences dans le code
Les divergences entre les deux frameworks se situent essentiellement au niveau de leur approche du code. Lorsque vous codez
avec jQuery, vous apprenez presque un nouveau langage. Certes, une connaissance basique du JavaScript est ncessaire afin
d'apprendre le framework correctement, mais comme nous vous le disions en dbut de tutoriel, apprendre jQuery, c'est faire une
redcouverte presque totale du JavaScript.
Pour certains c'est l sa plus grande force, et c'est en ceci que jQuery est absolument gnial. Pour d'autres, c'est carrment le gros
point noir qui centralise toute l'animosit qu'on peut avoir pour le framework ; ce choix n'a donc franchement pas fait l'unanimit.
MooTools quant lui, a fait le choix de rester proche de la syntaxe de base du JavaScript, il est donc en thorie "plus simple"
prendre en main lorsque l'on sort d'une formation JavaScript.
La grande faiblesse de MooTools : sa lenteur
Une dernire chose est dire sur MooTools, et c'est son principal point faible par rapport jQuery : il est vraiment lourd en
comparaison. Si votre choix peut se faire sur des questions de performances, alors vous choisirez trs certainement jQuery.
MooTools propose nanmoins une fonction sympathique pour pallier ce dfaut, nous pouvons le dcouper pour tlcharger
uniquement les parties du framework dont on va avoir besoin pour travailler.
Ceci est une simple ouverture MooTools. En tant que dveloppeur JavaScript, et maintenant jQuery, vous vous devez
de connatre ce framework au moins de nom. Nous n'essayons pas du tout de vous convertir au monde de MooTools,
nous sommes bien dans les annexes d'un tutoriel jQuery pour ceux qui l'ont oubli. Un tutoriel pour apprendre
MooTools existe sur le Site du Zro.
Les autres frameworks JavaScript
jQuery et MooTools ne sont bien sr pas les seuls frameworks JavaScript, il en existe des tonnes. Nous allons vous en prsenter
quelques-uns que vous pouvez galement aborder, mme s'ils sont bien sr tous moins populaires que les deux mastodontes
jQuery et MooTools.
D'autres frameworks JavaScript
AngularJS, le nouveau framework de Google
Google a jug bon de crer son propre framework JavaScript et de le rendre disponible librement pour les
dveloppeurs. Ce framework se nomme AngularJS, et il repose sur une architecture bien connue : le
MVC (Model, View, Controller). AngularJS est disponible sur son dpt Github, vous pouvez le
rcuprer, c'est mme encourag. Le but de Google avec ce framework est de crer un outil interoprable
(qui puisse cohabiter) avec les autres frameworks JavaScript.
L'utilisation d'Angular est en fait assez simple : nous allons en fait tendre la syntaxe de base du HTML
grce au framework pour faire un peu tout ce que l'on veut. Voici un exemple de Hello World ! cr
avec AngularJS !
Code : HTML
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello World - By AngularJS !</title>
</head>

<body>
<input type="text" ng-model="nom">
<h1>Hello {{ nom }} !</h1>
<script src=""></script>
</body>
</html>
Voil, avez ici un champ de formulaire, et en tapant du texte l'intrieur, celui-ci s'ajoutera automatiquement la variable nom
situe dans le titre <h1>.
Si vous tes curieux de comprendre comment ce code fonctionne, pas de panique, AngularJS possde son propre site
officiel, et il est plutt bien document.
Le framework Dojo
Le dernier framework que nous nous devons de vous prsenter ici se nomme Dojo. Ce
framework Javascript est notamment distribu sous licence BSD, une autre licence libre.
Il est franchement trs utilis et dispose d'atouts qui font de lui un concurrent de choix
jQuery pour dvelopper des applications web plus facilement.
Le projet est trs suivi, et sa dernire mise jour date de janvier 2012. Si Dojo a
longtemps souffert d'un manque de documentation, ce problme a t rsolu il y a
maintenant un petit moment, et vous pouvez retrouver une documentation complte du
framework sur le site officiel.
La plus grande force de Dojo est sans aucun doute sa modularit, le framework exploite
massivement les notions de namespace et de paquetage. Le framework et le code sont
donc parfaitement dcoups, rendant le tout beaucoup plus modulable.
Prototype, l'anctre des frameworks
Prototype est un des pionniers des frameworks JavaScript, il a t cr en 2005, soit un an avant jQuery, et sa dernire mise jour
date de novembre 2010. Il fait notamment parti du framework de dveloppement web Ruby on Rails. Il est distribu sous licence
MIT, vous pouvez donc le modifier et le rutiliser librement... Nanmoins, Prototype n'ayant plus t mis jour depuis plusieurs
annes, nous ne vous le recommandons vraiment pas. Optez plutt pour d'autres frameworks.
Comme nous vous l'avons dit, jQuery n'est pas la Rolls des frameworks JavaScript : c'est simplement le plus rpandu et le plus
utilis de tous. Il extrmement puissant, mais il a aussi ses dtracteurs.
Vous savez maintenant ce qui se fait ailleurs, et vous tes libre d'aller y jeter un oeil si vous voulez apprendre un autre framework
en plus de jQuery. Nous vous conseillons de visiter le site MicroJS il vous fournira une liste exhaustive des frameworks
JavaScript existants, classs par catgories.
Ce tutoriel est maintenant fini ! Il est nanmoins sujet des mises jour, et de nouveaux chapitres peuvent venir l'allonger
n'importe quand. Nous esprons qu'il vous a permis de dbuter en jQuery dans les meilleures conditions.
N'hsitez pas nous laisser un petit commentaire pour nous faire part de vos impressions sur ce tutoriel, nous les lirons avec
attention !
Ce tutoriel est sous licence Creative Commons BY-NC-SA 2.0.

Un Site Web Dynamique Avec Jquery

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Un Site Web Dynamique Avec Jquery

Transféré par

Droits d'auteur :

Formats disponibles

Un site web

Vous aimerez peut-être aussi