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
2/150
Sommaire
Sommaire ........................................................................................................................................... 2 Lire aussi ............................................................................................................................................ 4 Un site web dynamique avec jQuery ! ................................................................................................ 6 Partie 1 : Introduction jQuery ........................................................................................................... 7
jQuery : l'histoire d'un framework ! .................................................................................................................................... 8
Mais... c'est quoi jQuery ? ........................................................................................................................................................................................... 8 jQuery, un framework JavaScript ................................................................................................................................................................................ 8 JavaScript ou... jQuery ? ............................................................................................................................................................................................. 8 jQuery, un framework ou une librairie ? ....................................................................................................................................................................... 9 A quoi va nous servir jQuery ? .................................................................................................................................................................................. 10 Les points forts de jQuery ......................................................................................................................................................................................... 10 L'histoire du framework .............................................................................................................................................................................................. 11 Des sites qui utilisent jQuery ..................................................................................................................................................................................... 11
De quels outils a-t-on besoin ? ........................................................................................................................................ 11

Le choix du navigateur web ....................................................................................................................................................................................... 12 Un incontournable : Firebug pour Firefox ! ................................................................................................................................................................ 13 Ajoutez Firebug votre navigateur Firefox ! ............................................................................................................................................................. 13 Utiliser la bote outils Firebug ! ............................................................................................................................................................................... 13 Un diteur de texte efficace ....................................................................................................................................................................................... 14 Un diteur de texte performant et efficace ................................................................................................................................................................ 15
Rappels gnraux sur JavaScript ................................................................................................................................... 18

O et quand utiliser JavaScript ? .............................................................................................................................................................................. O placer son code JavaScript ? .............................................................................................................................................................................. Quand et comment l'utiliser ? .................................................................................................................................................................................... Variables et fonctions ................................................................................................................................................................................................ De la dclaration des variables ................................................................................................................................................................................. Fonctions et arguments ............................................................................................................................................................................................. 18 18 18 18 19 19
Partie 2 : Les bases du framework .................................................................................................... 20

Vos premiers pas avec jQuery ! ...................................................................................................................................... 20
Inclure jQuery dans vos pages .................................................................................................................................................................................. Deux mthodes pour inclure jQuery dans vos pages web ........................................................................................................................................ La fonction de base : jQuery() ................................................................................................................................................................................... Une fonction gnrique : jQuery() ou $() ................................................................................................................................................................... viter le conflit ........................................................................................................................................................................................................... Le principe de fonctionnement .................................................................................................................................................................................. 20 20 22 22 24 25
Les slecteurs ................................................................................................................................................................. 27

Les slecteurs de CSS .............................................................................................................................................................................................. 27 Les slecteurs les plus utiliss .................................................................................................................................................................................. 27 Frres et parents ....................................................................................................................................................................................................... 27 Une slection plus pousse ...................................................................................................................................................................................... 28 La place d'un lment ............................................................................................................................................................................................... 28 Slection par attributs ............................................................................................................................................................................................... 29 Le slecteur :not() ..................................................................................................................................................................................................... 29 Le cas des formulaires .............................................................................................................................................................................................. 30 Le type des lments ................................................................................................................................................................................................ 30 Le slecteur $(this) .................................................................................................................................................................................................... 30 Performance des slecteurs ..................................................................................................................................................................................... 31 Les slecteurs les plus rapides ................................................................................................................................................................................. 31 courter les chanes .................................................................................................................................................................................................. 31
jQuery et les vnements ............................................................................................................................................... 32

Un vnement, des vnements... ........................................................................................................................................................................... C'est quoi un vnement ? ........................................................................................................................................................................................ Quelques vnements incontournables .................................................................................................................................................................... Dclenchement d'vnements .................................................................................................................................................................................. Le dclenchement virtuel .......................................................................................................................................................................................... Annuler le comportement d'un lment par dfaut ................................................................................................................................................... Les gestionnaires d'vnements ............................................................................................................................................................................... Rappels ..................................................................................................................................................................................................................... L'coute en jQuery .................................................................................................................................................................................................... La dlgation d'vnements ..................................................................................................................................................................................... Les espaces de noms ............................................................................................................................................................................................... La suppression en jQuery ......................................................................................................................................................................................... Une mthode puissante : css() ................................................................................................................................................................................. Rcuprer la valeur d'une proprit .......................................................................................................................................................................... Dfinition de proprits CSS ..................................................................................................................................................................................... Positionner des lments .......................................................................................................................................................................................... Modifier la position d'un lment ............................................................................................................................................................................... Grer les dimensions ................................................................................................................................................................................................ Explications et pr-requis .......................................................................................................................................................................................... Objectif concret ......................................................................................................................................................................................................... Mthodes requises .................................................................................................................................................................................................... Correction .................................................................................................................................................................................................................. 33 33 34 34 35 35 35 35 36 37 37 38 40 40 40 40 41 41 43 43 43 44
Manipuler le code CSS avec jQuery ............................................................................................................................... 39
TP : le formulaire interactif .............................................................................................................................................. 43
Sommaire
3/150
Explications du code jQuery ...................................................................................................................................................................................... 44 Amliorations ............................................................................................................................................................................................................ 48
Partie 3 : Manipulation du DOM et animations .................................................................................. 48

Des effets sur votre site avec jQuery ! ............................................................................................................................ 49
Animez vos lments ................................................................................................................................................................................................ 49 Des animations personnalises ................................................................................................................................................................................ 49 Deux arguments supplmentaires : step et queue .................................................................................................................................................... 50 Dfinition directe d'attributs ....................................................................................................................................................................................... 51 Astuces et cas spciaux ............................................................................................................................................................................................ 52 Les effets natifs ......................................................................................................................................................................................................... 53 Le retour des trois tats ............................................................................................................................................................................................. 53 Des mthodes plus esthtiques ................................................................................................................................................................................ 54 Reprenez le contrle des effets ................................................................................................................................................................................. 54 Le concept de file d'attente ....................................................................................................................................................................................... 54 Arrter les animations ............................................................................................................................................................................................... 56
Manier les attributs .......................................................................................................................................................... 57

