web dyna j query

Un site webdynamique avec

jQuery !Par Nassoub

et Sainior

www.siteduzero.com

Licence Creative Commons BY-NC-SA 2.0Dernire mise jour le 22/05/2012

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

10Le choix du navigateur web ....................................................................................................................................................................................... 11Un incontournable : Firebug pour Firefox ! ................................................................................................................................................................ 11Ajoutez Firebug votre navigateur Firefox ! .............................................................................................................................................................. 11Utiliser la bote outils Firebug ! ............................................................................................................................................................................... 13Un diteur de texte efficace ....................................................................................................................................................................................... 13Un diteur de texte performant et efficace ................................................................................................................................................................

15Rappels gnraux sur JavaScript ................................................................................................................................... 16O et quand utiliser JavaScript ? .............................................................................................................................................................................. 16O placer son code JavaScript ? .............................................................................................................................................................................. 16Quand et comment l'utiliser ? .................................................................................................................................................................................... 17Variables et fonctions ................................................................................................................................................................................................ 17De la dclaration des variables ................................................................................................................................................................................. 17Fonctions et arguments .............................................................................................................................................................................................

18Partie 2 : Les bases du framework ! .................................................................................................. 19Vos premiers pas avec jQuery ! ...................................................................................................................................... 19Inclure jQuery dans vos pages .................................................................................................................................................................................. 19Deux mthodes pour inclure jQuery dans vos pages web ........................................................................................................................................ 21La fonction de base : jQuery() ................................................................................................................................................................................... 21Une fonction gnrique : jQuery() ou $() ................................................................................................................................................................... 24viter le conflit ........................................................................................................................................................................................................... 24Le principe de fonctionnement ..................................................................................................................................................................................

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

30jQuery et les vnements ............................................................................................................................................... 31Un vnement, des vnements... ........................................................................................................................................................................... 31C'est quoi un vnement ? ........................................................................................................................................................................................ 32Quelques vnements incontournables .................................................................................................................................................................... 32Dclenchement d'vnements .................................................................................................................................................................................. 33Le dclenchement virtuel .......................................................................................................................................................................................... 33Annuler le comportement d'un lment par dfaut ................................................................................................................................................... 34Les gestionnaires d'vnements ............................................................................................................................................................................... 34Rappels ..................................................................................................................................................................................................................... 34L'coute en jQuery .................................................................................................................................................................................................... 35La dlgation d'vnements ..................................................................................................................................................................................... 36Les espaces de noms ............................................................................................................................................................................................... 36La suppression en jQuery .........................................................................................................................................................................................

37Manipuler le code CSS avec jQuery ............................................................................................................................... 38Une mthode puissante : css() ................................................................................................................................................................................. 38Rcuprer la valeur d'une proprit .......................................................................................................................................................................... 38Dfinition de proprits CSS ..................................................................................................................................................................................... 39Positionner des lments .......................................................................................................................................................................................... 39Modifier la position d'un lment ............................................................................................................................................................................... 39Grer les dimensions ................................................................................................................................................................................................

41TP : le formulaire interactif .............................................................................................................................................. 41Explications et pr-requis .......................................................................................................................................................................................... 41Objectif concret ......................................................................................................................................................................................................... 41Mthodes requises .................................................................................................................................................................................................... 42Correction .................................................................................................................................................................................................................. 43Explications du code jQuery ...................................................................................................................................................................................... 46Amliorations ............................................................................................................................................................................................................

Sommaire 1/60

www.siteduzero.com

47Partie 3 : Manipulation du DOM et animations .................................................................................. 47Des effets sur votre site avec jQuery ! ............................................................................................................................ 47Animez vos lments ................................................................................................................................................................................................ 47Des animations personnalises ................................................................................................................................................................................ 48Deux arguments supplmentaires : step et queue .................................................................................................................................................... 49Dfinition directe d'attributs ....................................................................................................................................................................................... 50Astuces et cas spciaux ............................................................................................................................................................................................ 51Les effets natifs ......................................................................................................................................................................................................... 51Le retour des trois tats ............................................................................................................................................................................................. 52Des mthodes plus esthtiques ................................................................................................................................................................................ 53Dclencheur d'vnement ......................................................................................................................................................................................... 53Reprenez le contrle des effets ................................................................................................................................................................................. 53Le concept de file d'attente ....................................................................................................................................................................................... 55Arrter les animations ...............................................................................................................................................................................................

56Manier les attributs .......................................................................................................................................................... 57Gestion gnrale des attributs .................................................................................................................................................................................. 57Bref rappel sur les attributs ....................................................................................................................................................................................... 57Rcuprer des valeurs .............................................................................................................................................................................................. 57(Re)dfinir un attribut ................................................................................................................................................................................................. 58Grer les classes proprement ................................................................................................................................................................................... 58Ajouter une classe ..................................................................................................................................................................................................... 59Supprimer une classe ............................................................................................................................................................................................... 59Prsence d'une classe .............................................................................................................................................................................................. 59Switcher une classe ..................................................................................................................................................................................................

Sommaire 2/60

www.siteduzero.com

Un site web dynamique avec jQuery !

Par Nassoub et Sainior

Mise jour : 21/05/2012Difficult : Facile Dure d'tude : 1 mois

5 201 visites depuis 7 jours, class 38/784Bien le bonjour vous !

JavaScript est un langage devenu incontournable en l'espace de quelques annes, principalement dans le paysage du web. Etpour cause ! C'est une technologie complte, qui regroupe un nombre impressionnant d'outils permettant de dynamiser vospages web et de leur donner une toute autre dimension. Comme toutes les grandes technologies, JavaScript a une grandecommunaut. Et comme toutes les grandes communauts, celle de JavaScript a vite ressenti le besoin d'amliorer lespossibilits du langage, notamment par des frameworks. jQuery est l'un d'eux .

jQuery, crivez moins, faites plus.La devise de jQuery rsume elle seule l'impact que cet outil que vous apprendrez aujourd'hui, aura sur votre manire de coderde demain. Vous crirez moins de code JavaScript, mais pour toujours en faire plus. C'est ce besoin que jQuery cherche rpondre depuis 2006, et vous constaterez au cours de ce tutoriel que force est d'admettre qu'il y parvient formidablement bien.

jQuery est le framework JavaScript le plus utilis de tous : mme le Site du Zro en fait usage ! Complet, puissant, lgant...beaucoup sont ses points forts, et rares sont ses points faibles. L'attrait pour cet outil est immense. Seulement voil : commentse former cette technologie, en France, o la documentation de qualit se fait rare ? Comment aborder jQuery lorsque l'onest dbutant ? C'est ces problmatiques que nous allons chercher rpondre ensemble par le biais de ce tutoriel. Si vous nesavez pas ce qu'est jQuery ou ne savez pas ce qu'est un framework ou une librairie, ne fuyez pas ! Comme l'accoutume, nouspartirons de Zro.

Quelques prrequis nous semblent quand mme indispensables pour aborder ce cours dans les meilleures conditions.

Les prrequis pour suivre ce cours :

Matriser HTML. (mise niveau)De bonnes bases en CSS. (mise niveau)Des bases solides en JavaScript. (mise niveau)Matriser un langage server-side comme PHP est un plus indniable. Cependant, cela ne sera ncessaire que lorsquenous aborderons AJAX. (mise niveau PHP)

Un site web dynamique avec jQuery ! 3/60

www.siteduzero.com

Les normes antrieures HTML5 et CSS3 peuvent tre utilises. Les codes donns au cours de ce tutoriel respecterontnanmoins les dernires versions des deux standards.

Un site web dynamique avec jQuery ! 4/60

www.siteduzero.com

Partie 1 : Introduction jQuery

Nous sommes heureux de voir que nous avons pu vous convaincre d'aborder avec nous l'apprentissage du framework jQuery.Vous allez voir, vous ne le regretterez pas. Seulement... tes-vous sr de savoir ce qu'est un framework ? Ou encore mieux, tes-vous sr de savoir ce qu'est jQuery ? Nous sommes sur le Site du Zro, alors partons de zro en rpondant ces premiresquestions dans cette partie introductive.

