Découvrez jQuery :

JQuery est une librairie javascript opensource qui simplifie l'exploration DOM, la gestion d'évènements, de requètes Ajax et d'effets visuels, à l'instar de Dojo, Mootools, Prototype ou Mochikit.

Son paradigme est de rendre le code portable entre les navigateurs, plus concis et plus agréable à lire.

Elle est facile à prendre en main et à intégrer sur un site existant.

Son ancienneté (la première version date de 2006) et le dynamisme de son équipe, en font un outil stable, utilisable en environnement de production.

De nombreux plugins libres sont développés par la communauté, et répondent à la majorité des besoins fonctionnels ; à défaut ils rendront votre interface client moins rigide.
 

L'essentiel :

L'exploration des documents xml est sa première fonctionnalité.

Elle permet de consulter/modifier des données de manière dynamique. Le construction DOM prend en paramètre le chemin de(s) élément(s) à retourner, à la manière d'une requète xpath. La syntaxe utilisée ressemble beaucoup aux sélecteurs CSS3 :

• $('h1') : retourne tous les titres de premier niveau
• $('div#content') : permet de sélectionner un élément par son id
• $('div.class') : ou par sa classe
• $('div#docs-content pre:contains('.title'):eq(1)') : il est également possible de parcourir en profondeur l'arbre DOM

Une des forces de jQuery est de nous forcer à revoir notre manière de coder pour y intégrer par exemple le concept objet (implémenté mais si rarement utilisé en javascript).

• $dom = $('') : construit un lecteur DOM à partir d'une chaine de caractères représentant du xml
• $('div').html() : retourne le contenu innerHTML interprété
• $('div').css('color', 'red') : permet la manipulation (get/set) des attributs css
• $('div').attr('value', 'true') : permet la manipulation de n'importe quel attribut xml
• $('h1').each(function() {
      alert($(this).html() + ' a pour classe : ' + $(this).attr('class'));
  });

Pour aller plus loin :

La gestion des évènements fonctionne d'une manière assez similaire à ce que l'on peut trouver en Java ou C++. Pour associer une méthode ( handler() ) à un évènement ( trigger() ) ; on va créer un listener qui va se charger de rapporter tout déclenchement sur un élément donné.

> $('a').click(function() { alert('vous avez cliqué sur le lien ' + $(this).html()); return false; });

La méthode ci-dessus permet par exemple d'intercepter les clics sur les liens, mais on peut imaginer des scénarios plus complexes ; comme la prévarication d'un formulaire par exemple :

> $('form input[type="submit"]').click(function() { $form = $(this).parents('form:first'); if(validate_entries($form)) { $(form).submit(); } else { return false; } });

Il est à noter que chaque lien évènement/méthode s'ajoute à ceux déjà définis. Si l'évènement est déclenché, elles seront toutes exécutées dans l'ordre des déclarations.
 

jQuery offre des méthodes simplifiées de gestion d'appels asynchrones. La librairie permet de gérer la plupart des formats de réponse (texte, html, xml, json). Les appels client/serveurs doivent être locaux afin de limiter les possibilités de cross-site-scripting (XSS). Si l'on souhaite utiliser un service externe, il faudra implémenter le dialogue serveur/serveur. Voici les deux méthodes principales :

• $.get(uriServlet, {param1:"value1", param2:"value2"}, callback(data)) : lance une requête asynchrone, avec une fonction callback synchronisée au retour
• $('div.destination').load(uriServlet) : permet de charger la rΘponse d'une servlet dans un objet DOM

Il est fortement conseillé de consulter la documentation relative aux méthodes Ajax tant celles-ci peuvent être paramètres.

Etendre jQuery :
jQueryUI est le pendant graphique de la librairie. Les deux librairies ont été séparées car la seconde nécessite un ensemble de dépendances médias. Ainsi on pourra se contenter de jQuery seul si l'on souhaite gagner en performances, ou jQuery+jQueryUi pour enrichir les templates clients. On y trouve entre autres :

• boites de dialogues
• drag'n drop
• calendrier
• barre de chargement
• affichage divers : carrousel, accordéon, ...

Chaque thème est personnalisable rapidement afin de mieux coller à la charte graphique.

Il existe aussi de nombreux modules fonctionnels (plusieurs centaines). Aussi il y en aura certainement un qui correspondra à vos besoins. L'installation d'un module se résume à l'ajout du fichier librairie et de ses dépendances. Parmi les plus populaires, on pourra citer :

• "Autocomplete" pour l'auto-complétion
• "Simple WYSWYG" comme éditeur rich text
• "Chart" pour la création de graphiques javascript à partir de tableaux de données
• "Quicksearch" pour le tri rapide dans une liste données
• "Galleria" pour les galleries d'images

L'installation de nombreuses extensions peut rapidement poser un problème de poids. Il est donc conseillé d'utiliser un compresseur javascript/css comme YUICompressor afin d'améliorer les performances.

Conclusion :

jQuery n'implémente rien de nouveau mais permet de gagner :

• de la lisibilité, avec une syntaxe non-obfuscastrice qui remet l'objet à l'honneur
• de la robustesse, en s'appuyant par ce qui a déjà été codé, testé et approuvé
• du temps, qu'on aurait perdu en codant des hacks de portabilité inter-navigateurs

Bibliographie :

• Site officiel : http://jquery.com
• Documentation API : http://docs.jquery.com
• Dépôt officiel de plugins : http://plugins.jquery.com
• Librairie ihm : http://jqueryui.com

Arnaud