Gestion gnrale des attributs .................................................................................................................................................................................. 58 Bref rappel sur les attributs ....................................................................................................................................................................................... 58 Rcuprer des valeurs .............................................................................................................................................................................................. 58 (Re)dfinir un attribut ................................................................................................................................................................................................. 58 Grer les classes proprement ................................................................................................................................................................................... 59 Ajouter une classe ..................................................................................................................................................................................................... 59 Supprimer une classe ............................................................................................................................................................................................... 60 Prsence d'une classe .............................................................................................................................................................................................. 60 Switcher une classe .................................................................................................................................................................................................. 60
Parcourir les lments du DOM ...................................................................................................................................... 61

Naviguer dans le DOM .............................................................................................................................................................................................. 61 Rappel sur le Document Object Model ...................................................................................................................................................................... 61 Positionnement des lments ................................................................................................................................................................................... 61 La descendance ........................................................................................................................................................................................................ 61 Filtrer et boucler les lments ................................................................................................................................................................................... 63 Filtrer les lments .................................................................................................................................................................................................... 63 Boucler les lments ................................................................................................................................................................................................. 64
Manipuler le code HTML avec jQuery ............................................................................................................................. 65

Insertion de contenu .................................................................................................................................................................................................. Le contenu textuel ..................................................................................................................................................................................................... Le contenu HTML ...................................................................................................................................................................................................... Le contenu des lments de formulaire .................................................................................................................................................................... Manipulation des lments HTML ............................................................................................................................................................................. Cloner des lments ................................................................................................................................................................................................. Vider et/ou supprimer un lment ............................................................................................................................................................................. Remplacer les lments ............................................................................................................................................................................................ Envelopper/dballer des lments ............................................................................................................................................................................ Crer des lments la vole .................................................................................................................................................................................. Crer des lments, une histoire de balises ............................................................................................................................................................. Passer des attributs proprement ............................................................................................................................................................................... Explications et pr-requis .......................................................................................................................................................................................... Objectif concret ......................................................................................................................................................................................................... Mthodes requises .................................................................................................................................................................................................... Correction .................................................................................................................................................................................................................. Explications du code jQuery ...................................................................................................................................................................................... Amliorations ............................................................................................................................................................................................................ 66 66 66 69 69 69 70 70 71 72 72 72 74 74 74 75 76 79
TP : le carrousel .............................................................................................................................................................. 73
Partie 4 : L'AJAX avec jQuery ........................................................................................................... 80

AJAX : les requtes HTTP par l'objet XmlHttpRequest .................................................................................................. 80
AJAX : notre problmatique ...................................................................................................................................................................................... 80 AJAX... c'est simple ! ................................................................................................................................................................................................. 80 Et le rle de jQuery dans tout a ............................................................................................................................................................................... 81 Rappel sur les requtes HTTP .................................................................................................................................................................................. 81 Le fonctionnement du web ........................................................................................................................................................................................ 81 Plusieurs types de requtes ...................................................................................................................................................................................... 82 Un langage ct serveur. .......................................................................................................................................................................................... 83 AJAX par JavaScript ................................................................................................................................................................................................. 83 Envoyer une requte HTTP : XmlHttpRequest la rescousse ! ............................................................................................................................... 83 Instancier XHR : un calvaire ...................................................................................................................................................................................... 83 XmlHttpRequest avec jQuery .................................................................................................................................................................................... 84 Instancier XmlHttpRequest avec jQuery ................................................................................................................................................................... 84
Le fonctionnement de $.ajax() ......................................................................................................................................... 85

$.ajax() et ses paramtres ......................................................................................................................................................................................... 86 Les paramtres principaux de $.ajax() ...................................................................................................................................................................... 86 Les paramtres success, error et complete ! ............................................................................................................................................................ 88 Traiter les retours de la fonction ................................................................................................................................................................................ 88 Les raccourcis $.get() et $.post() ............................................................................................................................................................................... 90 Allez plus vite avec $.get() et $.post() ....................................................................................................................................................................... 90 Srialisez vos formulaires ! ....................................................................................................................................................................................... 92 La srialisation .......................................................................................................................................................................................................... 92
Cas concret : un formulaire de connexion avec AJAX .................................................................................................... 93

Prparons le terrain ................................................................................................................................................................................................... Le formulaire de connexion ....................................................................................................................................................................................... Ct client : du HTML et un appel AJAX ................................................................................................................................................................... Un formulaire HTML et un appel AJAX. .................................................................................................................................................................... 94 94 94 94
Sommaire
4/150
Ct serveur : un script PHP de connexion .............................................................................................................................................................. 95 Agir ct serveur ....................................................................................................................................................................................................... 95 De retour ct client .................................................................................................................................................................................................. 97
Les vnements AJAX .................................................................................................................................................... 98

Les requtes AJAX sur coute .................................................................................................................................................................................. 99 Des vnements, ni plus, ni moins ........................................................................................................................................................................... 99 Cas d'utilisation des vnements : un loader .......................................................................................................................................................... 100 Un cas concret : chargement de commentaires ...................................................................................................................................................... 100
La mthode load() ! ....................................................................................................................................................... 100

A quoi load() sert-elle ? ........................................................................................................................................................................................... La mthode load() ................................................................................................................................................................................................... Exemple d'utilisation de load() ................................................................................................................................................................................ Charger un contenu distant ..................................................................................................................................................................................... Aller plus loin avec load() ........................................................................................................................................................................................ Envoyer des paramtres avec load() ...................................................................................................................................................................... Explications et pr-requis ........................................................................................................................................................................................ Le systme de tchat ................................................................................................................................................................................................ Les technologies utiliser ....................................................................................................................................................................................... Commencez ! .......................................................................................................................................................................................................... Correction ................................................................................................................................................................................................................ Les fichiers ncessaires .......................................................................................................................................................................................... Rendons tout cela plus dynamique ......................................................................................................................................................................... Rcuprer les messages ........................................................................................................................................................................................ Amliorations .......................................................................................................................................................................................................... Ides d'amlioration ................................................................................................................................................................................................ 101 101 101 101 101 102 103 103 103 103 103 103 105 106 108 108
TP : le tchat en AJAX .................................................................................................................................................... 102
Partie 5 : Les projets autour de jQuery ........................................................................................... 109