Une Introduction jQuery , pas mieux pour introduire un tutoriel jQuery, pas vrai ?

Mme si vous tes aux premiers abords peu intress par l'apprentissage de jQuery, nous vous conseillons quandmme de lire ces premiers chapitres ; ils vous donneront une vue d'ensemble de ce qui sera tudi dans ce cours. Et quisait ? Peut-tre que cela vous fera revoir votre avis sur la question ?

jQuery : l'histoire d'un framework !Pour bien nous situer dans cet univers de dveloppement web, il est bon decontextualiser un peu la chose. C'est galement le choix que nous souhaitonsfaire pour ce tutoriel.

Avant de chercher aborder jQuery, commenons dj par poser les bases de laphilosophie du framework dans votre tte. Pas de code ici, juste de l'histoire etdes rponses aux questions basiques qui vous trottent dans la tte.

Vous saurez notamment la fin de ce chapire ce qu'est jQuery, qui l'utilise, quoisert-il... bref ! Une mise niveau gnrale pour ceux qui souhaitent apprendrecette technologie, reste trop longtemps hors de porte des Zros.

Tchons de rpondre dans ce premier chapitre toutes ces questions. Voustes prts ? C'est maintenant que cela commence !

Mais... c'est quoi jQuery ?Pour bien commencer introduire jQuery, commenons donc par le dfinir, ce sera dj une bonne chose de faite, vous nepensez pas ?

jQuery, un framework JavaScript

Vous le savez certainement, vos pages web sont composes de beaucoup de technologies diffrentes.

Comme si ce n'tait pas assez compliqu comme cela, ces satans informaticiens ont eu en plus la bonne ide de nous compliquerencore plus la tche, en faisant en sorte que ces technologies puissent interagir entre elles.Parmi ces technologies qui font le web, on retrouve les standards HTML(5) et CSS(3) mais aussi des langages plus "volus"qui permettent de dynamiser les pages web. L'un d'eux, le plus connu et le plus utilis, est JavaScript.

Un logo de JavaScript

Partie 1 : Introduction jQuery 5/60

www.siteduzero.com

JavaScript ou... jQuery ?

JavaScript est un excellent langage, qui a su au fil des annes s'imposer comme une technologie vraiment incontournable dans leweb.Le nombre de sites qui utilisent dsormais JavaScript est tout simplement gigantesque. La cause ? L'avnement du web 2.0, unweb communautaire o les Webmasters cherchent faire interagir toujours plus l'utilisateur avec le site. JavaScript est unlangage tout indiqu pour rpondre ce besoin, expliquant ainsi en partie son succs.

Un beau paysage pour JavaScript... seulement voil, comme on dit : on n'arrte pas le progrs .

Alors trs rapidement, ses utilisateurs ont voulu faire voluer JavaScript, le rendre toujours meilleur. On a voulu que le langagepuisse faire toujours plus de choses, toujours plus proprement et toujours plus simplement.

C'est dans cet esprit que la communaut de JavaScript a dvelopp des frameworks pour le langage, des "cadres de travail".L'un d'eux est le plus utilis de tous, celui que l'on retrouve un peu partout sur le web. Et c'est aussi celui que l'on va tudier toutau long de ce cours : jQuery !

jQuery, un framework JavaScript

Ci-contre, vous pouvez voir l'un des logos de jQuery o est indique sa devise : "jQuery.Write Less, Do More". Cette devise, on peut la traduire tout btement par : "jQuery. Ecrivezmoins, faites plus".

Cela rsume vraiment ce que jQuery va vous permettre de faire. En l'utilisant dans votre codeJavaScript : vous crirez moins de code, et vous serez plus productif.

Cela parat flou, et nous vous comprenons. Vous avez encore du mal vous reprsenter cequ'est jQuery objectivement. Dans notre ternelle bont, nous allons vous donner unevision plus physique de la chose : jQuery n'est en fait qu'un seul et unique fichierJavaScript, tlchargeable sur le web et qui porte l'extension .js !

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

Euh... et c'est ce petit truc de rien du tout qui ncessite un cours entier ? Elle me parat pas franchement crdible toutecette histoire...

Et pourtant !

jQuery n'est pas n'importe quel fichier JavaScript. C'est une norme bibliothque de fonctions JavaScript qui ont t crites etregroupes 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'autantd'engouement. C'est normal. Cliquez plutt sur ce lien pour voir le code de jQuery dans sa version 1.7 . Plutt impressionnantnon ? 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 nombrede fonctions qui sont contenues dans ce simple fichier est vraiment grand. Et ces outils n'ont qu'un seul but : vous permettred'crire moins de code JavaScript, pour tre toujours plus productif et efficace dans vos dveloppements !

jQuery, un framework ou une librairie ?

Pour cette petite question de vocabulaire, nous allons vous apporter un lment de rponse. Vous avez trs certainement aucours de vos visites sur le web entendu parler du mot librairie.


www.siteduzero.com

Le cas le plus simple : une librairieUne librairie, en programmation, est une bibliothque de fonctions.Elles sont composes gnralement par d'autres personnes qui les ont mises disposition de tous, pour gagner du temps dans ledveloppement. Elles sont souvent constitues d'un ou de plusieurs fichiers qui contiennent les fonctions. Tout ce que leprogrammeur a faire, c'est d'inclure la librairie dans son code. Il peut ainsi commencer utiliser les fonctions qui s'y trouventpour avancer dans son code.

Mais alors, jQuery c'est exactement a non ? Pourquoi est-ce que vous parlez de frameworks depuis tout l'heure ?

Il existe en fait une petite diffrence toute simple entre framework et librairie, et cette diffrence, nous nous proposons de vousl'expliquer ds maintenant pour mieux comprendre l'impact que jQuery va avoir sur votre manire de coder.

Un cas plus complexe : un frameworkUn framework, c'est quelque chose de dj plus complexe qu'une librairie. Les frameworks sont gnralement beaucoup plusmassifs que les librairies, et pour cause : ils proposent plus de choses.En fait, lorsque l'on code avec une librairie, ce sont les fonctions qui la compose qui vont s'intgrer notre code. Avec unframework, ce n'est pas du tout pareil.

Le framework pose les bases d'une application, et il va nous "forcer" programmer selon les codes qu'il nous impose. Ainsi, onpeut dire que c'est notre manire de coder qui s'intgre la vision du framework. Pour jQuery, c'est exactement a.

jQuery est plus qu'une simple librairie mme s'il en a les traits majeurs, il va vraiment vous faire coder en JavaScript d'unenouvelle manire. Et ceci tel point qu'il est tout fait possible de considrer jQuery comme un langage un peu part, puisqu'ils'agit vraiment d'une redcouverte totale de JavaScript. Lorsque vous commencerez travailler vraiment avec jQuery, vouscomprendrez rellement tout le sens de cette phrase.

Rappelez vous qu'il s'agit d'un tutoriel qui a t pens pour les dbutants, alors ne vous inquitez pas. Pour peu quevous 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 servirjQuery concrtement dans notre site web.

A quoi va nous servir jQuery ?jQuery est un framework qui va nous simplifier la vie d'une manire gnrale, et cela va passer par plusieurs fronts.

Nous allons lister quelques petites choses qui feront que demain, cet outil que vous allez apprendre utiliser vous seratotalement indispensable pour presque tous vos dveloppements en JavaScript.

Les points forts de jQuery

Si vous tes un habitu du JavaScript, vous savez que chaque navigateur web dispose d'un moteur JavaScript qui lui est propre.Ce moteur, c'est lui qui va "parser" votre code JavaScript, et faire agir le navigateur en fonction de celui-ci.

Par exemple, le moteur JavaScript qui quipe les navigateurs Chrome et Safari intgr au moteur de rendu WebKits'appelle SquirrelFish. Il gre le JavaScript d'une manire diffrente du moteur Gecko de Firefox par exemple.

jQuery et la compatibilit

Concrtement, la compatibilit inter-navigateurs signifie qu'un code JavaScript qui fonctionne sur unnavigateur web peut ne pas fonctionner sur un autre. Et bien devinez quoi ? jQuery uniformise letout ! Au final, un code JavaScript respectant les normes imposes par jQuery sera compatible surtous les navigateurs web.

Un gain de temps et d'nergie plus quapprciable, vous permettant de vous focaliser vraiment sur lecur de votre code, plutt que sur des questions de compatibilit entre navigateurs.


www.siteduzero.com

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 vritablecalvaire, 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 devous fournir des outils pour grer au mieux votre requte ! AJAX devient donctonnamment facile et rapide utiliser.

jQuery et les animations

L'un des lments incontournables de jQuery et qui a fait son succs est incontestablement lapossibilit de crer des effets sur sa page. Envie de faire disparatre un bloc avec un effet defondu, ou bien faire trembler un bouton submit sur votre page web ? Pas de problme ! jQuery lefait pour vous.

Vous verrez que la masse de fonctions que jQuery vous proposera afin de crer des effets sur vospages web sera tout simplement impressionnante. Vous verrez aussi que la densit de ladocumentation en tmoignera.

jQuery et les formulaires

Un des points forts de jQuery est qu'il va vous permettre d'effectuer un pr-traitementde vos formulaires HTML ct client, de manire trs avance. Nous pourrons ainsirelever 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 technologiect client, on peut donc facilement contourner ces validations, voir 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 toutes 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 futurssites.

Nous ne pouvons que vous encourager vous accrocher et apprendre cette technologie. Avec ce tuto entre les mains, cetravail d'apprentissage n'en sera que plus facile.

L'histoire du frameworkLe framework jQuery est la base l'oeuvre d'un seul homme, un


www.siteduzero.com

Le framework jQuery est la base l'oeuvre d'un seul homme, unprogrammeur 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 projetde jQuery. C'est ainsi lui qui suppervise encore aujourd'hui ledveloppement de jQuery.

Il fut dans le pass dveloppeur pour le compte de la Mozilla Corporation,o il travaillait en tant que dveloppeur JavaScript.

Malgr le travail colossal que Resig a su faire sur le framework jQuery, vousimaginez bien que cet homme n'a pas pu lui seul crer un tel outil. Lesautres 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 peuttravailler sur le framework et participer son amlioration. Vous verreznotamment 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 lesmises jour sont font toujours rgulirement.

Des sites qui utilisent jQueryjQuery est le framework JavaScript le plus utilis sur le web, et ce, pour les qualits que nous vous avons prsentes plus haut.

Voici quelques grands noms du web qui utilisent aujourd'hui jQuery de manire plus ou moins abondante, cela devrait vous aider faire dfinitivement votre choix.

Site du ZroGoogle et ses diffrents servicesMozillaAmazon...

Sachez galement que les CMS les plus rpandus sur le web comme Drupal et Wordpress utilisent galement jQuery !Cette introduction jQuery et son histoire est maintenant acheve. Nous esprons que cela vous aura plus, et que vous cernezmaintenant un peu mieux ce qu'est jQuery.

Nous allons maintenant nous intresser aux outils dont on va avoir besoin pour coder correctement et efficacement avecjQuery.


www.siteduzero.com

De quels outils a-t-on besoin ?La prparation est probablement l'lment le plus important, quel que soit le projet que vous souhaitez mener, et ce, passeulement en dveloppement.

Afin de maximiser nos chances d'apprendre jQuery dans les meilleures conditions, nous allons nous aussi passer par toute unephase de prparation. Ici, c'est vous et votre ordinateur que nous allons devoir prparer utiliser jQuery... cela passe surtout pars'quiper de bons programmes.

Vous verrez, nous n'avons pas besoin d'tre arms jusqu'au dents pour dvelopper avec jQuery, un bon couplenavigateur/diteur suffit.

Le choix du navigateur webjQuery tant une technologie axe web, le navigateur sera sans aucun doute le programme dont vous aurez le plus besoin ici.Seulement, comment choisir le bon navigateur web pour travailler, quand on a toute une panoplie de produits tous plusexcellents les uns que les autres ?

Ce choix est d'autant plus difficile lorsque l'on connat les problmes de compatibilit lis l'utilisation de JavaScript dans soncode... mais ici pas de problme, puisque jQuery va nous permettre de ne plus prendre ce paramtre en ligne de compte !

Considrant cet lment, le choix du navigateur se rsumera donc seulement prendre celui avec lequel vous tes le plus l'aise.Voici une liste vous prsentant les diffrents navigateurs web, honteusement reprise du tutoriel de rfrencement web du Site duZro.

Icne Nom OS Tlchargement Dscription

InternetExplorer

Fourni pardfaut avecWindows.

Un navigateur web sign Microsoft et intgr par dfaut toutes les versions dusystme 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 plusrcentes ne sont pas disponibles pour les systmes comme Windows XP quisont pourtant massivement utilises encore aujourd'hui.

Il y a donc une grosse probabilit que votre version d'Internet Explorer ne soitpas capable de reconnatre les dernires avances technologiques en matire destandards web.

MozillaFirefox Tlchargement

Un navigateur web gratuit et extrmement performant sign par la MozillaFoundation. Je ne saurais que vous recommander de l'utiliser sans modration.

GoogleChrome Tlchargement

Un autre navigateur web sign cette fois-ci par Google. Le programme est bassur un projet open-source baptis Chromium, mais connat quelquescontroverses vis vis du respect des informations personnelles de sesutilisateurs. Il est nanmoins recommand de l'utiliser tant il est performant.

Chromium TlchargementChromium est le projet open-source sur lequel est bas Google Chrome. Il s'agiten fait de Google Chrome lav de tous les ajouts de Google. Vous pouvez l'utilisersi vous tes inquiet au sujet des questions du respect des informationspersonnelles.

Opera TlchargementOpera est un navigateur web de trs grande qualit propos gratuitement parl'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 pardfaut. 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.


www.siteduzero.com

Maintenant que nous vous avons prsent ces navigateurs majeurs que tout le monde utilise sur le web, nous pouvons quandmme souligner qu'il y en a un qui ressort nettement plus que les autres. Ce navigateur, c'est Mozilla Firefox !

Et... pourquoi cela ?

Simplement parce que Firefox est vraiment le meilleur de tous les navigateurs lorsqu'il s'agit de dvelopper pour le web. Noussouhaiterions vous faire dcouvrir (ou redcouvrir) un outil spcialement ddi au dveloppement web, et surtout uniquementdisponible sous Mozilla Firefox.

Cet outil, nomm Firebug vous sera vraiment d'une aide capitale dans vos futurs dveloppement web, en particulier avecJavaScript et jQuery.

Un incontournable : Firebug pour Firefox !Firebug est en fait une extension gratuite pour Firefox, qui est vraiment devenue incontournable pour tout dveloppeur web quise respecte.

Ajoutez Firebug votre navigateur Firefox !

Elle a t dveloppe par des dveloppeurs indpendants, et vous pourrezl'ajouter directement votre navigateur Firefox sur le site officiel MozillaAddons .

L'installation de Firebug -et de toute autre extension- ncessite leredmarrage du navigateur Firefox pour tre effective.

Dans une optique d'aide au dveloppement, l'extension Firebug secaractrise en fait par toute une panoplie d'outils pour le dveloppementweb qui vont venir s'intgrer compltement Firefox dans le but de lecomplter et de le rendre beaucoup utile et agrable l'utilisation. Etantdonn que c'est un ajout Firefox, vous devez tre conscient quel'installation de ces outils rend le navigateur sensiblement plus lourd, doncplus lent l'excution.

Utiliser la bote outils Firebug !

Pour commencer utiliser Firebug, il serait bien convenu d'arriv l'ouvrir vous ne pensez pas ?

C'est trs simple. Commencez par ouvrir une page web dans votre navigateur Firefox, optez par exemple pour la page d'accueil duSite du Zro.

Une fois que vous y tes... faites trs attention, car la manipulation que vous allez devoir raliser pour ouvrir Firebug va tretellement complexe que... bon ok, j'arrte. Contentez-vous simplement d'appuyer sur F12 et a fera l'affaire.

La magie opre, et Firebug s'ouvre dans Firefox !


www.siteduzero.com

Firebug ouvert dans le navigateur Firefox !

