Tutoriel : Un site web dynamique avec jQuery !

Mais... c'est quoi jQuery ?

Pour bien commencer à introduire jQuery, commençons donc par le définir, ce sera déjà une bonne chose de faite, vous ne pensez pas ? ;)

jQuery, un framework JavaScript

Vous le savez certainement, vos pages web sont composées de beaucoup de technologies différentes.

Comme si ce n'était pas assez compliqué comme cela, ces satanés informaticiens ont eu en plus la bonne idée de nous compliquer encore plus la tâche, 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 "évolués" qui permettent de dynamiser les pages web. L'un d'eux, le plus connu et le plus utilisé, est JavaScript.

Un logo de JavaScript

JavaScript ou... jQuery ?

De JavaScript à jQuery

JavaScript est un excellent langage, qui a su au fil des années s'imposer comme une technologie vraiment incontournable dans le web. Le nombre de sites qui utilisent désormais JavaScript est tout simplement gigantesque. La cause ? L'avènement du web 2.0, un web communautaire où les Webmasters cherchent à faire interagir toujours plus l'utilisateur avec le site. JavaScript est un langage tout indiqué pour répondre à ce besoin, expliquant ainsi en partie son succès. Un beau paysage pour JavaScript... seulement voilà, comme on dit : on n'arrête pas le progrès.

Alors très rapidement, ses utilisateurs ont voulu faire évoluer JavaScript, le rendre toujours meilleur. On a voulu que le langage puisse faire toujours plus de choses, toujours plus proprement et toujours plus simplement. C'est dans cet esprit que la communauté de JavaScript a développé des frameworks pour le langage, des "cadres de travail". L'un d'eux est le plus utilisé de tous, celui que l'on retrouve un peu partout sur le web. Et c'est aussi celui que l'on va étudier tout au long de ce cours : jQuery !

jQuery, un framework JavaScript

Ci-contre, vous pouvez voir l'un des logos de jQuery où est indiquée sa devise : "jQuery. Write Less, Do More". Cette devise, on peut la traduire tout bêtement par : "jQuery. Ecrivez moins, faites plus". Cela résume vraiment ce que jQuery va vous permettre de faire. En l'utilisant dans votre code JavaScript : vous écrirez moins de code, et vous serez plus productif.

Cela paraît flou, et nous vous comprenons. Vous avez encore du mal à vous représenter 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, téléchargeable sur le web et qui porte l'extension .js !

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

Et pourtant ! :D

jQuery n'est pas n'importe quel fichier JavaScript. C'est une énorme bibliothèque de fonctions JavaScript qui ont été écrites et regroupées 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 plutôt sur ce lien pour voir le code de jQuery dans sa version 1.7. Plutôt impressionnant non ? Cela prend tout de suite une autre ampleur. :lol:

Ce qu'il faut vous dire, c'est que jQuery est vraiment une grosse boîte à 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 développements !

jQuery, un framework ou une librairie ?

Pour cette petite question de vocabulaire, nous allons vous apporter un élément de réponse. Vous avez très certainement au cours de vos visites sur le web entendu parler du mot librairie.

Le cas le plus simple : une librairie

Une librairie, en programmation, est une bibliothèque de fonctions.
Elles sont composées généralement par d'autres personnes qui les ont mises à disposition de tous, pour gagner du temps dans le développement. Elles sont souvent constituées d'un ou de plusieurs fichiers qui contiennent les fonctions. Tout ce que le programmeur a à faire, c'est d'inclure la librairie dans son code. Il peut ainsi commencer à utiliser les fonctions qui s'y trouvent pour avancer dans son code.

Il existe en fait une petite différence toute simple entre framework et librairie, et cette différence, nous nous proposons de vous l'expliquer dès maintenant pour mieux comprendre l'impact que jQuery va avoir sur votre manière de coder.

Un cas plus complexe : un framework

Un framework, c'est quelque chose de déjà plus complexe qu'une librairie. Les frameworks sont généralement beaucoup plus massifs que les librairies, et pour cause : ils proposent plus de choses.
En fait, lorsque l'on code avec une librairie, ce sont les fonctions qui la compose qui vont s'intégrer à notre code. Avec un framework, ce n'est pas du tout pareil.

Le framework pose les bases d'une application, et il va nous "forcer" à programmer selon les codes qu'il nous impose. Ainsi, on peut dire que c'est notre manière de coder qui s'intègre à la vision du framework. Pour jQuery, c'est exactement ça.

jQuery est plus qu'une simple librairie même s'il en a les traits majeurs, il va vraiment vous faire coder en JavaScript d'une nouvelle manière. Et ceci à tel point qu'il est tout à fait possible de considérer jQuery comme un langage un peu à part, puisqu'il s'agit vraiment d'une redécouverte totale de JavaScript. Lorsque vous commencerez à travailler vraiment avec jQuery, vous comprendrez réellement tout le sens de cette phrase.

Vous voulez un peu savoir ce que ce framework a dans le ventre ? Très bien ! Voyons maintenant à quoi peut (et va !) nous servir jQuery concrètement dans notre site web.

A quoi va nous servir jQuery ?

jQuery est un framework qui va nous simplifier la vie d'une manière générale, et cela va passer par plusieurs fronts.

Nous allons lister quelques petites choses qui feront que demain, cet outil que vous allez apprendre à utiliser vous sera totalement indispensable pour presque tous vos développements 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.

jQuery et la compatibilité

Concrètement, 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 imposées par jQuery sera compatible sur tous les navigateurs web.

Un gain de temps et d'énergie plus qu’appréciable, vous permettant de vous focaliser vraiment sur le cœur de votre code, plutôt que sur des questions de compatibilité entre navigateurs.

jQuery et l'AJAX

Dans le même registre de compatibilité, l'AJAX avec jQuery a été grandement simplifié. AJAX est rendu possible grâce à un objet de JavaScript appelé XmlHttpRequest (XHR)... seulement, instancier un objet XmlHttpRequest peut vite devenir un véritable calvaire, car d'un navigateur à l'autre, cela ne se fait pas du tout de la même manière. Grâce à jQuery, instancier un objet XHR est très simple.
Une seule fonction instancie l'objet, et elle couvre tous les navigateurs, en plus de vous fournir des outils pour gérer au mieux votre requête ! AJAX devient donc étonnamment facile et rapide à utiliser.

jQuery et les animations

L'un des éléments incontournables de jQuery et qui a fait son succès est incontestablement la possibilité de créer des effets sur sa page. Envie de faire disparaître un bloc avec un effet de fondu, ou bien faire trembler un bouton submit sur votre page web ? Pas de problème ! jQuery le fait pour vous.

Vous verrez que la masse de fonctions que jQuery vous proposera afin de créer des effets sur vos pages web sera tout simplement impressionnante. Vous verrez aussi que la densité de la documentation en témoignera.

jQuery et les formulaires

Un des points forts de jQuery est qu'il va vous permettre d'effectuer un pré-traitement de vos formulaires HTML côté client, de manière très avancée. Nous pourrons ainsi relever quels type de formulaires ont mal été remplis et afficher ceci au visiteur.

Ainsi, ne comptez pas QUE sur jQuery pour valider vos données. Vous devrez également prévoir une validation côté 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 développement de jQuery.

Il travaillait pour le compte de la Mozilla Corporation en tant que développeur 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 créer un tel outil. Les autres développeurs 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 concrètement que tout le monde peut travailler sur le framework et participer à son amélioration. Vous verrez notamment plus tard qu'il existe des plug-ins jQuery que vous pourrez créer vous-même, afin de toujours plus compléter le framework... mais nous n'en sommes encore pas là. ^^

A ce jour, jQuery en est à sa version 1.7.2, et a déjà subi beaucoup de mises à jour. La communauté est en effet très active, et les mises à jour se font toujours régulièrement.

Des sites qui utilisent jQuery

jQuery est le framework JavaScript le plus utilisé sur le web, et ce, pour les qualités que nous vous avons présentées plus haut.

Voici quelques grands noms du web qui utilisent aujourd'hui jQuery de manière plus ou moins abondante, cela devrait vous aider à faire définitivement votre choix. :)

• Site du Zéro

• Google et ses différents services

• Mozilla

• Amazon

• ...

Sachez également que les CMS les plus répandus sur le web comme Drupal et Wordpress utilisent jQuery !

Cette introduction à jQuery et à son histoire est maintenant achevée. Nous espèrons que cela vous aura plus, et que vous cernez maintenant un peu mieux ce qu'est jQuery.

Nous allons maintenant nous intéresser aux outils dont on va avoir besoin pour coder correctement et efficacement avec jQuery.

Le choix du navigateur web

jQuery étant une technologie axée web, le navigateur sera sans aucun doute le programme dont vous aurez le plus besoin ici. Seulement, comment choisir le bon navigateur web pour travailler, quand on a toute une panoplie de produits tous plus excellents les uns que les autres ?

Ce choix est d'autant plus difficile lorsque l'on connaît les problèmes de compatibilité liés à l'utilisation de JavaScript dans son code... mais ici pas de problème, puisque jQuery va nous permettre de ne plus prendre ce paramètre en ligne de compte ! :D

Considérant cet élément, le choix du navigateur se résumera donc seulement à prendre celui avec lequel vous êtes le plus à l'aise. Voici une liste vous présentant les différents navigateurs web, honteusement reprise du tutoriel de référencement web du Site du Zéro. ;)

Icône	Nom	OS	Téléchargement	Déscription
	Internet Explorer		Fourni par défaut avec Windows.	Un navigateur web signé Microsoft et intégré par défaut à toutes les versions du système 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 récentes ne sont pas disponibles pour les systèmes comme Windows XP qui sont pourtant massivement utilisées encore aujourd'hui. Il y a donc une grosse probabilité que votre version d'Internet Explorer ne soit pas capable de reconnaître les dernières avancées technologiques en matière de standards web.
	Mozilla Firefox		Téléchargement	Un navigateur web gratuit et extrêmement performant signé par la Mozilla Foundation. Je ne saurais que vous recommander de l'utiliser sans modération.
	Google Chrome		Téléchargement	Un autre navigateur web signé cette fois-ci par Google. Le programme est basé sur un projet open-source baptisé Chromium, mais connaît quelques controverses vis à vis du respect des informations personnelles de ses utilisateurs. Il est néanmoins recommandé de l'utiliser tant il est performant.
	Chromium		Téléchargement	Chromium est le projet open-source sur lequel est basé Google Chrome. Il s'agit en fait de Google Chrome lavé de tous les ajouts de Google. Vous pouvez l'utiliser si vous êtes inquiet au sujet des questions du respect des informations personnelles.
	Opera		Téléchargement	Opera est un navigateur web de très grande qualité proposé gratuitement par l'entreprise Opera Software. Il est moins utilisé que les 4 précédents mais demeure un excellent produit.
	Safari		Téléchargement	Safari est le navigateur web d'Apple qui équipe tous les ordinateurs Apple par défaut. C'est un peu l'Internet Explorer de la pomme de ce point de vue.

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

Simplement parce que Firefox est vraiment le meilleur de tous les navigateurs lorsqu'il s'agit de développer pour le web. Nous souhaiterions vous faire découvrir (ou redécouvrir) un outil spécialement dédié au développement web, et surtout uniquement disponible sous Mozilla Firefox.

Cet outil, nommé Firebug vous sera vraiment d'une aide capitale dans vos futurs développement web, en particulier avec JavaScript et jQuery.

Un incontournable : Firebug pour Firefox !

