Unobtrusive Javascript

Posted in jabbascript by elisehuard on October 29, 2008

Javascript is a good tool, but in some ways also a security hasard.  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.

So 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

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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: