Unobtrusive Javascript

| Comments

Javascript is a good tool, but in some ways also a security hasard, so people switch it off.  On top of that, piling on the javascript action is not that great for accessibility: when you have to read a website through your ears, fancy visual effects won’t really work for you.

It’s considered good form to make your javascript unobtrusive.  This means:

  1. separate the script from the HTML (a bit like good styling requires you to put all the styling into the CSS). Insert advertisement for JQuery here.
  2. make sure your site still works properly when the javascript is turned off (gracefuldegradation)

This last requirement sounds pretty daunting – but as I’ve been realizing, in fact it isn’t ! The main point is the use of visibility. For instance: * instead of using the submit button, you prefer a nice styled link. That link uses javascript to submit your form. Well, make that link visibility:hidden (display:none), and the submit button visible in your HTML. Then, with your javascript, make the link visible, and hide the submit. This way, whether the javascript works or not, you’ll always have a way to submit your form. * you want to place an input field somewhere strange, that doesn’t quite fit within your form. Same scenario, but using a hidden input field in the form you want to submit.

So that’s really all there is to it ! It’s a habit to take up when making your front-end pages, but really, once you have it, it’s just repeat.