Firebug est en fait une extension gratuite pour Firefox, qui est vraiment devenue incontournable pour tout développeur web qui se respecte.

Ajoutez Firebug à votre navigateur Firefox !

Elle a été développée par des développeurs indépendants, et vous pourrez l'ajouter directement à votre navigateur Firefox sur le site officiel Mozilla Addons.

Dans une optique d'aide au développement, l'extension Firebug se caractérise en fait par toute une panoplie d'outils pour le développement web qui vont venir s'intégrer complètement à Firefox dans le but de le compléter et de le rendre beaucoup utile et agréable à l'utilisation. Etant donné que c'est un ajout à Firefox, vous devez être conscient que l'installation de ces outils rend le navigateur sensiblement plus lourd, donc plus lent à l'exécution.

Utiliser la boîte à outils Firebug !

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

C'est très simple. Commencez par ouvrir une page web dans votre navigateur Firefox, optez par exemple pour la page d'accueil du Site du Zéro.

Une fois que vous y êtes... faites très attention, car la manipulation que vous allez devoir réaliser pour ouvrir Firebug va être tellement complexe que... bon ok, j'arrête. Contentez-vous simplement d'appuyer sur F12 et ça fera l'affaire. :D

La magie opère, et Firebug s'ouvre dans Firefox !

Firebug ouvert dans le navigateur Firefox !

Vous pouvez voir que Firebug dispose de 6 onglets, proposant des outils différents. Chaque onglet est découpé en deux zones ayant toutes une utilité différente de l'autre. Trois de ces onglets vont retenir notre attention pour le moment.

• Console

C'est de loin celui qui va le plus nous intéresser dans nos développements avec jQuery. C'est une console JavaScript qui vous retournera notamment les erreurs que vous pourriez commettre dans votre script jQuery ; vous permettant ainsi de les solutionner le plus facilement possible. Autre intérêt majeur de la console : elle vous permettra de taper du code JavaScript et de le tester à la volée. Vous pouvez aussi utiliser le site web jsFiddle. C'est un site "bac à sable". Idéal pour vous exercer.

• HTML

Pour l'onglet HTML, Firebug vous propose un outil vous permettant d'inspecter votre code HTML et de le modifier à la volée. Vous pourrez naviguer dans l'arboresence du document HTML, et la modifier très facilement. Vous verrez également vos modifications s'appliquer en direct sur le rendu de la page ouverte dans le navigateur.

• CSS

L'onglet CSS propose exactement la même chose l'onglet HTML, mais apadté pour les feuilles de style. Ici, vous pourrez modifier ou supprimer à la volée n'importe quelle propriété CSS contenue dans les feuilles de style reliées à la page.

Mine de rien, ces outils vont nous être sacrèment utiles pour développer en jQuery. Pour la suite : sachez qu'il existe 3 autres onglets : Script, DOM et réseau, mais que nous ne souhaitons pas développer 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 Zéro. :)

Un éditeur de texte efficace

Le dernier élément dont vous aurez besoin pour développer avec jQuery... ce sera bien sûr un éditeur de texte.

Un éditeur de texte performant et efficace

Nous ne pouvons pas opter pour n'importe quel éditeur de texte pour développer avec jQuery, et c'est d'ailleurs vrai pour n'importe quel langage. Ce qu'il nous faut, c'est un éditeur suffisament perfectionné pour gérer la coloration syntaxique. Ils sont nombreux, mais tout cela pour dire qu'il ne faut pas se laisser aller et utiliser le Bloc Note fourni par défaut avec Windows. ^^

Nous allons vous conseiller là-encore quelques exemples de programmes à utiliser, sachez qu'ils ne sont pas les mêmes en fonction du système d'exploitation que vous utilisez.

Sous Windows

Le code du framework jQuery ouvert sous Notepad++

Sous Windows, on peut trouver des éditeurs vraiment très performants. Nous utilisons respectivement les éditeurs Notepad++, qui a le mérite d'être gratuit, et l'éditeur Sublime Text 2. Pour ce dernier, sachez que le programme n'est pas gratuit et qu'il faudra songer à l'enregistrer au bout d'une certaine période.

Ces deux éditeurs sont vraiment de qualité. Sachez que Sublime Text 2 vous donne en plus de cela la possibilité de naviguer dans votre arborescence, un peu à la manière d'un IDE.
Un autre programme existe pareil ailleurs : ConTEXT. Pour l'avoir essayé, il est lui aussi de très bonne qualité en plus d'être gratuit.

Sous Linux

L'éditeur Gedit sous GNU/Linux Ubuntu 10.04

Sous Linux on a là encore beaucoup d'éditeurs différents 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 dépaysé, vous pourrez toujours éditer vos fichiers avec Vim ou Emacs. Si en revanche vous préférez utiliser un éditeur graphique, l'éditeur de texte Gedit ou Geany sont tous les deux excellents.

Sous MacOS X

Le logo de l'éditeur Smultron sous MacOS X

Le système d'exploitation de la firme Apple a lui aussi son lot d'éditeur. Le plus connu est sans doute Smultron, qui a été créé par un développeur Suédois.

Choisissez l'éditeur de texte avec lequel vous êtes le plus à l'aise. Si vous avez l'habitude de créer des sites internet, l'éditeur que vous utilisez pour HTML n'a aucune raison de ne pas connaître JavaScript. Et s'il connaît JavaScript : c'est qu'il connaît jQuery. :)

Vous arrivez bientôt au terme de votre préparation, bientôt nous allons pouvoir aborder réellement jQuery et commencer à coder avec lui. :)

Le chapitre qui suit sera le dernier chapitre introductif au cours. Nous allons faire une dernière petite mise au point... cette fois-ci au niveau du JavaScript. Vous remettre en mémoire une dernière fois les fondements de ce langage ne sera pas de trop avant d'apprendre jQuery !

Où et quand utiliser JavaScript ?

Avant tout chose, il nous faut définir la place que prendra notre code JavaScript dans la page. En effet, la structure se doit d'être claire, car on ne développe pas n'importe comment. Pour les connaisseurs, avez-vous pour habitude de placer du code PHP dans une page portant l'extension .html ? Pour sûr que non ! :D

Avec JavaScript, on sera un peu moins regardant à ce niveau, mais il est quand même préférable de bien diviser son code.

Où placer son code JavaScript ?

Cette question, bien qu'elle semble simplette et dénuée d'intérêt, fait parfois l'objet de débats sur le web. Certains diront qu'un code JavaScript DOIT se placer entre les balises <head></head>, car c'est comme cela que le langage HTML a été construit. En revanche, les non-adhérants à cette pratique diront que, pour un soucis de performance, il est largement plus rentable de placer JavaScript en fin de page, juste avant la fermeture de la balise <body>.

Le problème se pose maintenant : qui a raison, et qui a tort ? :o

Au cours de ce tutoriel, nous ne vous obligerons pas à préférer la première ou la deuxième pratique, mais il est clair pour nous que placer son code JavaScript en fin de page est plus logique : la structure HTML, le DOM, se charge ainsi en premier en raison de la lecture linéaire du navigateur, ce qui est le plus important. Vient ensuite JavaScript, qui se chargera d'ajouter tous les effets et applications voulues. Les codes que nous vous présenterons seront donc toujours placés en fin de page, ou dans des documents externes chargés en derniers.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
    
        <script>
            // mon code JavaScript
        </script>
    </body>
</html>

Quand et comment l'utiliser ?

Une des autres choses à retenir, c'est qu'il faut savoir utiliser JavaScript avec parcimonie. Souvenez-vous toujours que c'est un langage qui s'exécute du côté client, et qui est donc facilement contournable grâce à un bon navigateur. Ainsi, vérifier des informations peut se faire en JavaScript, mais doit toujours être assuré également du côté de votre serveur, qui lui n'est pas accessible. Cela vous évitera bien des problèmes !

Parallèlement, n'utilisez JavaScript que lorsqu'il est utile, c'est-à-dire lorsqu'il apporte quelque chose au visiteur. Faire un déluge de flocons de neige sur la page d'accueil présente très peu d'intérêt, et aura plutôt tendance à agacer l'utilisateur. :-° De même, ne chargez pas vos informations essentielles avec ce langage : les personnes l'ayant désactivé, les personnes handicapées et les robots des moteurs de recherche ne pourront ou ne sauront pas lire votre contenu !

JavaScript doit donc être sur un site web pour, par exemple, améliorer l'expérience utilisateur, mais surtout pas pour la création de contenu.

Variables et fonctions

Parmis les bonnes pratiques à adopter en JavaScript, il y a celles qui concernent les variables et les fonctions. Nous ne vous parlerons que de ces éléments pour la simple et bonne raison que leur déclaration ne change pas avec jQuery, contrairement aux évènements, par exemple. Si vous ne savez pas ce qu'est une variable ou une fonction, nous vous conseillons vivement d'aller lire un tutoriel consacré à JavaScript !

De la déclaration des variables

Les variables en JavaScript se déclarent toujours de la même façon : il faut précéder le nom du mot-clé var. Il est possible de déclarer plusieurs variables à la suite en les séparant de virgules :

var maVariable = 1, // cette variable vaut 1
    maVariable2, // celle-ci est déclarée, mais vide
    maVariable3 = true; // celle-ci contient le booléen true

Traditionnellement, on déclarera nos variables en début de code ; ce n'est pas le langage qui veut cela, c'est juste une façon d'y voir plus clair. ^^

Concernant les tableaux, plus couramment appelés arrays, et les objets, ils se déclarent grâce à leur structure particulière. Ainsi, on initialisera un tableau avec des crochets [ ], et un objet avec des accolades { }.

Fonctions et arguments

Les fonctions en JavaScript se déclarent de la même manière 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 déclarer celle-ci et pouvoir l'utiliser. Elle peut aussi prendre des arguments, qui feront office de variables accessibles uniquement dans la fonction qui les a instancié. Il est donc possible d'exploiter des données différentes avec une seule fonction.

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

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

Cas des fonctions anonymes

Il est possible, en JavaScript, de déclarer des fonctions qui ne possèdent pas de nom. Assez joliment, on les a appelées « fonctions anonymes ». Elles permettent de lancer une fonction directement depuis une variable, par exemple, ou même une autre fonction ! Elles seront donc très utilisées dans ce cours, donc assurez-vous bien d'être au point avec. Pour exemple, si je déclare une fonction anonyme dans une variable, je pourrai exécuter la fonction avec la variable :

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

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

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 nécessaire que vous soyez sûr de vous pour coder dans de bonnes conditions. Alors n'attendez plus, on commence dès maintenant ! :p

Inclure jQuery dans vos pages

Pour commencer à travailler avec jQuery sur votre site web, il va falloir tout naturellement l'inclure dans vos pages. Voyons ici comment l'on va procéder.

Deux méthodes pour inclure jQuery dans vos pages web

Vous devez savoir qu'il existe deux méthodes pour inclure jQuery dans vos pages. Les deux marchent et sont tout à fait valables, mais l'une est plutôt déconseillée alors que l'autre est au contraire vraiment très conseillée.

Inclure jQuery depuis votre serveur (méthode déconseillée)

La première de ces deux méthodes, celle qui n'est pas conseillée, consiste à inclure jQuery dans vos pages web depuis votre propre serveur. Pour cela, c'est très simple.

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

Pour récupérer jQuery, vous devez tout simplement cliquer sur l'option "Download" dans le menu du haut. Vous arriverez alors sur une page vous présentant les différentes 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 placée un peu en avant par rapport aux autres ; pratique pour l'identifier et la récupérer plus rapidement.

