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.
by Matt McCausland at 6/24/2008 3:06:20 PM
2 principles of unobtrusive javascript: Separation of structure, presentation and behaviour AND the script doesn't assume anything.
by Matt McCausland at 6/24/2008 3:07:46 PM
Separation of structure, presentation and behaviour:
by Matt McCausland at 6/24/2008 3:08:25 PM
Use html ids to target elements rather than inline event handlers, just like CSS.
by Matt McCausland at 6/24/2008 3:08:52 PM
Easy to maintain, CSS and javascript can be edited at the same time, 2 people working on 2 files.
by Matt McCausland at 6/24/2008 3:09:21 PM
Connect HTML and JavaScript using ID and Class. Javascript doesn't like multiple IDs even though CSS with just deal with it.
by Matt McCausland at 6/24/2008 3:11:42 PM
Get the element, check if it exists, then do something.
by Matt McCausland at 6/24/2008 3:12:28 PM
Write scripts that check if they're needed before they do something. Don't assume the hook exists.
by Matt McCausland at 6/24/2008 3:14:52 PM
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.
by Matt McCausland at 6/24/2008 3:16:32 PM
Use the same hook for presentation and behaviour, CSS and JavaScript, it keep your code clean.
by Matt McCausland at 6/24/2008 3:19:38 PM
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.
by Matt McCausland at 6/24/2008 3:26:41 PM
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.
by Matt McCausland at 6/24/2008 3:28:09 PM
Make sure content and navigation can be used without javascript.
by Matt McCausland at 6/24/2008 3:28:49 PM
Use javascript for nice extras.
by Matt McCausland at 6/24/2008 3:29:32 PM
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.
by Matt McCausland at 6/24/2008 3:31:33 PM
Don't assume everyone uses a mouse.
by Matt McCausland at 6/24/2008 3:32:19 PM
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.
by Matt McCausland at 6/24/2008 3:34:55 PM
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.
by Matt McCausland at 6/24/2008 3:36:10 PM
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.
by Matt McCausland at 6/24/2008 3:38:17 PM
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.
by Matt McCausland at 6/24/2008 3:42:47 PM
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.
by Matt McCausland at 6/24/2008 3:44:09 PM
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.
by Matt McCausland at 6/24/2008 3:45:32 PM
You have to program for 2 totally different situations, you need separate scripts.
by Matt McCausland at 6/24/2008 3:47:06 PM
Do the extra work once and you have a module you can use over and over.
by Matt McCausland at 6/24/2008 3:47:43 PM
by Matt McCausland at 6/24/2008 3:48:01 PM
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.
by Matt McCausland at 6/24/2008 3:50:17 PM
by Matt McCausland at 6/24/2008 3:51:37 PM
End
by Matt McCausland at 6/24/2008 3:53:01 PM