De JavaScript à jQuery

Une transition nécessaire

1. Un choix de raison

Tout est possible en JavaScript, mais on se retrouve rapidement confronté à des différences de comportement entre les navigateurs. Quelquefois, ces différences se produisent même entre deux versions successives d’un même navigateur.

Le code JavaScript doit être bardé de tests pour savoir quel est le navigateur utilisé, et ainsi pouvoir utiliser un code adapté, voire même simuler certaines fonctionnalités absentes. Bref, c’est non seulement frustrant, mais cela pose en plus de gros problèmes dès qu’il s’agit de s’assurer qu’un site fonctionne bien sur tous les navigateurs du marché.

Heureusement, des développeurs qui ne supportaient pas cet état de fait ont créé des librairies permettant de faire abstraction de tous ces soucis. Il en existe de nombreuses, l’une des plus populaires est jQuery, autant la choisir.

jQuery est principalement dédié à trois usages : effectuer des requêtes HTTP, manipuler le DOM, et gérer les événements. Son fonctionnement asynchrone peut dérouter au début, mais c’est un avantage pour proposer une WebApp efficace et réactive.

2. Quelques bases

Pour installer jQuery, il faut tout d’abord le télécharger sur le site officiel jquery.com. Pour cela, il faut cliquer sur le bouton Download jQuery. Il y a alors deux possibilités : télécharger la version de développement « uncompressed development », qui permet de bénéficier d’informations de débogage, ou télécharger la version de production « compressed production », qui prend bien moins de place (86 Ko contre 273 Ko). Il existe une version encore plus compacte « slim build », mais qui ne contient que certaines fonctions, à n’utiliser que s’il faut vraiment économiser le maximum de mémoire.

Il est aussi possible d’accéder à jQuery sans avoir à le télécharger, il faut pour cela passer par un CDN (Content Delivery Network : réseau de livraison de contenu). Cette option permet de réduire le contenu hébergé sur le serveur...

Un sélecteur de couleurs

1. Étude comparative

Il peut être intéressant, pour bien comprendre tout l’intérêt de jQuery, de proposer une présentation comparative : la même fonctionnalité développée avec et sans cette librairie. Profitons-en pour choisir une fonctionnalité utile à coder, ce sera donc un sélecteur de couleurs, celui proposé dans le chapitre Un éditeur de texte est un peu trop limité avec ses 27 couleurs. Il y a moyen de faire mieux en suivant le même principe.

2. Version JavaScript

La partie HTML du code est vraiment minimaliste. C’est ainsi que sont codées la plupart des WebApp : un minimum de HTML et un maximum de JavaScript et de CSS.

<!DOCTYPE html> 
<html> 
<head> 
<title>COLOR CUBE JS</title> 
<meta charset='utf-8'></meta> 
<style> 
div.color 
      {position:fixed;background-color:#CCC} 
div.color table 
      {border:1px solid #CCC; border-collapse:collapse} 
div.rgb 
      {width:20px;height:20px} 
div.rgb:hover 
      {cursor:pointer} 
</style> 
</head> 
<body> 
 
<div class='color' id='colorPalette'> 
</div> 
 
</body> 
</html>

En fait, le code est essentiellement constitué de la définition de la feuille de style, qui est peu ou prou issue de l’éditeur de texte précédemment codé. Si on l’externalisait dans un fichier séparé, il ne resterait vraiment plus rien. Le code HTML ne contient qu’un seul et unique div. Il aurait même été possible d’aller plus loin et de ne rien mettre dans le body, toute l’arborescence HTML pouvant parfaitement être créée en JavaScript.

La fonction principale du programme contient l’essentiel du code. Elle est assez simple, se basant sur trois boucles imbriquées nommées r, g, et b, du nom des primaires de couleur.

function colorInit(step) 
{ 
      // Crée la table 
      var...