Ah oui ! Nous allions y venir ! :D

En fait, c'est très simple. jQuery vous est toujours fourni en deux exemplaires. Je vous rassure le contenu du fichier est exactement le même. Il n'y a pas 2 jQuery, il y en a bien qu'un seul.

• jQuery Minified

jQuery Minified est le framework jQuery "compressé". En effet, vous avez pu vous rendre compte : jQuery est un fichier qui est vraiment immense, et dans ce fichier immense vous pouvez voir qu'il y a beaucoup d'espaces et beaucoup de retours à la ligne : pour garder un peu de lisibilité pour les codeurs. Le problème, c'est qu'en faisant ça, le fichier prend vraiment plus de place. La version Minified répond à ce problème : tous les espaces et retours à la ligne sont retirés. Cela a pour effet de rendre le code complètement illisible, mais en revanche, jQuery sera téléchargé 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.

Bref, pour en revenir à notre inclusion dans nos pages, téléchargeons la version compressée de jQuery. Faites donc un Clic Droit -> Enregistrer sous, et placez jQuery dans un dossier facile d'accès pour pouvoir l'inclure plus facilement dans votre page web.

La suite est très simple et très basique. Ouvrons un document 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'accès vers le fichier est correct, jQuery a bien été relié à votre page web... seulement, cette méthode 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 deuxième méthode, celle qui est vraiment beaucoup plus recommandée par tous les développeurs jQuery !

Inclure jQuery depuis un serveur distant (Google !)

Et oui ! La méthode la plus recommandée pour inclure jQuery dans votre page web est encore d'inclure le fichier directement depuis un serveur distant.

Seulement voilà, il faut trouver quelqu'un de suffisamment fou pour pouvoir héberger un fichier aussi utilisé que jQuery et le mettre à disposition de tous les développeurs de la planète qui veulent l'utiliser... et il y a bien une entreprise qui fait ça, c'est Google !

Google n'est pas seulement un moteur de recherche et une suite de sites web, c'est aussi une entreprise qui a montré depuis toujours un intérêt farouche pour l'open-source. C'est ainsi que Google met à disposition de tous le framework jQuery hébergé directement sur ses serveurs. Google vous fournit un lien absolu à indiquer dans vos pages, et c'est tout bon, jQuery est inclus !

Reprenons le même code source que tout à l'heure, et adaptons-le pour ce deuxième cas de figure.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test jQuery</title>
   </head>
   <body>
   <p>On va bosser avec jQuery, c'est super !</p>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   </body>
</html>

jQuery est prêt à l'emploi !

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

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

jQuery n'est d'ailleurs pas le seul framework libre que Google héberge et propose à tout le monde. Si vous voulez voir l'intégralité des outils proposés par Google, vous pouvez vous rendre sur cette page. Les liens absolus à indiquer sont également référencés sur cette page du site Google dédié aux développeurs.

La réponse à cette question est très 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 immédiate, pour toujours accélérer 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'idéal serait quand même d'arriver à utiliser ce qu'il a à nous proposer non ? Voyons comment faire dès maintenant pour exploiter toute la puissance du framework. ^^

Une fonction générique : jQuery() ou $()

L'ensemble du framework jQuery repose sur une seule fonction. C'est la fonction la plus importante du framework, vous devrez toujours l'utiliser dès qu'il s'agira de développer en jQuery. Cette fonction, c'est tout bêtement la fonction jQuery() !

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

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test jQuery</title>
   </head>
   <body>
   <p>On va bosser avec jQuery, c'est super !</p>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- jQuery est inclus ! -->
   <script>
       jQuery(document).ready(function(){
           // Du code en jQuery va pouvoir être tapé ici !
       });
   </script>
   </body>
</html>

Oulah, il y a déjà pas mal d'infos dans ce code que nous allons devoir vous expliquer. :waw:

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 complète.

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

Alors, comme nous vous le disions, on a déjà pas mal de nouveautés dans ce code : la ligne 1 en contient le plus.

jQuery(document)

jQuery prend un argument. Ici, elle cible le "document", qui représente tout simplement votre document HTML sur lequel vous travaillez : votre page web.

jQuery(document).ready(function(){
    // notre code ici
});

La suite de ce code est vraiment très simple. Vous voyez que le prochain élément qui arrive, est l'événement ready. Cet événement se traduit simplement par "est prêt". Une fois que cet événement est vérifié, on lance une fonction anonyme dans laquelle on va placer notre jQuery. :)

Ainsi, cette ligne peut être traduite par : "quand le document HTML est prêt (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 chargée 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 cœur, parce que cela vous fera vraiment gagner du temps.

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'exécution de ce code. Vous pouvez également utiliser la méthode hard en utilisant carrément un alert(). ;)

Vous pouvez vous y prendre comme ceci :

/*
 * Avec un console.log
 */

jQuery(document).ready(function(){
  console.log("jQuery est prêt !");
});

/*
 * Avec un alert()
 */

jQuery(document).ready(function(){
 alert("jQuery est prêt !");
});

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 spécifiant pas le ready() :

/*
 * La structure de base simplifiée.
 */

jQuery(function(){

});

$() un alias de jQuery()

Vous savez tous qu'un programmeur, c'est par définition quelqu'un de très fainéant. Alors comme on a trouvé que c'était trop long d'écrire jQuery() pour appeler la fonction, on s'est dit qu'on allait créer un alias pour pouvoir l'appeler plus facilement. Ainsi, il faut savoir que la fonction jQuery peut aussi s'appeller avec $(). Le reste du code reste exactement le même.

Ainsi...

jQuery(function(){
    alert('jQuery est prêt !');
});

... et...

$(function(){
   alert('jQuery est prêt !');
});

... vont donner exactement le même résultat !

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

Éviter le conflit

La plupart des bibliothèques JavaScript utilisent elles aussi le $ (dollar), ce qui peut être la source de conflit entre les différentes librairies sur une même page. Pour éviter ce genre de problème, il est possible de passer la variable jQuery à une fonction anonyme pour être sûr que notre alias ne soit pas l'origine de conflits.

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

Parallèlement, ready() accepte également un alias en paramètre de la fonction anonyme. Il est alors possible de simplifier le code au maximum :

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

// ce code plus court revient au même :

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 entièrement sur celle-ci ! Autant dire que vous allez vous servir beaucoup plus du caractère $ (dollar) dès à présent ! ;)

Ainsi, pour agir avec les éléments d'une page web, on réalisera ce qu'on appelle couramment un « ciblage d'élément », qui représentera une balise, par exemple. On agira ensuite dessus grâce à des méthodes. Pour que vous ayez un aperçu, voici un code fictif tout simple usant du principe de jQuery :

$('monElement').maMethode();

Je cible dans un premier temps mon élément qui jouera le rôle d'objet, grâce à un sélecteur (chose que nous verrons plus en détails dans le prochain chapitre). Je peux ensuite agir dessus grâce à une méthode !

Une méthode en jQuery est une fonction un peu spéciale qui agira directement sur l'objet (ou l'élément ciblé, si vous préférez) indiqué. Le framework en possède beaucoup, mais il est possible de créer les nôtres ! Nous verrons cela dans un chapitre dédié, lorsque vous serez plus à l'aise avec jQuery.
Il est possible de chaîner les méthodes, c'est-à-dire que l'on peut en mettre plusieurs à la suite, pour agir sur l'objet en une seule fois.

$('monElement').premiereMethode().deuxiemeMethode();
/* la première méthode agit d'abord sur l'objet, avant la deuxième.
On a donc un ordre logique : les méthodes s'enclenchent les unes derrière les autres */

Si vous avez assimilé ce fonctionnement de base, vous avez fait le plus dur. ^^
Bien sûr, jQuery est bourré d'outils pour rendre la chose un peu plus vivante.

Vous devez commencer à comprendre comment fonctionne concrètement le framework ! :) C'est une très bonne chose, car nous allons monter le niveau d'un cran, et voir les sélecteurs dans le chapitre suivant.

Les sélecteurs de CSS

Avant de se lancer dans une foule de sélecteurs propres à jQuery tous plus compliqués les uns que les autres (non, on plaisante :p ), il est nécessaire de débuter par des sélecteurs plus basiques. En effet, le framework que nous étudions fonctionne tout d'abord avec les sélecteurs de CSS. Vous les connaissez surement, ou tout du moins la plupart, car vous êtes censé connaître un minimum la syntaxe du CSS pour suivre ce tutoriel.

Cela ne vous dit vraiment rien ? :euh:

Les sélecteurs les plus utilisés

Peut-être est-ce le mot sélecteur qui vous fait peur. Dans ce cas-là, je pense que votre mémoire va se rafraîchir si je vous parle d'identifiant et de classe. Pour rappel, il est possible d'attribuer une classe ou un identifiant à un élément HTML ; on s'en servira par la suite pour le sélectionner avec CSS, ce qui nous permettra de styliser l'élément.

Avec jQuery, vous pouvez très bien utiliser ces sélecteurs ! Ce sont même ceux-ci qui reviendront le plus souvent dans vos codes. Pour cela, il suffit de suivre simplement la syntaxe suivante, comme en CSS :

$('p'); // je sélectionne tous les paragraphes

$('.maClasse'); // je sélectionne les éléments ayant .maClasse pour classe

$('#monId'); // je sélectionne l'élément qui possède l'identifiant #monId

Frères et parents

Parmi les sélecteurs un peu plus complexes que les classes et les identifiants se trouvent les sélecteurs de descendance. Ce mot bizarrement employé dans un contexte tel que le nôtre cache en fait un concept très 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 système fait usage de la descendance !

Prenons un exemple concret. Je possède un paragraphe, dans lequel j'ai un lien absolu. Ma balise <a href="lien"></a> est alors imbriquée dans les balises <p></p> propres au paragraphe.

On dit que le paragraphe est un élément parent, et le lien un élément enfant.
Comprenez-vous le principe ? La balise parente à mon lien est la balise qui contient celui-ci. Ainsi, de cette façon-là, la balise <body> est parente de toute notre structure HTML !

CSS, et par extension, jQuery, permet de manipuler ce concept de descendance grâce à des sélecteurs spéciaux. Le plus connu est sans doute le sélecteur qui fait suivre deux éléments au minimum :

$('p .lien');
/* ici, nous sélectionnons tous les éléments ayant la classe .lien, 
et contenus dans un paragraphe qui joue le rôle de parent */

Le problème de cette méthode-ci est qu'elle prend en compte tous les éléments possédant la bonne classe et contenus dans un parent. Imaginez que vous ne vouliez sélectionner que les éléments 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 sélecteur un peu moins connu, qui n'est autre que >.

$('p > .lien');
/* ici, nous sélectionnons seulement les éléments ayant la classe .lien,
et descendants directement du paragraphe ! */

Il est ensuite possible de pousser le système encore plus loin, par exemple en utilisant les sélecteurs + et ~ qui se chargent de représenter les frères de l'élément. Ce qu'on appelle couramment les frères, dans ce contexte de jQuery, ce sont simplement les éléments qui se suivent directement, comme par exemple deux liens.

$('.lien + .visite');
/* la sélection s'effectue sur les éléments ayant pour classe .visite,
et qui sont immédiatement précédés d'un élément ayant pour classe .lien */

$('.lien ~ .visite');
/* dans ce cas-là, ce sont tous les éléments .visite,
précédés immédiatement ou non par un élément .lien */

Alors, pas trop compliqué ? :p