La documentation de jQuery ......................................................................................................................................... 110
Le site officiel : jQuery.com ...................................................................................................................................................................................... 110 Explorer la documentation ....................................................................................................................................................................................... 110 S'orienter correctement dans la doc ........................................................................................................................................................................ 110 Lire la fiche d'une mthode ...................................................................................................................................................................................... 111 La forme de la mthode ........................................................................................................................................................................................... 111 Description, retour, explications et exemples .......................................................................................................................................................... 111
Les interfaces utilisateur : jQuery UI ............................................................................................................................. 112

Les interfaces utilisateurs ........................................................................................................................................................................................ 113 Que sont les interfaces utilisateurs ? ....................................................................................................................................................................... 113 Comment cela fonctionne-t-il ? ................................................................................................................................................................................ 113 Tlchargement et mise en place ........................................................................................................................................................................... 113 Les interactions et les widgets ................................................................................................................................................................................. 115 Les interactions ....................................................................................................................................................................................................... 115 Les widgets .............................................................................................................................................................................................................. 115
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 ................................................................................................................................................................................. 117 Les bases de l'interface ........................................................................................................................................................................................... 119 Initialiser des pages ................................................................................................................................................................................................. 119 Mise en place d'un thme ....................................................................................................................................................................................... 120 lments de mise en page ...................................................................................................................................................................................... 120 Les vnements et les mthodes ........................................................................................................................................................................... 121 Les vnements jQuery Mobile ............................................................................................................................................................................... 121 Les mthodes jQuery Mobile ................................................................................................................................................................................... 121
Programmez vos jeux avec gameQuery ....................................................................................................................... 123

Du fonctionnement de la 2D .................................................................................................................................................................................... La 2D, une histoire d'animation ............................................................................................................................................................................... La 2D avec gameQuery .......................................................................................................................................................................................... Mise en place d'un playground ................................................................................................................................................................................ Un arrire-plan en parallaxe .................................................................................................................................................................................... Instancier les sprites d'arrire-plan ......................................................................................................................................................................... Animons le tout ! ..................................................................................................................................................................................................... Cration de personnage par spritesheet ................................................................................................................................................................. Instance du mouvement anim ............................................................................................................................................................................... Lancer l'animation ................................................................................................................................................................................................... Utiliser le modle objet ............................................................................................................................................................................................ Rappel sur les objets JavaScript ............................................................................................................................................................................. Dfinir les classes ................................................................................................................................................................................................... Gestion des contrles et des collisions ................................................................................................................................................................... Gestion des contrles ............................................................................................................................................................................................. Gestion des collisions ............................................................................................................................................................................................. Grez vos cookies en jQuery .................................................................................................................................................................................. Stockez vos donnes avec jStorage ....................................................................................................................................................................... Utiliser jStorage ....................................................................................................................................................................................................... Canvas avec jQuery ................................................................................................................................................................................................ jCanvas, quand jQuery rencontre Canvas .............................................................................................................................................................. 123 123 123 124 125 125 126 127 128 129 129 129 130 131 131 132 133 133 133 135 135
D'autres plugins utiles ................................................................................................................................................... 133
Partie 6 : Aller plus loin ................................................................................................................... 136

tendre le framework .................................................................................................................................................... 136
La fonction d'extension ............................................................................................................................................................................................ 136
Lire aussi
5/150
136 136 136 137 137 138 138 138 139
Acclration d'une animation .................................................................................................................................................................................. Utilisation des diffrentes volutions du plugin ....................................................................................................................................................... Crer une mthode d'volution ............................................................................................................................................................................... Crez vos slecteurs ............................................................................................................................................................................................... Utilisation de filter() avec fonction anonyme ........................................................................................................................................................... tendre les slecteurs ............................................................................................................................................................................................. Ralisez vos propres mthodes .............................................................................................................................................................................. tendre les mthodes de jQuery ............................................................................................................................................................................. Dfinir des paramtres dans le plugin .....................................................................................................................................................................
Mmento des principales fonctions ............................................................................................................................... 141

Mthodes de base ................................................................................................................................................................................................... 142 Les slecteurs ......................................................................................................................................................................................................... 142 Les vnements ...................................................................................................................................................................................................... 143 Manipulation du CSS ............................................................................................................................................................................................... 144 Les effets ................................................................................................................................................................................................................. 145 Les attributs ............................................................................................................................................................................................................. 145 Mthodes de parcours ............................................................................................................................................................................................. 145 Manipulation du HTML ............................................................................................................................................................................................ 145 Mthodes AJAX ....................................................................................................................................................................................................... 146
D'autres frameworks JavaScript ................................................................................................................................... 147

Le principal concurrent : MooTools ! ........................................................................................................................................................................ 147 MooTools, un concurrent de jQuery ........................................................................................................................................................................ 147 Des ressemblances dans le code ........................................................................................................................................................................... 147 Les divergences ...................................................................................................................................................................................................... 147 Les autres frameworks JavaScript .......................................................................................................................................................................... 148 D'autres frameworks JavaScript .............................................................................................................................................................................. 148
Lire aussi
6/150

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. V ous 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.
7/150
Partie 1 : Introduction jQuery
8/150

Nous sommes heureux de voir que nous avons pu vous convaincre d'aborder avec nous l'apprentissage du framework jQuery. V ous allez voir, vous ne le regretterez pas. Seulement... tes-vous sr de savoir ce qu'est un framework ? Ou encore mieux, tesvous 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. V ous 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. V ous 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

