Premiers pas avec jQuery (partie 2/2)

Maintenant que la fonction de base du framework, jQuery ainsi que les sélecteurs ont été présentés, nous pouvons nous intéresser de plus près au fonctionnement des différentes fonctions du framework. Nous parlons ici abusivement de fonctions, mais, comme nous allons le voir, la documentation de jQuery fait mention de fonctions et de méthodes qui présentent une petite subtilité.

L’appel aux fonctions et méthodes du framework

Les différentes fonctions du framework sont enregistrées dans l’objet jQuery (en fait la fonction jQuery est un objet JavaScript, car en JavaScript toute fonction est objet, elle peut donc avoir ses propres fonctions et attributs). On les appelle donc de la façon suivante :

$.fonction(/*paramètres*/);

1	$.fonction(/paramètres/);

Comme par exemple :

$.get('url')

1	$.get('url')

qui effectue un appel Ajax « Get » grâce à l’URL fournie en paramètre. Dans cet exemple on peut bien évidemment donner plus de paramètres à la fonction, pour pouvoir notamment faire quelque chose des données ainsi récupérées.

Quand à elles, les méthodes du framework jQuery sont déclarées dans l’objet jQuery.fn. Elles ont la particularité de permettre le « chaînage ». Elles s’appliquent à une liste de nœuds qui peuvent être obtenus à l’aide de la fonction jQuery, ou d’une autre méthode du framework qui retourne une liste de nœuds, et s’appliquent sur la liste des nœuds retournés par chaînage, de la façon suivante :

$('selector').methode1({/*parameters*/}).methode2({/*parameters*/})

1	$('selector').methode1({/parameters/}).methode2({/parameters/})

Comme par exemple :

$('body').load('url');

1	$('body').load('url');

qui permet de récupérer le contenu à l’adresse « url » grâce à la fonction $.get et d’actualiser le contenu de la balise « » du document avec le résultat obtenu. Ici, seule la balise « » voit son contenu mis à jour, mais la méthode load() permet d’appliquer le même contenu à la liste de tous les nœuds qu’elle reçoit de la chaîne.

On peut de cette façon exécuter plusieurs méthodes « à la chaîne » sur la même liste de nœuds. C’est ce qui est utilisé dans le script présenté en exemple aux lignes 3, 4 et 5 :

$('table tbody tr').mouseover(function() {/*...*/})
.mouseout(function() {/*...*/})
.click(function() {/*...*/});

$('table tbody tr').mouseover(function() {/*...*/})

.mouseout(function() {/*...*/})

.click(function() {/*...*/});

Cette simple ligne permet de définir, pour les lignes du corps du tableau de données, le comportement

lors du passage du pointeur (.mouseover())
lorsque le pointeur quitte la ligne (.mouseout())
lorsque l’on clique sur la ligne (.click())

sans qu’il soit nécessaire de préciser à chaque fois sur quel(s) élément(s) portent les méthodes, puisque chacune des méthodes conserve le chaînage.

Les fonctions de callback et le mot clé « this »

Comme nous l’avons déjà observé, certaines méthodes prennent en paramètre une fonction. C’est le cas par exemple des méthodes .mouseover(), .mouseout() et .click() des lignes 3, 4 et 5 de l’exemple. Cette fonction est appelée pour chacun des nœuds de la chaîne, et dans son contexte, le mot clé « this » représente le nœud courant sur lequel est exécutée la fonction. « this » correspondant alors à un nœud du DOM, on peut le passer en paramètre de la fonction jQuery de la façon suivante :

$(this)

$(this)

et débuter ainsi une nouvelle chaîne.

Ceci nous permet de terminer l’explication de notre exemple :

$('table tbody tr').mouseover(function() {$(this).addClass('hover');})
.mouseout(function() {$(this).removeClass('hover');})
.click(function() {$(this).toggleClass('selected');});

$('table tbody tr').mouseover(function() {$(this).addClass('hover');})

.mouseout(function() {$(this).removeClass('hover');})

.click(function() {$(this).toggleClass('selected');});

qui se traduit en langage courant par :

Pour chaque ligne du tableau :

on ajoute une classe « hover » à la ligne survolée (méthode .addClass() )
on retire la classe « hover » d’une ligne qui n’est plus survolée (méthode .removeClass() )
on ajoute / retire la classe « selected » d’une ligne cliquée (méthode .toggleClass() )

Le classement des fonctions et méthodes

Maintenant que la différence entre les fonctions et les méthodes du framework est présentée, ainsi que le fonctionnement de la fonction jQuery elle-même, les quelques lignes de code proposées en exemple doivent sembler moins obscures.

Toutes les fonctions et méthodes du framework sont classées suivant des grandes classes de fonctionnalités, comme nous le présentions dans l’introduction. On retrouve ainsi notamment les fonctions et méthodes consacrées à :

