Cela fera bientôt 10 ans que JavaScript est synonyme de casse-tête pour les webmasters consciencieux.Ce langage orienté objet basé sur le prototypage des objets fut sûrement l'un des langages évolués les plus mals exploités que l'on puisse trouver. Qui n'a jamais rencontré, au détour d'une page web, une stupide petit étoile que se mettait à suivre le curseur de la souris, ou, aussi pénible qu'inutile, un “anti-clic-droit”, sans doute destiné à cacher les horreurs présentes dans le code de la page...

Tous ces gadgets inutiles qui, dans le pire des cas, pouvaient rendre un site totalement inaccessible à toute une série de visiteurs, ont contribué à donner au JavaScript une image de langage pour bricoleur du dimanche et à se faire bannir dans la plupart des recueils de bonnes pratiques pour le développement d'un site web.

On en a quasiment oublié que ce langage n'est pas uniquement utilisé dans les navigateurs mais peut également etre utilisé à part entière, que ce soit dans un programme indépendant ou en association avec d'autres langages

Aujourd'hui pourtant, on assiste à une remonté en force de ce langage. De nouvelles applications l'utilisant apparaissent quasi-quotidiennement. Sa standardisation par l'organisme ECMA(1) n'y est sans doute pas étrangère, mais avant tout, le JavaScript semble devoir son salut à ceux qui lui causèrent sa chute auparavant, les navigateurs. Firefox, par exemple, l'utilise abondamment dans ses extension, en combinaison avec XUL(2).

Internet Explorer de son coté a également amélioré son support avec la version 6, en se rapprochant de la norme, et en ajoutant le fameux XmlHttpRequest. Opera a également amélioré son interpréteur JavaScript, le rendant quasiment 2 fois plus rapide que ses concurrents. Safari enfin, et plus globalement Apple, a amélioré son support et introduit son utilisation dans les “dashboard” d'OS X Tiger.

(1) European association for standardising information and communication systems
(2) XML User interface Language.

Du fait de cette tentative d'harmonisation du JavaScript au sein des différents navigateurs, il se détache deux nouvelles tendances dans l'utilisation de celui-ci. La première, c'est le courant AJAX(1), initié par Microsoft avec un nouvel son nouvel objet JavaScript pré-cité, le XmlHttpRequest. Celui-ci permet en fait de dialoguer avec le serveur pour lui demander des informations supplémentaires sans devoir recharger la page. Les applications les plus connues de cette technologie sont sans doute Gmail et Google Earth. Mais il en existe des dizaines d'autres, y compris des traitements de texte et des tableurs, le tout disponible directement dans son navigateurs, sans rien devoir installer!

L'autre tendance se situe plus du côté des utilisateurs, avec ce que l'on appelle les “User JavaScript” (appelons-les scripts utilisateurs). Les scripts utilisateurs sont de petits programmes, créés par des internautes pour corriger ou modifier le comportement de certains sites qu'ils visitent. Cela permet à chacun (pour peu qu'il s'y connaisse un peu) de pouvoir profiter au mieux des sites, en attendant une éventuelle modification du site par son webmestre. Actuellement deux navigateurs proposent cette fonctionnalité: Opera et Firefox. Opera la propose nativement tandis que Firefox nécessite l'installation de l'extension GreaseMonkey. Evidemment, chacun à ses petites spécificités, mais il est généralement assez facile de traduire un script prévu pour l'autre navigateur.

(1) Asynchronous Javascript And Xml.

Pour illustrer l'utilisation des scripts utilisateur, je vais me baser sur un cas assez simple. Prenons un site, au hasard, qui aurait, par exemple, commis une faute de goût.


Illustration 1: La faute de goût, prise en flagrant délit.

