Formation jQuery

Problème à signaler:

Télécharger



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Formation jQuery avec exemple enjeux et pratique

...

1.1. L'histoire d'un framework1

JavaScript est un langage de programmation de scripts créé en 1995 et principalement employé dans les pages web interactives mais aussi pour les serveurs. Très rapidement, ses utilisateurs ont voulu faire évoluer JavaScript pour le rendre meilleur. C'est dans cet esprit que la communauté de JavaScript a développé des frameworks pour le langage ; l'un d'eux est jQuery ! jQuery n'est en fait qu'un seul et unique fichier JavaScript téléchargeable sur le web. C'est une énorme bibliothèque de fonctions JavaScript qui ont été écrites et regroupées pour plus de simplicité. Cependant, jQuery est pl

us 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.

jQuery est un framework qui va nous simplifier la programmation concernant :

  • la compatibilité inter-navigateurs
  • l'utilisation d'AJAX2
  • les animations
  • les formulaires

jQuery est publié sous licence libre GNU GPL 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.

1.2. Les outils

Pour coder à l'aide de jQuery, il faut quelques outils :

  • un navigateur : FireFox : actuellment le meilleur de tous les navigateurs lorsqu'il s'agit de développer pour le web.
  • le greffon Firebug : 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.
  • un éditeur de texte : Notepad++ : c'est un éditeur suffisament perfectionné pour gérer la coloration syntaxique.
  1. Les Bases du framework

2.1. Mon premier programme

Pour commencer à travailler avec jQuery, il va falloir tout naturellement l'inclure dans les pages web.

La méthode la plus recommandée pour inclure jQuery dans la page web est encore d'inclure le fichier directement depuis un serveur distant. Google met à disposition de tous le framework jQuery hébergé directement sur ses serveurs :

<!DOCTYPE html>

<html>

 <head>

 <meta charset="utf-8" />

 <title>Test jQuery</title>

 </head>

 <body>

 <p>On va utiliser jQuery !</p>

 <script  src="…">

 </script>

 </body>

</html>

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. L'ensemble du framework jQuery repose sur une seule fonction : jQuery() ! Sans cette fonction, le code jQuery peut ne pas être interprété correctement :

<!DOCTYPE html>

<html>

 <head>

 <meta charset="utf-8" />

 <title>Test jQuery</title>

 </head>

 <body>

 <p>On va utiliser jQuery !</p>

 <script src="…">

 </script>

 <script>

 jQuery(document).ready(function(){

 // Du code en jQuery va pouvoir être tapé ici !

 });

 </script>

 </body>

</html>

L'instruction « jQuery(document).ready(function() » peut être traduite par : "quand le document HTML est chargé, lance une fonction qui contient le code jQuery." Pour vérifier que cela est fonctionnel il suffit d'ajouter un console.log à la place des commentaires dans le code ci-dessus pour voir si on reçoit quelque chose dans la console Firebug à l'exécution de ce code. Ou bien utiliser un alert().

Exemple :

/*

 * 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 !");

});

Remarque : on peut ne pas spécifier le ready() :

/*

 * La structure de base simplifiée.

 */

jQuery(function(){

});

De même, la fonction jQuery peut aussi s'appeller avec l'alias $() :

$(function(){

alert('jQuery est prêt !');

});

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(function($){

 // notre code ici

});

Le framework met en place une fonction dite principale. Ainsi, pour agir avec les éléments d'une page web, on réalisera ce qu'on appelle couramment un « ciblage d'élément » et on agira ensuite dessus grâce à des méthodes :

$('monElement').maMethode();

2.2. Les sélecteurs

jQuery a une syntaxe qui permet de sélectionner très facilement des éléments sur la page. Le framework fonctionne avec les sélecteurs de 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

Parmi les sélecteurs un peu plus complexes que les classes et les identifiants se trouvent les sélecteurs de descendance. Si on dispose d'un paragraphe, dans lequel il y a un lien absolu, la balise est alors imbriquée dans les balises

propres au paragraphe : on dit que le paragraphe est un élément parent, et le lien un élément enfant. 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. Pour sélectionner que les éléments qui descendent directement du bloc parent, il vous faut utiliser le sélecteur >.

$('p > .lien');

/* ici, nous sélectionnons seulement les éléments ayant la classe .lien, et descendants directement du paragraphe ! */

Les sélecteurs + et ~ se chargent de représenter les frères de l'élément :

