Académique Documents
Professionnel Documents
Culture Documents
Un Site Web Dynamique Avec Jquery
Un Site Web Dynamique Avec Jquery
dynamique avec
jQuery !
Par Nassoub
et Sainior
www.openclassrooms.com
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
18
18
18
18
19
19
20
20
22
22
24
25
33
33
34
34
35
35
35
35
36
37
37
38
40
40
40
40
41
41
www.openclassrooms.com
43
43
43
44
Sommaire
3/150
66
66
66
69
69
69
70
70
71
72
72
72
TP : le carrousel .............................................................................................................................................................. 73
Explications et pr-requis ..........................................................................................................................................................................................
Objectif concret .........................................................................................................................................................................................................
Mthodes requises ....................................................................................................................................................................................................
Correction ..................................................................................................................................................................................................................
Explications du code jQuery ......................................................................................................................................................................................
Amliorations ............................................................................................................................................................................................................
74
74
74
75
76
79
www.openclassrooms.com
94
94
94
94
Sommaire
4/150
101
101
101
101
101
102
103
103
103
103
103
103
105
106
108
108
123
123
123
124
125
125
126
127
128
129
129
129
130
131
131
132
133
133
133
135
135
www.openclassrooms.com
Lire aussi
5/150
136
136
136
137
137
138
138
138
139
www.openclassrooms.com
Lire aussi
6/150
Par
Nassoub et
Sainior
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.
www.openclassrooms.com
7/150
www.openclassrooms.com
8/150
Un logo de JavaScript
www.openclassrooms.com
9/150
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
Cela parat flou, et nous vous comprenons. Vous avez encore du mal vous reprsenter ce qu'est jQuery objectivement. Dans
notre ternelle bont, nous allons vous donner une vision plus physique de la chose : jQuery n'est en fait qu'un seul et unique
fichier JavaScript, tlchargeable sur le web et qui porte l'extension .js !
Euh... et c'est ce petit truc de rien du tout qui ncessite un cours entier ? Elle me parat pas franchement crdible toute
cette histoire...
Et pourtant !
jQuery n'est pas n'importe quel fichier JavaScript. C'est une norme bibliothque de fonctions JavaScript qui ont t crites et
regroupes en un seul et unique fichier pour plus de simplicit.
Vous tes intrigu par le contenu de ce fichier... et vous avez du mal croire qu'il peut lui seul tre l'objet d'autant
d'engouement. C'est normal. Cliquez plutt sur ce lien pour voir le code de jQuery dans sa version 1.7 . Plutt impressionnant
non ? Cela prend tout de suite une autre ampleur.
Ce qu'il faut vous dire, c'est que jQuery est vraiment une grosse bote outils, et pas "un petit fichier de rien du tout". Le nombre
de fonctions qui sont contenues dans ce simple fichier est vraiment grand. Et ces outils n'ont qu'un seul but : vous permettre
d'crire moins de code JavaScript, pour tre toujours plus productif et efficace dans vos dveloppements !
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.
www.openclassrooms.com
10/150
Rappelez vous qu'il s'agit d'un tutoriel qui a t pens pour les dbutants, alors ne vous inquitez pas. Pour peu que
vous suiviez les chapitres dans l'ordre il vous faudra peu de temps pour assimiler les bases du framework.
Vous voulez un peu savoir ce que ce framework a dans le ventre ? Trs bien ! Voyons maintenant quoi peut (et va !) nous servir
jQuery concrtement dans notre site web.
jQuery et la compatibilit
Image utilisateur
Concrtement, la compatibilit inter-navigateurs signifie qu'un code JavaScript qui fonctionne sur un
navigateur web doit fonctionner sur un autre. Et bien devinez quoi ? jQuery uniformise le tout ! Au
final, un code JavaScript respectant les normes imposes par jQuery sera compatible sur tous les navigateurs web.
Un gain de temps et d'nergie plus quapprciable, vous permettant de vous focaliser vraiment sur le cur de votre code, plutt
que sur des questions de compatibilit entre navigateurs.
jQuery et l'AJAX
Dans le mme registre de compatibilit, l'AJAX avec jQuery a t grandement simplifi.
AJAX est rendu possible grce un objet de JavaScript appel XmlHttpRequest
(XHR)... seulement, instancier un objet XmlHttpRequest peut vite devenir un vritable
calvaire, car d'un navigateur l'autre, cela ne se fait pas du tout de la mme manire.
Grce jQuery, instancier un objet XHR est trs simple.
Une seule fonction instancie l'objet, et elle couvre tous les navigateurs, en plus de
vous fournir des outils pour grer au mieux votre requte ! AJAX devient donc
tonnamment facile et rapide utiliser.
L'un des lments incontournables de jQuery et qui a fait son succs est incontestablement la
possibilit de crer des effets sur sa page. Envie de faire disparatre un bloc avec un effet de fondu, ou
bien faire trembler un bouton submit sur votre page web ? Pas de problme ! jQuery le fait pour vous.
Vous verrez que la masse de fonctions que jQuery vous proposera afin de crer des effets sur vos pages web sera tout
simplement impressionnante. Vous verrez aussi que la densit de la documentation en tmoignera.
www.openclassrooms.com
11/150
relever quels type de formulaires ont mal t remplis et afficher ceci au visiteur.
Attention nanmoins : jQuery ne remplace en aucun cas un traitement ct serveur. Ce framework reste une technologie
ct client, on peut donc facilement contourner ces validations, voire mme les dsactiver.
Ainsi, ne comptez pas QUE sur jQuery pour valider vos donnes. Vous devrez galement prvoir une validation ct serveur,
avec un langage tel que PHP.
Et tout cela, c'est sans parler de toute la panoplie d'outils disponible pour manipuler pleinement le DOM que jQuery vous offre.
Pas de doutes, jQuery est le choix pour lequel vous devez opter aujourd'hui pour donner une nouvelle dimension vos futurs
sites.
Nous ne pouvons que vous encourager vous accrocher et apprendre cette technologie. Avec ce tuto entre les mains, ce
travail d'apprentissage n'en sera que plus facile.
L'histoire du framework
Le framework jQuery est la base l'uvre d'un seul homme, un programmeur
JavaScript hors-pair qui a su, en 2006, initier le projet.
Son nom est John Resig. Depuis 2006, John Resig est rest le chef de projet
de jQuery. C'est ainsi lui qui supervise encore aujourd'hui le dveloppement
de jQuery.
Il travaillait pour le compte de la Mozilla Corporation en tant que
dveloppeur JavaScript.
Malgr le travail colossal que Resig a su faire sur le framework jQuery, vous
imaginez bien que cet homme n'a pas pu lui seul crer un tel outil. Les
autres dveloppeurs de jQuery, ce sont les membres de sa communaut.
En effet ! John Resig a publi le framework sous licence MIT et GNU GPL :
deux licences libres. Cela signifie concrtement que tout le monde peut
travailler sur le framework et participer son amlioration. Vous verrez
notamment plus tard qu'il existe des plug-ins jQuery que vous pourrez crer
vous-mme, afin de toujours plus complter le framework... mais nous n'en sommes encore pas l.
A ce jour, jQuery en est sa version 1.7.2, et a dj subi beaucoup de mises jour. La communaut est en effet trs active, et les
mises jour se font toujours rgulirement.
www.openclassrooms.com
12/150
Nom
Internet
Explorer
OS Tlchargement
Fourni par
dfaut avec
Windows.
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
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
Chromium est le projet open-source sur lequel est bas Google Chrome. Il s'agit
en fait de Google Chrome lav de tous les ajouts de Google. Vous pouvez l'utiliser
Tlchargement
si vous tes inquiet au sujet des questions du respect des informations
personnelles.
Opera
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
Tlchargement
Safari est le navigateur web d'Apple qui quipe tous les ordinateurs Apple par
dfaut. C'est un peu l'Internet Explorer de la pomme de ce point de vue.
Sachez que jQuery est totalement compatible avec tous ces navigateurs. Vous n'avez pas vous inquiter de ce ct-l.
Maintenant que nous vous avons prsent ces navigateurs majeurs que tout le monde utilise sur le web, nous pouvons quand
mme souligner qu'il y en a un qui ressort nettement plus que les autres. Ce navigateur, c'est Mozilla Firefox !
www.openclassrooms.com
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.
www.openclassrooms.com
14/150
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.
www.openclassrooms.com
15/150
Sous Windows
Sous Linux
www.openclassrooms.com
16/150
Sous MacOS X
www.openclassrooms.com
17/150
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.
www.openclassrooms.com
18/150
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 !
www.openclassrooms.com
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 !
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
!"
Encore une fois, jQuery est presque un nouveau langage apprendre. Ainsi, nous ne serons pas aussi rapides dans
nos explications dans les prochains chapitres. Ici, nous souhaitons juste vous rafrachir la mmoire.
Vous tes maintenant au point pour commencer vous lancer avec jQuery ! Ces chapitres d'introduction ont peut-tre t un peu
long, mais nous pensons qu'il est ncessaire que vous soyez sr de vous pour coder dans de bonnes conditions. Alors
n'attendez plus, on commence ds maintenant !
www.openclassrooms.com
20/150
Pour rcuprer jQuery, vous devez tout simplement cliquer sur l'option "Download" dans le menu du haut. Vous arriverez alors
sur une page vous prsentant les diffrentes release de jQuery. A l'heure o nous crivons ces lignes, la version actuelle est la
1.7.2, et c'est celle que nous utiliserons au sein de ce cours.
Quoiqu'il en soit, la version la plus jour est place un peu en avant par rapport aux autres ; pratique pour l'identifier et la
rcuprer plus rapidement.
Euh... il y a deux release pour la mme version non ? Une version "Minified" et une version "Uncompressed"... qu'estce que je dois choisir ?
www.openclassrooms.com
21/150
prend vraiment plus de place. La version Minified rpond ce problme : tous les espaces et retours la ligne sont
retirs. Cela a pour effet de rendre le code compltement illisible, mais en revanche, jQuery sera tlcharg plus vite
par vous et vos visiteurs !
jQuery Uncompressed
jQuery Uncompressed est "l'autre jQuery". Celui qui a conserv les espaces et les retour la ligne pour garder de la
lisibilit, mais qui est plus long charger.
Bien sr, nous vous recommandons vivement d'utiliser la version compresse sur votre site en production, car elle sera
vraiment plus rapide charge. En revanche, pour toute la phase de dveloppement il sera plus sage d'utiliser la
version dcompresse.
Bref, pour en revenir notre inclusion dans nos pages, tlchargeons la version compresse de jQuery. Faites donc un Clic Droit
-> Enregistrer sous, et placez jQuery dans un dossier facile d'accs pour pouvoir l'inclure plus facilement dans votre page web.
La suite est trs simple et trs basique. Ouvrons un document HTML.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<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 !
www.openclassrooms.com
22/150
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>
</html>
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
!
www.openclassrooms.com
23/150
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 !
});
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. Vous voyez que le prochain lment qui arrive, est l'vnement ready. Cet
vnement se traduit simplement par "est prt". Une fois que cet vnement est vrifi, on lance une fonction anonyme dans
laquelle on va placer notre jQuery.
Ainsi, cette ligne peut tre traduite par : "quand le document HTML est prt (sous-entendu, est charg), lance une fonction qui
contient le code jQuery."
Cette petite structure de rien du tout signifie vraiment beaucoup de choses : on attend simplement que la page HTML soit
charge avant de commencer parler de jQuery. C'est LA structure que vous devrez utiliser dans 99% des cas pour coder en
jQuery dans votre page. Retenez-la par cur, parce que cela vous fera vraiment gagner du temps.
Et comment on peut vrifier que tout cela est fonctionnel ?
Vous pouvez simplement ajouter un console.log la place des commentaires dans le code ci-dessus pour voir si vous
recevez bien quelque chose dans votre console Firebug l'excution de ce code. Vous pouvez galement utiliser la mthode hard
en utilisant carrment un alert().
Vous pouvez vous y prendre comme ceci :
Code : JavaScript
/*
* Avec un console.log
*/
jQuery(document).ready(function(){
console.log("jQuery est prt !");
});
/*
* Avec un alert()
*/
jQuery(document).ready(function(){
www.openclassrooms.com
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(){
});
... et...
Code : JavaScript
$(function(){
alert('jQuery est prt !');
});
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
www.openclassrooms.com
25/150
code au maximum :
Code : JavaScript
jQuery(document).ready(function($){
// notre code ici
});
// ce code plus court revient au mme :
jQuery(function($){
// notre code ici
});
Le principe de fonctionnement
Comme nous venons de le voir, le framework met en place une fonction dite principale. Le principe de fonctionnement de jQuery
repose en fait entirement sur celle-ci ! Autant dire que vous allez vous servir beaucoup plus du caractre $ (dollar) ds prsent
!
Ainsi, pour agir avec les lments d'une page web, on ralisera ce qu'on appelle couramment un ciblage d'lment , qui
reprsentera une balise, par exemple. On agira ensuite dessus grce des mthodes. Pour que vous ayez un aperu, voici un
code fictif tout simple usant du principe de jQuery :
Code : JavaScript
$('monElement').maMethode();
Je cible dans un premier temps mon lment qui jouera le rle d'objet, grce un slecteur (chose que nous verrons plus en
dtails dans le prochain chapitre). Je peux ensuite agir dessus grce une mthode !
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.
www.openclassrooms.com
26/150
Code : JavaScript
$('monElement').premiereMethode().deuxiemeMethode();
/* la premire mthode agit d'abord sur l'objet, avant la deuxime.
On a donc un ordre logique : les mthodes s'enclenchent les unes
derrire les autres */
Si vous avez assimil ce fonctionnement de base, vous avez fait le plus dur.
Bien sr, jQuery est bourr d'outils pour rendre la chose un peu plus vivante.
Vous devez commencer comprendre comment fonctionne concrtement le framework !
allons monter le niveau d'un cran, et voir les slecteurs dans le chapitre suivant.
www.openclassrooms.com
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 !
Un identifiant est unique : plusieurs lments d'une seule page ne peuvent pas avoir le mme id !
Frres et parents
Parmi les slecteurs un peu plus complexes que les classes et les identifiants se trouvent les slecteurs de descendance. Ce mot
bizarrement employ dans un contexte tel que le ntre cache en fait un concept trs puissant de parcours. Vous n'tes surement
pas sans savoir qu'il est possible, en HTML, d'imbriquer des balises les unes dans les autres. Eh bien, ce systme fait usage de la
descendance !
Prenons un exemple concret. Je possde un paragraphe, dans lequel j'ai un lien absolu. Ma balise <a href="lien"></a>
est alors imbrique dans les balises <p></p> propres au paragraphe.
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 >.
www.openclassrooms.com
28/150
Code : JavaScript
$('p > .lien');
/* ici, nous slectionnons seulement les lments ayant la classe
.lien,
et descendants directement du paragraphe ! */
Il est ensuite possible de pousser le systme encore plus loin, par exemple en utilisant les slecteurs + et ~ qui se chargent de
reprsenter les frres de l'lment. Ce qu'on appelle couramment les frres, dans ce contexte de jQuery, ce sont simplement les
lments qui se suivent directement, comme par exemple deux liens.
Code : JavaScript
$('.lien + .visite');
/* la slection s'effectue sur les lments ayant pour classe
.visite,
et qui sont immdiatement prcds d'un lment ayant pour classe
.lien */
$('.lien ~ .visite');
/* dans ce cas-l, ce sont tous les lments .visite,
prcds immdiatement ou non par un lment .lien */
www.openclassrooms.com
29/150
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,
www.openclassrooms.com
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.
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
Code
input:text
input:file
input:radio
input:button
input:submit
www.openclassrooms.com
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
});
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 !
www.openclassrooms.com
32/150
Rappelez-vous donc d'une rgle essentielle lorsque vous utilisez jQuery : plus la chane de slecteurs est courte, plus rapide
sera la slection.
C'est la fin de ce chapitre ! Vous avez vu que les slecteurs de jQuery offrent de nombreuses possibilits de ciblages des
lments d'une page web, et ce n'est que le dbut de ce fabuleux framework ! Vous verrez dans le prochain chapitre comment
grer les vnements, o vous aurez besoin de mettre en pratique tout ce que vous venez de voir. Assurez-vous donc de bien
avoir compris !
www.openclassrooms.com
33/150
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 !
});
www.openclassrooms.com
34/150
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.
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 !
Fonction
Clic
click()
Double-clic
dblclick()
Passage de la souris
hover()
mouseenter()
Quitter un lment
mouseleave()
mousedown()
scroll()
www.openclassrooms.com
35/150
Pour connatre le code d'une touche, je vous invite aller consulter cette page.
Fonction
focus()
change()
Envoi du formulaire
submit()
Le dclenchement virtuel
jQuery permet de simuler le dclenchement d'vnements grce une simple mthode. Pour faire court, vous n'avez pas besoin
d'attendre que l'utilisateur remplisse une action prcise pour lancer du code : vous pouvez excuter virtuellement un vnement
grce trigger() ! Il suffit de donner le type de l'vnement en tant qu'argument.
Code : JavaScript
$('p').click(function(){
alert('Cliqu !');
});
$('p').trigger('click'); // dclenche l'action au chargement du
script
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
www.openclassrooms.com
36/150
bouillonnement.
L'coute en jQuery
Sachez qu'avec notre framework, il est possible de raliser la mme chose. L'coute d'un vnement se ralisera avec la mthode
bind() le plus souvent, mais la tendance s'inverse pour laisser place la fonction on(), recommande par les auteurs de
jQuery depuis la version 1.7 : c'est donc trs rcent. Comme chaque dveloppeur doit s'adapter au progrs, nous utiliserons la
seconde mthode dans la suite de ce chapitre, et plus gnralement de ce cours !
Quelle diffrence entre ces deux fonctions ? Pourquoi utiliser l'une, et plus l'autre ?
On note une diffrence majeure de flexibilit : nous allons voir juste aprs qu'il est possible de dlguer des vnements, de faire
vivre des vnements, et videmment d'couter des vnements. Dans les versions plus anciennes de jQuery, il fallait utiliser
trois mthodes diffrentes pour raliser ces choses-l. La mthode on() permet de les regrouper en une seule, elle est donc bien
plus pratique et ergonomique !
Prcdemment, vous avez vu comment dclencher un vnement simple. Les fonctions utilises n'taient en fait que des
mthodes simplifies, permettant aux dveloppeurs de ne pas crer chaque fois un gestionnaire. Nous allons voir prsent
l'coute, la vraie, d'vnements en jQuery.
Rappel : nous utilisons la mthode on().
Pour couter un vnement, il suffit de raliser le mme schma de code qu'avec addEventListener(). C'est--dire que l'on
va donner dans un premier temps le type d'vnement, puis la fonction de callback excuter :
Code : JavaScript
$('button').on('click', function(){
alert('Ce code fonctionne !');
});
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 !');
});
www.openclassrooms.com
});
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.
event.namespace
www.openclassrooms.com
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
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 !
www.openclassrooms.com
39/150
Si vous voulez supprimer tous les gestionnaires d'vnements dlgus seulement, il faut donner un second argument la
mthode, qui est l'lment cr dynamiquement. La valeur ** dsigne tous les lments qui profitent de la dlgation
d'vnements :
Code : JavaScript
$('body').on('click', 'p', function(){
// du code ici
});
$('body').off('click', 'p'); // supprime tous les gestionnaires
d'vnements dlgus sur les paragraphes
$('body').off('click', '**'); // supprime tous les gestionnaires
d'vnements dlgus
Vous avez vu, les vnements n'taient pas difficiles comprendre, et en plus de a, c'est plutt simple d'en exploiter toute la
puissance dans notre code jQuery. Peut-tre les gestionnaires vous ont-ils donn du fil retordre ? Si c'est le cas, prenez bien le
temps de relire cette petite partie, car ils sont trs utiliss !
Les bases du framework se mettent de plus en plus en place dans votre tte, et c'est une trs bonne chance. Bientt vous serez
tonnez de ce qu'il est possible de faire avec votre site web ! La prochaine tape : la manipulation de votre code CSS. Modifier
des lments de votre design dynamiquement, un rve inavou ?
www.openclassrooms.com
40/150
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.
41/150
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)
Chaque mthode transforme l'objet donn (l'lment de la page web), et lui dfinit automatiquement une position absolue ou
relative.
www.openclassrooms.com
42/150
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 !
www.openclassrooms.com
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. Vous allez vous
charger de crer un formulaire interactif !
Explications et pr-requis
Le but de ce travail pratique est de raliser un formulaire interactif, que l'on animera grce jQuery. Ce sera un formulaire trs
basique, avec quatre ou cinq champs au maximum, qui verront leur style CSS changer suivant l'action de l'utilisateur. Le but est
en fait de vrifier les informations entres : nombre de caractres, vrifier que la confirmation du mot de passe est identique
celui-ci, vrifier si tous les champs sont remplis, etc.
Objectif concret
Ce formulaire devra contenir quatre champs :
un champ text pour le pseudonyme ;
un champ password pour le mot de passe ;
un deuxime champ password pour la confirmation du mot de passe ;
et un dernier champ text pour ce que vous voulez, comme l'adresse e-mail par exemple.
De mme, deux boutons devront permettre respectivement d'envoyer les donnes, et de vider les champs. Pas de langage
serveur pour ce TP : tout devra se drouler dans le ct client. videmment, vous devrez vous assurer par la suite, lorsque vous
coderez pour des projets destins au grand public, que les donnes sont bonnes du ct serveur, c'est trs important car le
JavaScript peut tre contourn !
Pour le moment, le but est juste de vous faire pratiquer. Vous devrez vous assurer que l'utilisateur rentre les bonnes infos, de la
bonne manire :
tous les champs devront contenir au moins 5 caractres ;
le mot de passe et la confirmation devront tre bien sr identiques ;
si les champs sont vides lors de l'envoi, on affiche un message d'erreur.
Pour indiquer l'erreur au visiteur, il vous suffira d'utiliser CSS : une bordure de champ de couleur rouge ferait par exemple l'affaire.
De la mme manire, si le champ est bon, vous pourriez changer la couleur du champ adquat en vert.
Mthodes requises
Pour pouvoir raliser cela, vous allez devoir user des vnements, vous ne pourrez rien faire sans. De mme, la manipulation du
CSS doit tre matrise afin de pouvoir animer les champs. N'oubliez pas que vous devez traiter tous les cas, car il ne faut jamais
faire confiance l'utilisateur.
Pour rcuprer le contenu d'un champ, vous devrez utiliser une mthode que nous n'avons pas encore traite : val(). La
proprit length vous permettra, elle, de rcuprer la longueur d'une chane de caractre.
Nous vous donnons la structure HTML que nous utilisons, mais absolument rien ne vous empche de crer la votre !
Code : HTML
<div id="erreur">
<p>Vous n'avez pas rempli correctement les champs du formulaire
!</p>
</div>
<form>
<label for="pseudo">Pseudonyme</label> <input type="text"
id="pseudo" class="champ" /><br /><br />
<label for="mdp">Mot de passe</label> <input type="password"
id="mdp" class="champ" /><br /><br />
<label for="confirmation">Confirmation</label> <input
type="password" id="confirmation" class="champ" /><br /><br />
<label for="mail">E-mail</label> <input type="text" id="mail"
class="champ" /><br /><br />
<input type="submit" id="envoi" value="Envoyer" /> <input
type="reset" id="rafraichir" value="Rafrachir" />
</form>
www.openclassrooms.com
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>
<!-- on inclut la bibliothque depuis les serveurs de Google -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
www.openclassrooms.com
45/150
Code : JavaScript
$(document).ready(function(){
// notre code ici
});
Une des bonnes pratiques adopter est de mettre vos objets jQuery dans des variables. Cela n'est pas obligatoire, mais a
permet un gain d'optimisation consquent, ainsi qu'une plus grande lisibilit dans le code. En suivant cela, il fallait dterminer
quels lments slectionner :
le champ du pseudonyme ;
les champs du mot de passe et de la confirmation ;
le champ de l'e-mail ;
le bouton d'envoi ;
le bouton de rafrachissement du formulaire ;
le message d'erreur ;
et enfin tous les champs en gnral (ceux ayant la classe .champ).
Code : JavaScript
$(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
www.openclassrooms.com
46/150
borderColor : 'red',
color : 'red'
});
}
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
www.openclassrooms.com
47/150
$(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 :
});
$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'
});
}
}
www.openclassrooms.com
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. Vous verrez galement comment matriser l'animation de vos lments avec
jQuery, ce qui est une trs bonne chose quand on sait que c'est l'un des plus gros points forts du framework ! Trve de
bavardage, nous vous invitons passer la suite, pour que vous puissiez subir un nouveau TP le plus vite possible.
www.openclassrooms.com
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.
Code : JavaScript
www.openclassrooms.com
49/150
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.
www.openclassrooms.com
50/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
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'
www.openclassrooms.com
51/150
easing : 'swing'
specialEasing : { // on dfinit la proprit
fontSize : 'linear' // puis on liste toutes les proprits
CSS dans un objet en donnant leur volution
}
});
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
});
www.openclassrooms.com
52/150
Le cas de toggle()
La mthode toggle() est un peu particulire, tant donn qu'elle agit sur l'objet jQuery en fonction de son tat courant : s'il est
cach, elle l'affiche, s'il est affich, elle le cache. L o vous devez vous rendre compte de son utilit, c'est qu'elle accepte un
argument de condition. Vous pouvez agir dessus grce un boolen, par exemple. Si on lui indique true, elle affichera l'lment,
si on lui indique false, elle fera l'inverse.
Code : JavaScript
www.openclassrooms.com
53/150
Drouler et enrouler
Vous avez sans doute dj vu des sites web utilisant ce genre de chose, pour un systme de drouler / enrouler notamment.
Pour raliser cela, rien de plus simple :
slideDown() droule l'lment pour l'afficher ;
slideUp() enroule l'lment pour le cacher ;
slideToggle() enroule ou droule selon l'tat courant de l'lment.
Les arguments ne changent pas, ils sont les mmes que pour show(), hide() et toggle().
Apparition et disparition
On va jouer ici sur l'opacit de l'lment influenc.
fadeIn() affiche l'lment progressivement ;
fadeOut() cache l'lment, en ajustant l'opacit galement.
fadeToggle() affiche ou cache l'lment, grce l'opacit.
Le framework met galement disposition une fonction permettant de contrler l'opacit finale de l'lment anim. Il s'agit de
fadeTo(), qui prend en argument obligatoire un nombre dcimal (float) entre 0 et 1 indiquant l'opacit.
Code : JavaScript
$('p').fadeTo('normal', 0.5); // ajuste l'opacit et la fixe 0.5
L'argument de dure de l'animation est dfini comme tant facultatif ; nanmoins, vous devez l'indiquer, sans quoi la
mthode ne fonctionnera pas.
www.openclassrooms.com
54/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
www.openclassrooms.com
55/150
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
www.openclassrooms.com
56/150
www.openclassrooms.com
57/150
(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.
www.openclassrooms.com
58/150
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
www.openclassrooms.com
59/150
Vous pouvez excuter une fonction anonyme en tant qu'argument de la mme faon que dans la partie prcdente.
Vous pouvez contrler l'action de cette mthode grce un second argument, sous la forme de boolen : true permettra
d'ajouter la classe, alors que false la supprimera.
Code : JavaScript
// ces deux codes sont quivalents :
$('p').addClass('vert');
$('p').toggleClass('vert', true);
// ces deux codes sont quivalents :
$('p').removeClass('vert');
$('p').toggleClass('vert', false);
Les attributs sont un passage obligatoire sur le chemin de la matrise du framework jQuery. Vous avez vu qu'ils sont extrmement
utiles, et croyez-nous : vous n'avez pas fini de les utiliser.
Dans le prochain chapitre, nous apprendrons nous dplacer dans le DOM, pour exploiter chaque lment d'une page web
dynamiquement !
www.openclassrooms.com
60/150
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 !
www.openclassrooms.com
61/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.
www.openclassrooms.com
62/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.
La mthode not() permet de faire la mme chose, mais prend en argument les objets ne pas prendre en compte.
www.openclassrooms.com
63/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
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
www.openclassrooms.com
64/150
www.openclassrooms.com
65/150
Insertion de contenu
Enfin, nous y voil ! Vous allez apprendre insrer du contenu directement dans votre page web, grce jQuery. Petite note de
vocabulaire, le faire d'insrer quoi que ce soit dans un document HTML se dit couramment "crer du contenu la vole". Ne
soyez donc pas tonn de voir cette expression lorsque l'on vous parle de jQuery !
Nous allons voir comment insrer du contenu, ce qui est la base de la manipulation du code HTML. Sachez tout d'abord qu'il
existe trois sortes de contenu :
le contenu textuel, ce qui correspond du texte, tout simplement, sans fioritures telles que des balises ;
le contenu HTML, qui reprsente le contenu textuel avec les balises structurelles en plus ;
et le contenu des lments de formulaire, qui est la valeur des diffrents champs de texte, de mot de passe, de textarea...
Ces diffrentes sortes de contenu ne se manipule pas tout fait de la mme manire, nous allons donc apprendre utiliser les
trois mthodes correspondantes, ainsi que quelques autres fonctions bien utiles, pour par exemple ajouter des lments une
place bien prcise.
Le contenu textuel
Commenons par le plus simple : le contenu textuel. Il n'est vraiment pas difficile de le manipuler, dans la mesure o il n'existe
qu'une seule fonction pour le faire : text(). Cette mthode permet soit de rcuprer le contenu textuel d'un lment s'il existe,
soit de le modifier en donnant la nouvelle version en argument. Petite note retenir, les balises donnes ne fonctionneront pas,
car les chevrons (< et >) seront convertis automatiquement en entits HTML (respectivement < et >).
Rappel : en JavaScript, vous utilisez la proprit textContent pour le modifier.
Rcupration du contenu
Pour rcuprer le contenu d'un lment, il suffit d'utiliser la mthode text() tout simplement, ni plus ni moins. Elle ne
retournera qu'une chane de caractre (string ), qui contiendra le contenu textuel seulement : pas de balises ouvrantes ni
fermantes, pas de chevrons HTML, juste du texte.
Code : JavaScript
$('p').text(); // renvoie le texte contenu l'intrieur du
paragraphe
Chose importante retenir, la fonction s'arrte la premire occurrence trouve : si vous avez plusieurs paragraphes et que vous
lancez le code ci-dessus, vous n'obtiendrez que le contenu du premier paragraphe du document, ayant l'index 0. De mme, elle
prend parfaitement bien en compte les espaces divers et les retours la ligne.
Dfinition de contenu
Comme dit prcdemment, la dfinition de contenu avec text() se fait par argument. Faites bien attention l'utiliser
correctement : cette mthode crase le contenu actuel pour le remplacer par le nouveau ! Nous verrons comment ajouter, au lieu
d'craser, du contenu un peu plus tard dans ce chapitre.
Code : JavaScript
$('p').text('Nouveau contenu !'); // remplace le contenu actuel du
paragraphe par "Nouveau contenu !"
Le contenu HTML
Passons ds prsent au plus intressant : le contenu HTML. Nous vous rappelons qu'il s'agit juste du contenu textuel, avec les
balises structurelles en plus. Vous allez donc voir une fonction text() un peu amliore, html(). Elle fonctionne tout
simplement comme la proprit innerHTML que vous utilisez en JavaScript simple, pour la simple et trs bonne raison qu'elle
www.openclassrooms.com
66/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.
Rsultat :
Code : HTML
<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 !
www.openclassrooms.com
67/150
68/150
Code : JavaScript
$('p').append(' <strong>Texte insr aprs le contenu
actuel.</strong>');
$('p').append( $('h1') );
Code : JavaScript
1.
$('p').append( $('h1') );
// ici, on ajoute le contenu du
titre aprs avoir slectionn
notre lment
append() :
objet.append(contenu)
2.
appendTo() :
contenu.appendTo(objet)
$('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
Rsultat :
Code : HTML
<p>Paragraphe prcdent</p>
<p>Paragraphe cibl</p>
www.openclassrooms.com
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).
Il va alors falloir lui indiquer o se placer. Et comment insrer du contenu ? Avec les mthodes tudies prcdemment, telles que
www.openclassrooms.com
69/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.
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
www.openclassrooms.com
70/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 !
Vous pouvez bien videmment crer plusieurs parents d'un seul coup, en imbriquant les balises correctement comme
dans une structure HTML normale.
Rsultat :
Code : HTML
www.openclassrooms.com
71/150
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
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.
www.openclassrooms.com
72/150
Vous savez maintenant comment crer des lments la vole dans vos documents HTML !
La manipulation du DOM est un passage incontournable lorsque vous codez avec jQuery. Vous venez de voir une foule de
fonctions maintenant prtes l'emploi, mais rassurez-vous, si vous ne les retenez pas toutes, vous pourrez toujours revenir sur
ce chapitre un peu plus tard. Retenez pour le moment seulement les principales mthodes, celles qui sont indispensables. En
annexes, un mmento des fonctions connatre vous sera propos.
Vous allez prsent vous lancer dans votre deuxime TP. Celui-ci portera sur la cration d'un carrousel simple, qui est, vous le
verrez, une animation trs sympathique normment utilise sur le web !
www.openclassrooms.com
73/150
TP : le carrousel
Bien ! Vous voil arriv sur un nouveau Travail Pratique ! Ce chapitre va clore la troisime partie, qui tait consacre aux
animations et la manipulation du DOM. Nous esprons que tout t clair pour vous, et que vous russirez ce TP les doigts
dans le nez.
Votre travail consiste raliser un carrousel grce jQuery.
Explications et pr-requis
Certains vont sans aucun doute se demander : "qu'est-ce qu'un carrousel ?". Et en effet, mme si c'est un petit effet de plus en
plus prsent sur le web, beaucoup ne connaissent pas le nom de cette fabuleuse chose.
Un carrousel, c'est tout simplement
un dfilement d'images, le plus souvent prsent sur l'index d'un site web. Cela permet de gagner de la place, tout en restant trs
esthtique, et faire une prsentation originale. Nous vous invitons aller voir quelques exemples de carrousel plus ou moins
sophistiqus aux adresses suivantes :
Grafikart.fr (index) ;
CodeCanyon.net (jQuery Banner Rotator) ;
Wowslider.com ;
Objectif concret
Vous l'aurez maintenant compris, votre travail va tre de raliser vous-mme un carrousel. Simple dans un premier temps, vous
pourrez toujours l'amliorer par la suite si vous tes motiv ! Ce carrousel, qu'on appellera galement slider assez couramment,
devra simplement comporter quelques fonctions basiques :
Il devra possder deux boutons, un pour afficher l'image prcdente, l'autre pour afficher la suivante ;
Il saura dfiler seul, c'est--dire que les images dfileront d'elles-mmes sans que l'on ait intervenir ;
Il pourra tre trs flexible dans la mesure o il sera possible de mettre autant d'images que l'on souhaite.
Tout ce dont vous avez besoin pour raliser cela, c'est de la patience, et les connaissances que vous venez d'engranger !
Mthodes requises
Vous allez devoir piocher dans chaque chapitre pour pouvoir mener bien votre travail. En effet, ce TP est complet dans le sens
o il utilise tous les domaines de jQuery : les vnements, les slecteurs, les fonctions de parcours, la manipulation du DOM...
Vous allez devoir tout mettre profit, et c'est exactement ce que nous voulons.
Vous devrez donc partir d'un squelette en HTML, trs simple, puisqu'il ne s'agit en fait que d'un bloc contenant une liste
d'images. Rien d'extraordinaire, et le CSS n'a rien a lui envier, car il sera lui aussi trs trs simple, sauf deux subtilits ne pas
manquer. En effet, l'astuce est de dfinir une taille fixe votre carrousel, les images tant empiles les unes sur les autres grce
une position absolue.
Une fois ceci termin, tout se passe ensuite du ct de jQuery. L'astuce est de jouer sur la prsence des images, grce la
proprit display de CSS. N'hsitez pas non plus manipuler les index, car c'est comme cela que vous pourrez dterminer
quelle image doit tre affiche. Enfin, les boutons prcdent et suivant devront tre ajouts la vole, pour empcher l'utilisateur
ayant dsactiv JavaScript de les voir et de cliquer dessus sans voir de rsultat.
www.openclassrooms.com
74/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;
}
Vous avez maintenant toutes les cls pour raliser ce carrousel ! N'oubliez pas de consulter la documentation de jQuery si vous
en avez besoin, et de faire usage de Firebug, par exemple, pour localiser un soucis dans votre code. Si vous avez vraiment du
mal, n'hsitez pas poser votre question sur le forum JavaScript !
Correction
Votre carrousel fonctionne bien ? Ou en est-il toujours la phase thorique ? Quoi qu'il en soit, nous vous proposons comme de
juste une correction. Suivez-la bien pas pas, et vous saurez quelles ont t vos erreurs si vous en avez commis.
Comme pour le premier TP, nous vous avions fourni le code HTML minimal permettant de constituer une base de travail :
Code : HTML
<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>
<!-- on inclut la bibliothque depuis les serveurs de Google -->
<script
www.openclassrooms.com
75/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 !
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
www.openclassrooms.com
76/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;
}
});
www.openclassrooms.com
77/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
www.openclassrooms.com
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
Amliorations
Nous venons de vous prsenter un carrousel trs basique. La plupart de ceux que vous rencontrerez sur la toile sont beaucoup
plus sophistiqus, mais rappelez-vous qu'ils fonctionnent presque tous de la mme manire ! Que diriez-vous donc d'amliorer le
votre ? Voici quelques pistes :
le dfilement d'images n'est pas trs esthtique : la place du systme de display, essayez de mettre en place des
effets d'animation sympatiques !
pour le moment, les contrles sont trs basiques : il n'est pas possible d'aller une image prcise en cliquant une seule
fois. Que diriez-vous de raliser une liste de boutons reprsentant chacun une diapositive ?
de mme, il est possible de faire des miniatures des images et de les afficher en dessous du carrousel pour faire une bien
meilleure navigation !
...
Les possibilits sont infinies, on peut toujours trouver de nouvelles ides, qu'elles soient bonnes ou non. N'hsitez pas
regarder comment certains carrousel sont fait, vous risquez d'avoir de fabuleuses surprises !
Voil un TP qui ne vous aura pas fait chmer !
Nous allons prsent entrer dans une quatrime partie, qui sera entirement consacre AJAX. Si vous ne connaissez pas
vraiment le principe, ce n'est pas bien grave, car cette technologie a t compltement revisite par jQuery. Concrtement, vous
apprendrez raliser des requtes HTTP grce une fonction trs utilise, qui va par exemple vous permettre de traiter des
formulaires sans rechargement de la page !
www.openclassrooms.com
79/150
www.openclassrooms.com
80/150
81/150
Le fonctionnement du web
Un monde de clients et de serveurs
www.openclassrooms.com
82/150
Vous savez srement comment fonctionne le web : c'est un ensemble d'ordinateurs comme le vtre fonctionnant en rseau. On
peut ranger ces ordinateurs dans deux catgories : les clients et les serveurs. Les serveurs sont des ordinateurs sur lesquels se
trouvent les sites web, ils sont gnralement trs trs puissants et fonctionnent en permanence. L'autre groupe, les clients, sont
les ordinateurs qui demandent les pages web. Votre machine, comme les ntres, sont donc des clients. Les visiteurs d'un site web
sont des clients.
Certains sites web trs fort trafic ncessitent d'normes ressources serveur pour pouvoir servir leurs clients, on utilise
donc plusieurs serveurs pour un seul site. C'est le cas du Site du Zro qui utilise quelques serveurs, ou encore le cas de
Google, qui en utilise plusieurs millions. De la mme manire, un serveur peut trs bien grer plusieurs centaines de
sites web, pour peu qu'il soit assez puissant et que ces sites n'aient pas trop de trafic.
Pour obtenir une page web, un client demande donc un serveur une page web. Le serveur cherche dans son disque dur la
recherche de la page demande, et il la renvoie au client. Si des fichiers JavaScript sont rattachs cette page, le serveur les fait
parvenir aussi au client. Le navigateur web du client lit ensuite le code HTML et interprte le code JavaScript que le serveur lui a
renvoy, et il affiche la page au visiteur. Plutt simple non ?
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.
www.openclassrooms.com
83/150
Un langage ct serveur.
Transformer votre ordinateur en serveur
Votre ordinateur peut tout fait tre transform en serveur. Il va falloir passer par l pour continuer ; tant donn que nous allons
travailler avec le langage PHP, nous devons avoir un environnement de travail digne de ce nom. Lisez ce tutoriel de M@teo21
pour installer les programmes ncessaires afin obtenir un serveur en local sous Windows, Mac et Linux.
Vous allez nous trouver lourds, mais vraiment, il est plus que recommand de vous mettre niveau en PHP si vous ne
connaissez pas ce langage. Mieux vaut prvenir encore une fois avant de commencer.
Nous considrons que vous connaissez maintenant les tenants et les aboutissants d'AJAX. Notre but va donc tre d'envoyer
une requte HTTP au serveur depuis JavaScript grce jQuery. Nous devrons ensuite intercepter la rponse HTTP du serveur,
et rafrachir notre page web grce cette rponse.
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;
}
www.openclassrooms.com
84/150
C'est propre et a marche. Vous pouvez utiliser a sans problme sur votre site. Il y a quand mme un tout petit soucis ici : c'est
vraiment long taper, et nous vous le disions, pas pratique du tout. Voici 16 lignes de code, utilises uniquement pour rgler un
problme de compatibilit entre les navigateurs... si on demandait jQuery de faire a notre place, ce serait mieux non ?
Et hop, XmlHttpRequest est instanci. Vous pouvez dsormais procder l'envoie d'une requte HTTP grce cet objet. Bien
sr, ce code se veut le plus simple et le plus basique possible ; vous pouvez coupler cette fonction avec tous les vnements,
effets ou autre que vous voulez.
Nous avons pris tout l'heure comme exemple un fil de commentaire qui se rechargerait en AJAX ds que l'on cliquerait sur un
bouton plus de commentaires . Imaginons que ce bouton existe dans le DOM, et qu'il dispose de l'identifiant #more_com.
On va couter l'vnement click() sur ce bouton et ds qu'il sera ralis, on instanciera un objet XHR !
Code : JavaScript
$(document).ready(function(){
/*
* Ecoutons l'vnement click()
*/
$("#more_com").click(function(){
$.ajax();
});
});
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,
www.openclassrooms.com
85/150
nous pouvons vous conseiller le tutoriel AJAX du Site du Zro . Il a la particularit d'expliquer AJAX sans l'utilisation de
frameworks.
Nous n'avons fait qu'instancier un objet XHR, mais nous n'exploitons encore pas sa puissance. Autrement dit, nous n'avons
encore rien fait ! Voyons voir comment on va pouvoir s'y prendre, toujours l'aide de jQuery et de cette fameuse fonction
$.ajax().
www.openclassrooms.com
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.
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.
Notez ce sujet que le type GET est le type que jQuery prend par dfaut. Vous n'avez pas besoin de le spcifier lorsque
vous voulez faire une requte de type GET. Pour vous habituer utiliser le paramtre type et vous faire comprendre
qu'il est bien l, nous continuerons l'employer dans nos prochains exemples.
www.openclassrooms.com
87/150
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;
});
});
Avec ceci, du ct serveur, $_GET['utilisateur'] contiendra la valeur de la variable nom_user. C'est plutt simple.
});
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.
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.
www.openclassrooms.com
88/150
Code : JavaScript
$("#envoyer").click(function(){
POST
$.ajax({
url : 'send_mail.php',
type : 'POST', // Le type de la requte HTTP, ici devenu
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().
Votre requte HTTP est donc prte, et pour peu que votre script ct serveur soit prsent et fonctionnel, elle a toutes les
chances de marcher. Aprs avoir fait son boulot, le serveur nous renvoie quelque chose. Manque de bol, nous n'avons rien pour
grer le retour de $.ajax(). Les paramtres complete, success et error vont nous tre trs utiles !
});
L'argument statut est une chane de caractre automatiquement gnre par jQuery pour vous donner le statut de votre
requte.
www.openclassrooms.com
89/150
La fonction excute par error prend en charges trois arguments : le rsultat, le statut, et l'erreur. Vous connaissez le second
argument, c'est le mme que pour success, il ne nous sera pas utile. Le premier est un objet XHR renvoy par jQuery. Le
dernier est en revanche nettement plus intressant. C'est en fait une exception, vous pouvez ici placer une chane de caractre
afficher votre visiteur si l'appel AJAX n'a pas fonctionn.
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 !
},
www.openclassrooms.com
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.
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 !
www.openclassrooms.com
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.
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().
www.openclassrooms.com
92/150
La srialisation
La mthode serialize() de jQuery
Vous souhaitez envoyer les variables issues d'un formulaire HTML un script PHP en AJAX : c'est l'exemple typique de
l'utilisation de la fonction $.ajax(). Un problme va se poser lorsque vous devrez spcifier vos variables et leurs contenus :
vous devrez concatner dans une chane de caractres toutes ces variables, exactement comme on l'a vu...
Code : JavaScript
$.ajax({
/**
* Nous rutilisons $.ajax() pour illustrer l'exemple
*/
// Concentrons nous sur le paramtres data
data : 'valeur1=' + valeur1 + '&valeur2=' + valeur2 +
'&valeur3=' + valeur3,
});
Cela fonctionne, mais ce n'est franchement pas facile taper. Alors oui, si on n'a que quelques variables spcifier, c'est faisable,
mais si notre formulaire HTML est vraiment trs long cela devient vite un calvaire.
La solution ce problme, c'est la srialisation du formulaire. Elle est rendue possible grce la mthode serialize() de
jQuery. Son but est de transformer les champs d'un formulaire en chane de caractres avec les variables et leurs contenus
concatns.
Un exemple de srialisation
Voici le formulaire sur lequel nous souhaitons appliquer serialize().
Code : HTML
<!-- Formulaire HTML super simple srialiser -->
<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>
www.openclassrooms.com
93/150
//...
data : donnees,
//...
});
});
Et voil ! Votre formulaire est srialis... et cela fonctionne ! On vient de gagner un temps fou, pas vrai ?
Nous ne srialiserons pas les formulaires dans les prochains exemples de ce tutoriel. C'est juste une petite astuce que
nous vous donnons et qui fait gagner vraiment beaucoup de temps, surtout si le formulaire en question est gros.
Ce chapitre est charnire, assurez-vous de l'avoir compris et s'il le faut, lisez et relisez ces lignes. $.post() et $.get() sont
la base des appels AJAX en jQuery, si vous ne l'avez pas compris vous n'irez nulle part. Lisez la documentation sur
jQuery.ajax() ! Cela vous aidera sans aucun doute.
Vous savez lancer des requtes HTTP vers des scripts distants, c'est bien. Mais tout cela reste trs abstrait : nous n'avons
encore aucun script rel ct serveur pour traiter nos appels AJAX. Donnons donc une dimension bien plus concrte tout cela
en crant nos scripts ct serveur. Tout va se mettre en place ce moment-l ! Nous coderons dans le chapitre suivant un
systme de connexion trs basique en AJAX.
www.openclassrooms.com
94/150
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.
C'est trs basique, vous devriez comprendre tout ce qui est inscrit dans cette page web.
www.openclassrooms.com
95/150
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>
Un air de dj vu ? Normal, nous venons de voir a dans le prcdent chapitre. Rien de bien nouveau pour vous.
Agir ct serveur
Un script PHP
Ct serveur, nous allons devoir vrifier si les donnes ont bien t entres dans le formulaire HTML. Nous utilisons ici le
langage PHP, cela se gre trs bien avec quelques conditions. Voici un code que vous devriez tre capable de comprendre.
Nous allons utiliser le tableau $_POST pour effectuer nos vrifications. Cela marche exactement comme si vous aviez soumis
votre formulaire en HTML : rien ne change ! Des donnes sont bien passes en POST et sont prsentes dans la requte HTTP.
Nous pouvons y accder grce $_POST. La premire chose faire est de vrifier que les donnes nommes username et
password sont bien cres et ne sont pas vides.
Code : PHP
<?php
if( isset($_POST['username']) && isset($_POST['password']) ){
www.openclassrooms.com
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.
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
www.openclassrooms.com
97/150
n'a chang !
De retour ct client
Non, ce n'est pas fini !
Forcment, quel que soit le rsultat ct serveur, il faut afficher quelque chose au visiteur pour ne pas le laisser en plan. C'est ici
que nous allons grer le rsultat de notre appel AJAX grce aux attributs de $.post().
Vous rappelez-vous de la fonction que nous avions ajout $.post() ? Eh bien c'est l'heure de la mettre jour. On sait que
notre script PHP nous renvoie forcment deux chanes de caractres : success ou failed . On va donc simplement jouer du
ct jQuery avec quelques conditions... et devinez quoi, la valeur data a t remplie automatiquement par jQuery grce
l'affichage que nous avons fait en PHP !
Rajoutons un bloc div en HTML qui portera l'identifiant #resultat afin d'y ajouter un retour pour le visiteur.
Code : HTML
<!DOCTYPE html>
<html>
<head><!-- ... --></head>
<body>
<div id="resultat">
<!-- Nous allons afficher un retour en jQuery au visiteur ->
</div>
<form>
<!-- Le formulaire donn plus haut-->
</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'
});
});
www.openclassrooms.com
98/150
</script>
</body>
</html>
www.openclassrooms.com
99/150
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.
Nous voil avec dj trois vnements pour couter les principaux tats de notre requte AJAX. Voyons maintenant un cas
www.openclassrooms.com
100/150
d'utilisation concret, car nous pensons que l'utilit de ces outils reste encore a tre dmontre.
Lisez ce code, vous verrez, c'est trs simple comprendre finalement. Voil une utilisation concrte de ajaxStart().
Il existe galement un vnement ajaxComplete() que vous pourriez utiliser pour cacher nouveau le loader.
Ainsi, son affichage ne durera que la dure de la requte AJAX.
Nous avons maintenant pass en revue tout ce qu'il tait indispensable de connatre d'AJAX avec jQuery. Si vous tes intress
par les vnements AJAX, vous pouvez dcouvrir les 3 autres vnements AJAX restants dans la documentation , vous devriez
tre compltement capable de les utiliser par vous-mme ce stade.
Le chapitre suivant concerne une autre fonction AJAX de jQuery, mais pour tre franchement honnte, il n'est pas obligatoire de
le lire. Mais sait-on jamais, cela pourrait vous tre utile tt ou tard.
www.openclassrooms.com
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().
La mthode load()
AJAX plus simplement
Nous parlons ici toujours d'AJAX ; vous devez donc le deviner, la premire chose que load() va faire sera d'instancier un
objet XmlHttpRequest.
Son fonctionnement est en revanche beaucoup plus simple et basique que les fonctions reposant sur $.ajax(). En effet, le
but de load() va tre de rcuprer le contenu que vous allez lui spcifier en paramtre. La mthode va ensuite savoir l'injecter
toute seule dans le DOM. C'est l sa principale utilit, ds que vous devrez rcuprer un contenu qui ne ncessite pas forcment
une logique (appel une BDD, conditions...) qui se trouve sur le serveur et que vous devez l'ajouter votre DOM, vous devrez
immdiatement penser load().
Bon, nous devons vous avouer que cela n'arrive pas franchement tous les jours, mais cela peut toujours tre utile de savoir
qu'une telle mthode existe dans jQuery.
Et cela suffit ! Ce qui se trouve dans le fichier contenu.html est alors inject par jQuery dans le bloc div. Voil pourquoi
nous vous disions que load() se voulait vraiment plus simple et basique que les fonctions reposant sur $.ajax().
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.
www.openclassrooms.com
102/150
Vous pouvez tester ce genre de choses dans vos scripts, cela fonctionne. Ct serveur, les valeurs deviennent rcuprables dans
le tableau POST avec $_POST['login'] et $_POST['password'] comme nous l'avons vu dans les chapitres
prcdents. Le rle de load() tant d'injecter le retour dans l'lment cibl, vous n'avez vraiment rien d'autre faire ici.
Notre prfrence va nanmoins l'utilisation des fonctions $.get() et $.post() pour effectuer des appels AJAX
plus "complexes", nous vous conseillons donc de les utiliser, mme si load() se veut peut-tre plus simple
d'utilisation.
Vous connaissez maintenant cette autre fonction pour AJAX de jQuery, c'est super. Nous devons maintenant passer votre
prochain travail pratique, ralisons ensemble un tchat en AJAX !
www.openclassrooms.com
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.
Explications et pr-requis
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 .
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.
www.openclassrooms.com
104/150
C'est trs basique, comme d'habitude, vous devriez tre capable de comprendre tout cela.
C'est tout bon, crez cette table (nous utilisons MySQL) dans une base de donnes quelconque et vous aurez le mme schma
que nous.
www.openclassrooms.com
105/150
Voil un code basique en PHP. Rien ne vous empche de faire plus de vrifications, videmment, car on n'est jamais trop prudent.
Passons maintenant l'tape qui nous intresse !
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
});
}
});
www.openclassrooms.com
106/150
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
}
});
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.
'');
LIMIT 0,10');
www.openclassrooms.com
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.
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(){
www.openclassrooms.com
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
www.openclassrooms.com
109/150
Ajouter des vrifications ct client. Cela vous permettra de revoir en mme temps le TP sur le formulaire interactif !
Empcher les utilisateurs d'utiliser les mmes pseudos, vous utiliserez des sessions pour y arriver.
Un peu de BBcode, pourquoi pas ?
La possibilit d'entrer son email et/ou l'URL de son site dans le formulaire ?
Envoyer un email de notification aux utilisateurs du tchat chaque fois qu'un nouveau message y est post.
Embellir un peu le tchat avec du CSS.
...
Les possibilits sont infinies, c'est vous de voir. Vous pouvez galement dcider de construire des systmes totalement
diffrents, tant que cela vous fait pratiquer, croyez-nous, c'est bon prendre.
Vous venez de raliser votre premire mise en application concrte d'AJAX avec jQuery, nous n'avons dsormais plus grand
chose vous apprendre sur AJAX, vous de complter votre formation permanente par toujours plus de pratique !
www.openclassrooms.com
110/150
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.
Explorer la documentation
Une fois sur la main page de la documentation, vous devez vous demander o vous diriger. Plusieurs sections s'offrent vous :
vous pouvez commencer apprendre jQuery, aller consulter les supports externes comme les forums, ou encore vous orienter
vers des ressources externes. Ce qui nous intresse, c'est la liste et le mode d'emploi de chaque fonction offerte par le framework.
Pour trouver tout a, il suffit d'aller voir la jQuery API Reference , qui ordonne les diffrentes sections relatives aux mthodes
de jQuery.
Vous pouvez aussi cliquer ici.
www.openclassrooms.com
111/150
La forme de la mthode
Lorsque vous arrivez sur la page de prsentation et d'explication d'une mthode, vous pouvez constater une premire chose : on
vous prsente chaque forme que celle-ci peut prendre, notamment avec ses diffrents arguments. Prenons pour exemple la page
de la mthode css().
Vous pouvez voir sur l'exemple que la mthode peut avoir deux formes :
css( propertyName ) ;
et css( propertyName, value ).
Comme vous le savez dj, la premire forme permet de rcuprer la valeur d'une proprit, et la seconde permet de la
modifier.
En cliquant sur l'une ou sur l'autre, vous serez dirig vers les explications correspondantes ; profitez-en, on vous donne des
exemples chaque fois ! Et justement, nous allons voir comment se prsentent ces fameuses explications.
www.openclassrooms.com
112/150
Enfin, vous trouverez les explications dtailles, puis quelques exemples susceptibles de vous clairer, avec codes de test
l'appui.
Vous voyez, lire la documentation de jQuery se fait trs rapidement et trs simplement !
La documentation est un outil indispensable, quelque soit la technologie que vous utilisez. Avec jQuery, on a la chance d'avoir
une documentation complte et bien construite : profitez-en !
www.openclassrooms.com
113/150
Version du plugin
www.openclassrooms.com
114/150
Le dossier js/ contient les frameworks jQuery et jQuery UI ; leur inclusion pouvant se faire par des serveurs externes, nous ne
les utiliserons pas dans ce chapitre. Vous pouvez donc galement supprimer le dossier. De la mme manire, le dossier css/
nous indiffre, tant donn que son contenu est retrouvable dans development-bundle/themes/.
Au final, vous pouvez vous retrouver avec seulement le dossier development-bundle/, qui est le seul rellement
indispensable. Pour allger un peu ce dossier et s'y retrouver de manire plus efficace, vous pouvez supprimer les dossiers
demos/ et doc/, qui contiennent des informations retrouvables facilement sur le site officiel.
Inclusion du plugin
Comme vous vous en doutez srement, avant d'inclure jQuery UI, il faut galement inclure jQuery. En effet, c'est l'ordre logique
des choses : jQuery UI a besoin de jQuery pour fonctionner, ce dernier doit donc tre inclus en premier !
Rappelez-vous que les serveurs de Google permettent un gain de performance ; la firme propose, en plus de jQuery, le plugin
jQuery UI ! Si vous n'avez pas fait une composition d'interfaces utilisateur particulire, vous pouvez trs bien utiliser le fichier du
clbre moteur de recherche. Vous devrez galement inclure le fichier CSS relatif votre thme.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Votre page</title>
<link rel="stylesheet" href="jquery-ui/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>
www.openclassrooms.com
115/150
Les widgets
Les widgets, contrairement aux interactions, ont une fonction bien dfinie. Il doivent instancier quelque chose de prcis, tel
qu'une barre de progression ou une bote modale. Ils sont actuellement au nombre de huit :
Accordion, qui permet de raliser un menu en accordon (les sections sont rtractables) ;
Autocomplete, dont le rle est de mettre en place un systme d'auto-compltion (exemple sur le moteur Google) ;
Button, qui va transformer vos lments de formulaire afin de les rendre plus intuitifs et esthtiques ;
Datepicker, un widget permettant de crer un mini-calendrier dans un formulaire ;
Dialog, qui met en place une bote modale (type alert() personnalis) ;
Progressbar, une simple barre de progression ;
Slider, un gestionnaire de barres de rglage ;
et enfin Tabs, qui permet de mettre en place un systme d'onglets.
Encore une fois, il vous suffit d'instancier les mthodes correspondantes pour utiliser ces widgets. Nous vous redirigeons vers
la documentation pour plus de prcisions, avec exemples l'appui !
Voil pour cette petite prsentation de jQuery UI !
www.openclassrooms.com
116/150
Nous n'avons pas parl des effets additionnels du plugin, pour la simple et bonne raison qu'ils s'utilisent de la mme faon que
les effets natifs, tels que fadeIn()/fadeOut(). La documentation est vraiment bien faite et bien fournie, vous trouverez
tout ce dont vous avez besoin pour utiliser jQuery UI. Si vraiment vous souhaitez aller plus loin, nous vous encourageons aller
lire le tutoriel de jQuery UI sur le Site du Zro !
Vous pouvez ds prsent passer au chapitre suivant, qui prsentera le second plugin officiel : jQuery Mobile.
www.openclassrooms.com
117/150
Nous n'allons pas utiliser jQuery pour rien : le framework mobile intgre une compatibilit ahurissante des diffrentes plateformes
actuellement en vente. En voici un petit extrait pour vous faire comprendre :
Apple iOS 3.2-5.0
Android 2.1-2.3
Android 3.1
Android 4.0
Windows Phone 7-7.5
Blackberry 6.0
Blackberry 7
...
Vous pouvez retrouver la liste complte des systmes d'exploitation et des plateformes supportes par jQuery Mobile sur cette
page. Vous verrez d'ailleurs que trois groupes existent : le A, le B, et le C. Le premier dfinit les plateformes parfaitement bien
supportes ; le second, celles qui ne prennent pas en charge la navigation AJAX ; et le troisime, celles qui ne peuvent pas tre
dynamises correctement. La liste est vraiment trs courte dans le groupe C, ce qui montre bien qu'en utilisant ce framework,
vous pourrez presque tout couvrir !
118/150
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.
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.
Vous devez placer ce code au tout dbut de votre fichier index.php, avant mme le doctype.
Si vous le souhaitez, vous pouvez crer plus de variables pour couvrir plus de plateformes mobiles ; vous pouvez
d'ailleurs trouver la liste des user-agents sur cette page.
Inclusion du framework
Une fois la dtection du navigateur rgle, vous pouvez vous employer travailler avec jQuery Mobile. Il faut tout d'abord
www.openclassrooms.com
119/150
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>
Une fois toutes ces bases poses, on va pouvoir commencer faire quelque chose de beaucoup plus concret !
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">
<!-- header -->
</div>
<div data-role="content">
<!-- contenu -->
</div>
<div data-role="footer">
<!-- footer -->
</div>
</div>
www.openclassrooms.com
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.
Ce code donnera le thme a la page, mais l'en-tte et le pied de page auront le thme b . Vous pouvez trs bien raliser
votre propre thme grce au Themeroller.
www.openclassrooms.com
121/150
Action
tap
taphold
swipe
swipeleft
swiperight
Il existe galement orientationchange, qui va se dclencher lorsqu'on incline le tlphone (passage du mode portrait au
mode paysage et vice versa).
Vous pourrez travailler avec l'tat des pages, car il existe une foule d'vnements qui en sont dpendants. Par exemple, au
chargement d'une page, il est commun d'utiliser pageload. Vous pouvez retrouver la liste complte ici.
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
www.openclassrooms.com
122/150
Vous pouvez galement envoyer une requte AJAX au moyen d'un objet en second argument, comme avec
changePage().
Vous avez prsent les bases de la cration de version mobile ! Rien ne vous empche de pousser votre curiosit et d'aller lire la
trs bonne documentation au sujet de jQuery Mobile.
Nous en avons maintenant termin avec l'tude des plugins et frameworks officiels de la jQuery Foundation. Les chapitres
suivants viseront parfaire votre apprentissage avec la dcouverte de plugins trs clbres dans le monde du dveloppement de
jQuery !
www.openclassrooms.com
123/150
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.
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 !
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.
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 :
www.openclassrooms.com
124/150
Vous pouvez constater qu'un groupe de sprites est considr comme le parent de ceux-ci : si l'on dplace le groupe, les images
qu'il contient seront dplaces ; si on le supprime, les sprites enfants seront galement supprims. On retrouve donc ici le
principe de la parent, et il est possible d'imbriquer des groupes dans des groupes, ce qui offre un vaste contrle sur votre jeu !
Et concrtement, comment accder tous ces lments ?
Effectivement, la thorie est passionnante, mais vous ne savez toujours pas ce que symbolisent ces concepts. La rponse est
pourtant d'une simplicit enfantine ou presque : jQuery travaillant avec le DOM, gameQuery dfinit chaque sprite et chaque
groupe comme des lments HTML ! Ils seront donc accessibles trs simplement, grce aux slecteurs, ce qui nous permettra
d'agir dessus avec des mthodes spcifiques.
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
});
www.openclassrooms.com
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 !
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"
www.openclassrooms.com
126/150
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"
});
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.
www.openclassrooms.com
127/150
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
parseInt() permet de s'assurer que la valeur est de type int (nombre entier).
Vous devriez noter un problme si vous essayez le code ci-dessus. En effet, une fois que les images sont hors du playground ,
on ne voit plus rien ! Il faut donc rinitialiser la position horizontale si l'image se trouve entirement hors du game screen :
Code : JavaScript
$.playground()
.registerCallback(function(){
var left = parseInt( $("#image1").css("left") ) - 1; // l'image de
fond se dplace lentement, on la dplace donc de 1 pixel chaque
intervalle
if(left < 0 - w) left = w;
$("#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 !
128/150
Que de chemin dj parcouru ! Vous connaissez dsormais les bases fondamentales de gameQuery. Seulement, il reste encore
quelques mthodes apprendre absolument, car on ne peut pas dire que ce soit trs dynamique pour le moment. L'animation que
nous venons de raliser est correcte, mais un peu bricole, ce n'est pas du tout comme cela que l'on doit procder pour animer
des mouvements de personnage, par exemple.
Les images d'arrire-plan sont en gnral statiques, il suffit donc de les faire dfiler en CSS. Un personnage est, comme nous
l'avons vu, bas le plus souvent sur une spritesheet, qui va dfinir les diffrentes positions constituant un mouvement anim.
C'est partir de cette spritesheet que le personnage va pouvoir tre cr, et c'est galement elle qui sera anime, grce une
mthode spcifique.
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
});
www.openclassrooms.com
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. Vous allez donc devoir utiliser la mthode que nous avons dj vue : addSprite().
Code : JavaScript
// ...
// nous venons d'instancier une nouvelle animation
$.playground()
.addSprite('repos', {
animation : repos, // on lance l'animation
width : 40,
height : 50 // on dfinit les dimensions de notre
personnage
});
Il ne vous reste plus qu' lancer le jeu et... miracle ! Notre personnage s'anime !
Contrler le lancement
Tout cela, c'est trs bien, seulement... L'animation s'excute ds la chargement de la page. Or, dans un jeu, le personnage ne
bouge que lorsqu'on lui ordonne, gnralement. Il va donc nous falloir contrler le lancement de nos animations, au moyen de la
mthode setAnimation(). Elle est trs simple utiliser : il suffit de la lancer sur le sprite correspondant, que l'on a cr dans
le playground , en lui indiquant en argument l'animation qu'elle doit charger. Exemple :
Code : JavaScript
// nouvelle instance
var repos = new $.gameQuery.Animation({
imageURL : 'repos.png',
numberOfFrame : 4,
delta : 40,
rate : 100,
type : $.gameQuery.ANIMATION_HORIZONTAL
});
// on ajoute un sprite au playground, sans lancer d'animation
$.playground()
.addSprite('repos', {
width : 40,
height : 50
});
// puis on lance l'animation correspondante au moyen de la mthode
adquate
$('#repos').setAnimation(repos);
// enfin, on oublie pas de lancer le jeu
$.playground().startGame();
Vous aurez ici le mme rsultat que prcdemment... sauf que vous pouvez trs bien placer le lancement de l'animation
dans un vnement ! Au dclenchement de celui-ci, l'animation se lancera.
www.openclassrooms.com
130/150
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.
www.openclassrooms.com
131/150
Pour garder un code lisible, partitionnez votre code : faites un fichier par classe !
});
Retrouvez la liste des codes des touches du clavier sur cette page.
www.openclassrooms.com
132/150
www.openclassrooms.com
133/150
Vous pouvez galement spcifier le moment o le cookie expirera, et galement le domaine o il est accessible, grce un objet et
des proprits :
Code : JavaScript
// cr un cookie tutoriel de valeur jQuery , qui expirera
dans 7 jours et accessible partout sur le site
$.cookie('tutoriel', 'jQuery', {
expire : 7,
path : '/'
});
Il est galement possible d'utiliser un protocole HTTPS (scuris) dans la transmission de cookie, avec la proprit secure qu'il
suffit de passer true. a peut tre intressant si vous voulez protger des donnes utilisateur.
Pour accder un cookie, vous avez juste indiquer son nom pour rcuprer sa valeur :
Code : JavaScript
var tutoriel = $.cookie('tutoriel'); // rcupre la valeur du
cookie tutoriel
Pour le supprimer, il suffit de lui donner une valeur nulle, comme en PHP par exemple :
Code : JavaScript
$.cookie('tutoriel', null); // le cookie tutoriel ne possde
plus aucune valeur, il est comme supprim
Utiliser jStorage
www.openclassrooms.com
134/150
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.
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.
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
www.openclassrooms.com
135/150
Si vous souhaitez en savoir plus sur le LocalStorage, nous vous invitons lire cet excellent article.
Code : JavaScript
var $canvas = $('canvas'); // on accde au canvas
jQuery apporte ici une dimension pratique ; en JavaScript, il est ncessaire d'initialiser un contexte 2D, par exemple, pour
commencer dessiner. Avec jCanvas, rien faire ! Vous pouvez en plus profiter de tous les atouts du framework, comme le
chanage de mthode..
Code : JavaScript
var $canvas = $('canvas');
$canvas
.drawArc()
.drawLine();
Le plugin dispose d'une documentation trs bien ralise, disponible cette adresse. Vous y trouverez tout ce que vous voulez,
de la liste des diffrentes mthodes l'extension du plugin lui-mme !
Et voil, vous tes maintenant lanc dans le monde fabuleux des plugins jQuery ! Cest vous de voler de vos propres ailes
prsent, et de chercher les plugins qu'il vous faut sur la toile. Voici tout de mme quelques bonnes adresses aller consulter,
vous pourriez y trouver de vritables perles :
jQuery Plugins, un site entirement consacr aux plugins de jQuery ;
jQuery Rain, un site dans la mme veine que le prcdent ;
La Ferme du Web, un blog qui se tient la pointe des technologies rcentes.
Il en existe bien d'autres, mais nous comptons sur vous pour les trouver.
www.openclassrooms.com
136/150
tendre le framework
Une dernire chose reste floue : tendre jQuery. Comme tous les frameworks modernes, jQuery intgre un systme qui permet
de lui ajouter des fonctionnalits. C'est comme cela qu'on cr des plugins, par exemple, mais il existe d'autres possibilits moins
connues, et pourtant pratiques.
Vous allez apprendre dans ce chapitre utiliser la mthode extend().
La fonction d'extension
Lorsque vous rajoutez des fonctionnalits jQuery, quelles qu'elles soient, on dit que vous tendez le framework. C'est le
principe des plugins : on tend jQuery pour lui attribuer de nouvelles mthodes, que l'on ne pouvait pas utiliser avant. Eh bien,
pour rajouter de nouvelles mthodes d'volution d'animation, vous allez devoir, justement, tendre jQuery au moyen de la
mthode extend().
Elle fonctionne avec deux arguments le plus souvent :
la cible, qui est l'objet tendre (nous verrons cela plus en dtails ensuite) ;
un objet, qui intgre et dfinit les options additionnelles.
Le premier argument, ce que nous appelons couramment la cible dans ce cas, doit tre spcifi pour indiquer jQuery quelle
fonctionnalit va se voir ajouter des options. Il suffit d'indiquer un objet, tel que jQuery.easing ou jQuery.cssHooks.
Le second objet va contenir toutes les nouvelles options ajouter.
Vous pourrez trouver toutes les valeurs possibles sur la page de prsentation du plugin, ou sur la page de tests de jQuery UI.
La partie suivante est assez technique, et facultative. Si vous n'aimez pas trop les maths, vous pouvez passer
directement au Q.C.M. au bas de la page.
www.openclassrooms.com
137/150
Fonctionnement de l'volution
Comme le mot volution est plutt vague, nous allons plutt parler, dsormais, d'acclration : cela sera plus simple la
comprhension. Ci-dessus, vous avez eu un aperu d'un ajout d'option l'objet jQuery.easing. On met en fait en place une
fonction anonyme qui va se charger de retourner une certaine valeur.
Cette valeur, sachez qu'elle reprsente justement l'acclration de votre animation. Elle doit tre obligatoirement un nombre
compris dans l'intervalle [0;1], c'est donc un nombre virgule (float). Pour la calculer, vous devez utiliser les arguments suivants :
x, qui reprsente le temps actuellement coul, de valeur comprise entre 0 et 1 ;
t, qui fait la mme chose que x, mais avec une valeur en millisecondes ;
d, qui est la dure totale de l'animation (que vous avez donc donne dans avec la proprit duration) ;
b, qui est gal 0 ;
c, qui est gal 1.
Une fois cette valeur en poche, jQuery va utiliser une quation qui va lui permettre de dterminer le coefficient d'volution d'une
animation. Pour les plus curieux d'entre vous, cette quation est la suivante :
, o est la valeur de
dpart de la proprit anime, la valeur calcule par votre nouvelle option, et la valeur de fin de la proprit.
Vous n'avez plus qu' vous casser la tte sur la valeur de retour !
Sachez tout de mme que ce n'est pas trs utile de faire cela,
le plus souvent on se contentera des mthodes d'acclration mises disposition par jQuery et ses complments.
Seulement, si vous devez utiliser cette mthode plusieurs fois dans un code dj consquent, cela peut vite devenir trs
www.openclassrooms.com
138/150
redondant et peu ergonomique, ce qui est l'antithse du principe de jQuery. Il vous faudra alors dfinir un nouveau slecteur.
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
www.openclassrooms.com
139/150
}
} );
$('element').maMethode('Bonjour !'); // affichera une alerte
contenant le message Bonjour !
L'avantage de cette mthode d'extension est qu'il est possible de dfinir plusieurs mthodes la suite. Si vos fonctions ne sont
pas trs consquentes, ce n'est pas un problme, mais que se passera-t-il si vous avez un code de plusieurs milliers de lignes ?
Votre fichier sera illisible, et vous vous perdrez dans la masse. C'est pourquoi on recommande de faire un fichier par plugin, et
d'utiliser une mthode d'extension plus adapte dans ce cas prcis.
Vous pouvez trs bien utiliser l'alias $, mais veillez ne pas entrer en conflit avec d'autres frameworks, comme nous
l'avons vu au dbut du tutoriel.
La subtilit dans la cration d'un plugin, c'est que pour accder l'lment courant (celui qui est actuellement cibl et sur lequel
on lance la mthode), on ne pourra pas utiliser l'objet $(this), mais seulement this, ce qui est diffrent : le premier reprsente
l'objet jQuery courant, alors que le second dsigne l'lment courant. Exemple :
Code : JavaScript
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');
};
www.openclassrooms.com
140/150
$('element').maMethode({
couleur : 'red'
}); // on peut alors appeler la nouvelle mthode avec un nouveau
paramtre sur un lment !
$('element').maMethode({
couleur : 'red'
}); // on peut alors appeler la nouvelle mthode avec un nouveau
paramtre sur un lment !
Vous connaissez maintenant tout ce qu'il y a savoir sur la cration d'un plugin jQuery.
Si jQuery rpond 99% de nos attentes, il se peut que, parfois, vous cherchiez quelque chose qu'il n'intgre pas. Pas de soucis !
Vous pouvez trs bien le crer vous-mme, et le rajouter jQuery !
tendre le framework se fait de plus en plus sur la toile, et
www.openclassrooms.com
141/150
www.openclassrooms.com
142/150
Mthodes de base
chaque utilisation de jQuery, vous devez vous assurer de plusieurs choses : que vous avez charg le framework, mais aussi
que le DOM s'est correctement cr.
CDN
Lien
Code : HTML
jQuery
<script src="http://code.jquery.com/jquery.min.js"></script>
Code : HTML
Google
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Mthode
Explication
$(function());
Les slecteurs
Indispensables au ciblage des lments de la page, les slecteurs sont une part incontournable de jQuery :
Slecteur CSS
Explication
$('*');
$('element');
www.openclassrooms.com
143/150
$('#element');
$('.element');
$('parent enfant');
$('element, element2'); Cible d'abord les premiers lment trouvs, puis les seconds, etc.
$('parent > enfant');
$('frere + element');
$('frere ~ element');
Explication
$('element[attribut]');
$('element[attribut="valeur"]');
$('element[attribut!="valeur"]');
$('element[attribut*="valeur"]');
$('element[attribut1][attribut2][attributN]');
Filtres
Explication
$(':animated');
$(':eq(N)');
$(':even');
$(':odd');
$(':first');
$(':last');
$(':focus');
$(':header');
Cible tous les lments de type header (<h1>, <h2>, <h3>, etc).
Explication
$(':input');
$(':button');
$(':checkbox');
$(':checked');
$(':file');
$(':password');
$(':radio');
$(':submit');
$(':text');
Les vnements
www.openclassrooms.com
144/150
Utilisez les vnements pour dclencher une fonction sur l'action de l'utilisateur. jQuery prend en charge beaucoup
d'vnements, profitez-en !
Gestionnaires d'vnements
Explication
on()
off()
trigger()
Simule un vnement.
vnement du clavier
Explication
keydown()
keyup()
keypress()
vnement de la souris
Explication
click()
Se dclenche au clic.
dblclick()
Se dclenche au double-clic.
hover()
mousedown()
mouseup()
mouseenter()
mouseleave()
mousemove()
toggle()
vnement AJAX
ajaxStart()
Explication
Se dclenche au dbut d'une requte AJAX.
ajaxError()
Manipulation du CSS
Modifier le style d'une page la vole est une possibilit rendue trs simple par jQuery, notamment grce sa mthode css()
trs puissante. Il existe nanmoins d'autres mthodes parfois plus adaptes selon les cas.
Mthode
Explication
css()
height()
width()
innerHeight()
Rcupre la hauteur de l'lment cibl en prenant en compte ses marges intrieures mais pas les
bordures.
innerWidth()
Rcupre la largeur de l'lment cibl en prenant en compte ses marges intrieures mais pas les bordures.
outerHeight()
Rcupre la hauteur de l'lment cibl en prenant en compte ses marges intrieures, extrieures, et ses
bordures.
www.openclassrooms.com
145/150
outerWidth()
Rcupre la largeur de l'lment cibl en prenant en compte ses marges intrieures, extrieures, et ses
bordures.
offset()
position()
scrollTop()
scrollLeft()
Les effets
Au-del du style CSS se situe l'animation, rendue possible grce bon nombre de mthode dont la plus clbre est sans doute
animate().
Mthode
Explication
animate()
Anime une ou plusieurs proprit(s) CSS, l'aide d'arguments tels que la dure ou l'acclration de
l'animation.
hide()
show()
fadeOut()
Fait disparatre un lment (qui aura la proprit display:none) avec un effet de fondu.
fadeIn()
slideUp()
Les attributs
Ces mthodes permettent d'accder aux attributs des lments, et de les manipuler.
Mthode
Explication
attr()
removeAttr()
addClass()
Mthodes de parcours
Cette section rpertorie les mthodes permettant de parcourir l'arbre DOM.
Mthode
find()
Explication
Permet de trouver un enfant particulier.
parents()
each()
Manipulation du HTML
Ici se trouvent les mthodes permettant de modifier la structure HTML de la page.
Mthode
Explication
html()
text()
val()
append()
prepend()
www.openclassrooms.com
146/150
Mme utilit que append().
after()
clone()
empty()
Vide un lment.
remove()
Supprime un lment.
wrap()
Enveloppe un lment.
Mthodes AJAX
Enfin, vous trouverez ici les principales fonctions relatives aux requtes asynchrones d'AJAX.
Mthode
Explication
$.ajax()
$.post()
$.get()
load()
www.openclassrooms.com
147/150
Vous savez, cette chelle-l, cela dpend un peu des gots et des couleurs, certaines personnes sont fans de MooTools et
n'aiment pas du tout jQuery, pour d'autres c'est l'inverse. Pour notre part, nous avons simplement appris jQuery un beau jour et
nous avons t immdiatement sduits par ses possibilits. Depuis, nous ne l'avons plus laiss.
Du ct licence
Les deux frameworks sont crs autour de la philosophie de l'open-source. Les deux frameworks sont ainsi distribus sous une
licence libre trs permissive, la licence MIT. Vous tes donc libre de rcuprer le code source du framework, d'y appliquer vos
propres modifications, et pourquoi pas de les redistribuer la communaut. C'est de cette manire que ces deux projets sont
devenus ce qu'ils sont : les deux frameworks JavaScript les plus utiliss au monde.
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"
www.openclassrooms.com
148/150
Voil, avez ici un champ de formulaire, et en tapant du texte l'intrieur, celui-ci s'ajoutera automatiquement la variable nom
situe dans le titre <h1>.
Si vous tes curieux de comprendre comment ce code fonctionne, pas de panique, AngularJS possde son propre site
officiel, et il est plutt bien document.
Le framework Dojo
Le dernier framework que nous nous devons de vous prsenter ici se nomme Dojo. Ce
framework Javascript est notamment distribu sous licence BSD, une autre licence libre.
Il est franchement trs utilis et dispose d'atouts qui font de lui un concurrent de choix
jQuery pour dvelopper des applications web plus facilement.
Le projet est trs suivi, et sa dernire mise jour date de janvier 2012. Si Dojo a
longtemps souffert d'un manque de documentation, ce problme a t rsolu il y a
www.openclassrooms.com
149/150
www.openclassrooms.com