Jusque là, vous devriez avoir suivi assez facilement. Les sélecteurs CSS sont une chose assez peu difficile à assimiler, et si vous avez du mal, pas de soucis à avoir, cela viendra avec l'expérience. En attendant ce jour heureux, je vous invite à passer aux sélecteurs propres à jQuery !

Une sélection plus poussée

Les sélecteurs de CSS, c'est bien, mais des sélecteurs plus sophistiqués ne seraient pas de refus ! En effet, pour les besoins des développeurs, jQuery met en place une sélection d'éléments beaucoup plus poussée que CSS. Comprenez bien que ce n'est pas seulement avec des identifiants et des classes que nous pourrons établir un véritable système, ce serait le chaos total et franchement peu pratique. C'est pourquoi jQuery a mis en place ce que l'on appelle des filtres, qui ont une syntaxe particulière : deux points suivis du nom du sélecteur. Vous en saurez plus en lisant la suite. ;)

La place d'un élément

Parmis les très nombreux sélecteurs proposés par le framework figurent ceux qui permettent de sélectionner un élément suivant sa place sur la page. C'est quelque chose de vraiment pratique qui était assez compliqué à réaliser avec du simple JavaScript. Les plus utilisés et connus sont :

• :first, qui sélectionnera le tout premier élément donné ;

• :eq(index), qui se chargera de retourner l'élément possédant l'index spécifié ;

• :last, je pense que vous l'aurez vite compris, permettra de sélectionner le dernier élément.

Ainsi, de cette façon, il vous suffira de taper ceci pour faire une sélection sur le premier et/ou le dernier élément :

$('p:first'); // sélection du premier paragraphe trouvé

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

L'index d'un élément

Cela peut vous paraître flou au premier abord, contrairement aux deux autres sélecteurs. En effet, qu'est-ce que l'index d'un élément ?

Eh bien, pour faire le plus simple possible, c'est le numéro qui représente sa place dans la page. Ainsi, si vous possédez cinq paragraphes, vous pourrez par exemple sélectionner le troisième sans problème. Mais attention il y a un piège : il faut commencer à compter à partir de 0. C'est très important de retenir cela, le système est similaire sur les tableaux, par exemple. Alors quel chiffre taperez-vous pour retourner le troisième paragraphe ? :)

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

Sélection par attributs

Un autre type de sélecteurs sont les sélecteurs fonctionnant grâce aux attributs des éléments du DOM. Il est ainsi possible de réaliser de multiples actions sur les balises qui contiennent un attribut donné, tel qu'un identifiant ou une valeur :

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

Cibler d'autres façons

Heureusement, il est possible de préciser la requête. Imaginons que vous vouliez récupérer les éléments ayant une valeur (value) ou un nom (name) bien précis. Dans ce cas-là, il est possible de le dire à jQuery grâce à la syntaxe suivante :

$('input[name=pseudo]'); // cible seulement l'élément de formulaire ayant « pseudo » pour nom

Si au contraire vous voulez cibler tous les autres éléments, ceux qui n'ont pas la bonne valeur dans leur attribut, il suffit de rajouter un point d'exclamation (!) devant le signe "égal" (=) :

$('input[name!=pseudo]'); // retourne les éléments n'ayant pas « pseudo » pour nom

Le sélecteur :not()

Un peu à part, ce sélecteur particulier permet de cibler les éléments qui sont tout sauf ce qui a été indiqué à l'intérieur. Il permet donc une sélection puissante, et, depuis jQuery 1.3, permet même de spécifier plusieurs types de balises en même temps ! Il s'utilise très facilement :

$('p:not(.rouge)'); // sélection de tous les paragraphes, sauf ceux ayant .rouge comme classe

$('input:not(.bleu, .vert)'); // on sélectionne tous les éléments de formulaire sauf ceux ayant .bleu et/ou .vert comme classe

Autant dire qu'en terme de praticité, ce sélecteur vaut pas mal de points ! :D

Sauver la sélection

Il peut parfois se révéler pratique de sauvegarder un objet jQuery. Il est donc possible de rentrer une sélection dans une variable, cette dernière pouvant être utilisée à la place de la fonction principale.

var $element = $('monElement');

Le cas des formulaires

Pour exploiter la pleine puissance des très nombreux sélecteurs de jQuery, il faut se pencher sur les formulaires en HTML. En effet, l'interaction étant beaucoup plus présente à ces endroits, il est logique que le framework soit plus enclin à les dynamiser. Ainsi, la sélection des éléments de formulaire se fera d'une façon un peu différente, que nous allons commencer à traiter tout de suite. :)

Le type des éléments

Comme vous le savez surement, les éléments de formulaire peuvent changer de type selon ce que l'on veut en faire. La balise ne change pas et reste la même, on utilisera dans 90% des cas <input />. En changeant l'attribut type de la balise, il est possible de spécifier 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 :

$('input[type=button]'); // on sélectionne un input de type button

Ce code fonctionne parfaitement, mais ce n'est pas la meilleure façon de procéder ! Il y a plus simple, plus rapide et surtout plus propre. Pour respecter cela, il faut indiquer le type, précédé de deux points :

$('input:button'); // on sélectionne un input de type button

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

État des éléments

Dernière petite astuce avant de conclure ce chapitre, vous pouvez établir une sélection suivant l'état des éléments d'un formulaire. Vous allez nous répondre qu'il n'y a pas trente-six états, justement, et vous avez effectivement raison. Neanmoins, ce sont des sélecteurs que nous retrouverons assez souvent, et nous pensons qu'il est intéressant de les connaître.

Ainsi, vous pouvez vérifier qu'une case est cochée, ou qu'un élément est activé/désactivé, grâce aux sélecteurs suivants :

• :checked vérifie qu'une case est cochée ;

• :disabled cible les éléments désactivés ;

• :enabled fait le contraire, il sélectionne les éléments activés.

Le sélecteur $(this)

Le sélecteur le plus spécial est sans aucun doute $(this). Dans la plupart des langages orientés objet, le mot-clé this représente l'objet courant, celui qui est actuellement traité par une fonction, par exemple. jQuery permet la sélection de cet objet.

Exemple avec ce code qui traite chaque élément trouvé :

$('p').each(function(){
    
    $(this).html('Hello World !'); // $(this) représente le paragraphe courant

});

Performance des sélecteurs

Outre le fait de sélectionner des éléments avec jQuery, il ne faut pas négliger le reste. Ainsi, tout bon développeur sait que la performance est un point primordial dans un code, de quelque langage soit-il issu. La librairie jQuery n'est pas exempt : il faudra vous assurer que votre code est le plus rapide, le plus optimisé et le plus ergonomique possible. Cela passe par une foule de choses, mais nous allons en voir une seule ici : la performance des sélecteurs.

Car oui, les sélecteurs ne ciblent pas tous les éléments à la même vitesse. Ainsi, cibler un élément par un identifiant, par exemple, sera toujours plus rapide que cibler un élément par sa classe.

Les sélecteurs les plus rapides

On note une certaine différence de rapidité lorsqu'il s'agit de cibler des éléments de différentes façons. Le pourquoi est très simple : certains sélecteurs profitent de fonctions natives implémentées par JavaScript, car ils en descendent directement. On pensera donc notamment au sélecteur par identifiant, qui est le plus rapide des sélecteurs : c'est normal, il utilise directement la fonction getElementById() !

Ainsi, on note une rapidité 5 fois supérieure au deuxième sélecteur le plus rapide, qui est le sélecteur par balise. Vient ensuite le sélecteur par classe, les autres enregistrant une forte baisse de performance à l'utilisation.

Ces différences proviennent en fait du parcours du DOM : alors que l'identifiant, étant normalement unique, est ciblé directement par jQuery à cause de sa singularité, les classes vont être traitées une à une, en parcourant tout le document HTML pour les trouver. Pour optimiser au maximum une requête par classe, il suffit de cibler tout d'abord le parent de l'élément avec un identifiant :

$('#menu .sections');
// sélection plus rapide que :

$('.sections');

Écourter les chaînes

Les sélecteurs peuvent s'enchaîner, afin de cibler plus précisément des éléments. Cette astuce possède un lourd inconvénient : elle ralentit considérablement la vitesse de sélection des éléments du DOM. En effet, jQuery va devoir tout d'abord trouver le premier élément, puis va devoir passer au deuxième, et ainsi de suite... Il est alors possible d'augmenter exponentiellement le temps d'exécution du code. Voyons l'exemple suivant :

$('div p a');

$('#lien');

Ces deux ciblages sont identiques, pourtant, la première sélection est, en théorie, environ 15 fois plus lente que la deuxième ! En effet, dans le premier cas, jQuery va parcourir chaque bloc div du document, pour ne retourner que ceux possédant un paragraphe. Viennent ensuite ceux-ci, qui vont être parcourus jusqu'à trouver celui qui possède un lien. En revanche, dans le second cas, le lien va être ciblé directement de part son identifiant unique !

Rappelez-vous donc d'une règle essentielle lorsque vous utilisez jQuery : plus la chaîne de sélecteurs est courte, plus rapide sera la sélection.

C'est la fin de ce chapitre ! Vous avez vu que les sélecteurs de jQuery offrent de nombreuses possibilités de ciblages des éléments d'une page web, et ce n'est que le début de ce fabuleux framework ! Vous verrez dans le prochain chapitre comment gérer les évènements, où vous aurez besoin de mettre en pratique tout ce que vous venez de voir. Assurez-vous donc de bien avoir compris ! :)

Un évènement, des évènements...

Voyons voir ici ce que sont les évènements... si vous êtes assez à l'aise avec JavaScript, cette sous-partie n'aura probablement pas grand chose à vous apprendre. Mais bien sûr, lisez quand même car vous êtes en train de réapprendre JavaScript à travers jQuery !

C'est quoi un évènement ?

Pour expliquer la chose simplement, dites-vous qu'un évènement est une action remplie par le navigateur, ou plus généralement l'utilisateur. Vous connaissez les conditions ? Pour les évènements, c'est un peu le même principe : on lance un bout de code quand une action est remplie.

D'ailleurs ! Vous vous en êtes peut-être rendu compte, mais dans les chapitres précédents, nous avons déjà utilisé un évènement, le ready() ! Voyons le code que nous avions :

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

C'est la fonction de base de jQuery, vous vous souvenez ? Elle marche autour de l'évènement ready() qui écoute le chargement du document. L'écoute d'un évènement, c'est tout simplement le fait d'attacher une action bien précise à remplir à un élément pour déclencher une fonction, appelée écouteur d'évènement.

"QUAND le document est PRÊT, on appelle une fonction (dans laquelle on va mettre du jQuery)."

C'est le fonctionnement de ce code qui tourne autour de l'évènement 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'évènements différents, on ne se limitera pas qu'à écouter si notre page est chargée ou non. :D

• On aura par exemple un évènement qui pourra écouter la souris de l'utilisateur : quand il va cliquer sur un certain élément de votre page que vous aurez ciblé avec un sélecteur, vous pourrez exécuter du code jQuery.

• Un autre évènement peut écouter le clavier de l'utilisateur : quand il va presser des touches de son clavier, vous pourrez exécuter là encore du code.

En gros, on peut dire qu'un évènement fait le lien entre une action remplie, et une fonction (du code) exécutée.

Encore une fois, si vous êtes un habitué du JavaScript vous deviez connaître un peu tout ça, si ce n'était pas le cas, pas de problème : maintenant vous connaissez le concept. JavaScript permettait de gérer les évènements d'une certaine manière. Eh bien devinez quoi ? En jQuery, c'est totalement différent ! Bon point : en JavaScript, gérer des évènements ne se faisait pas du tout de la même manière d'un navigateur à l'autre. Sachez que jQuery uniformise encore le tout !