Vous pouvez voir que Firebug dispose de 6 onglets, proposant des outils diffrents. Chaque onglet est dcoup en deux zonesayant toutes une utilit diffrente de l'autre. Trois de ces onglets vont retenir notre attention pour le moment.

ConsoleC'est de loin celui qui va le plus nous intresser dans nos dveloppements avec jQuery. C'est une console JavaScriptqui vous retournera notamment les erreurs que vous pourriez commettre dans votre script jQuery ; vous permettantainsi de les solutionner le plus facilement possible. Autre intrt majeur de la console : elle vous permettra de taper ducode JavaScript et de le tester la vole. Vous pouvez aussi utiliser le site web jsFiddle. C'est un site "bac sable".Idal pour vous exercer.HTMLPour l'onglet HTML, Firebug vous propose un outil vous permettant d'inspecter votre code HTML et de le modifier la vole. Vous pourrez naviguer dans l'arboresence du document HTML, et la modifier trs facilement. Vous verrezgalement vos modifications s'appliquer en direct sur le rendu de la page ouverte dans le navigateur.CSSL'onglet CSS propose exactement la mme chose l'onglet HTML, mais apadt pour les feuilles de style. Ici, vouspourrez modifier ou supprimer la vole n'importe quelle proprit CSS contenue dans les feuilles de style relies lapage.

Mine de rien, ces outils vont nous tre sacrment utiles pour dvelopper en jQuery. Pour la suite : sachez qu'il existe 3 autresonglets : Script, DOM et rseau, mais que nous ne souhaitons pas dvelopper dans cette partie du cours sur jQuery. Si voussouhaitez avoir plus d'informations sur Firebug dans son ensemble, nous pouvons vous conseiller de lire cet excellent tutorielsur l'extension Firebug disponible sur le Site du Zro.


www.siteduzero.com

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 pourraientvous convenir parfaitement si vous tes un grand fan de Google Chrome/Chromium.

Un diteur de texte efficaceLe dernier lment dont vous aurez besoin pour dvelopper avec jQuery... ce sera bien sr un diteur de texte.

Un diteur de texte performant et efficaceNous ne pouvons pas opter pour n'importe quel diteur de texte pour dvelopper avec jQuery, et c'est d'ailleurs vrai pourn'importe quel langage. Ce qu'il nous faut, c'est un diteur suffisament perfectionn pour grer la coloration syntaxique. Ils sontnombreux, mais tout cela pour dire qu'il ne faut pas se laisser aller et utiliser le Bloc Note fourni par dfaut avec Windows.

Nous allons vous conseiller l-encore quelques exemples de programmes utiliser, sachez qu'ils ne sont pas les mmes enfonction du systme d'exploitation que vous utilisez.

Sous Windows

Le code du framework jQuery ouvert sous Notepad++

Sous Windows, on peut trouver des diteurs vraiment trs performants. Nous utilisons respectivement les diteurs Notepad++,qui a le mrite d'tre gratuit, et l'diteur Sublime Text 2. Pour ce dernier, sachez que le programme n'est pas gratuit et qu'il faudrasonger l'enregistrer au bout d'une certaine priode.

Ces deux diteurs sont vraiment de qualit. Sachez que Sublime Text 2 vous donne en plus de cela la possibilit de naviguer dansvotre arborescence, un peu la manire d'un IDE. Un autre programme existe pareil ailleurs : ConTEXT. Pour l'avoir essay, il est lui aussi de trs bonne qualit en plus d'tregratuit.

Des environnements de dveloppement complets tels que Netbeans peuvent aussi tre utiliss, c'est selon votreprfrence.

Sous Linux


www.siteduzero.com

L'diteur Gedit sous GNU/Linux Ubuntu 10.04

Sous Linux on a l encore beaucoup d'diteurs diffrents et ils ont tous beaucoup d'atouts dans leur manche.Si vous tes un habitu de la console et que vous ne souhaitez pas tre dpays, vous pourrez toujours diter vos fichiers avecVim ou Emacs. Si en revanche vous prfrez utiliser un diteur graphique, l'diteur de texte Gedit ou Geany sont tous les deuxexcellents.

Sous MacOS X

Le logo de l'diteur Smultron sous MacOS X

Le systme d'exploitation de la firme Apple a lui aussi son lot d'diteur. Le plus connu est sans doute Smultron, qui a t cr parun dveloppeur Sudois.

Choisissez l'diteur de texte avec lequel vous tes le plus l'aise. Si vous avez l'habitude de crer des sites internet, le navigateurque vous utilisez pour HTML n'a aucune raison de ne pas connatre JavaScript. Et s'il connat JavaScript : c'est qu'il connatjQuery. Vous arrivez bientt au terme de votre prparation, bientt nous allons pouvoir aborder rellement jQuery et commencer coderavec lui.


www.siteduzero.com

Le chapitre qui suit sera le dernier chapitre introductif au cours. Nous allons faire une dernire petite mise au point... cette fois-ciau niveau du JavaScript. Vous remettre en mmoire une dernire fois les fondements de ce langage ne sera pas de trop avantd'apprendre jQuery !

Si vous estimez que le chapitre suivant ne vous sera pas utile, vous tes totalement libre de le sauter. Il est nanmoinsrecommand de le lire. Cela ne vous prendra que peu de temps, et ce ne sera que positif pour vous.


www.siteduzero.com

Rappels gnraux sur JavaScriptHistoire de mettre tout le monde sur la mme longueur d'onde, nous vous proposons un petit rappel sur les rudiments deJavaScript, ses bonnes pratiques, quand l'utiliser, et surtout pourquoi. Ce chapitre ne se veut en aucun cas un apprentissageultra-rapide du langage, il existe d'ailleurs un big-tutoriel sur le Site du Zro pour cela.

O et quand utiliser JavaScript ?Avant tout chose, il nous faut dfinir la place que prendra notre code JavaScript dans la page. En effet, la structure se doit d'treclaire, car on ne dveloppe pas n'importe comment. Pour les connaisseurs, avez-vous pour habitude de placer du code PHP dansune page portant l'extension .html ? Pour sr que non !

Avec JavaScript, on sera un peu moins regardant ce niveau, mais il est quand mme prfrable de bien diviser son code.

O placer son code JavaScript ?Cette question, bien qu'elle semble simplette et dnue d'intrt, fait parfois l'objet de dbats sur le web. Certains diront qu'uncode JavaScript DOIT se placer entre les balises , car c'est comme cela que le langage HTML a t construit.En revanche, les non-adhrants cette pratique diront que, pour un soucis de performance, il est largement plus rentable deplacer JavaScript en fin de page, juste avant la fermeture de la balise .

N'oubliez pas que l'on a pour habitude de placer le JavaScript dans des fichiers portant l'extension .js. C'est d'ailleurs lamthode la plus recommande pour utiliser JavaScript.

Le problme se pose maintenant : qui a raison, et qui a tort ?

Au cours de ce tutoriel, nous ne vous obligerons pas prfrer la premire ou la deuxime pratique, mais il est clair pour nousque placer son code JavaScript en fin de page est plus logique : la structure HTML, le DOM, se charge ainsi en premier en raisonde la lecture linaire du navigateur, ce qui est le plus important. Vient ensuite JavaScript, qui se chargera d'ajouter tous les effetset applications voulues. Les codes que nous vous prsenterons seront donc toujours placs en fin de page, ou dans desdocuments externes chargs en derniers.

Code : HTML

Titre

// mon code JavaScript

Il est vident qu'il ne faut pas placer son code JavaScript en plein milieu de la page, c'est totalement illogique et vouspouvez vous perdre plus facilement si votre script fait beaucoup de lignes !

Quand et comment l'utiliser ?Une des autres choses retenir, c'est qu'il faut savoir utiliser JavaScript avec parcimonie. Souvenez-vous toujours que c'est unlangage qui s'excute du ct client, et qui est donc facilement contournable grce un bon navigateur. Ainsi, vrifier desinformations peut se faire en JavaScript, mais doit toujours tre assur galement du ct de votre serveur, qui lui n'est pasaccessible. Cela vous vitera bien des problmes !

