Présentation de jQuery

Chaque fois qu’une opération est répétitive, il existe quelqu’un pour inventer un système qui va le prendre en charge.

1/7 | Suivant

Le code javascript n’échappe pas à la règle. Il pose, posait pourrait presque-t-on dire, deux problèmes actuellement :
- les navigateurs se basent sur des versions et normes différentes, ce qui complique l’écriture : chaque navigateur a ses spécificités, ce qui multiplie le code de contrôle.
- certaines fonctions sont compliquées à coder. Car les usages sont parfois en avance sur les fonctions disponibles. La manipulation du DOM, notamment, reste complexe.

Les bibliothèques javascript sont une réponse intéressante à plus d’un titre : pratiquement d’abord, mais aussi conceptuellement.

Qu’est ce que c’est ?

Les bibliothèques javascript sont en fait des fichiers javascript externes. Ces codes peuvent être très lourds, parfois jusqu’à plus de 100k, ce qui fait un paquet de lignes. On les intègre par une simple ligne de code dans la page, la même que d’habitude, la fameuse ligne d’inclusion :

<script type="text/javascript" src="jquery.js"></script>

Il faut évidemment avoir placé à l’endroit où pointe l’attribut "src", un fichier javascript dont le nom correspond. Pour télécharger jquery, allez sur le site : http://jquery.com/.

Rien ne se passe à priori, sauf que vous disposez maintenant d’une batterie de fonction destinées à simplifier le codage, et à résoudre les problèmes de compatibilité entre navigateurs.

Les fonctions disponibles dépendent de la bibliothèque intégrée. Mais principalement, on trouve des fonctions simples permettant de manipuler les CSS (modifier les styles et comportement css en général par javascript), de manipuler le DOM (creer, supprimer, déplacer des éléments de la page), et de faire des requetes AJAX.
Citons Prototype, Script.aculo.us, et JQuery. On peut aussi leur adjoindre d’autres bibliothèques qui permettent des manipulations par drag and drop par exemple.

Comment ça marche ?

Je prendrais pour exemple quelques fonctions issues de la doc de JQuery.
Après avoir placé le code rendant disponible les fonctions, on peut par exemple créer une fonction qui s’exécute après le chargement complet de la page.
Comme ceci :

$(document).ready(function(){
// et on code le javascript ici
});

Cela peut sembler compliqué, mais il faut se rappeler que le code se charge des problèmes de compabilité.
Ensuite, on va vraiment voir la machinerie en action, avec par exemple :

$(”a”).click(function(){
alert(”Merci de votre visite!”);
});

Ce code, inséré dans le premier code, va lancer une fenêtre d’alerte sur chaque lien de la page, cela sans avoir fait quoi que ce soit dans le body de votre page. La fonction “click” est décrite ici.

Une série de fonctions sont disponible dans la doc, regroupées par genre. Traverser le dom, agir sur les css, les événements, etc. Des exemples sont fournis. Passés la surprise première de la syntaxe, puis la documentation à se taper, on ne peut qu’être époustouflé par la puissance de ces scripts.

Si on va plus loin avec d’autres librairies, on peut construire des formulaires manipulables par drag and drop et utilsant AJAX. Voir les exemples fournis plus loin.

Plus

La grande force des bibliothèques javascript, c’est qu’elles répondent à un problème pratique d’une manière très “arts numériques” : open source (on voit mal comment protéger un fichier javascript), et généreux. Tout ceci à travers un code obscur partagé par quelques milliers de nerds. Qui fait s’exciter comme comme un con devant quelques amis amusés de vous voir vous empétrer dans des explications qui ne rendent pas plus compréhensible le charabia avec lequel vous avez commencé.