Dans notre exemple, le webmestre, en modifiant sa feuille de style, a utilisé une couleur de fond opaque pour un cadre, occultant dès lors une grande partie de l'arrière-plan, assez joli au demeurant. Le défi est donc simple: comment l'utilisateur que je suis pourrait-il corriger cela? La première chose à faire est de trouver l'origine du problème dans le code du site. Aprés une brève investigation, il apparaît que ce sont les style nommés “leftpanelreply” et “forumquickreply” qui sont en cause. Nous allons donc écrire un script qui trouve les endroits qui les utilisent et remplacer cette couleur opaque par une couleur un peu plus... transparente.

Reste un obstacle à surmonter. Pour qu'un fond puissent être transparent, il nous faut utiliser une image, or comment faire pour “écrire” une image au sein d'un script? La solution, c'est d'utiliser un encodage spécial pour l'image que les navigateurs pourront comprendre, le base64. J'ai donc réalisé une petite image que j'ai passé dans la moulinette d'un petit programme appelé “base64encoder”, tout simplement.

Et maintenant, au travail!

Opera, par défaut, exécute les scripts utilisateur dès que possible. Or nous ne voulons pas que le script se mette à chercher quelque chose dans la page alors que celle-ci n'est pas encore chargée. Pour ce faire, Opera dispose d'un objet spécial, window.opera, qui permet, entre autre, d'écouter des évènements de d'appliquer un traitement en fonction de ceux-ci. Et c'est ce que nous allons utiliser ici. Je vous passe les détails de la réflexion, pour arriver tout de suite à ce résultat:



Les lignes 2 et 3 servent à indiquer que le script ne doit tourner que sur le site à corriger. La ligne 6 indique que l'on écoute l'évènement de chargement et que l'on agit après. La ligne 7 indique au script de ne pas aller plus loin si l'objet chargé n'est pas la page. Le reste concerne la recherche des morceaux de code utilisant les styles incriminés et remplace la couleur de fond par notre image (représentée ici sous sa forme cryptique en base64).

Firefox, contrairement à Opera, ne peut pas exécuter de script avant que l'arborescence de la page ne soit chargée. Le code est donc légèrement plus court mais cela n'a pas toujours que des avantages. Voici donc le résultat:



Comme vous pouvez le voir, très peu de choses changent par rapport à la version d'Opera. Cerise sur le gateau, cette version fonctionnera également dans ce dernier car, si le fichier porte l'extension “.user.js” propre aux fichiers GreaseMonkey, Opera simulera le même comportement (pour peu que le script ne comporte pas de fonctions spécifiques a Firefox).

Bon, et maintenant, qu'avons nous obtenu? Jugez par vous-même.


Illustration 2: Avant


Illustration 3: Après

Le résultat vous plait? Il ne vous reste plus qu'a l'installer pour en profiter.

Pour Firefox:
1.Installez l'extension GreaseMonkey.
2.Sauvez le code de la page précedente dans un fichier “informaticien.be.user.js” (le user.js est obligatoire, le reste est a votre guise)
3.Ouvrez-le dans Firefox
4.Menu Outils > Install This User Script
5.Validez

Pour Opera:
1.Sauvez le code de la page précédente dans un fichier “informaticien.be.user.js” (le user.js est obligatoire) ou le code de la page spécifique à Opera dans un fichier informaticien.be.js (sans le “user”)
2.Placez-le dans un répertoire ou vous mettrez tous vos scripts utilisateur.
3.Menu Outils > Préférences > Avancé > Contenu > Options JavaScript
4.Indiquez le répertoire qui contient votre fichier.

Liens additionnels:
Opera – http://www.opera.com Le site officiel d'Opera (voir egalement http://www.opera.com/support/tutorials/userjs/ )
UserJS – http://www.userjs.org Un site regroupant des scripts pour Opera
Firefox – http://www.mozilla.org/products/firefox/ Le site officiel de Firefox
GreaseMonkey - http://greasemonkey.mozdev.org/ Le site de GreaseMonkey
UserScript - http://userscripts.org/ Un site regroupant des scripts GreaseMonkey
Base64Encoder - http://home.deds.nl/~svg/base64/base64.htm Le petit soft pour encoder des images (ou autre) en base64