Unobtrusive JavaScript

Wed 09 August 2006 — , ,

I was a bad user of JavaScript, and I’ve recently learned cool things (many thanks to a Dubliner).

First of all, I probably abused of the window.onload = myFunction that is really intrusive. A better solution would be to use the addEventListener (W3C) or the attachEvent (Microsoft). But there are both incompatible (bad news). Another homemade solution comes from Simon Willison and this rocks. Read it!

Second thing, encapsulation. The OOP is everywhere and it’a great way of doing things that are reusable. You may read this article : JavaScript Object-Oriented Programming Part 1 from SitePoint. Most of JavaScript toolkits or frameworks made today are written this way.

I’ve made a little script that takes the queried words in the q parameter of the query string in the given page or in the referrer (if the visitor came from Google for example) and highlight them. You can try it there. Warning, this script shouldn’t be used, it may break your website.

Je pense avoir été un utilisateur de JavaScript avec de vieux défauts ce qui fait que le résultat est difficilement réutilisable et n’est pas à l’abri d’erreurs. Voici quelques points que j’ai récemment appris d’un dubinois (merci à lui).

Premier point, le chargement automatique d’une fonction au démarrage. Beaucoup de monde peut désirer faire une opération à ce moment là. Éviter le window.onload = maFonction et permettre à chacun de mettre sa fonction est assez vital. La solution fournie par JavaScript est double et c’est la le problème. Microsoft et le W3C spécifie différentes choses incompatible entre elles. Une solution publiée par Simon Willison permet de contenter tout un chacun.

Autre point, passer à un style orienté objet devient également vital dès que la question de la réutilisation intervient. Un article SitePoint traite le sujet en profondeur : JavaScript Object-Oriented Programming Part 1, à lire donc. À l’heure actuelle, les frameworks JavaScript sont écrits de manière orientée objet, donc pas de raison d’y couper.

Et comme, j’ai toujours besoin de mettre en pratique les choses que j’acquiers (sinon j’oublie), voici un petit outil, très imparfait, qui va mettre en évidence les mots recherchés dans la page. Le script va prendre en compte soit le paramètres q dans l’URL ou ce même paramètre dans le référant (si, par exemple, le visiteur vient de Google). Testez-le ici.

Digg it!, so del.icio.us, blogmarks, reddit.