La syntaxe en elle-même est super simple, voyons ce que cela donne ici. Utilisons par exemple l'évènement click() qui est un évènement écoutant le clic de la souris.

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

Si on clique sur l'élément qui possède l'id #uneDiv (<div id="uneDiv"></div>), alors vous allez pouvoir déclencher du code JavaScript. Plus tard, lorsque l'on sera un peu plus à l'aise avec jQuery, on pourra par exemple décider de faire disparaître cette div (ou un autre élément !) avec un bel effet, ou même commencer à gérer une requête AJAX pour mettre à jour le contenu de cette div... bref ! Les possibilités sont multiples. :)

Les évènements vous intéressent et vous voulez aller plus loin, alors lisez donc la suite.

Quelques évènements incontournables

jQuery étant très complet il va nous donner l'opportunité d'écouter beaucoup d'évènements sur notre page web. Nous allons en voir quelques uns ici, que nous pensons incontournables.

Déclenchement d'évènements

Parmis les nombreux évènements disponibles, les plus célèbres sont sans aucun doute ceux pouvant être déclenchés par l'utilisateur. Ce sont eux qui permettent une très grande interactivité avec le visiteur, c'est donc eux qui seront les plus utilisés en général. Nous allons en voir quelques uns, ceux qui sont à connaître absolument !

L'écoute sur la souris

La souris d'un ordinateur est un outil qui permet à l'utilisateur de réaliser de multiples actions : cliquer, bouger, double-cliquer, descendre dans une page... Bref, un paquet de mouvements à prendre en compte. Ce qui est génial avec jQuery, c'est que l'on va pouvoir contrôler entièrement les actions du visiteur, et déclencher de multiples fonctions grâce à elles ! :)

Vous connaissez sans doute déjà click(), qui lance une fonction lors du clic de l'utilisateur sur l'objet associé. Nous vous proposons ci-dessous une liste d'évènements adaptés à la souris ; le fonctionnement reste le même.

L'écoute sur le clavier

Tout comme la souris, le clavier peut tout à fait être écouté par un script jQuery. L'utilisation la plus fréquente que l'on peut en faire est de détecter l'appui d'une touche et de lancer une action seulement si la bonne à été pressée. Les évènements associés ne sont pas très nombreux, on en trouvera seulement trois :

• keydown(), qui se lance lorsqu'une touche du clavier est enfoncée ;

• keypress(), qui se lance lorsqu'on maintient une touche enfoncée ;

• keyup(), qui se lance lorsqu'on relâche une touche préalablement enfoncée.

Pour connaître la touche enfoncée par l'utilisateur, dans chaque cas, il vous faudra employer une fonction anonyme équipée d'un argument représentant le code de la touche, sur lequel on appliquera la propriété keyCode. Cependant, le principal problème de cette propriété est qu'elle ne fonctionne pas sur tous les navigateurs (souvenez-vous que ceux-ci ont des moteurs JavaScript différents). Il faut donc ruser pour rendre notre code compatible tous navigateurs :

$(document).keyup(function(touche){ // on écoute l'évènement keyup()

    var appui = touche.which || touche.keyCode; // le code est compatible tous navigateurs grâce à ces deux propriétés

    if(appui == 13){ // si le code de la touche est égal à 13 (Entrée)
        alert('Vous venez d\'appuyer sur la touche Entrée !'); // on affiche une alerte
    }
});

Pour connaître le code d'une touche, je vous invite à aller consulter cette page.

Le cas des formulaires

Les éléments de formulaire possèdent eux aussi leur lot d'évènements associés. Par exemple, lorsqu'un champ est focalisé, on dit qu'il « prend le focus », car c'est sur lui que se trouve notre pointeur. Un évènement permet de contrôler ce genre de chose.

Le déclenchement virtuel

jQuery permet de simuler le déclenchement d'évènements grâce à une simple méthode. Pour faire court, vous n'avez pas besoin d'attendre que l'utilisateur remplisse une action précise pour lancer du code : vous pouvez exécuter virtuellement un évènement grâce à trigger() ! Il suffit de donner le type de l'évènement en tant qu'argument.

$('p').click(function(){
    alert('Cliqué !');
});

$('p').trigger('click'); // déclenche l'action au chargement du script

Annuler le comportement d'un élément par défaut

Chaque évènement possède son propre groupe d'éléments spécifiques à traiter : par exemple, la soumission de formulaire ne s'applique pas à tous les cas. Cependant, certains éléments ont un comportement par défaut, défini par le navigateur. Le cas le plus courant est le lien hypertexte : son comportement va être de rediriger l'utilisateur vers l'adresse donnée.

Une méthode en jQuery permet d'annuler tous comportement par défaut. Il s'agit de preventDefault().

$('a').click(function(e){
    e.preventDefault(); // annule l'action du lien
});

Les gestionnaires d'évènements

En jQuery, et même plus globalement en JavaScript, on peut faire appel aux gestionnaires d'évènements. Ce sont des fonctions auxquelles on donne un type d'évènement à écouter, ainsi qu'une fonction à exécuter à chaque fois que l'évènement est déclenché. Elles sont plusieurs et nous allons les étudier car elles représentent une partie importante de ce chapitre, si ce n'est LA plus importante !

Rappels

Si vous lisez ce cours, c'est que vous avez quand même quelques notions en JavaScript. Dans un premier temps, rappelez-vous la méthode que vous utilisiez pour écouter un évènement. Il devait sans doute s'agir de addEventListener(), qui signifie en français « ajouter un écouteur d'évènement ». Cette fonction prenait le plus souvent deux arguments : le premier indiquait le type d'évènement à écouter, le second était une fonction de retour exécutant du code.

Un troisième paramètre pouvait être défini à true ou false, et permettait d'utiliser soit la phase de capture, soit la phase de bouillonnement.

L'écoute en jQuery

Sachez qu'avec notre framework, il est possible de réaliser la même chose. L'écoute d'un évènement se réalisera avec la méthode bind() le plus souvent, mais la tendance s'inverse pour laisser place à la fonction on(), recommandée par les auteurs de jQuery depuis la version 1.7 : c'est donc très récent. Comme chaque développeur doit s'adapter au progrès, nous utiliserons la seconde méthode dans la suite de ce chapitre, et plus généralement de ce cours !

On note une différence majeure de flexibilité : nous allons voir juste après qu'il est possible de déléguer des évènements, de faire vivre des évènements, et évidemment d'écouter des évènements. Dans les versions plus anciennes de jQuery, il fallait utiliser trois méthodes différentes pour réaliser ces choses-là. La méthode on() permet de les regrouper en une seule, elle est donc bien plus pratique et ergonomique !

Précédemment, vous avez vu comment déclencher un évènement simple. Les fonctions utilisées n'étaient en fait que des méthodes simplifiées, permettant aux développeurs de ne pas créer à chaque fois un gestionnaire. Nous allons voir à présent l'écoute, la vraie, d'évènements en jQuery.

Pour écouter un évènement, il suffit de réaliser le même schéma de code qu'avec addEventListener(). C'est-à-dire que l'on va donner dans un premier temps le type d'évènement, puis la fonction de callback à exécuter :

$('button').on('click', function(){
    alert('Ce code fonctionne !');
});

Concrètement, ce code se lance de cette façon :

1. on cible un bouton ;

2. on initialise un gestionnaire d'évènement ;

3. on écoute le clic de l'utilisateur ;

4. et on exécute le code de la fonction de retour.

Un des avantages de cette technique est que l'écoute peut se faire sur plusieurs évènements en même temps, vous n'êtes pas obligé de créer un gestionnaire pour chacun d'eux ! Ainsi, nous pouvons lancer une écoute sur le clic et sur le double-clic, en séparant les deux types par un espace :

$('button').on('click dblclick', function(){ // on écoute le clic et le double-clic !
    alert('Ce code fonctionne !');
});

Passer par un objet

Encore plus fort, vous pouvez passer un objet en tant qu'argument à cette méthode, afin d'exécuter des fonctions différentes pour chaque évènement ! Le concept est très simple, il suffit de donner le type d'évènement en tant qu'identifiant, auxquel vous attachez une fonction de retour à chaque fois :

$('button').on({
    click : function(){
        alert('Vous avez cliqué !');
    },
    mouseup : function(){
        alert('Vous avez relâché le clic !');
    }
});

La délégation d'évènements

Ce concept est plutôt simple à comprendre. Il permet en fait de créer un écouteur d'évènements sur un élément, et de s'adapter automatiquement aux éléments similaires créés plus tard, de façon dynamique ! Pour que vous compreniez bien, imaginons que vous ayez un paragraphe simple, sur lequel vous appliquez un évènement. Si vous créez 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 très courant (et ça l'est encore ajourd'hui) d'utiliser la méthode live(), pour déléguer un évènement à un élément créé dynamiquement. C'est une technique dépréciée, pour la simple et bonne raison qu'elle devient lente sur de grosses pages, et les problèmes de performance sont très mal vus des développeurs. De même, cette méthode parcoure l'ensemble du document, contrairement à on(), qui cible directement un élément ! On a donc une portée restreinte pour une efficacité croissante : double gain de vitesse d'exécution !

La fonction delegate() est presque autant utilisée que live(). La différence entre ces méthodes est que la première fonctionne presque comme on(), et est donc plus propre et ergonomique. Elle n'est pas dépréciée, contrairement à sa cousine, mais encore une fois, vous n'aurez pas à l'utiliser.

La syntaxe pour déléguer un évènement est très simple. Il faut donner trois arguments :

• le type d'évènement ;

• l'élément sur lequel on veut faire une délégation ;

• et la fonction de retour.

$('div').on('click', 'p', function(){
    alert('Les paragraphes créés peuvent être cliqués !');
});

Les espaces de noms

Très utiles, les espaces de noms (namespaces dans la langue de Shakespeare) ont la capacité de désigner un évènement bien précis. Le nommage d'évènement n'étant pas possible avec une fonction, les développeurs de jQuery ont préféré mettre en place ce système. A utiliser avec les gestionnaires d'évènements, les espaces de noms ont une syntaxe bien particulière à retenir :

event.namespace

• « event » désigne le type d'évènement qui doit subir un espace de nom.

• Le point permet de faire la jonction avec l'espace de nom.

• « namespace » désigne le nom.

Grâce un système pareil, vous pourrez exécuter différentes fonctions à partir d'un même type d'évènement. Il suffit de spécifier l'espace de nom à utiliser, et seule la fonction correspondante sera exécutée.

$('button').on('click.nom', function(){
    alert('Premier évènement');
});

$('button').on('click.prenom', function(){
    alert('Second évènement');
});

$('button').trigger('click.nom'); // exécute le clic, MAIS ne lance que la première alerte !

Quatre règles doivent être respectées lorsque vous utilisez les espaces de noms. Il ne faut pas en user n'importe comment, car ils ne sont pas adaptés à chaque cas d'utilisation :

1. • il est possible de donner plusieurs espaces de noms à un évènement ;

   • en revanche, il n'est pas possible d'appeler plusieurs espaces de noms d'un seul coup !

   • Exemple : on('click.nom.prenom', ...) définira en même temps click.nom et click.prenom ; mais trigger('click.nom.prenom') ne marchera pas.

2. • vous pouvez seulement préciser le type d'évènement, sans les espaces de noms, pour tous les déclencher en même temps ;

   • en revanche, il n'est pas possible de ne préciser qu'un espace de nom sans type d'évènement !

   • Exemple : trigger('click') déclenchera toutes les fonctions associées aux espaces de noms sur le clic ; mais trigger('.nom') ne marchera pas.