la recherche d’éléments dans le DOM : jQuery(selector)
la navigation dans le DOM : .find(), .parents(), .siblings()
la manipulation des éléments du DOM : .html(), .appendTo(), .replace()…
la manipulation des styles : .addClass(), .removeClass(), .toggleClass()
la gestion des évènements : .trigger(), .bind(), .click()…
la gestion des échanges avec le serveur en Ajax : .ajax(), .get(), .post(), .load()
des effets d’animation pour l’apparition, disparition d’éléments notamment : .fadeIn(), .slideDown(), …

L’aide en ligne de jQuery rassemble les différentes méthodes et fonctions du framework par thème (navigation dans le DOM, manipulation du DOM, …). On y retrouve donc facilement ce que l’on cherche, et on peut ainsi également la parcourir pour en apprendre plus sur le framework. Elle est agrémentée de nombreux exemples et commentaires, et se prête donc très bien à l’exercice.

Et pour aller plus loin : les extensions

L’exemple simple qui nous a permis ici de faire une présentation succincte de jQuery peut se voir facilement complété pour y apporter quelques améliorations. Par exemple, une des grandes forces de jQuery est de proposer une façon simple d’étendre les fonctionnalités du framework en écrivant ses propres extensions (ou plugins). Il s’agit simplement de fonctions JavaScript ayant pour but de compléter les fonctionnalités de jQuery, et non d’extensions au même titre que celles qui sont installées au sein du navigateur. Elles sont donc fournies par le site internet qui en fait usage en même temps que jQuery et ne nécessitent aucune modification du navigateur.

Nous proposons ici une version simple d’écriture d’une extension jQuery qui permet d’intégrer toutes les fonctionnalités de tableau de données que l’on a présentées dans l’article. Nous ne rentrerons pas ici dans les détails, mais le code est bien commenté. Notez particulièrement la définition d’une fonction (qui prend en paramètre une ligne de tableau) et d’une méthode (qui récupère par chaînage la liste de toutes les lignes de tableau à traiter, et qui les retourne toutes de façon à maintenir le chaînage) :

 // On définit ici l’extension dans une closure, de façon à pouvoir utiliser
// la variable $ de façon sécurisée comme faisant référence à jQuery
// sans risque de confusion avec toute autre extension (function($) {
// Pour respecter le fonctionnement des méthodes et fonctions du framework
// jQuery, nous allons ici définir :
//  1. Une fonction dataTable prenant en paramètre une ligne de tableau à traiter
//  2. Une méthode dataTable, chaînable, faisant appel à la fonction dataTable pour
// chacun des éléments de la chaîne, et retournant tous les éléments de la chaîne
//  (en l’occurrence toutes les lignes de tableau)
// Définition de la fonction dataTable (qui prend en paramètre un élément
// ,ici une ligne de tableau, à traiter)
$.dataTable = function(el) {
// Sauvegarde du scope et des références à l'élément passé en paramètre
    var base = this;
    base.$el = $(el);
    base.el = el;
    // La méthode init permet d'ajouter à la ligne passée en paramètre, el,
    // toutes les fonctionnalités décrites dans l'article
    base.init = function() {

   base.$el.find('tbody tr:odd').addClass('odd');

   base.$el.find('tbody tr').mouseover(

  function() {

 $(this).addClass('hover');

  }).mouseout(

  function() {

 $(this).removeClass('hover');

  }).click(function() {

 $(this).toggleClass('selected');

  });
    };
    // Appel de la fonction d'initialisation
    base.init();
    // On retourne l'élément passé en paramètre pour maintenir le chaînage
    return base;
};
// Définition de la méthode dataTable, qui permet le chaînage.
// Elle retourne tous les éléments (return this.each())
// qu'elle a elle même récupéré de la chaîne, et fait appel à la fonction
// dataTable pour chacun des éléments (chacune des lignes)
$.fn.dataTable = function() {
    return this.each(function() {

   (new $.dataTable(this));
    });
}; })(jQuery); // Fin de la closure

// On définit ici l’extension dans une closure, de façon à pouvoir utiliser

// la variable $ de façon sécurisée comme faisant référence à jQuery

// sans risque de confusion avec toute autre extension (function($) {

// Pour respecter le fonctionnement des méthodes et fonctions du framework

// jQuery, nous allons ici définir :

// 1. Une fonction dataTable prenant en paramètre une ligne de tableau à traiter

// 2. Une méthode dataTable, chaînable, faisant appel à la fonction dataTable pour

// chacun des éléments de la chaîne, et retournant tous les éléments de la chaîne

// (en l’occurrence toutes les lignes de tableau)

// Définition de la fonction dataTable (qui prend en paramètre un élément

// ,ici une ligne de tableau, à traiter)

$.dataTable = function(el) {

// Sauvegarde du scope et des références à l'élément passé en paramètre

var base = this;

base.$el = $(el);

base.el = el;

// La méthode init permet d'ajouter à la ligne passée en paramètre, el,

// toutes les fonctionnalités décrites dans l'article

base.init = function() {

base.$el.find('tbody tr:odd').addClass('odd');

base.$el.find('tbody tr').mouseover(

function() {

$(this).addClass('hover');

}).mouseout(

function() {

$(this).removeClass('hover');

}).click(function() {

$(this).toggleClass('selected');

});

};

// Appel de la fonction d'initialisation

base.init();

// On retourne l'élément passé en paramètre pour maintenir le chaînage

return base;

};

// Définition de la méthode dataTable, qui permet le chaînage.

// Elle retourne tous les éléments (return this.each())

// qu'elle a elle même récupéré de la chaîne, et fait appel à la fonction

// dataTable pour chacun des éléments (chacune des lignes)

$.fn.dataTable = function() {

return this.each(function() {

(new $.dataTable(this));

});

}; })(jQuery); // Fin de la closure

On peut maintenant simplement déclarer un tableau comme étant un tableau de données en lui ajoutant, par exemple, une classe CSS spécifique (on pourrait également utiliser un Id) :

<table class="dataTable">
<!-- contenu du tableau ici --> </table>

1 2	<table class="dataTable"> <!-- contenu du tableau ici --> </table>

et en ajoutant cette ligne de JavaScript dans la page HTML :

<script type="text/javascript">
$(function ( ) { $('.dataTable').dataTable(); } ); </script>

1 2	<script type="text/javascript"> $(function ( ) { $('.dataTable').dataTable(); } ); </script>

Dès lors, tous les tableaux qui sont marqués par cette classe dans la page se voient dotés des mêmes fonctionnalités. Pour modifier le fonctionnement de tous les tableaux de données, il suffit alors simplement de mettre à jour l’extension jQuery. On pourra par exemple ajouter une fonction permettant de retourner tous les éléments sélectionnés dans le tableau, ajouter la gestion d’une case à cocher en première colonne du tableau (si une ligne est cliquée, alors la case correspondante est cochée), ajouter la fonctionnalité « sélectionner tout », etc.

Il reste encore beaucoup de fonctionnalités à découvrir dans jQuery. L’exemple présenté ici permet de montrer le principe de fonctionnement du framework et présente une base suffisante pour s’y retrouver dans la documentation et se lancer dans l’écriture de ses propres scripts et extensions jQuery.

Par ailleurs, on trouve beaucoup d’extensions disponibles sous licence MIT ou GPL qui sont facilement réutilisables et compatibles (c’est là toute la souplesse et la puissance de jQuery). On en trouve pour répondre à la plupart des besoins : validation de formulaire, diaporama, mise en place d’une interface graphique complète et complexe avec onglets, fenêtres…

En voici quelques exemples :

pour tout ce qui est lié à l’interface graphique et l’expérience utilisateur, l’extension jQuery UI offre bon nombre de fonctionnalités prêtes à l’emploi (système d’onglets, drag and drop, popups, sélecteur de date, …)
pour des tableaux de données paginés, triables, filtrables, avec actualisation en Ajax, il y a par exemple l’extension jqGrid, qui utilise par ailleurs jQuery UI
pour gérer la validation des formulaires, on peut faire confiance à l’extension jQuery Validation
…

Étendre les fonctionnalités de base de son application devient un vrai plaisir, il ne reste plus que quelques rares cas d’incompatibilité entre navigateurs à traiter… ou à ignorer en incitant alors les utilisateurs à migrer vers des versions plus récentes d’Internet Explorer s’ils utilisent IE : en effet, pour ces rares cas, il s’agit des navigateurs IE6 et IE7 qui n’ont pas un comportement standard et ne sont plus d’actualité. Malheureusement, ces navigateurs sont encore trop répandus, notamment dans le milieu professionnel.

Conclusion

Nous avons essayé de proposer dans cet article un premier aperçu de jQuery, tout en laissant entrevoir l’étendue de ses possibilités. L’exemple présenté ici peut être un point de départ avant de poursuivre avec des tutoriaux plus complets (et complexes) ou simplement à l’aide de la documentation qui propose de nombreux exemples bien commentés. Avant de se lancer dans l’utilisation d’extensions parfois complexes, il est important de manipuler jQuery seul et d’en comprendre les rouages.

Avec un investissement minimal, jQuery permet de simplifier l’écriture des codes JavaScript, grâce à ses fonctionnalités de manipulation et de navigation dans le DOM et sa compatibilité avec tous les navigateurs récents. Par ailleurs, la maintenance du code s’en trouve simplifiée. Il correspond tout à fait à la philosophie “write less, do more” mise en avant par le framework et permet de structurer efficacement le code JavaScript. De plus, étant un framework JavaScript, il a l’avantage d’être utilisable sans installation d’une extension dans le navigateur contrairement à Flash ou Silverlight par exemple.

Les inconvénients que l’on pourrait lui trouver incombent souvent au langage JavaScript lui même. En particulier, tout développement JavaScript non maitrisé peut mener à une expérience utilisateur entachée par de gros ralentissements et/ou une instabilité de l’interface graphique.

Il est possible de retrouver l’intégralité de cet article dans le numéro 150 du mois de Mars 2012 du magazine « Programmez ».

Par Gilles