V ous 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

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. Image utilisateur
9/150
Cela parat flou, et nous vous comprenons. V ous 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. V ous 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. V ous 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.

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.
10/150
V ous voulez un peu savoir ce que ce framework a dans le ventre ? Trs bien ! V oyons 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. Image utilisateur
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. V ous verrez que la masse de fonctions que jQuery vous proposera afin de crer des effets sur vos pages web sera tout simplement impressionnante. V ous verrez aussi que la densit de la documentation en tmoignera. Image utilisateur
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.
11/150
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. V ous 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. V ous 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. V oici 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 .
12/150
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. V ous 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. V oici une liste vous prsentant les diffrents navigateurs web, honteusement reprise du tutoriel de rfrencement web du Site du Zro. Icne Nom OS Tlchargement Dscription 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 Un navigateur web gratuit et extrmement performant sign par la Mozilla Foundation. Je ne saurais que vous recommander de l'utiliser sans modration.
Internet Explorer
Fourni par dfaut avec Windows.
Tlchargement
Google Chrome
Un autre navigateur web sign cette fois-ci par Google. Le programme est bas sur un projet open-source baptis Chromium, mais connat quelques Tlchargement controverses vis vis du respect des informations personnelles de ses utilisateurs. Il est nanmoins recommand de l'utiliser tant il est performant. 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. V ous pouvez l'utiliser Tlchargement si vous tes inquiet au sujet des questions du respect des informations personnelles. Opera est un navigateur web de trs grande qualit propos gratuitement par Tlchargement l'entreprise Opera Software. Il est moins utilis que les 4 prcdents mais demeure un excellent produit. 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.
Chromium
Opera
Safari
Tlchargement
Sachez que jQuery est totalement compatible avec tous ces navigateurs. V ous 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 ?
13/150
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 !
14/150
Firebug ouvert dans le navigateur Firefox ! V ous 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.
15/150
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
16/150
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. V ous 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. V ous 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.
17/150
18/150
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.
19/150
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 celleci 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. V ous 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 !
20/150
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. V oyons ici comment l'on va procder.
Deux mthodes pour inclure jQuery dans vos pages web

V ous 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. V ous 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'estce 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.
21/150
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> <meta charset="utf-8" /> <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> <meta charset="utf-8" /> <title>Test jQuery</title> </head> <body> <p>On va bosser avec jQuery, c'est super !</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </body> </html>
22/150
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 ? V oyons 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> <meta charset="utf-8" /> <title>Test jQuery</title> </head> <body> <p>On va bosser avec jQuery, c'est super !</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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 jQuery(document).ready(function(){ // Du code en jQuery va pouvoir tre tap ici ! });
23/150
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 jQuery(document).ready(function(){ // notre code ici });
La suite de ce code est vraiment trs simple. V ous 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 ?
V ous 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. V ous pouvez galement utiliser la mthode hard en utilisant carrment un alert(). V ous pouvez vous y prendre comme ceci : Code : JavaScript /* * Avec un console.log */ jQuery(document).ready(function(){ console.log("jQuery est prt !"); }); /* * Avec un alert() */ jQuery(document).ready(function(){

alert("jQuery est prt !"); });
24/150
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()

V ous 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. V ous feriez mieux de vous aussi prendre l'habitude. V ous 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 });
25/150
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 */
26/150
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. V ous devez commencer comprendre comment fonctionne concrtement le framework ! allons monter le niveau d'un cran, et voir les slecteurs dans le chapitre suivant.
C'est une trs bonne chose, car nous
27/150
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 . V ous 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. V ous 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 ! */
28/150
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. V ous 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 !
29/150
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');
30/150
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 text (Texte) Code input:text
password (Mot de passe) input:password file (Fichier) input:file
checkbox (Case cocher) input:checkbox radio (Bouton radio) button (Bouton normal) submit (Bouton d'envoi) input:radio input:button 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. V ous 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.
31/150
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. V oyons 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 ! V ous 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 ! V ous 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 !
32/150
33/150
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...

V oyons 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. V ous 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 ! V ous vous en tes peut-tre rendu compte, mais dans les chapitres prcdents, nous avons dj utilis un vnement, le ready() ! V oyons 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.
34/150
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 ! V ous 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 Clic Double-clic Passage de la souris Rentrer dans un lment Quitter un lment Presser un bouton de la souris Fonction click() dblclick() hover() mouseenter() mouseleave() 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

}); }
35/150
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 Focalisation Fonction focus()
Slection (p.e. dans une liste) select() Changement de valeur Envoi du formulaire change() 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.
36/150
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. 2. 3. 4. on cible un bouton ; on initialise un gestionnaire d'vnement ; on coute le clic de l'utilisateur ; 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 !');
37/150
});
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 !
38/150
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 V ous 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 ?
39/150
40/150
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

V ous 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)
41/150
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.
42/150
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 !
43/150
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. V ous 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. V ous 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>
44/150
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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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 $(document).ready(function(){ // notre code ici });
45/150
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 $(document).ready(function(){ 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 $(this).css({ // on rend le champ rouge

borderColor : 'red', color : 'red' });
46/150
} else{ $(this).css({ // si tout est bon, on le rend vert borderColor : 'green', 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 borderColor : 'red', 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

$(document).ready(function(){ 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 $(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' }); } }); $confirmation.keyup(function(){ if($(this).val() != $mdp.val()){ // si la confirmation est diffrente du mot de passe $(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' }); } }); $envoi.click(function(e){ e.preventDefault(); // on annule la fonction par dfaut du bouton d'envoi champs : // puis on lance la fonction de vrification sur tous les verifier($pseudo); verifier($mdp); verifier($confirmation); verifier($mail);
47/150
});
$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 borderColor : 'red', color : 'red' }); } }

});
48/150
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. V ous 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
49/150

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 !

V ous 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

$('p').animate({ width : '150px' }, 'fast'); // premier exemple avec la valeur fast (200ms) $('p').animate({ width : '150px' }, 1000); // second exemple avec 1000ms (= 1s)
50/150
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

V ous 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(){ alert('Animation termine !'); });

// ce code est gal celui-ci : $('p').animate({ width : '150px' }, { duration : 1000, easing : 'linear', complete : function(){ alert('Animation termine !'); } });
51/150
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'

}, {
52/150
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

V ous 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 });
53/150
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. V ous 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()
54/150
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
V ous 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 ! V ous allez voir dans cette partie tout ce qui traite la manipulation des animations.
Le concept de file d'attente

V ous 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
55/150
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. b. c. d. e. f. g. h. la taille de la police augmente de 100 pixels, une nouvelle fonction est ajoute la file, une alerte affiche Bonjour ! , la mthode dequeue() permet de lancer l'animation suivante ; la taille de la police baisse de 50 pixels, une nouvelle fonction est ajoute la file, une alerte affiche Au revoir ! , la mthode dequeue() permet de ne pas entraver les futures animations sur l'lment. On utilisera le slecteur $(this) pour lancer la mthode dequeue().
56/150
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.
57/150
58/150
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
59/150
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; });
V ous 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
60/150
V ous 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