Paralllement, n'utilisez JavaScript que lorsqu'il est utile, c'est--dire lorsqu'il apporte quelque chose au visiteur. Faire un dluge


www.siteduzero.com

de flocons de neige sur la page d'accueil prsente trs peu d'intrt, et aura plutt tendance agacer l'utilisateur. De mme,ne chargez pas vos informations essentielles avec ce langage : les personnes l'ayant dsactiv, les personnes handicapes et lesrobots des moteurs de recherche ne pourront ou ne saurront pas lire votre contenu !

JavaScript doit donc tre sur un site web pour, par exemple, amliorer l'exprience utilisateur, mais surtout pas pour la cration decontenu.

Variables et fonctionsParmis les bonnes pratiques adopter en JavaScript, il y a celles qui concernent les variables et les fonctions. Nous ne vousparlerons que de ces lments pour la simple et bonne raison que leur dclaration ne change pas avec jQuery, contrairement auxvnements, par exemple. Si vous ne savez pas ce qu'est une variable ou une fonction, nous vous conseillons vivement d'allerlire un tutoriel consacr JavaScript !

De la dclaration des variablesLes variables en JavaScript se dclarent toujours de la mme faon : il faut prcder le nom du mot-cl var. Il est possible dedclarer plusieurs variables la suite en les sparant de virgules :

Code : JavaScript

var maVariable = 1, // cette variable vaut 1 maVariable2, // celle-ci est dclare, mais vide maVariable3 = true; // celle-ci contient le boolen true

Traditionnellement, on dclarera nos variables en dbut de code ; ce n'est pas le langage qui veut cela, c'est juste une faon d'yvoir 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 argumentsLes fonctions en JavaScript se dclarent de la mme manire qu'en PHP, par exemple. Beaucoup de langages de programmationse ressemblent, surtout ce niveau. Ainsi, il suffit d'crire le mot-cl function suivi du nom de la fonction pour dclarer celle-ci et pouvoir l'utiliser. Elle peut aussi prendre des arguments, qui feront office de variables accessibles uniquement dans lafonction qui les a instanci. Il est donc possible d'exploiter des donnes diffrentes avec une seule fonction.

Code : JavaScript

function helloWorld(nom){ alert('Hello World, ' + nom + '!');}

helloWorld('Sainior'); // affichera une alerte "Hello World Sainior!"

Cas des fonctions anonymesIl est possible, en JavaScript, de dclarer des fonctions qui ne possdent pas de nom. Assez joliment, on les a appeles fonctions anonymes . Elles permettent de lancer une fonction directement depuis une variable, par exemple, ou mme une autrefonction ! Elles seront donc trs utilises dans ce cours, donc assurez-vous bien d'tre au point avec. Pour exemple, si je dclareune fonction anonyme dans une variable, je pourrai excuter la fonction avec la variable :

Code : JavaScript

