Monday, April 28, 2008

Unobtrusive JavaScript...You Should Totally Do This

In my JavaScript session at last year's version of LotusDeveloper (an excellent conference, by the should go), I discussed the concept of unobtrusive javascript and showed several examples. Just as CSS was a blessing to us as we started to shift to the mindset of separating presentation from content (not so hard for us Notes folks really!), so is unobtrusive javascript the next stage of evolution. It's about separating behavior from content. If we can take out all the formatting junk from our HTML, can't we take all the javascript out as well? The answer is a resounding "yes" and it's a great ideal to strive for.

I haven't talked a whole lot about web design subjects here, since I thought the niche of focusing on the Notes client was more important, but this is a subject that I might just tackle more in future installments. In the meantime, there are a lot of good resources out there to bring you up to speed on the concept. I'm not really sure if this practice has caught on in the Domino world, or even how prevalent it really is in the broader world of web design, but it's a technique that I've found has a lot of merit.

To get you started, here's a nice little example. It's very simple, but walks you through the process of making a page of unobtrusive script. Check it out and see what you think. I'm interested if it will change the way you approach your code.


Charles Robinson said...

Thanks for sharing! I'm not familiar with the 2tbsp site, but it's in my feed reader now. :-) While searching around for something yesterday I stumbled across something called AHAH: Asychronous HTML and HTTP. I'm sure many people already know about it, but not being a web developer I had never heard of it. It makes a LOT more sense to me than AJAX, and it seems that most people who claim to be using AJAX are actually using AHAH.

Jim Knight said...

good topic - i was going to write about this but you beat me to it. Domino people should do it. I like jquery. Ease of accessing elements using CSS tags. Also, great event management. using it all over the place for unobtrusive javascripting.