V ous 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
V ous 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. V ous 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 !
61/150
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 ! V ous 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
62/150
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>...
63/150
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

V ous 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)
64/150
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 !
65/150
66/150
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 ! V ous 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. V ous 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
67/150
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 :

Code : JavaScript $('p').append(' <strong>Texte insr aprs le contenu actuel.</strong>'); $('p').append( $('h1') );
68/150
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
1. append() : objet.append(contenu) 2. appendTo() : contenu.appendTo(objet)
$('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>
69/150
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');
70/150
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
71/150
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. V ous 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
V ous 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> </p> <strong>Le ciel est bleu.</strong>
72/150
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
73/150
V ous 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. V ous 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. V ous 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 !
74/150
TP : le carrousel
Bien ! V ous 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. V otre 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
V ous 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
V ous 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... V ous allez devoir tout mettre profit, et c'est exactement ce que nous voulons. V ous 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
75/150
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; }
V ous 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
V otre 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 <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>
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 <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>  <script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
76/150
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 $(document).ready(function(){ // 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

$carrousel.append('<div class="controls"> <span class="prev">Precedent</span> <span class="next">Suivant</span> </div>');
77/150
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 $img.css('display', 'none'); // on cache les images $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 $('.next').click(function(){ // image suivante i++; // on incrmente le compteur if( i <= indexImg ){ $img.css('display', 'none'); // on cache les images $currentImg = $img.eq(i); // on dfinit la nouvelle image $currentImg.css('display', 'block'); // puis on l'affiche } else{ i = indexImg; } }); $('.prev').click(function(){ // image prcdente i--; // on dcrmente le compteur, puis on ralise la mme chose que pour la fonction "suivante" if( i >= 0 ){ $img.css('display', 'none'); $currentImg = $img.eq(i); $currentImg.css('display', 'block'); } 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 index if(i < indexImg){ // si le compteur est infrieur au dernier
78/150
i++; // on l'incrmente } else{ // sinon, on le remet 0 (premire image) i = 0; } $img.css('display', 'none'); $currentImg = $img.eq(i); $currentImg.css('display', 'block'); 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 $(document).ready(function(){ 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) $img.css('display', 'none'); // on cache les images $currentImg.css('display', 'block'); // on affiche seulement l'image courante $carrousel.append('<div class="controls"> <span class="prev">Precedent</span> <span class="next">Suivant</span> </div>'); $('.next').click(function(){ // image suivante i++; // on incrmente le compteur if( i <= indexImg ){ $img.css('display', 'none'); // on cache les images $currentImg = $img.eq(i); // on dfinit la nouvelle image $currentImg.css('display', 'block'); // puis on l'affiche } else{ i = indexImg; } }); $('.prev').click(function(){ // image prcdente i--; // on dcrmente le compteur, puis on ralise la mme chose que pour la fonction "suivante"

if( i >= 0 ){ $img.css('display', 'none'); $currentImg = $img.eq(i); $currentImg.css('display', 'block'); } else{ i = 0; } }); function slideImg(){ setTimeout(function(){ // on utilise une fonction anonyme index if(i < indexImg){ // si le compteur est infrieur au dernier
79/150
i++; // on l'incrmente } else{ // sinon, on le remet 0 (premire image) i = 0; } $img.css('display', 'none'); $currentImg = $img.eq(i); $currentImg.css('display', 'block'); 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 ? V oici 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 ! V oil 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 !
80/150
Partie 4 : L'AJAX avec jQuery

V ous tes sur les bons rails pour devenir un vrai expert jQuery ! V ous 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 . V ous 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

V ous 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. V oyons 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. V ous 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. V ous commencez comprendre ? AJAX repose sur ce fondement mme, la communication asynchrone d'un langage ct client, avec un langage ct serveur. V ous devinez la suite, pour mettre en place un appel AJAX sur son site, jQuery ne va plus nous suffir. V oil 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.
81/150
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. V ous 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

V ous 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. V otre 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 ?
82/150
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 . V oil 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 : "V oil la page que tu m'as demand avec les fichiers JavaScript : c'est ma rponse HTTP, plus !" V oil comment a tourne. V ous 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 . V ous 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.
83/150
Un langage ct serveur.
Transformer votre ordinateur en serveur
V otre 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. V ous 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. V oici 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. V ous 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. V oici 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 ?
84/150
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... V ous 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. V ous 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 $(document).ready(function(){ /* * 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 ! V oyons voir comment on va pouvoir s'y prendre, toujours l'aide de jQuery et de cette fameuse fonction $.ajax().
85/150
86/150
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 $("#more_com").click(function(){ $.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 $("#more_com").click(function(){ $.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. V ous 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 $("#more_com").click(function(){ $.ajax({ url : 'more_com.php', // La ressource cible type : 'GET' // Le type de la requte HTTP. data : 'utilisateur=' + nom_user; }); });
87/150
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({ url : 'more_com.php', // La ressource cible type : 'GET', // Le type de la requte HTTP /** * Le paramtre data n'est plus renseign, nous ne faisons plus passer de variable */ HTML. }); }); dataType : 'html' // Le type de donnes recevoir, ici, du
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
88/150
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 !
V otre 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 $("#more_com").click(function(){ $.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 $("#more_com").click(function(){ $.ajax({ url : 'more_com.php', type : 'GET', dataType : 'html', success : function(code_html, statut){ // success est

toujours en place, bien sr ! }, error : function(resultat, statut, erreur){ } }); });
89/150
La fonction excute par error prend en charges trois arguments : le rsultat, le statut, et l'erreur. V ous 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

V ous 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. V ous commencez tre habitu, n'est-ce pas ? Code : JavaScript $("#more_com").click(function(){ $.ajax({ url : 'more_com.php', type : 'GET', dataType : 'html', success : function(code_html, statut){ }, error : function(resultat, statut, erreur){ }, 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 $("#more_com").click(function(){ $.ajax({ url : 'more_com.php', 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 ! },

error : function(resultat, statut, erreur){ }, complete : function(resultat, statut){ } }); });
90/150
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. }
91/150
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 !
92/150
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
V ous 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
V oici 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="text" name="valeur2" /> <input type="text" name="valeur3" /> <input type="submit" name="submit" /> </form>
Le but est d'obtenir data : 'valeur1=' + valeur1 + '&valeur2=' + valeur2 + '&valeur3=' + valeur3 afin de l'envoyer en AJAX. V oil 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, //... }); });
93/150
Et voil ! V otre 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. V ous 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.
94/150
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> <meta charset="utf-8" /> <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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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> $(document).ready(function(){ $("#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>
95/150
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. V oici 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']) ){

} ?>
96/150
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"; if( isset($_POST['username']) && isset($_POST['password']) ){ } ?>
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( isset($_POST['username']) && isset($_POST['password']) ){ 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 !
97/150
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(). V ous 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> $(document).ready(function(){ $("#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. avec succs !</p>"); } else{ ici "failed") connexion...</p>"); } }, ); }); }); 'text' $("#resultat").html("<p>Vous avez t connect
// Le membre n'a pas t connect. (data vaut $("#resultat").html("<p>Erreur lors de la

</script> </body> </html>
98/150
C'est tout bon, ce code marche, et vous pouvez le tester ! V ous 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.
99/150
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

V ous 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

V ous 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. V oyons maintenant un cas

d'utilisation concret, car nous pensons que l'utilit de ces outils reste encore a tre dmontre.
100/150
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 arrireplan display : "none" // Nous cachons l'lment }); $("#more_com").click(function(){ $.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. V oil 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.
101/150
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 ? La mthode load()

AJAX plus simplement
V oyons ici quoi la mthode load() de jQuery va nous servir.
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. V oil 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.
102/150
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() });
V ous 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. V ous 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 !
103/150
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>
104/150
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 ! V ous 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 !"; } } ?>
105/150
V oil 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. V ous 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 : Code : JavaScript - main.js $('#envoi').click(function(e){ e.preventDefault(); // on empche le bouton d'envoyer le formulaire 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 }); } });

Enfin, pour un maximum de dynamisme, nous allons ajouter le message directement dans la zone prvue cet effet : Code : JavaScript - main.js $('#envoi').click(function(e){ e.preventDefault(); // on empche le bouton d'envoyer le formulaire 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 }); $('#messages').append("<p>" + pseudo + " dit : " + message + "</p>"); // on ajoute le message dans la zone prvue } });
106/150
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 // on se connecte notre base de donnes 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 while($donnees = $requete->fetch()){
'');
LIMIT 0,10');

// 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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="main.js"></script> </body> </html>
107/150
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. Code : JavaScript - main.js 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. Code : JavaScript - main.js 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();
108/150
Et voil, il ne restait plus qu' aller chercher les messages en base de donnes : Code : PHP - charger.php <?php // ... // on se connecte notre base de donnes 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. V ous pouvez galement dcider de construire des systmes totalement diffrents, tant que cela vous fait pratiquer, croyez-nous, c'est bon prendre. V ous 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 !
109/150
Partie 5 : Les projets autour de jQuery
110/150

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. V ous 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. V ous 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. V ous pouvez aussi cliquer ici.
S'orienter correctement dans la doc

V ous 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

exemple, la mthode addClass() dans les sections CSS et Class Attribute.
111/150
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(). V ous 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 [ ].
112/150
Enfin, vous trouverez les explications dtailles, puis quelques exemples susceptibles de vous clairer, avec codes de test l'appui. V ous 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 !
113/150
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. V oil 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. V ous 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. V ous 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 !
114/150
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. V oyons 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. V ous 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. V ous 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/developmentbundle/themes/base/jquery.ui.all.css" /> </head> <body>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jqueryui.min.js"></script> </body> </html>
115/150
V ous 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

V ous 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(). V ous 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 ! V oil 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 ! V ous pouvez ds prsent passer au chapitre suivant, qui prsentera le second plugin officiel : jQuery Mobile .
116/150
117/150
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 ... V ous pouvez retrouver la liste complte des systmes d'exploitation et des plateformes supportes par jQuery Mobile sur cette page. V ous 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.
118/150
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-fichiermobile.html'); // si c'est le cas, on redirige die; // puis on arrte le chargement de la page actuelle } ?>
V ous 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, initialscale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile1.0.1.min.css" /> <script src="http://code.jquery.com/jquery1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile1.0.1.min.js"></script> </head> <body> </body> </html>
119/150
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 data-role="page">  </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="page"> <div data-role="header">  </div> <div data-role="content">  </div> <div data-role="footer">  </div> </div>
120/150
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"> <div data-role="content"> <a href="#page2">Aller la page 2 -></a> </div> </div> <div data-role="page" id="page2"> <div data-role="content"> <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 data-role="content">  </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 . V ous 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>
121/150
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 ! V oici la liste des vnements relatifs au touch : Nom tap taphold swipe swipeleft swiperight un touch sur la page un touch maintenu sur la page un touch maintenu avec mouvement du doigt un touch maintenu avec mouvement vers la gauche un touch maintenu avec mouvement vers la droite Action
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 ). V ous 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. V ous 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. V ous 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. V ous 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. V oici 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 useragent

if(ua.indexOf("android") > -1){ // si on trouve un user-agent Android $.mobile.maxTransitionWidth = 1; // alors on dsactive les transitions }
122/150
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. V ous avez juste indiquer quelle page doit tre prcharge : Code : JavaScript $.mobile.loadPage('next.html');
V ous pouvez galement envoyer une requte AJAX au moyen d'un objet en second argument, comme avec changePage(). V ous 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 !
123/150
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).
Le clbre Super Marios Bros.
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 :
124/150
V ous 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 });
125/150
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 var image2 = new $.gameQuery.Animation({ imageURL : "background2.png" }); // troisime instance var image3 = new $.gameQuery.Animation({ imageURL : "background3.png" });
126/150
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 $("#image2").css("left", left); left = parseInt( $("#image3").css("left") ) - 5; // l'image de devant se dplace rapidement, on la dplace de 5 pixels chaque intervalle $("#image3").css("left", left); }, 30); // enfin, on dfinit l'intervalle de temps 30ms
127/150
parseInt() permet de s'assurer que la valeur est de type int (nombre entier).
V ous 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; $("#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 if(left < 0 - w) left = w; $("#image2").css("left", left); left = parseInt( $("#image3").css("left") ) - 5; // l'image de devant se dplace rapidement, on la dplace de 5 pixels chaque intervalle if(left < 0 - w) left = w; $("#image3").css("left", left); }, 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 ! V ous 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.
128/150
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 });
V ous savez maintenant instancier une animation par spritesheet !
129/150
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. V ous 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();
V ous 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
130/150
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. V ous 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();
131/150
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.
132/150
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 } V ous 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.
133/150
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
V ous 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.
134/150
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. V ous 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.
135/150
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. V oyons 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 ! V ous 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. V ous 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. V oici 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.
136/150
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. V ous 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. V ous 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. V ous 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' });
V ous 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; } });
137/150
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'estce 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. V ous 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