La suppression en jQuery

S'il est possible d'écouter un évènement avec on(), il doit être également possible de le supprimer ! Et en effet, la fonction inverse à cette méthode se nomme, de manière plutôt logique, off(). Elle est assez puissante dans le sens où elle peut supprimer tous les gestionnaires et écouteurs mis en place précédemment avec on(), de même qu'on utilisait unbind() pour annuler bind() ! Fort heureusement, ce n'est pas sa seule utilisation : un argument permet notamment de spécifier quel type d'évènement il faut annuler.

$('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 évènement

Annuler la délégation

La fonction inverse de live(), avant de passer à off(), se nommait die(). De même que pour sa soeur, cette méthode est dépréciée, on peut donc dire qu'il est temps pour die() de mourrir ! :lol:
Si vous voulez supprimer tous les gestionnaires d'évènements délégués seulement, il faut donner un second argument à la méthode, qui est l'élément créé dynamiquement. La valeur « ** » désigne tous les éléments qui profitent de la délégation d'évènements :

$('body').on('click', 'p', function(){
    // du code ici
});

$('body').off('click', 'p'); // supprime tous les gestionnaires d'évènements délégués sur les paragraphes

$('body').off('click', '**'); // supprime tous les gestionnaires d'évènements délégués

Vous avez vu, les évènements n'étaient pas difficiles à comprendre, et en plus de ça, c'est plutôt 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 très utilisés !

Les bases du framework se mettent de plus en plus en place dans votre tête, et c'est une très bonne chance. Bientôt 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 éléments de votre design dynamiquement, un rêve inavoué ? :-°

Une méthode puissante : css()

Parmis les nombreuses méthodes de jQuery, il en est une que vous utiliserez très souvent en ce qui concerne la modification du style de vos pages. Il s'agit de la méthode au nom très éloquent : css().

Récupérer la valeur d'une propriété

La méthode css() peut prendre plusieurs sortes d'arguments. Le plus simple est de spécifier le nom de la propriété, afin de récupérer sa valeur. Imaginez que vous ayez un paragraphe dont le texte est de couleur verte. Pour récupérer cette donnée, vous devrez faire ceci en jQuery :

$('p').css('color'); // ma méthode ira chercher la valeur de la propriété "color" et retournera "green"

Définition de propriétés CSS

Vous vous doutez bien que s'il est possible de récupérer la valeur d'une propriété CSS spécifique, il est aussi possible d'en définir et d'en modifier. Pour cela, il suffit de passer un deuxième argument à la méthode, qui contiendra la valeur à donner à l'attribut :

$('p').css('color', 'red'); // ma méthode modifiera la propriété "color" et la définira à "red"

Il est également possible de définir plusieurs propriétés CSS en même temps, grâce à un objet JavaScript que l'on passera en tant qu'argument. Il suffira de séparer les différents attributs par une virgule :

$('p').css({
    color : 'red', // couleur rouge
    width : '300px', // largeur de 300px
    height : '200px' // hauteur de 200px
});

Une chose est à retenir pour cette troisième façon de faire : il ne faut pas oublier que les tirets ne sont pas acceptés dans les identifiants d'un objet ! Pour parer à ce problème, il vous faut soit mettre la première lettre de chaque mot en majuscule, sans séparer ceux-ci, soit mettre le nom de la propriété entre guillemets ou apostrophes :

$('p').css({
    borderColor : 'red', // bordure rouge
    paddingRight : '30px', // marge intérieure de 30px
    'margin-left' : '10px' // marge extérieure de 10px
});

Positionner des éléments

La position des éléments d'une page web peut se définir avec la méthode css(), en modifiant les propriétés left, top, right et bottom. Parallèlement, des méthodes en jQuery permettent de faire ceci de manière plus propre :

• offset(), qui définit la position d'un élément par rapport au document, c'est donc une position absolue ;

• position(), qui définit la position d'un élément par rapport à son parent, c'est donc une position relative.

Ces méthodes ne fonctionnent qu'avec deux objets, qui sont left (axe horizontal x) et top (axe vertical y). Souvenez-vous que les données ont pour origine le coin en haut à gauche de la page. Ainsi, pour récupérer la valeur de la position d'un élément :

$('p').offset().left; // retourne la valeur "left" de l'élément (position absolue)

$('p').position().top; // retourne la valeur "top" de l'élément (position relative)

Modifier la position d'un élément

Il est possible de spécifier une nouvelle position à un élément, en passant par les méthodes précédentes. Il suffit de passer un objet en tant qu'argument, en donnant les nouvelles valeurs (en pixels) aux identifiants left et top :

$('p').offset({
    left : 30,
    top : 200
});

$('p').position({
    left : 200
});

Chaque méthode transforme l'objet donné (l'élément de la page web), et lui définit automatiquement une position absolue ou relative.

Gérer les dimensions

De même que pour les positions d'un élément, les dimensions peuvent être gérées directement avec css(). Cependant, plusieurs autres méthodes sont très pratiques pour gérer la hauteur et la largeur d'un bloc. Il s'agit des fonctions suivantes :

• height(), qui retourne la hauteur formatée en pixels ;

• width(), qui fait la même chose avec la largeur ;

• innerHeight() et innerWidth(), qui prennent en compte les marges intérieures ;

• outerHeight() et outerWidth(), qui prennent en compte les marges intérieures et la bordure d'un élément.

Le box model est un concept à connaître lorsque l'on manipule les dimensions avec jQuery. Conrètement, il faut retenir qu'il y a plusieurs types de largeur et d'hauteur. Les marges intérieures, les bordures et les marges extérieures sont des éléments à prendre en compte, et c'est pourquoi jQuery a créé plusieurs méthodes pour répondre à ce système.

Pour cela, il faut passer la valeur true aux méthodes outerHeight() et outerWidth().

$('p').height(); // retourne la hauteur stricte du paragraphe

$('p').innerWidth(); // retourne la largeur (avec marges intérieures) du paragraphe

$('p').outerWidth(); // retourne la largeur (avec marges intérieures + bordures) du paragraphe

$('p').outerHeight(true); // retourne la hauteur (avec marges intérieures + bordures + marges extérieures) du paragraphe

Le style CSS d'une page web est facilement modifiable, et il est possible de réaliser d'excellentes choses si on couple ce système avec les évènements. 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 ! :)

Explications et pré-requis

Le but de ce travail pratique est de réaliser un formulaire interactif, que l'on animera grâce à jQuery. Ce sera un formulaire très 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 vérifier les informations entrées : nombre de caractères, vérifier que la confirmation du mot de passe est identique à celui-ci, vérifier 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 deuxième 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 même, deux boutons devront permettre respectivement d'envoyer les données, et de vider les champs. Pas de langage serveur pour ce TP : tout devra se dérouler dans le côté client. Évidemment, vous devrez vous assurer par la suite, lorsque vous coderez pour des projets destinés au grand public, que les données sont bonnes du côté serveur, c'est très 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 manière :

• tous les champs devront contenir au moins 5 caractères ;

• le mot de passe et la confirmation devront être bien sûr 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 même manière, si le champ est bon, vous pourriez changer la couleur du champ adéquat en vert.

Méthodes requises

Pour pouvoir réaliser cela, vous allez devoir user des évènements, vous ne pourrez rien faire sans. De même, la manipulation du CSS doit être maîtrisée 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 récupérer le contenu d'un champ, vous devrez utiliser une méthode que nous n'avons pas encore traitée : val(). La propriété length vous permettra, elle, de récupérer la longueur d'une chaîne de caractère.

Nous vous donnons la structure HTML que nous utilisons, mais absolument rien ne vous empêche de créer la votre ! :)

<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="Rafraîchir" />
</form>

Correction

Alors, avez-vous réussi ? ^^

Nous vous proposons une correction. Si vous n'avez pas réussi à 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 :

<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="Rafraîchir" />
</form>

Formulaire basique, contenant quatre champs et deux boutons, précédé d'un bloc invisible contenant un message d'erreur. La suite était plutôt simple : il ne fallait surtout pas oublier d'inclure le fichier du framework, sinon vous ne pouviez pas utiliser jQuery :

<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="Rafraîchir" />
</form>

<!-- on inclut la bibliothèque depuis les serveurs de Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Le reste, c'était à faire au niveau du jQuery ! :)

Explications du code jQuery

La première des choses à laquelle penser était de s'assurer que le document était chargé. Pour cela, vous deviez utiliser l'évènement ready(), comme appris au début de cette partie.

