Nous proposons dans cet article de présenter un framework JavaScript en particulier, le framework jQuery, à travers un exemple simple et la présentation d’éléments clés.

jQuery est un framework JavaScript qui permet de simplifier le développement de la couche “cliente” d’une application. Pour ce faire, il va s’appuyer grandement sur la manipulation du DOM. Ses principaux avantages par rapport au développement JavaScript sans framework sont :

• une manipulation simplifiée du DOM
• une structuration des scripts efficace avec l’utilisation du système d’extensions de jQuery (à ne pas confondre avec une extension du navigateur, il n’y a rien à installer ici)
• un fonctionnement similaire entre les navigateurs (la compatibilité est gérée dans le noyau de jQuery)
• un développement plus rapide et efficace du code JavaScript

Pour nous aider dans ces tâches, jQuery offre notamment des fonctions et méthodes pour :

• retrouver des éléments dans le DOM par l’utilisation de “sélecteurs” permettant la recherche d’éléments par id, class, type ou encore attributs
• naviguer dans l’arbre du DOM à partir d’un élément que ce soit en parcourant les enfants, les parents ou encore les nœuds “frères”
• manipuler les éléments du DOM, en permettant par exemple de créer un clone d’un nœud, de détacher un nœud du DOM, d’accrocher un nœud à une place précise dans le DOM…
• manipuler les styles CSS des éléments en leur ajoutant ou supprimant des classes à la volée
• gérer les évènements, en permettant notamment le déclenchement d’évènements, le rattachement à un évènement, avec bien sûr une gestion d’évènements personnalisée
• gérer les échanges avec le serveur en Ajax
• ajouter des effets de transition pour l’apparition d’un bloc dans la page, sa suppression, son changement de style

Les bases par l’exemple

Pour présenter ce framework, nous nous appuyons sur un exemple simple offrant un premier aperçu des possibilités offertes, puis nous abordons quelques aspects complémentaires pour bien débuter avec jQuery.

Tout d’abord, pour pouvoir utiliser ce framework, rien de plus simple. Il suffit d’inclure la dernière version du framework dans notre page HTML de la façon suivante en ayant préalablement téléchargé et copié le script à l’endroit souhaité :

Sur le site officiel de jQuery, on trouve une version compactée (débarrassée de tout commentaire et caractère inutile à l’interpréteur du script) et une version non compactée. C’est la version compactée que l’on préfèrera utiliser, à moins d’avoir besoin de déboguer le framework lui-même.

Intéressons-nous maintenant à l’exemple que nous détaillons par la suite, et qui permet de présenter le noyau de jQuery, les sélecteurs, la gestion des évènements et quelques fonctions de manipulation (notamment de manipulation du CSS) et de navigation dans le DOM. Voici donc le script sur lequel nous nous appuyons pour dérouler la suite de l’article :

Ce code apporte des fonctionnalités d’aide à la lecture d’un tableau de données. En cinq lignes, nous ajoutons à un tableau HTML basique :

• une alternance de styles de lignes paires/impaires
• la mise en évidence de la ligne survolée par le curseur
• la mise en évidence des lignes sélectionnées

Notre exemple contient simplement un tableau et nous avons ajouté quelques styles CSS pour l’habiller un peu. Le code HTML, CSS (et JavaScript bien sûr) y sont également présentés.

Styles ajoutés au tableau par le script jQuery (CLIQUER sur l’image pour l’agrandir)

Précisons ici que certaines des fonctionnalités présentées dans cet exemple pourraient être obtenues uniquement par l’utilisation de CSS. Cet exemple est avant tout conçu pour présenter simplement les possibilités offertes par jQuery. Il conserve tout de même l’avantage, offert par jQuery, de fonctionner dans chacun des navigateurs sans ajustement spécifique.

L’écriture de ce bout de code en jQuery ne demande que très peu d’apprentissage, et il permet de découvrir les bases de ce framework.

La fonction jQuery

La première ligne du script est intéressante à analyser :

Elle montre la fonction de base du noyau jQuery, la fonction qui porte le même nom que le framework, jQuery, et qui est ici appelée par un alias communément utilisé, $. Les fonctionnalités du framework sont centralisées autour de la fonction et de l’objet jQuery (en JavaScript, une fonction est un objet). Tout ce que nous présentons par la suite utilise cette fonction ou repose dessus indirectement. Il est nécessaire d’en comprendre les trois principaux usages :