redondant et peu ergonomique, ce qui est l'antithse du principe de jQuery. Il vous faudra alors dfinir un nouveau slecteur.
138/150
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

V ous 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
V ous 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 !
139/150
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 ? V otre 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 };
V ous 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 jQuery.fn.maMethode = function(argument){ // fonctionnement de la mthode ici }; 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 jQuery.fn.maMethode = function(argument){ // fonctionnement de la mthode ici this.css('color', 'red'); }; return this; // on ne casse pas la chane !
Dfinir des paramtres dans le plugin

V ous 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 ? V otre 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 jQuery.fn.maMethode = function(argument){ 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 }; return this; // on ne casse pas la chane !
140/150
$('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 jQuery.fn.maMethode = function(argument){ 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 } }); }; return this; // on ne casse pas la chane !
$('element').maMethode({ couleur : 'red' }); // on peut alors appeler la nouvelle mthode avec un nouveau paramtre sur un lment !
V ous 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 ! V ous 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.
141/150
142/150
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 Code : HTML jQuery <script src="http://code.jquery.com/jquery.min.js"></script> Lien
Code : HTML Google <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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> <meta charset="utf-8" /> <title>Titre</title> </head> <body>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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 $('*'); $('element'); Explication Cible tous les lments (inclus <html>, <head> et <body>). Cible tous les lments tant de type correspondant.

$('#element'); $('.element'); $('parent enfant'); Cible l'lment ayant l'identifiant donn (obligatoirement unique). Cible tous les lments ayant la classe donne. Cibles tous les enfants directs ou indirects de l'lment parent.
143/150
$('element, element2'); Cible d'abord les premiers lment trouvs, puis les seconds, etc. $('parent > enfant'); $('frere + element'); $('frere ~ element'); Cible tous les enfants directs de l'lment parent. Cible tous les lments prcds directement d'un frre. Cible tous les lments prcds directement ou indirectement d'un frre.
Slecteur par attribut $('element[attribut]'); $('element[attribut="valeur"]'); $('element[attribut!="valeur"]');
Explication Cible tous les lments possdant l'attribut donn. Cible tous les lments possdant l'attribut donn et dont la valeur est gale celle spcifie. Cible tous les lments possdant l'attribut donn et dont la valeur est diffrente de celle spcifie. Cible tous les lments possdant l'attribut donn et dont la valeur contient, entre autres, la chane spcifie. Cible tous les lments dont les attributs correspondent ceux donns.
$('element[attribut*="valeur"]');
$('element[attribut1][attribut2][attributN]');
Filtres $(':animated'); $(':eq(N)'); $(':even'); $(':odd'); $(':first'); $(':last'); $(':focus'); $(':header');
Explication Cible tous les lments actuellement anims. Cible tous les lments dont l'index est gal N. Cible tous les lments dont l'index est pair. Cible tous les lments dont l'index est impair. Cible le premier lment trouv. Cible le dernier lment trouv. Cible tous les lments ayant actuellement le focus. 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 $(':input'); $(':button'); $(':checkbox'); $(':checked'); $(':file'); $(':password'); $(':radio'); $(':submit'); $(':text');
Explication Cible tous les lments de formulaire. Cible tous les lments de formulaire de type button. Cible tous les lments de formulaire de type checkbox. Cible toutes les botes coches. Cible tous les lments de formulaire de type file. Cible tous les lments de formulaire de type password. Cible tous les lments de formulaire de type radio. Cible tous les lments de formulaire de type submit. 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 on() off() trigger() Explication Initialise un gestionnaire d'vnements. Supprimer un gestionnaire d'vnements. Simule un vnement.
144/150
vnement du clavier keydown() keyup() keypress()
Explication Se dclenche l'enfoncement d'une touche. Se dclenche au relchement d'une touche. 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 click() dblclick() hover() mousedown() mouseup() mouseenter() mouseleave() mousemove() toggle()
Explication Se dclenche au clic. Se dclenche au double-clic. Se dclenche au passage sur l'lment cibl. Se dclenche l'enfoncement du bouton de la souris. Se dclenche au relchement du bouton de la souris. Se dclenche l'entre du curseur sur l'lment cibl. Se dclenche la sortie du curseur de l'lment cibl. Se dclenche au mouvement de la souris. Se dclenche chaque clic, et alterne deux fonctions.
vnement AJAX ajaxStart()
Explication Se dclenche au dbut d'une requte AJAX.
ajaxComplete() Se dclenche une fois la requte AJAX termine. ajaxSuccess() ajaxError() Se dclenche si la requte AJAX s'est termine avec succs. 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 css() height() width() innerHeight() innerWidth() outerHeight() Explication Rcupre ou modifie une ou plusieurs proprit(s) CSS. Rcupre la hauteur de l'lment cibl. Rcupre la largeur de l'lment cibl. Rcupre la hauteur de l'lment cibl en prenant en compte ses marges intrieures mais pas les bordures. Rcupre la largeur de l'lment cibl en prenant en compte ses marges intrieures mais pas les bordures. Rcupre la hauteur de l'lment cibl en prenant en compte ses marges intrieures, extrieures, et ses bordures.

outerWidth() offset() position() scrollTop() scrollLeft() Rcupre la largeur de l'lment cibl en prenant en compte ses marges intrieures, extrieures, et ses bordures. Rcupre les coordonnes absolues de l'lment cibl. Rcupre les coordonnes relatives de l'lment cibl. Rcupre la position verticale de la barre de dfilement par rapport la page. Rcupre la position horizontale de la barre de dfilement par rapport la page.
145/150
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 animate() hide() show() fadeOut() fadeIn() slideUp() Explication Anime une ou plusieurs proprit(s) CSS, l'aide d'arguments tels que la dure ou l'acclration de l'animation. Fait disparatre un lment (et lui donne la proprit display:none). Fait rapparatre un lment. Fait disparatre un lment (qui aura la proprit display:none) avec un effet de fondu. Fait rapparatre un lment avec un effet de fondu. 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 attr() removeAttr() addClass() Explication Rcupre ou modifie l'attribut d'un lment. Supprime l'attribut d'un lment. 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 find() Explication Permet de trouver un enfant particulier.
children() Trouve l'enfant direct de l'lment cibl. parent() parents() each() Trouve le premier parent de l'lment cibl. Trouve tous les anctres de l'lment cibl. Boucle sur chaque lment.
Manipulation du HTML
Ici se trouvent les mthodes permettant de modifier la structure HTML de la page. Mthode html() text() val() append() prepend() Explication Rcupre ou modifie le contenu HTML de l'lment cibl. Rcupre ou modifie le contenu textuel de l'lment cibl. Rcupre ou modifie la valeur d'un lment de formulaire. Ajoute du contenu HTML ou textuel la fin de l'lment cibl. Ajoute du contenu HTMK ou textuel au dbut de l'lment cibl.

appendTo() Mme utilit que append().
146/150
prependTo() Mme utilit que prepend(). before() after() clone() empty() remove() wrap() Ajoute du contenu HTML ou textuel avant l'lment cibl. Ajoute du contenu HTML ou textuel aprs l'lment cibl. Duplique un lment (ncessite de place le clone dans le DOM). Vide un lment. Supprime un lment. Enveloppe un lment.
Mthodes AJAX
Enfin, vous trouverez ici les principales fonctions relatives aux requtes asynchrones d'AJAX. Mthode $.ajax() $.post() $.get() load() Explication Excute une requte AJAX de type GET ou POST. Excute une requte AJAX de type POST (raccourci de $.ajax()). Excute une requte AJAX de type GET (raccourci de $.ajax()). Charge du contenu HTML de manire asynchrone.
serialize() Permet de srialiser un formulaire.
147/150
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 ?
V ous 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. V ous 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

V ous 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 $ . V ous 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.
148/150
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. V oici 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>
V oil, 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.
149/150
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. V ous 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

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Un Site Web Dynamique Avec Jquery

Hochgeladen von

Copyright:

Verfügbare Formate

Un site web dynamique avec jQuery !

Par Nassoub et Sainior

Licence Creative Commons 7 2.0 Dernire mise jour le 9/07/2012

De quels outils a-t-on besoin ? ........................................................................................................................................ 11

Rappels gnraux sur JavaScript ................................................................................................................................... 18

Partie 2 : Les bases du framework .................................................................................................... 20

Les slecteurs ................................................................................................................................................................. 27

jQuery et les vnements ............................................................................................................................................... 32

Manipuler le code CSS avec jQuery ............................................................................................................................... 39

TP : le formulaire interactif .............................................................................................................................................. 43

Partie 3 : Manipulation du DOM et animations .................................................................................. 48

Manier les attributs .......................................................................................................................................................... 57

Parcourir les lments du DOM ...................................................................................................................................... 61

Manipuler le code HTML avec jQuery ............................................................................................................................. 65

Partie 4 : L'AJAX avec jQuery ........................................................................................................... 80

Le fonctionnement de $.ajax() ......................................................................................................................................... 85

Cas concret : un formulaire de connexion avec AJAX .................................................................................................... 93

Les vnements AJAX .................................................................................................................................................... 98

La mthode load() ! ....................................................................................................................................................... 100

TP : le tchat en AJAX .................................................................................................................................................... 102

Partie 5 : Les projets autour de jQuery ........................................................................................... 109

Les interfaces utilisateur : jQuery UI ............................................................................................................................. 112

Le framework mobile : jQuery Mobile ............................................................................................................................ 117

Programmez vos jeux avec gameQuery ....................................................................................................................... 123

D'autres plugins utiles ................................................................................................................................................... 133

Partie 6 : Aller plus loin ................................................................................................................... 136

Mmento des principales fonctions ............................................................................................................................... 141

D'autres frameworks JavaScript ................................................................................................................................... 147

Un site web dynamique avec jQuery !

jQuery, crivez moins, faites plus.

Un site web dynamique avec jQuery !

Partie 1 : Introduction jQuery

Partie 1 : Introduction jQuery

jQuery : l'histoire d'un framework !

Mais... c'est quoi jQuery ?

jQuery, un framework JavaScript

JavaScript ou... jQuery ?

jQuery, un framework JavaScript

Partie 1 : Introduction jQuery

Et oui ! Ce petit fichier, c'est bien jQuery !

jQuery, un framework ou une librairie ?

Le cas le plus simple : une librairie

Un cas plus complexe : un framework

Partie 1 : Introduction jQuery

A quoi va nous servir jQuery ?

Les points forts de jQuery

jQuery et les animations

jQuery et les formulaires

Partie 1 : Introduction jQuery

Des sites qui utilisent jQuery

Partie 1 : Introduction jQuery

De quels outils a-t-on besoin ?

Le choix du navigateur web

Fourni par dfaut avec Windows.

Partie 1 : Introduction jQuery

Un incontournable : Firebug pour Firefox !

Ajoutez Firebug votre navigateur Firefox !

Utiliser la bote outils Firebug !

Partie 1 : Introduction jQuery

Partie 1 : Introduction jQuery

Un diteur de texte efficace

Un diteur de texte performant et efficace

Partie 1 : Introduction jQuery