$(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 conséquent, ainsi qu'une plus grande lisibilité dans le code. En suivant cela, il fallait déterminer quels éléments sélectionner :

• 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 rafraîchissement du formulaire ;

• le message d'erreur ;

• et enfin tous les champs en général (ceux ayant la classe .champ).

$(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 déterminer quel évènement vous deviez utiliser. La bonne façon de faire était d'écouter le clavier de l'utilisateur, grâce à l'évènement keyup(), et ce sur chaque champ du formulaire. Il suffisait ensuite de vérifier avec une condition que la longueur de la chaîne de caractère était supérieure à 5, grâce à la méthode val() et à la propriété length que nous vous avions donnés :

// le code précédent se trouve ici

$champ.keyup(function(){
    if($(this).val().length < 5){ // si la chaîne de caractères est inférieure à 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 vérifier que la confirmation et le mot de passe était identique :

$confirmation.keyup(function(){
    if($(this).val() != $mdp.val()){ // si la confirmation est différente 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'
	});
    }
});

Nous devons maintenant nous occuper des boutons d'envoi et de rafraîchissement. Dans le premier cas, il faut vérifier 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 façons d'y parvenir, et celle que nous utiliserons ici n'est pas la meilleure. Il existe une méthode spécialement adaptée pour traiter chaque élément trouvé un à un, mais nous ne vous avons pas encore appris comment l'utiliser. A la place, vous pouviez créer une fonction qui se chargeait de vérifier que le champ donné n'était pas vide :

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 vérification sur chaque champ :

$envoi.click(function(e){
    e.preventDefault(); // on annule la fonction par défaut du bouton d'envoi

    // puis on lance la fonction de vérification 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 rafraîchissement, et annuler tous les styles CSS sur le formulaire :

$reset.click(function(){
    $champ.css({ // on remet le style des champs comme on l'avait défini 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 désormais terminé ! Avouez que ce n'était tout de même pas sorcier. :D

$(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 chaîne de caractères est inférieure à 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 différente 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 défaut du bouton d'envoi

        // puis on lance la fonction de vérification sur tous les champs :
        verifier($pseudo);
        verifier($mdp);
        verifier($confirmation);
        verifier($mail);
    });

    $reset.click(function(){
        $champ.css({ // on remet le style des champs comme on l'avait défini 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'
    	    });
        }
    }

});

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 espérons que ce TP vous aura permis de progresser, car la pratique est le meilleur moyen pour obtenir un certain niveau.

Améliorations

Ce formulaire peut encore être amélioré, dans le sens où vous pourriez restreindre encore plus les possibilités de l'utilisateur, en interdisant de dépasser un certain nombre de caractères dans le pseudo, par exemple. De même, le style est pour l'instant ultra basique, rien ne vous empêche de le sophistiquer, pour que l'expérience utilisateur soit poussée à son maximum.

Quelques améliorations au niveau de la sécurité pourraient être apportées :

• vous pourriez vérifier le format de l'adresse e-mail, grâce à une expression régulière, faite avec l'objet Regex de JavaScript ;

• vous auriez pu également vérifier que le mot de passe était sûr, en faisant par exemple un mini-indicateur de sûreté qui se baserait sur le nombre de caractères, 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 très basique, des champs auraient eu leur place, comme le sexe, l'âge, la localisation ou même le prénom. Essayez de faire cela vous-même, cela ne sera que bénéfique 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 ! :diable:

La prochaine partie sera consacrée à la manipulation du code HTML à la volée, directement dans la page, grâce aux fonctions de parcours, aux attributs et à la manipulation du DOM. Vous verrez également comment maîtriser l'animation de vos éléments avec jQuery, ce qui est une très bonne chose quand on sait que c'est l'un des plus gros points forts du framework ! Trêve de bavardage, nous vous invitons à passer à la suite, pour que vous puissiez subir un nouveau TP le plus vite possible. :D

Animez vos éléments

Une des plus puissantes fonctionnalités de jQuery est sans doute l'animation. En effet, le framework vous permet de lancer des effets sur absolument tout et n'importe quoi. Mais concrètement, comment cela se passe-t-il ? Le mécanisme est en fait très simple si on l'aborde de manière théorique : c'est simplement une propriété CSS qui se déroulera pendant un interval de temps, donné en millisecondes.

Une méthode native de jQuery permet de gérer l'animation des éléments : il s'agit de animate().

Des animations personnalisées

La méthode animate() est très puissante dans le sens où elle peut recevoir une foule d'arguments différents. Le principe d'utilisation le plus fréquent que vous aurez à appliquer est de passer un objet à la méthode, contenant les propriétés CSS à animer. Oui, vous l'aurez de suite compris : c'est la même chose que pour la méthode css() !

La différence avec cette dernière méthode, c'est que animate() peut définir en plus :

• duration : le temps de déroulement de l'animation, toujours en millisecondes ;

• easing : la façon d'accélerer de l'animation, c'est-à-dire comment va-t-elle évoluer au cours du temps ;

• complete : et enfin une fonction de callback, qui est l'action appelée lorsque l'animation est terminée.

Ces arguments sont facultatifs ; par défaut, ils sont réglés respectivement à normal, swing et null. Nous verrons plus tard ce que ces valeurs signifient, et comment les modifier.

$('p').animate({
    width : '150px',
    fontSize : '35px', // ne pas oublier la syntaxe de l'identifiant !
    marginTop : '50px'
});

Lors du lancement de cette animation, mon paragraphe s'élargira, se déplacera par rapport à la hauteur du document, et verra sa taille de police se fixer à 35px.

duration : le temps de déroulement

Le temps de déroulement d'une animation est un facteur important : en effet, si votre animation est trop rapide, l'utilisateur risque de ne pas la voir. D'un autre côté, si elle est trop lente, il s'ennuiera et trouvera votre site web lourd et sans intérêt. Il va donc vous falloir trouver la bonne durée pour lancer votre animation. Cela dépendra notamment de son ampleur sur le visiteur : par exemple, si vous faites disparaître un sous-menu, cela sera plus rapide que si vous agrandissez un paragraphe de façon gigantesque. Il faut vous adapter.

L'argument peut prendre deux types de valeur : une chaîne de caractère (string) ou un nombre entier (int), qui représentera le temps en millisecondes (nous insistons là-dessus, beaucoup de débutants font l'erreur). La chaîne de caractère ne peut être qu'un de ces trois mots :

• slow, qui équivaut à une durée de 600 millisecondes ;

• normal, la valeur par défaut, qui est égale à 400 millisecondes ;

• et fast, qui représente une durée de 200 millisecondes seulement.

$('p').animate({
    width : '150px'
}, 'fast'); // premier exemple avec la valeur fast (200ms)

$('p').animate({
    width : '150px'
}, 1000); // second exemple avec 1000ms (= 1s)

easing : l'évolution de l'animation

L'évolution de l'animation est la façon dont va se dérouler celle-ci : est-ce qu'elle va aller de plus en plus vite au cours du temps ? Va-t-elle rester constante ? Actuellement, jQuery ne propose malheureusement que deux façons de dérouler l'animation :

• swing, qui est la valeur par défaut, fait aller l'animation de plus en plus vite au cours du temps, et ralentit à la fin ;

• linear, qui force l'animation à se dérouler à la même vitesse durant toute l'opération.

Pour user de plus de fonctions, il faudra passer par un plugin externe tel que jQuery UI. Nous apprendrons plus tard comment les mettre en place. :)

$('p').animate({
    width : '150px'
}, 'linear'); // l'animation se déroulera de façon linéaire

complete : la fonction de retour

La fonction de retour, plus communément appelée callback, est une action qui se lancera une fois l'animation terminée. Il suffit de donner une fonction anonyme en guise d'argument :

$('p').animate({
    width : '150px'
}, function(){
    alert('Animation terminée !');
});

Deux arguments supplémentaires : step et queue

Ces deux arguments, step et queue, ne peuvent être modifiés qu'avec une certaine manière de régler les arguments de la méthode animate(). Ils ne sont pas directement accessibles : il vous faudra passer par un objet comme second argument.

Passer par un objet

Vous savez que le premier argument de la méthode est un objet, contenant chaque propriété à animer. Ce qui est intéressant, c'est que les autres arguments peuvent se trouver sous forme d'objet eux aussi. Ainsi, ces deux animations feront exactement la même chose :

$('p').animate({
    width : '150px'
}, 1000, 'linear', function(){
    alert('Animation terminée !');
}); 

// ce code est égal à celui-ci :

$('p').animate({
    width : '150px'
}, {
    duration : 1000,
    easing : 'linear',
    complete : function(){
        alert('Animation terminée !');
    }
});

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 propriété CSS traitée ;

• queue déterminera si une animation doit se terminer avant d'en lancer une seconde, et prendra un booléen en tant que valeur.

Le second argument est utile si vous avez un chaînage d'animation ou plusieurs animations à la suite ; si vous voulez les lancer toutes en même temps, vous devrez mettre la valeur false : ainsi, les méthodes n'attendront pas la fin de la précédente avant de se lancer. Dans le cas contraire, queue devra être défini à true.

$('p')
    .animate({
        width : '150px'
    }, {
        duration : 1000,
        queue : false
    })
    .animate({
        fontSize : '35px'
    }, 1000);

// les deux animations se lanceront en même temps

Définition directe d'attributs

Il est possible que vous vouliez attribuer une accélération différente à chaque propriété CSS animée. C'est tout à fait possible de faire cela depuis la version 1.4 du framework ! :) On utilisera en général la première façon de faire, mais sachez qu'il en existe deux : on peut passer par un tableau (array) ou une propriété dans le second argument (object).

Pour la première méthode, vous devrez donner la nouvelle valeur de la propriété CSS dans un tableau, suivie du type d'accélération (swing ou linear pour le moment).

$('p').animate({
    fontSize : ['50px', 'linear'], // cette propriété s'animera de façon linéaire
    width : '200px' // les autres s'animeront de la façon définie ensuite : swing
}, 'swing');

La seconde méthode est un peu plus compliquée à mettre en place, dans le sens où vous devrez donner un objet à un identifiant d'un objet (qui, rappelons-le, est lui-même un argument de la méthode d'animation). La propriété à définir se nomme specialEasing :

$('p').animate({
    fontSize : '50px',
    width : '200px'
}, 
{
    easing : 'swing'
    specialEasing : { // on définit la propriété
        fontSize : 'linear' // puis on liste toutes les propriétés CSS dans un objet en donnant leur évolution
    }
});

Astuces et cas spéciaux

Il nous reste encore quelques petites choses à mettre au point avant de passer à la suite. En effet, nous n'avons pas encore parlé de certaines pratiques, qui méritent pourtant une place dans ce tutoriel. :D

Animer les couleurs

Vous l'aurez peut-être remarqué si vous avez testé quelques codes de votre côté, jQuery ne permet pas encore de traiter les animations sur les couleurs. C'est bien dommage, car elles sont un élément important du style d'une page web. Pas de panique, car un développeur jQuery a créé un petit plugin open-source (sources libres) permettant de faire cela.

Nous vous invitons à le télécharger à cette adresse (fichier jquery.color.js à inclure dans votre page). Une fois inclus, vous pourrez animer toutes les couleurs de n'importe quelle propriété :

$('p').animate({
    color : 'red',
    backgroundColor : 'green'
});

Ajout de valeurs

Une astuce très pratique en jQuery, c'est qu'il est possible d'ajouter une valeur à une propriété CSS. Le principe est similaire à l'ajout de valeur en JavaScript : vous devez passer par les préfixes += ou -=.

$('p').animate({
    width : '+=50px', // ajoute 50px à la largeur
    height : '-=20px' // enlève 20px à la hauteur
});

Animer les barres de défilement

En CSS, il est impossible d'agir sur les barres de défilement. C'est différent en JavaScript, et surtout en jQuery, qui met un point d'honneur à pouvoir les animer ! Les deux propriétés à influencer sont donc les suivantes :

• scrollTop, qui agit sur la barre de défilement verticale ;

• scrollLeft, qui agit sur la barre horizontale (si elle existe).

Elles s'animent exactement de la même façon que les autres propriétés.

Les trois états additionnels

Pas vraiment utilisés ni très connus, ces trois états ne sont autres que show, hide et toggle. Pourquoi disons-nous qu'ils ne sont pas très utilisés ? Parce que des méthodes spéciales existent, et sont bien plus rapides à mettre en place pour avoir le même résultat.

Néanmoins, nous pensons que vous pouvez en avoir parfois l'utilité. Et si ce n'est pas le cas, un peu de culture ne vous fera pas de mal, n'est-ce pas ? :p

Ces états permettent d'agir seulement sur la propriété qui les utilise. Concrètement, ils réalisent ces actions :

• show affiche la propriété ;

• hide se charge de la cacher ;

• toggle, lui, va faire la navette entre les deux : si la propriété est cachée, il l'affiche, et vice versa.

Ils s'utilisent donc de cette façon :

$('p').animate({
    width : 'show' // anime la largeur pour afficher le paragraphe
});

$('p').animate({
    width : 'hide' // anime la largeur pour cacher le paragraphe
});

$('p').animate({
    width : 'toggle' // anime la largeur pour cacher ou afficher le paragraphe
});

Les effets natifs

Certains puristes nous diront qu'on ne peut pas parler de nativité avec un framework, car ce n'est pas un langage à proprement parlé. Néanmoins, jQuery est tellement à part et redéfinit tellement de notions que nous pensons pouvoir nous permettre de faire ce petit abus de langage. :)

Maintenant que c'est clair, vous vous posez surement une question : que sont les effets natifs de jQuery ?

Le retour des trois états

Nous avions parlé brièvement des trois états show, hide et toggle, qui pouvaient être utilisés avec les propriétés CSS directement dans la méthode animate(). C'était bien jusqu'à maintenant, mais sachez que des méthodes spéciales existent justement pour faire cela !

Comme vous l'aurez surement deviné, il s'agit des fonctions :

• show() ;

• hide() ;

• et toggle().

Ces méthodes fonctionnent toutes de la même façon, et prennent le même type d'arguments : duration, qui est, pour rappel, la durée de déroulement en millisecondes, et complete, l'éternelle fonction de retour. Ils sont facultatifs.

$('p').hide('slow'); // cache le paragraphe en 600ms

$('p').show('fast', function(){
    alert('Paragraphe affiché !');
}); // affiche le paragraphe en 200ms, et lance une alerte à la fin de l'animation

Le cas de toggle()

La méthode toggle() est un peu particulière, é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 grâce à un booléen, par exemple. Si on lui indique true, elle affichera l'élément, si on lui indique false, elle fera l'inverse.

$('p').toggle(true); // aura le même rôle que show()

$('p').toggle(false); // aura le même rôle que hide()

Des méthodes plus esthétiques

Afficher et cacher des éléments, c'est bien, le faire esthétiquement, c'est mieux ! Ainsi, jQuery propose six méthodes permettant de faire exactement la même chose que les fonctions vues précédemment, mais de façon plus travaillée. Comprenons-nous bien : la finalité est exactement la même.

Dérouler et enrouler

Vous avez sans doute déjà vu des sites web utilisant ce genre de chose, pour un système de « dérouler / enrouler » notamment. Pour réaliser cela, rien de plus simple :

• slideDown() déroule l'élément pour l'afficher ;

• slideUp() enroule l'élément pour le cacher ;

• slideToggle() enroule ou déroule selon l'état courant de l'élément.

Les arguments ne changent pas, ils sont les mêmes que pour show(), hide() et toggle().

Apparition et disparition

On va jouer ici sur l'opacité de l'élément influencé.

• fadeIn() affiche l'élément progressivement ;

• fadeOut() cache l'élément, en ajustant l'opacité également.

• fadeToggle() affiche ou cache l'élément, grâce à l'opacité.

Le framework met également à disposition une fonction permettant de contrôler l'opacité finale de l'élément animé. Il s'agit de fadeTo(), qui prend en argument obligatoire un nombre décimal (float) entre 0 et 1 indiquant l'opacité.

$('p').fadeTo('normal', 0.5); // ajuste l'opacité et la fixe à 0.5

Reprenez le contrôle des effets

Faire des effets avec jQuery, c'est bien, mais avoir un total contrôle sur eux, c'est encore mieux ! Rappelez-vous toujours que la politique du framework est de vous offrir un maximum de souplesse et de possibilités dans votre code. Ainsi, il existe des méthodes qui ont pour rôle de vous aider à maîtriser vos effets : quand les déclencher, les arrêter, les ordonner, et même les influencer !

Vous allez voir dans cette partie tout ce qui traite la manipulation des animations.

Le concept de file d'attente

Vous ne le savez peut-être pas, mais ce système, vous l'utilisez à chaque fois que vous animez un élément d'une page web. Les méthodes permettant d'animer sont toutes basées dessus : ainsi, si vous avez quatre animations différentes, elles se dérouleront dans l'ordre chronologique, en attendant que la précédente se termine avant de se lancer. C'est ce qu'on appelle les files d'attente en jQuery. Plus concrètement, en employant le jargon technique, c'est simplement un tableau qui va lister les fonctions et les exécuter une à une jusqu'à arriver au terme. En anglais, on l'appelera queue.

Manipuler le tableau de fonctions

Il est possible de manipuler le tableau de fonctions, la queue, grâce à une méthode au nom éloquent : queue(). Cette fonction est à utiliser sur un élément qui subit une ou plusieurs animations. En modifiant certains arguments, vous serez ainsi capable de modifier directement l'array !

$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();

var fileAttente = $('p').queue('fx'); // je stocke la file d'attente, le tableau, dans une variable

alert(fileAttente.length); // renvoie 4

Pour rajouter une fonction dans la file d'attente, il suffit de passer ladite fonction en tant qu'argument.

$('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 dernière chose possible à faire est de carrément remplacer le tableau par un nouveau, que vous aurez créé directement. Cela n'a pas énormément d'intérêt, mais c'est notamment utile dans le cas où vous voulez vider l'array, ce qui a pour effet d'annuler toute animation.

$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();

$('p').queue('fx', []); // fait disparaître le paragraphe, puis vide la file d'attente

Ordonner la file d'attente

Préparez votre cerveau à résoudre des casses-tête, parce que la méthode que nous allons voir est un peu difficile à utiliser. Il s'agit de dequeue(), une fonction qui permet de stopper l'animation en cours de la file d'attente, et de passer à la suivante. Prenons un petit exemple concret :

$('p')
    .animate({
        fontSize : '+=100px'
    })
    .queue(function(){
        alert('Bonjour !');
        $(this).dequeue();
    })
    .animate({
        fontSize : '-=50px'
    })
    .queue(function(){
        alert('Au revoir !');
        $(this).dequeue();
    });

Si on analyse l'action de ce code, il se passe ceci :

1. la taille de la police augmente de 100 pixels,

2. une nouvelle fonction est ajoutée à la file,

3. une alerte affiche « Bonjour ! »,

4. la méthode dequeue() permet de lancer l'animation suivante ;

5. la taille de la police baisse de 50 pixels,

6. une nouvelle fonction est ajoutée à la file,

7. une alerte affiche « Au revoir ! »,

8. la méthode dequeue() permet de ne pas entraver les futures animations sur l'élément.

Suppression de fonctions non exécutées

Pour une raison x ou y, vous pouvez tout à fait stopper la file d'attente grâce à une méthode. Le rôle de clearQueue() est de supprimer toutes les fonctions de la file d'attente qui n'ont pas encore été exécutées. Une autre méthode nous permet de faire cela de façon un peu moins élaborée, que nous verrons ensuite.

$('p').animate({
    fontSize : '100px'
})
.queue(function(){ // on ajoute une fonction à la file d'attente
    alert('Bonjour !');
})
.clearQueue(); // empêche l'alerte de s'afficher

Arrêter les animations

Méthode très utilisée s'il en est, stop() a pour fonction première de... stopper une animation, c'est exactement ça. :p Elle peut prendre deux arguments au maximum, zéro au minimum. On l'utilisera le plus souvent pour éviter de lancer le même effet plusieurs fois de suite sans pouvoir l'arrêter : un code JavaScript, ça fait ce qu'on lui dit de faire sans se soucier d'autre chose. Par exemple, imaginez qu'un utilisateur, lorsqu'il clique sur un bouton, lancer une animation spécifique. S'il clique plusieurs fois de suite sans attendre la fin de l'animation, celle-ci va s'exécuter autant de fois qu'on le lui aura indiqué !

Arrêter une animation est donc une sécurité, l'assurance qu'elle ne se lancera pas des dizaines et des dizaines de fois sans pouvoir rien y faire. Les deux arguments possibles permettent :

• de stopper une ou toutes les animations suivantes (booléen à indiquer) ;

• de laisser l'animation courante se dérouler jusqu'à son terme (également un booléen).

Les cas que vous pourriez définir sont donc les suivants :

• $('p:animated').stop(); arrête l'animation courante ;

• $('p:animated').stop(true); annule toutes les animations suivantes, dont l'animation courante ;

• $('p:animated').stop(false, true); arrête l'animation courante, mais laisse l'élément aller à son état final ;

• $('p:animated').stop(true, true); annule toutes les animations suivantes, mais laisse l'élément courant aller à son état final.

Désactivation

Enfin, pour terminer, sachez qu'une propriété permet de désactiver toutes les animations de la page. Il suffit de passer à true la propriété jQuery.fx.off.

Ouf ! C'était un chapitre assez conséquent, vous ne trouvez pas ?

Les chapitres suivants seront un peu moins difficiles à avaler, mais il faudra rester concentré, car nous abordons la manipulation du DOM.

Gestion générale des attributs

Avant de se lancer dans une foule d'explications toutes plus passionnantes les unes que les autres, il faut déjà savoir ce que l'on va traiter. Dans notre cas, il s'agit des attributs.

Bref rappel sur les attributs

En HTML, les attributs sont contenus dans des balises. Ils définissent en quelque sorte comment le navigateur doit interpréter un élément d'une page web. Pour être bref et concis :

Citation : M@teo21

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires.

Sachez qu'il est possible d'influencer ces attributs avec jQuery, et donc de réaliser une foule de choses rien qu'avec une seule méthode, au moins aussi utilisée que css() et animate() : attr() !

Récupérer des valeurs

La fonction première de attr() est de pouvoir récupérer la ou les valeur(s) d'un attribut d'une balise. Il suffit de passer le nom de l'attribut souhaité en tant qu'argument :

var cheminImage = $('img').attr('src'); // rentre le contenu de l'attribut src dans une variable

(Re)définir un attribut

La seconde utilisation possible de cette méthode est de définir, ou redéfinir un attribut en passant par un deuxième argument. Comprenez par là que même si l'attribut donné n'existe pas dans la balise, il sera créé automatiquement. De même, la nouvelle valeur donnée écrasera celle en place si elle est déjà définie.

$('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'élément s'il n'existe pas

Passer par un objet

Par souci de performance, on préféra passer par un objet si l'on a plusieurs attributs à influencer en même temps. Les multiples appels d'un même objet jQuery sont à éviter, car ils sont gourmands et vos visiteurs risquent de ne pas apprécier si l'attente se révèle trop longue. Il est alors possible de chaîner les méthodes pour ne pas récupérer plusieurs fois de suite le même objet jQuery, mais là encore, vous devrez taper plusieurs fois la même fonction, ce qui au final se révélera aussi lent.

Il existe alors une solution, qui est à utiliser si vous êtes dans ce cas-là. Il est possible de donner un objet en tant que paramètre à la méthode attr(), qui contiendra chaque attribut à modifier et leurs nouvelles valeurs respectives.

$('img').attr('src', 'nouveauChemin/photo.png');
$('img').attr('alt', 'Nouvelle photo');
$('img').attr('title', 'Nouvelle photo');
// mauvaise méthode

$('img').attr({
    src : 'nouveauChemin/photo.png',
    alt : 'Nouvelle photo',
    title : 'Nouvelle photo'
});
// bonne méthode

Utilisation d'une fonction anonyme

Une fonction anonyme peut être déclarée en tant que valeur de l'attribut, c'est-à-dire en second argument. L'utilité est assez contextuelle, mais sachez que cette méthode permet de récupérer deux données et d'en faire usage :

• l'index de l'élément traité (commence par 0), représenté par un premier argument dans la fonction de retour ;

• la valeur actuelle de l'attribut traité, représenté par un second argument.

$('img').attr('alt', function(index, valeur){
    return index + 'ème élément - ' + valeur;
});

Supprimer un attribut

Jusque là, il est possible d'écraser un attribut en lui affectant une valeur nulle. Ce n'est pas très propre, mais ça fonctionne. Pourtant, une méthode a été conçue spécialement pour réaliser cela : removeAttr(). Il suffit de lui passer le nom de l'attribut en argument, et elle se charge de le supprimer définitivement du DOM.

$('img').removeAttr('title'); // supprime l'attribut title des images

Gérer les classes proprement

Il est bien évidemment possible de gérer les classes des éléments de votre page avec la méthode que l'on a vu précédemment. Seulement, un problème se pose : comment faire si l'on veut rajouter une classe sans supprimer celle actuellement en place ? Les développeurs de jQuery se sont penchés sur le sujet, et ont fini par créer des méthodes spécialement adaptées aux classes. On en dénombre quatre pour le moment, et nous allons les voir ensemble.

Ajouter une classe

La méthode addClass() permet d'ajouter une classe à l'élément spécifié. Veillez à bien faire la différence avec la sous-partie précédente : nous avions défini des attributs, mais pas ajouté. L'ajout de classe signifie que la fonction prend en compte la ou les classe(s) déjà en place. Ainsi, vous pouvez donner plusieurs classes dynamiquement à un élément, ce qui était impossible avec attr() ! :) De même, il est possible d'ajouter plusieurs classes en même temps en les séparant p