$('.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 */

Pour les besoins des développeurs, jQuery met en place une sélection d'éléments beaucoup plus poussée que CSS à l'aide de filtres qui ont une syntaxe particulière : deux points suivis du nom du sélecteur.

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 :

  • :first, qui sélectionnera le tout premier élément donné
  • :eq(index), qui se chargera de retourner l'élément possédant l'indece spécifié
  • :last, qui permettra de sélectionner le dernier élément

Exemple :

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

$('p:eq(2)'); // sélection de 3ème paragraphe trouvé (l'indice commence à 0)

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

Un autre type de sélecteurs sont les sélecteurs fonctionnant grâce aux attributs des éléments du DOM3

. 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

Pour récupérer les éléments ayant une valeur (value) ou un nom (name), 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

Pour 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() permet de cibler les éléments qui sont tout sauf ce qui a été indiqué à l'intérieur :

$('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

Pour sauvegarder un objet jQuery, il est 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');

2.2.1. Le cas des formulaires

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...

Pour cela, il faut indiquer le type, précédé de deux points :

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

...

Pour connaître l'état des éléments d'un formulaire, il suffit d'utiliser les sélecteurs suivants :

  • :checked vérifie qu'une case est cochée
  • :disabled cible les éléments désactivés
  • :enabled sélectionne les éléments activés

2.2.2. Le sélecteur $(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. jQuery permet la sélection de cet objet :

$('p').each(function(){

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

});

2.2.3. Performance des sélecteurs

Les sélecteurs ne ciblent pas tous les éléments à la même vitesse.

Ainsi, cibler un élément par un identifiant sera toujours plus rapide que cibler un élément par sa classe : c'est normal, il utilise directement la fonction getElementById() ! 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');

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 :

$('div p a');

$('#lien');

Ces deux ciblages sont identiques, pourtant, la première sélection est environ 15 fois plus lente que la deuxième : plus la chaîne de sélecteurs est courte, plus rapide sera la sélection.

2.3. jQuery et les événements

La fonction de base de jQuery fonctionne 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.

En JavaScript, gérer des évènements ne se faisait pas du tout de la même manière d'un navigateur à l'autre. jQuery uniformise le tout !

La syntaxe en elle-même est simple :

$("#uneDiv").click(function(){

 // Le code a exécuter !

});

En cliquant sur l'élément qui possède l'id #uneDiv (<div id="uneDiv"></div>), alors on déclenche du code JavaScript.

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.

2.3.2. L'écoute sur le clavier

Les évènements associés ne sont pas très nombreux :

  • 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, il faut 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 (certains ont des moteurs JavaScript différents). Il faut donc rendre notre code compatible tous navigateurs :

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

 // le code est compatible tous navigateurs grâce à ces deux propriétés

 var appui = touche.which || touche.keyCode;

 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

 }

});

2.3.3. Le cas des formulaires

Les éléments de formulaire possèdent eux aussi leur lot d'évènements associés :

Action Fonction

Focalisation focus()

Sélection (p.e. dans une liste) select()

Changement de valeur change()

Envoi du formulaire submit()

2.3.4. 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é.

Remarque : jQuery permet de simuler le déclenchement d'évènements sans attendre que l'utilisateur remplisse une action précise pour lancer du code, 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

Chaque évènement possède son propre groupe d'éléments spécifiques à traiter (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

});

La méthode utilisée pour écouter un événement avec jQuery est la méthode on() en indiquant le type d'évènement, puis la fonction de callback à exécuter :

$('button').on('click', function(){

 alert('Ce code fonctionne !');

});

  • on cible un bouton ;
  • on initialise un gestionnaire d'évènement ;
  • on écoute le clic de l'utilisateur ;
  • et on exécute le code de la fonction de retour.

L'écoute peut se faire sur plusieurs évènements en même temps, sans avoir à créer un gestionnaire pour chacun d'eux, 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 !');

});

Il est possible de 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 permet 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 ! Exemple : on dispose d'un paragraphe simple, sur lequel on applique un évènement. Si d'autres paragraphes sont créés dans la page, ceux-ci ne seront pas pris en compte par l'écouteur !

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 !');

});

Pour des raisons de performance, il est conseillé de lancer la méthode sur le parent non dynamique le plus proche des éléments créés à la volée.

S'il est possible d'écouter un évènement avec on(), il est également possible de le supprimer. La méthode off() permet de supprimer tous les gestionnaires et écouteurs mis en place précédemment

avec on().

$('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

Les évènements directs, mais aussi délégués, ne seront plus écoutés.

Pour 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

});

// supprime tous les gestionnaires d'évènements délégués sur les paragraphes

$('body').off('click', 'p');

// supprime tous les gestionnaires d'évènements délégués

$('body').off('click', '**');

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é ? :-°

2.3.5. Les espaces de noms

Les espaces de noms (namespaces) 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. Les espaces de noms ont une syntaxe bien particulière :

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.

Il est possible d'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');

});

// exécute le clic, MAIS ne lance que la première alerte !

$('button').trigger('click.nom');

Quatre règles doivent être respectées pour utiliser les espaces de noms :

  1. il est possible de donner plusieurs espaces de noms à un évènement ;
  2. 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.

  1. On peut seulement préciser le type d'évènement, sans les espaces de noms, pour tous les déclencher en même temps ;
  2. 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.

2.4. Manipuler le code CSS

La manipulation du code CSS en jQuery se fait de manière rapide et efficace. La méthode css() permet de modifier le style d'une page et de récupérer la valeur d'une propriété. Pour lire une propriété, le plus simple est de spécifier le nom de la propriété. Exemple : $('p').css('color'); // ma méthode ira chercher la valeur de la propriété "color" et retournera sa valeur Pour modifier la valeur d'une propriété CSS spécifique, il suffit de passer un deuxième argument à la méthode, qui contiendra la valeur à donner à l'attribut :

  


139