What does Unobtrusive Javascript mean?

I won't be the only one who answers this, I'm sure, but I'll try and explain it as best I can.

As you'll probably be aware, a lot of users, due to personal preference, or firewall or proxy restrictions, browse the web without JavaScript, meaning they miss out on all of the cool effects and tricks it's capable of. This would include jQuery - no JavaScript, no jQ.

"Unobtrusive" JavaScript is a term used to describe the application of JS to ENHANCE a page, rather than as a requirement of that page. The ultimate aim of any well crafted website is that it should be usable regardless of the technologies on a user's machine. A HTML version of a Flash only website might not look as good, but if the user doesn't or can't have Flash installed it's what they get.

Likewise, if you develop a page which will work perfectly well without JavaScript, then you can add the snazzy effects in afterwards. A website should never REQUIRE JavaScript to work. Adding effects in without impairing basic functionality is what "unobtrusive" JavaScript is.

As an example - you may decide to program a form to require a user to tick a checkbox in order to activate a submit button e.g. "I accept the terms and conditions". If you have the submit button disabled by default and use JavaScript to enable it on the clicking of the checkbox, then you're in trouble - people with JavaScript can't submit your form.

On the other hand, if you leave the button enabled by default, THEN apply JavaScript to turn it off and re-enable it, then you're safe. Your server side script can then check the terms box was ticked. This is unobtrusive - the form works without JavaScript. A small example but I hope it helps to clarify things.

Hope that made sense. I rarely do. :)

Regards,
Michael Price

Reply via email to