var helloWorld = function(){ // cette fonction est anonyme alert('Hello World !');}; // attention au point-virgule, il ne faut jamais l'oublier !


www.siteduzero.com

helloWorld(); // affichera une alerte "Hello World !"

Encore une fois, jQuery est presque un nouveau langage apprendre. Ainsi, nous ne serons pas aussi rapides dansnos 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 peulong, mais nous pensons qu'il est ncessaire que vous soyez sr de vous pour coder dans de bonnes conditions. Alorsn'attendez plus, on commence ds maintenant !

Partie 2 : Les bases du framework ! 18/60

www.siteduzero.com

Partie 2 : Les bases du framework !

Aprs cette partie introductive, nous sommes maintenant tous au mme niveau, c'tait vraiment ncessaire. Maintenant, voussavez ce qu'est jQuery et vous savez pourquoi il va tre intressant de l'utiliser. En plus de cela, vous tes maintenantparfaitement quips pour commencer apprendre le framework, et nous vous avons offert en plus un petit rafrachissement devos connaissances en JavaScript. Pas mal non ?

Bref ! Tout a pour dire que maintenant, nous sommes fins prts nous lancer dans l'apprentissage du framework jQuery ! Lisezbien ces chapitres dans l'ordre, la fin de cette partie, vous connaitrez les bases fondamentales de jQuery, et vous serez prts aborder avec nous une utilisation un peu plus avance de cette technologie.

Vos premiers pas avec jQuery !Nous voici maintenant dans la vraie phase d'apprentissage de jQuery. C'est ici que l'on va commencer taper nos premiers codessources en jQuery.

Il arrivera souvent au cours de ce tutoriel que nous utilisions par abus de langage l'expression "coder en jQuery".

jQuery n'est pas un langage, c'est bien un framework JavaScript. C'est simplement un petit raccourci que nous allonsutiliser et qui est assez utilis sur le web. Mais comprenez bien par l qu'on entend : "coder en JavaScript en utilisant leframework jQuery".

Inclure jQuery dans vos pagesPour commencer travailler avec jQuery sur votre site web, il va falloir tout naturellement l'inclure dans vos pages. Voyons icicomment l'on va procder.

Deux mthodes pour inclure jQuery dans vos pages web

Vous devez savoir qu'il existe deux mthodes pour inclure jQuery dans vos pages. Les deux marchent et sont tout fait valables,mais l'une est plutt dconseille alors que l'autre est au contraire vraiment trs conseille.

Inclure jQuery depuis votre serveur (mthode dconseille)

La premire de ces deux mthodes, celle qui n'est pas conseille, consiste inclure jQuery dans vos pages web depuis votrepropre serveur. Pour cela, c'est trs simple.

Dans un premier temps, nous allons devoir nous rendre sur le site officiel de jQuery : jQuery.com.

Nous vous conseillons d'ailleurs de mettre ce site dans vos favoris histoire de toujours l'avoir sur la main, en effet, c'estgalement sur ce site que se trouve la documentation jQuery que nous apprendrons lire et utiliser plus tard.

Pour rcuprer jQuery, vous devez tout simplement cliquer sur l'option "Download" dans le menu du haut. Vous arriverez alorssur une page vous prsentant les diffrentes release de jQuery. A l'heure o nous crivons ces lignes, la version actuelle est la1.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 larcuprer plus rapidement.

Euh... il y a deux release pour la mme version non ? Une version "Minified" et une version "Uncompressed"... qu'est-ce que je dois choisir ?

Ah oui ! Nous allions y venir !

En fait, c'est trs simple. jQuery vous est toujours fourni en deux exemplaires. Je vous rassure le contenu du fichier estexactement le mme. Il n'y a pas 2 jQuery, il y en a bien qu'un seul.


www.siteduzero.com

jQuery MinifiedjQuery Minified est le framework jQuery "compress". En effet, vous avez pu vous rendre compte : jQuery est un fichierqui est vraiment immense, et dans ce fichier immense vous pouvez voir qu'il y a beaucoup d'espaces et beaucoup deretours la ligne : pour garder un peu de lisibilit pour les codeurs. Le problme, c'est qu'en faisant a, le fichierprend vraiment plus de place. La version Minified rpond ce problme : tous les espaces et retours la ligne sontretirs. Cela a pour effet de rendre le code compltement illisible, mais en revanche, jQuery sera tlcharg plus vitepar vous et vos visiteurs !jQuery UncompressedjQuery Uncompressed est "l'autre jQuery". Celui qui a conserv les espaces et les retour la ligne pour garder de lalisibilit, mais qui est plus long charger.

Bien sr, nous vous recommandons vivement d'utiliser la version compresse sur votre site en production, car elle seravraiment plus rapide charge. En revanche, pour toute la phase de dveloppement il sera plus sage d'utiliser laversion 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

Test jQuery On va bosser avec jQuery, c'est super !

Et voil ! Si le chemin d'accs vers le fichier est correct, jQuery a bien t reli votre page web... seulement, cette mthode n'estfranchement 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 dveloppeursjQuery !

Inclure jQuery depuis un serveur distant (Google !)

Et oui ! La mthode la plus recommande pour inclure jQuery dans votre page web est encore d'inclure le fichier directementdepuis un serveur distant.

Seulement voil, il faut trouver quelqu'un de suffisamment fou pour pouvoir hberger un fichier aussi utilis que jQuery et lemettre disposition de tous les dveloppeurs de la plante qui veulent l'utiliser... et il y a bien une entreprise qui fait a, c'estGoogle !

Google n'est pas seulement un moteur de recherche et une suite de sites web, c'est aussi une entreprise qui a montr depuistoujours un intrt farouche pour l'open-source. C'est ainsi que Google met disposition de tous le framework jQuery hbergdirectement sur ses serveurs. Google vous fournit un lien absolu indiquer dans vos pages, et c'est tout bon, jQuery est inclus !

Reprenons le mme code source que tout l'heure, et adaptons-le pour ce deuxime cas de figure.


www.siteduzero.com

Code : HTML


jQuery est prt l'emploi !

Le lien vers jQuery Minified chez Google esthttps://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Et le lien vers jQuery Uncompressed chez Google est https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js

jQuery n'est d'ailleurs pas le seul framework libre que Google hberge et propose tout le monde. Si vous voulez voir l'intgralitdes outils proposs par Google, vous pouvez vous rendre sur cette page. Les liens absolus indiquer sont galement rfrencssur cette page du site Google ddi aux dveloppeurs.

Et pourquoi cette mthode est-elle la plus recommande des deux ?

La rponse cette question est trs simple : c'est juste pour moins faire travailler notre serveur. En plus de cela, inclure jQuerydepuis un serveur Google permet une mise en cache immdiate, pour toujours acclrer les temps de chargement de votre site.C'est donc plus une question de performance qu'autre chose.

Ainsi, pensez bien qu' chaque fois que vous travaillerez en jQuery, il vous faudra inclure le framework depuis un serveur Google!

La fonction de base : jQuery()jQuery est donc inclus notre page web... c'est bien beau, mais l'idal serait quand mme d'arriver utiliser ce qu'il a nousproposer non ? Voyons comment faire ds maintenant pour exploiter toute la puissance du framework.

Une fonction gnrique : jQuery() ou $()

L'ensemble du framework jQuery repose sur une seule fonction. C'est la fonction la plus importante du framework, vous devreztoujours l'utiliser ds qu'il s'agira de dvelopper en jQuery. Cette fonction, c'est tout btement la fonction jQuery() !

Elle va servir tout simplement dire : "Hop l ! A partir de maintenant, c'est du jQuery qu'il va y avoir". Sans cette fonction,absolument aucun code jQuery ne pourra tre interprt. C'est peut-tre l une faiblesse qui n'en est pas une pour le framework :tout le code qu'on l'on va devoir crire, on va devoir le faire au sein de cette fonction.

Reprenons notre code de tout l'heure et voyons comment appeler la fonction jQuery().

Code : HTML


www.siteduzero.com


jQuery(document).ready(function(){ // Du code en jQuery va pouvoir tre tap ici ! });

Nous incluons jQuery min. ici, nous considrons simplement que cette page est en production. Si elle avait t unepage 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 nousnous 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 voustravaillez : 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. Cetvnement se traduit simplement par "est prt". Une fois que cet vnement est vrifi, on lance une fonction anonyme danslaquelle on va place notre jQuery.

Ainsi, cette ligne peut tre traduite par : "Quand le document HTML est prt (sous-entendu, est charg) lance une fonction quicontient le code jQuery."


www.siteduzero.com

Cette petite structure de rien du tout signifie vraiment beaucoup de choses : on attend simplement que la page HTML soitcharge avant de commencer parler de jQuery. C'est LA structure que vous devrez utiliser dans 99% des cas pour coder enjQuery dans votre page. Retenez la par coeur, 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 recevezbien quelque chose dans votre console Firebug l'excution de ce code. Vous pouvez galement utiliser la mthode hard enutilisant 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(){ alert("jQuery est prt !");});

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.

$() un alias de jQuery()

Vous savez tous qu'un programmeur, c'est par dfinition quelqu'un de trs fainant. Alors comme on a trouv que c'tait trop longd'crire jQuery() pour appeler la fonction, on s'est dit qu'on allait crer un alias pour pouvoir l'appeler plus facilement. Ainsi, ilfaut savoir que la fonction jQuery peut aussi s'appeller avec $(). Le reste du code reste exactement le mme.

Ainsi :

Code : JavaScript

jQuery(document).ready(function(){ alert('Salut, jQuery est oprationnel !');});

et

Code : JavaScript

$(document).ready(function(){ alert('Salut, jQuery est oprationnel !');});


www.siteduzero.com

donnerons exactement le mme rsultat !

Notez par ailleurs que l'alias $() est vraiment le plus utilis sur le web, tout simplement parce qu'il est plus rapide crire. Ainsi,dans la suite de ce cours nous utiliserons toujours l'alias $() pour les codes que nous vous fournirons. Vous feriez mieux de vousaussi prendre l'habitude. Vous verrez, ce n'est pas trs compliqu, vous avez juste vous dire qu'il y a crit "jQuery" la place de"$" !

viter le conflitLa plupart des bibliothques JavaScript utilisent elles aussi le $ (dollar), ce qui peut tre la source de conflit entre les diffrenteslibrairies sur une mme page. Pour viter ce genre de problme, il est possible de passer la variable jQuery une fonctionanonyme pour tre sr que notre alias ne soit pas l'origine de conflits.

Code : JavaScript

(function($){ // notre code ici})(jQuery);

Le principe de fonctionnementComme nous venons de le voir, le framework met en place une fonction dite principale. Le principe de fonctionnement de jQueryrepose 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 , quireprsentera une balise, par exemple. On agira ensuite dessus grce des mthodes . Pour que vous ayez un aperu, voici uncode 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 endtails dans le prochain chapitre). Je peux ensuite agir dessus grce une mthode !


www.siteduzero.com

Mais c'est quoi une mthode ?

Une mthode en jQuery est une fonction un peu spciale qui agira directement sur l'objet (ou l'lment cibl, si vous prfrez)indiqu. Le framework en possde beaucoup, mais il est possible de crer les notres ! 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 seulefois.

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 unesderrire les autres */

Si vous avez assimil ce fonctionnement de base, vous avez fait le plus dur. Bien sr, jQuery est bourr d'outils pour rendre la chose un peu plus vivante.Vous devez commencer comprendre comment fonctionne concrtement le framework ! C'est une trs bonne chose, car nousallons monter le niveau d'un cran, et voir les slecteurs dans le chapitre suivant.


www.siteduzero.com

Les slecteursjQuery a une syntaxe qui permet de slectionner trs facilement des lments sur la page, c'est un de ses plus grands pointsforts. Mais, au-del des apparences, la slection de ceux-ci est plus complexe qu'il n'y parat. Les slecteurs en jQuery sonttoute une science que nous allons apprendre pas pas au cours de ce chapitre !

Les slecteurs de CSSAvant de se lancer dans une foule de slecteurs propres jQuery tous plus compliqus les uns que les autres (non, on plaisante

), il est ncessaire de dbuter par des slecteurs plus basiques. En effet, le framework que nous tudions fonctionne toutd'abord avec les slecteurs de CSS. Vous les connaissez surement, ou tout du moins la plupart, car vous tes cens connatreun minimum la syntaxe du CSS pour suivre ce tutoriel.

Cela ne vous dit vraiment rien ?

Les slecteurs les plus utilissPeut-tre est-ce le mot slecteur qui vous fait peur. Dans ce cas-l, je pense que votre mmoire va se rafrachir si je vous parled'identifiant et de classe. Pour rappel, il est possible d'attribuer une classe ou un identifiant un lment HTML ; on s'en servirapar la suite pour le slectionner avec CSS, ce qui nous permettra de styliser l'lment.

Avec jQuery, vous pouvez trs bien utiliser ces slecteurs ! Ce sont mme ceux-ci qui reviendront le plus souvent dans voscodes. Pour cela, il suffit de suivre simplement la syntaxe suivante, comme en CSS :

Code : JavaScript

$('p'); // je slectionne tous les paragraphes

$('.maClasse'); // je slectionne les lments ayant .maClasse pourclasse

$('#monId'); // je slectionne l'lment qui possde l'identifiant#monId

Un identifiant est unique : plusieurs lments d'une seule page ne peuvent pas avoir le mme id !

Frres et parentsParmis les slecteurs un peu plus complexes que les classes et les identifiants se trouvent les slecteurs de descendance. Ce motbizarrement employ dans un contexte tel que le notre cache en fait un concept trs puissant de parcours. Vous n'tes surementpas sans savoir qu'il est possible, en HTML, d'imbriquer des balises les unes dans les autres. Eh bien, ce systme fait usage de ladescendance !

Prenons un exemple concret. Je possde un paragraphe, dans lequel j'ai un lien absolu. Ma balise est alors imbrique dans les balises propres au paragraphe.

On dit que le paragraphe est un lment parent, et le lien un lment enfant.Comprenez-vous le principe ? La balise parente mon lien est la balise qui contient celui-ci. Ainsi, de cette faon-l, la balise est parente de toute notre structure HTML !

CSS, et par extension, jQuery, permet de manipuler ce concept de descendance grce des slecteurs spciaux. Le plus connuest sans doute le slecteur qui fait suivre deux lments au minimum :

Code : JavaScript

$('p .lien');/* ici, nous slectionnons tous les lments ayant la classe .lien, et contenus dans un paragraphe qui joue le rle de parent */


www.siteduzero.com

Le problme de cette mthode-ci est qu'elle prend en compte tous les lments possdant la bonne classe et contenus dans unparent. Imaginez que vous ne vouliez slectionner que les lments qui descendent directement du bloc parent, c'est--dire quine sont pas contenus une seconde fois dans un autre bloc. Dans ce cas-l, il vous faudra utiliser un slecteur un peu moinsconnu, qui n'est autre que >.

Code : JavaScript

$('p > .lien');/* ici, nous slectionnons seulement les lments ayant la classe.lien,et descendants directement du paragraphe ! */

Il est ensuite possible de pousser le systme encore plus loin, par exemple en utilisant les slecteurs + et ~ qui se chargent dereprsenter les frres de l'lment. Ce qu'on appelle couramment les frres, dans ce contexte de jQuery, ce sont simplement leslments qui se suivent directement, comme par exemple deux liens.

Code : JavaScript

$('.lien + .visite');/* la slection s'effectue sur les lments ayant pour classe.visite,et qui sont immdiatement prcds d'un lment ayant pour classe.lien */

$('.lien ~ .visite');/* dans ce cas-l, ce sont tous les lments .visite,prcds immdiatement ou non par un lment .lien */

Alors, pas trop compliqu ?

Jusque l, vous devriez avoir suivi assez facilement. Les slecteurs CSS sont une chose assez peu difficile assimiler, et si vousavez du mal, pas de soucis avoir, cela viendra avec l'exprience. En attendant ce jour heureux, je vous invite passer auxslecteurs propres jQuery !

Une slection plus pousseLes slecteurs de CSS, c'est bien, mais des slecteurs plus sophistiqus ne seraient pas de refus ! En effet, pour les besoins desdveloppeurs, jQuery met en place une slection d'lments beaucoup plus pousse que CSS. Comprenez bien que ce n'est passeulement avec des identifiants et des classes que nous pourrons tablir un vritable systme, ce serait le chaos total etfranchement peu pratique. C'est pourquoi jQuery a mis en place ce que l'on appelle des filtres , qui ont une syntaxe particulire :deux points suivis du nom du slecteur. Vous en saurez plus en lisant la suite.

La place d'un lmentParmis les trs nombreux slecteurs proposs par le framework figurent ceux qui permettent de slectionner un lment suivantsa place sur la page. C'est quelque chose de vraiment pratique qui tait assez compliqu raliser avec du simple JavaScript. Lesplus utiliss et connus sont :

:first, qui slectionnera le tout premier lment donn ;:eq(index), qui se chargera de retourner l'lment possdant l'index spcifi ;:last, je pense que vous l'aurez vite compris, permettra de slectionner le dernier lment.

Ainsi, de cette faon, il vous suffira de taper ceci pour faire une slection sur le premier et/ou le dernier lment :

Code : JavaScript

$('p:first'); // slection du premier paragraphe trouv

$('a:last'); // ici, on slectionne le dernier lien de la page


www.siteduzero.com

L'index d'un lmentCela peut vous paratre flou au premier abord, contrairement aux deux autres slecteurs. En effet, qu'est-ce que l'index d'unlment ?

Eh bien, pour faire le plus simple possible, c'est le numro qui reprsente sa place dans la page. Ainsi, si vous possdez cinqparagraphes, vous pourrez par exemple slectionner le troisime sans problme. Mais attention il y a un pige : il fautcommencer compter partir de 0. C'est trs important de retenir cela, la systme est similaire sur les tableaux, par exemple.Alors quel chiffre taperez-vous pour retourner le troisime paragraphe ?

Secret (cliquez pour afficher)Code : JavaScript

$('p:eq(2)'); // c'tait 2 !

Slection par attributsUn autre type de slecteurs sont les slecteurs fonctionnant grce aux attributs des lments du DOM. Il est ainsi possible deraliser de multiples actions sur les balises qui contiennent un attribut donn, tel qu'un identifiant ou une valeur :

Code : JavaScript

$('p[id]'); // retourne seulement les paragraphes ayant unidentifiant

Cibler d'autres faonsHeureusement, il est possible de prciser la requte. Imaginons que vous vouliez rcuprer les lments ayant une valeur(value) ou un nom (name) bien prcis. Dans ce cas-l, il est possible de le dire jQuery grce la syntaxe suivante :

Code : JavaScript

$('input[name=pseudo]'); // cible seulement l'lment de formulaireayant pseudo pour nom

Si au contraire vous voulez cibler tous les autres lments, ceux qui n'ont pas la bonne valeur dans leur attribut, il suffit derajouter 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 permetdonc une slection puissante, et, depuis jQuery 1.3, permet mme de spcifier plusieurs types de balises en mme temps ! Ils'utilise trs facilement :


www.siteduzero.com

Code : JavaScript

$('p:not(.rouge)'); // slection de tous les paragraphes, sauf ceuxayant .rouge comme classe

$('input:not(.bleu, .vert)'); // on slectionne tous les lments deformulaire 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 slectionIl peut parfois se rvler pratique de sauvegarder un objet jQuery. Il est donc possible de rentrer une slection dans une variable,cette dernire pouvant tre utilise la place de la fonction principale.

Code : JavaScript

var $element = $('monElement');

Par soucis de lisibilit et de comprhension, on fait prcder le nom de notre variable du caractre $. On sait ainsidirectement qu'on a affaire un objet jQuery.

Le cas des formulairesPour exploiter la pleine puissance des trs nombreux slecteurs de jQuery, il faut se pencher sur les formulaires en HTML. Eneffet, l'interaction tant beaucoup plus prsente ces endroits, il est logique que le framework soit plus enclin les dynamiser.Ainsi, la slection des lments de formulaire se fera d'une faon un peu diffrente, que nous allons commencer traiter tout desuite.

Le type des lmentsComme vous le savez surement, les lments de formulaire peuvent changer de type selon ce que l'on veut en faire. La balise nechange pas et reste la mme, on utilisera dans 90% des cas . En changeant l'attribut type de la balise, il estpossible de spcifier que l'on veut une case cocher, un champ de texte, un bouton...

Suivant ce principe, on pourrait penser qu'il faut faire ceci en jQuery :

Code : JavaScript

$('input[type=button]'); // on slectionne un input de type button

Ce code fonctionne parfaitement, mais ce n'est pas la meilleure faon de procder ! Il y a plus simple, plus rapide et surtout pluspropre. Pour respecter cela, il faut indiquer le type, prcd de deux points :

Code : JavaScript

$('input:button'); // on slectionne un input de type button

Et vous pouvez ensuite faire ceci pour chaque type d'input !

Type Codetext (Texte) input:textpassword (Mot de passe) input:passwordfile (Fichier) input:file


www.siteduzero.com

checkbox (Case cocher) input:checkboxradio (Bouton radio) input:radiobutton (Bouton normal) input:buttonsubmit (Bouton d'envoi) input:submit

tat des lmentsDernire petite astuce avant de conclure ce chapitre, vous pouvez tablir une slection suivant l'tat des lments d'unformulaire. Vous allez nous rpondre qu'il n'y a pas trente-six tats, justement, et vous avez effectivement raison. Neanmoins, cesont des slecteurs que nous retrouverons assez souvent, et nous pensons qu'il est intressant de les connatre.

Ainsi, vous pouvez vrifier qu'une case est coche, ou qu'un lment est activ/dsactiv, grce aux slecteurs suivants ::checked vrifie qu'une case est coche ;:disabled cible les lments dsactivs ;:enabled fait le contraire, il slectionne les lments activs.

Le slecteur $(this)Le slecteur le plus spcial est sans aucun doute $(this). Dans la plupart des langages orients objet, le mot-cl thisreprsente 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 leparagraphe courant

});

C'est la fin de ce chapitre ! Vous avez vu que les slecteurs de jQuery offrent de nombreuses possibilits de ciblages deslments d'une page web, et ce n'est que le dbut de ce fabuleux framework ! Vous verrez dans le prochain chapitre commentgrer les vnements, o vous aurez besoin de mettre en pratique tout ce que vous venez de voir. Assurez-vous donc de bienavoir compris !


www.siteduzero.com

jQuery et les vnementsEn jQuery, vous aurez presque tout le temps travailler avec ce que l'on appelle des vnements , (events en anglais)... Nousallons voir ce que c'est dans ce chapitre. Qui sont-ils ? A quoi vont-ils nous servir, surtout et comment les aborder dans notrecode jQuery ?

C'est vraiment un lment cl du framework, donc forcment, c'est un chapitre cl. Bonne nouvelle : c'est plutt simple comprendre.

Go !Un vnement, des vnements...

Voyons voir ici ce que sont les vnements... si vous tes assez l'aise avec JavaScript, cette sous-partie n'aura probablementpas grand chose vous apprendre. Mais bien sr, lisez quand mme car vous tes en train de rapprendre JavaScript traversjQuery !

C'est quoi un vnement ?Pour expliquer la chose simplement, dites-vous qu'un vnement est une action remplie par le navigateur, ou plus gnralementl'utilisateur. Vous connaissez les conditions ? Pour les vnements, c'est un peu le mme principe : on lance un bout de codequand une action est remplie.

D'ailleurs ! Vous vous en tes peut-tre rendu compte, mais dans les chapitres prcdents, nous avons dj utilis un vnement,le ready() ! Voyons le code que nous avions :

Code : JavaScript

$(document).ready(function(){ // Le code jQuery ici !});

C'est la fonction de base de jQuery, vous vous souvenez ? Elle marche autour de l'vnement ready() qui coute lechargement du document. L'coute d'un vnement, c'est tout simplement le fait d'attacher une action bien prcise remplir unlment pour dclencher une fonction, appele couteur d'vnement.

"QUAND le document est PRT , on appelle une fonction dans laquelle on va mettre dujQuery."

C'est le fonctionnement de ce code qui tourne autour de l'vnement ready() : tant que le document n'est pas charg, on nefait rien. Quand il est charg, on agit. Fort heureusement pour nous, jQuery peut couter plein d'vnements diffrents, on ne selimitera 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 lmentde 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 pourrezexcuter 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 deproblme : maintenant vous connaissez le concept. JavaScript permettait de grer les vnements d'une certaine manire. Eh biendevinez quoi ? En jQuery, c'est totalement diffrent ! Bon point : en JavaScript, grer des vnements ne se faisait pas du tout dela 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 unvnement coutant le clic de la souris.

Code : JavaScript


www.siteduzero.com

$("#uneDiv").click(function(){ // Le code a excuter !});

Si on clique sur l'lment qui possde l'id #uneDiv (), alors vous allez pouvoir dclencher ducode JavaScript. Plus tard, lorsque l'on sera un peu plus l'aise avec jQuery, on pourra par exemple dcider de faire disparatrecette div (ou un autre lment !) avec un bel effet, ou mme commencer grer une requte AJAX pour mettre jour le contenude cette div... bref ! Les possibilits sont multiples.

Les vnements vous intressent et vous voulez aller plus loin, alors lisez donc la suite.Quelques vnements incontournables

jQuery tant trs complet il va nous donner l'opportunit d'couter beaucoup d'vnements sur notre page web. Nous allons envoir quelques uns ici, que nous pensons incontournables.

Dclenchement d'vnementsParmis les nombreux vnements disponibles, les plus clbres sont sans aucun doute ceux pouvant tre dclenchs parl'utilisateur. Ce sont eux qui permettent une trs grande interactivit avec le visiteur, c'est donc eux qui seront les plus utiliss engnral. Nous allons en voir quelques uns, ceux qui sont connatre absolument !

L'coute sur la sourisLa souris d'un ordinateur est un outil qui permet l'utilisateur de raliser de multiples actions : cliquer, bouger, double-cliquer,descendre dans une page... Bref, un paquet de mouvements prendre en compte. Ce qui est gnial avec jQuery, c'est que l'on vapouvoir contrler entirement les actions du visiteur, et dclencher de multiples fonctions grce elles !

Vous connaissez sans doute dj click(), qui lance une fonction lors du clic de l'utilisateur sur l'objet associ. Nous vousproposons ci-dessous une liste d'vnements adapts la souris ; le fonctionnement reste le mme.

Action FonctionClic click()Double-clic dblclick()Passage de la souris hover()Rentrer dans un lment mouseenter()Quitter un lment mouseleave()Presser un bouton de la souris mousedown()Relcher un bouton de la souris mouseup()Scroller (utiliser la roulette) scroll()

L'coute sur le clavierTout comme la souris, le clavier peut tout fait tre cout par un script jQuery. L'utilisation la plus frquente que l'on peut enfaire est de dtecter l'appui d'une touche et de lancer une action seulement si la bonne t presse. Les vnements associs nesont pas trs nombreux, on en trouvera seulement trois :

keydown(), qui se lance lorsqu'une touche du clavier est enfonce ;keypress(), qui se lance lorsqu'on maintient une touche enfonce ;keyup(), qui se lance lorsqu'on relche une touche pralablement enfonce.

Pour connatre la touche enfonce par l'utilisateur, dans chaque cas, il vous faudra employer une fonction anonyme quipe d'unargument reprsentant le code de la touche, sur lequel on appliquera la proprit keyCode. Cependant, le principal problme decette proprit est qu'elle ne fonctionne pas sur tous les navigateurs (souvenez-vous que ceux-ci ont des moteurs JavaScriptdiffrents). Il faut donc ruser pour rendre notre code compatible tous navigateurs :


www.siteduzero.com

Code : JavaScript

$(document).keyup(function(touche){ // on coute l'vnement keyup()

var appui = touche.which || touche.keyCode; // le code estcompatible tous navigateurs grce ces deux proprits

if(appui == 13){ // si le code de la touche est gal 13(Entre) alert('Vous venez d\'appuyer sur la touche Entre !'); // onaffiche une alerte }});

Pour connatre le code d'une touche, je vous invite aller consulter cette page.

Le cas des formulairesLes lments de formulaire possdent eux aussi leur lot d'vnements associs. Par exemple, lorsqu'un champ est focalis, on ditqu'il prend le focus , car c'est sur lui que se trouve notre pointeur. Un vnement permet de contrler ce genre de chose.

Action FonctionFocalisation focus()Slection (p.e. dans une liste) select()Changement de valeur change()Envoi du formulaire submit()

Le dclenchement virtueljQuery permet de simuler le dclenchement d'vnements grce une simple mthode. Pour faire court, vous n'avez pas besoind'attendre que l'utilisateur remplisse une action prcise pour lancer du code : vous pouvez excuter virtuellement un vnementgrce 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 duscript

Annuler le comportement d'un lment par dfautChaque vnement possde son propre groupe d'lments spcifiques traiter : par exemple, la soumission de formulaire nes'applique pas tous les cas. Cependant, certains lments ont un comportement par dfaut, dfini par le navigateur. Le cas leplus courant est le lien hypertexte : son comportement va tre de redir

web dyna j query

Documents