Javascript facile avec jQuery
Le web c’est essentiellement des pages statiques. Si on veut commencer à avoir des niveau d’interaction utilisateur proches ou équivalents à ce qu’on peut avoir dans une application stand-alone, il faut évidemment se mettre au javascript, histoire de gérer des événements et de rafraîchissements d’interface indépendant d’un rechargement complet de la page (et cela inclut aussi les requêtes asynchrones, le fameux AJAX, ce qui ne sera pas traité aujourd’hui).
Javascript, maintenant, ça marche très bien sur les navigateurs récents, et avec les progrès à la fois des interpréteurs et des machines, c’est exécuté dans des temps « interactifs ». Mais le javascript, c’est long et fastidieux, entend-on. Plus avec jQuery!
jQuery, c’est une bibliothèque javascript que l’on inclut dans sa page web, qui pèse quelques dizaines de Ko, et qui rend des services formidables. Si vous connaissez déjà l’outil, le billet ne vous apprendra rien, mais si vous avez envie d’enrichir vos applications web et que vous ne saviez pas par quel bout commencer, alors lisez la suite!
Je ne vais pas entrer dans le détail, mais plutôt illustrer l’utilisation de la bibliothèque par quelques exemples simples.
Là où javascript va nécessiter d’écrire moultes lignes de codes et/ou fonctions d’aide pour la recherches d’éléments dans le DOM, jQuery va s’appuyer sur une syntaxe qui correspond à la sélection CSS.
Par exemple, imaginons que sur l’appui d’un bouton dans la page, je souhaite changer la couleur de tous les liens dans la page, via un changement de classe CSS, j’écrirai ceci :
function changeAnchorColor(){
$("a").addClass("altAnchor");
}
Une ligne de code pour, dans l’ordre, trouver tous les éléments de type <a> dans le document courant, et leur ajouter la classe CSS altAnchor ($ est un alias de la fonction-constructeur jQuery).
Imaginons maintenant que je veuille changer uniquement les liens de classe externalLink, et ce uniquement dans les paragraphes de la zone principale de mon site identifiée comme suit : <div id="main">...</div>.
function changeExternalLinks(){
$("#main > p > a.externalLink").addClass("altAnchor");
}
Comme on le voit, la sélection CSS est ici à l’œuvre. On doit donc lire : « à l’intérieur du bloc nommé main, et dans les blocs enfants directs de type <p>, je sélectionne les éléments enfants <a> dont la classe est externalLink« .
Là où il aurait fallu écrire des parcours de tableau successifs, encore une fois, une seule ligne de code très explicite est suffisante.
Je me limite là à deux exemples très simples. On peut aussi vouloir appliquer un traitement plus complexe aux éléments sélectionnés. Il suffit pour ça de procéder comme suit :
$("a").each(function(element){
//traitements complexes sur l'objet de DOM element
});
Ici, j’appelle tout simplement une fonction (déclarée de façon anonyme, mais je peux aussi l’avoir déclarée ailleurs et la référencer ici) qui s’applique à chacun des éléments de mon tableau de résultats.
Je reviendrai probablement plus tard sur le sujet avec des exemples concrets. Cependant, rien qu’avec la fonction de sélection et celle d’appel de fonction par élément, on peut faire un nombre incroyable de choses. Je n’ai quasiment utilisé que ces deux fonctionnalités pour la première page que j’ai faite utilisant la bibliothèque, et ça marchait du tonnerre!
jQuery est une bibliothèque open source et libre, et elle dispose d’une multitude de plug-ins venus enrichir ses fonctionnalités. À mon avis, c’est une référence devenue incontournable dans le domaine du développement web. À essayer, et peut-être à adopter!
Pour finir en beauté, un exemple de ce que peut faire jQuery, avec la bibliothèque lightbox. Pour ce faire, j’ai simplement ajouté l’attribut rel="lightbox" aux liens vers les images, et lightbox s’occupe du reste automatiquement. Le code est donc non intrusif et les liens vers les images fonctionnent toujours même sans javascript!
 |
 |
 |
