Principles of Unobtrusive JavaScript - Peter-Paul Koch - An Event Apart Boston 2008
- 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 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 at 6/24/2008 3:07:46 PM
- Separation of structure, presentation and behaviour:by Matt at 6/24/2008 3:08:25 PM
- Use html ids to target elements rather than inline event handlers, just like CSS.by Matt 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 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 at 6/24/2008 3:11:42 PM
- Get the element, check if it exists, then do something.by Matt 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 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 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 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 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 at 6/24/2008 3:28:09 PM
- Make sure content and navigation can be used without javascript.by Matt at 6/24/2008 3:28:49 PM
- Use javascript for nice extras.by Matt 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 at 6/24/2008 3:31:33 PM
- Don't assume everyone uses a mouse.by Matt 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 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 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 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 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 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 at 6/24/2008 3:45:32 PM
- You have to program for 2 totally different situations, you need separate scripts.by Matt 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 at 6/24/2008 3:47:43 PM
- by Matt 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 at 6/24/2008 3:50:17 PM
- by Matt at 6/24/2008 3:51:37 PM
- Endby Matt at 6/24/2008 3:53:01 PM
- Who's Blogging
-
Matt
- Translate
- Options
-
Comments
Turn viewer comments off and on.
Turn comments off
- Share
