Description: Three principles make JavaScript unobtrusive: 1. It must not impose on users (the site must work with or without JavaScript). 2. Scripts must keep their nose out of your markup. 3. Scripts should be easy to understand and update. Real-world examples aplenty will make these three principles crystal clear.
2 principles of unobtrusive javascript: Separation of structure, presentation and behaviour AND the script doesn't assume anything.
Separation of structure, presentation and behaviour:
Use html ids to target elements rather than inline event handlers, just like CSS.
Easy to maintain, CSS and javascript can be edited at the same time, 2 people working on 2 files.
Connect HTML and JavaScript using ID and Class. Javascript doesn't like multiple IDs even though CSS with just deal with it.
Get the element, check if it exists, then do something.
Write scripts that check if they're needed before they do something. Don't assume the hook exists.
Class, getElementsByClassName, doesn't work in IE, only works in the latest version of every browser. You can use a library function to get elements by class name.
Use the same hook for presentation and behaviour, CSS and JavaScript, it keep your code clean.
Javascript is NOT always available. Don't assume everyone has it. Cell phones don't have it, speech browsers don't support javascript well, some company networks filter out script tags.
These problems are on their way to being solved and they are fringe cases but JavaScript will never be the standard, you'll always have to plan for no javascript support.
Make sure content and navigation can be used without javascript.
Use javascript for nice extras.
Without javascript the page will become less user-friendly. Javascript's purpose is to add interactivity. Don't worry that people without javascript will miss out on certain features.
Don't assume everyone uses a mouse.
Javascript developers must take into consideration keyboard users. Mouseover does not work without a mouse. We need to fire events when a user enters or leaves a link. Always pair mouseover with onfocus and mouseout with onblur. Supported by all browsers.
Focus and blur only work on certain elements. Links, form fields, elements with tabindex. don't use tabindex too much, it breaks what the user expects.
What about a click? No problem, click events are fired when the user interacts with the keyboard. Same restriction as above, object must be able to gain the keyboard focus.
Generally keyboard users need more actions to achieve the same goals as mouse users. Stick with onclick and accept the fact that it will take longer. Don't mess too much with default tab order, keyboard users are used to it.
How do we make drag and drop accessible? Use arrow keys using the keydown event and not the keypress event, keypress doesn't work in IE and Safari.
What does it mean when the user hits the right arrow once? You have to decide. 10px? 50px? Area to area if you can only move specific places.
You have to program for 2 totally different situations, you need separate scripts.
Do the extra work once and you have a module you can use over and over.
Unobtrusive javascript is not that hard, it's a way of thinking. Take a little time to change the way you do things and it will make you a better developer.
End
Matt
Copyright 2012 Scribble Technologies Inc. All Rights Reserved.