La première façon d’utiliser la fonction jQuery consiste à lui fournir une fonction de retour (callback) en paramètre. C’est ce que nous faisons ici. Cette fonction est exécutée lorsque le DOM est chargé, c’est un équivalent de l’écriture suivante :

La deuxième façon d’utiliser la fonction jQuery, est de lui fournir un “sélecteur” en paramètre. Ceci permet de sélectionner des nœuds dans le DOM. jQuery renvoie alors une liste des nœuds qui respectent le sélecteur.

C’est cette utilisation de la fonction qui est faite à la deuxième ligne de l’exemple :

Le sélecteur est ici ‘table tbody tr:odd’. Utilisé par la fonction jQuery, il permet de sélectionner les lignes impaires du tableau de données pour leur ajouter la classe “odd”. Avec un style CSS associé, cela permet de les différencier des balises paires. Les sélecteurs sont un élément clé du framework. Nous leur consacrons une section dans la suite de l’article et des explications complémentaires sont apportées sur cette ligne d’exemple.

Une autre façon d’utiliser cette fonction est de lui fournir en paramètre une chaîne de caractères correspondant à du code HTML. Un nouveau nœud est alors retourné, et on peut le manipuler tout comme un nœud déjà existant dans le DOM (nous aborderons par la suite les fonctions de manipulation d’éléments du DOM). On peut alors notamment “l’accrocher” dans le DOM à l’endroit (aux endroits) souhaité(s).

Exemple :

Dans cet exemple nous créons un nœud qui contient un paragraphe avec du texte et nous l’accrochons à la fin de la balise <body>. Nous pouvons noter que la fonction de jQuery “appendTo” peut également prendre un sélecteur en paramètre. Le nœud que nous avons créé est alors accroché à tous les éléments répondant au sélecteur (ici à un seul endroit puisqu’il n’y a qu’une balise body par document).

Remarque : attention à l’alias $. En effet, plusieurs frameworks JavaScript utilisent cet alias. Pour éviter les confusions, il est préférable de désactiver l’alias $ et d’utiliser une closure :

La fonction passée en paramètre utilise alors $ en tant qu’alias de jQuery à l’intérieur de la closure uniquement.

Les sélecteurs

Comme nous l’expliquions précédemment, la fonction jQuery, ainsi que diverses méthodes du framework, peuvent prendre en paramètre un sélecteur. Utiliser cette possibilité aura pour résultat de filtrer la liste des nœuds du DOM retournée. Seuls les nœuds correspondants au sélecteur seront conservés.

Cette fonctionnalité est utilisée dans notre exemple à plusieurs reprises, notamment à la ligne 2 que nous évoquions précédemment :

Cette ligne permet de sélectionner toutes les balises “<tr>” impaires qui sont dans une balise “<tbody>” elle-même se trouvant dans une balise “<table>”. Un espace séparant deux balises représente une filiation, à n’importe quel degré tandis que le caractère supérieur « > » (comme dans ‘table>tbody’ par exemple) impose une filiation directe.

Les sélecteurs permettent de filtrer par id, par classe, par attribut, par élément (table, div, …)… en respectant la hiérarchie (parmi les enfants, parmi les frères…). Il est encore possible d’affiner le résultat avec des filtres basiques (le premier nœud, le dernier, avec un index donné, les nœuds pairs, impairs, …) ou suivant le contenu du nœud.

Dans l’exemple précédent, nous avons vu comment retourner tous les nœuds d’index impair dans un tableau. Voici maintenant un exemple d’un sélecteur par contenu. Prêtons attention aux deux lignes de code suivantes :

La première retourne tous les paragraphes « <p> » enfants directs d’un bloc « <div> », tandis que la seconde retourne tous les blocs « <div> » contenant au moins un paragraphe « <p> ».

Il est également possible de récupérer les nœuds qui correspondent à une liste de sélecteurs. Pour cela, il suffit de les séparer par des virgules « , » :

Cet exemple permet d’obtenir tous les nœuds de type div ou de type span.

Nous avons ici montré que la fonction jQuery pouvait prendre un sélecteur en paramètre, mais c’est également le cas d’autres méthodes très utiles du framework, telles que .find(), qui recherche parmi les sous-nœuds, parents(), qui filtre quand à elle les nœuds parents, ou encore .siblings() qui permet d’effectuer le filtrage parmi les nœuds frères…

La seconde partie de cet article présentera notamment les fonctions, méthodes et extensions jQuery.

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