New Skool DOM Scripting

The Unobtrusive Behavior Layer

Steven G. Chipman

Principal Software Engineer, WAS

Call in: 5-5000, 3193

What's Old?

<a id="link" href="foo.html" onclick="doHighlight(0); return false;" 
	onmouseover="showHideLayer(this,1);" onmouseout="showHideLayer(this,0);" 
	onblur="killHighlight(0);">hello world!</a>

Over...and over...and over through the document.

All You Need is Markup

<a id="link" href="foo.html">hello world!</a>

What's New, Then?

Much like structure and presentation, behavior should be separate. Consider it the 3rd leg on the Web Standards stool.
Javascript as an enhancement, not a requirement. Content should always be available at a base level.
A bottom-up approach.

A best practice technique as well as an overall coding philosophy.

What's it do for me?

Smaller documents.
More semantic documents.
More accessible documents.

This all combines to give us easier to maintain documents that gracefully degrade.

How is it Smaller?

No inline javascript.

No more attributed event handlers.


	<div id="foo">
		<a href="#" onclick="doStuff(this);">bar</a>
		<a href="#" onclick="doStuff(this);">baz</a>
	</div>

This includes the body element's onload attribute!

Less of a need for specific hooks on elements, ie:
```
<li id="li0"...
<li id="li1"...
```
A script element in the <head> - that's it.

If I Can't do that...

Instead of event attributes:

aObj = document.getElementById("foo").getElementsByTagName("a");
for(i=0;i<aObj.length;i++)aObj[i].onclick = function() { doStuff(this);}

Instead of using incremental id's as hooks, use the DOM and object variables:

var liObj = document.getElementsByTagName("ul")[0].getElementsByTagName("li");

How is it More Semantic?

Behavioral elements added with Javascript, so no odd elements hanging about in the document when the functionality isn't available.

Example:


// we can't dynamically populate the photo caption without javascript, so 
// we'll create it here instead of hard-coding it in the document
captionObj = d.getElementById("mContainer").appendChild(d.createElement("div"));

Instead of:

<div id="caption">This is where the caption will be.<div>

(Which also means a smaller document)

How is it More Accessible?

Semantically sound baseline documents are nearly always guaranteed accessible.
Progressively enhancing a semantic document guarantees that if a technology is unavailable, the baseline content still is.

Ok...Prove it!

Example #1: A simple tree view with unordered lists.

Nothing special in the markup, other than a <ul> with an id of "tree".
All behaviors applied with javascript.
Additional items can be added and the script will just pick up and run with it.
Gracefully and effortlessly degrades into a normal list.
[ javascript source ]

More Proof!

Example #2: Custom Checkboxes

If Javascript isn't supported, the user is given regular checkboxes.
If Images aren't supported, the user is given regular checkboxes

This works because the checkboxes are already in the document. When we determine that the user agent is capable of what we want to accomplish, we hide them.

Even More proof!

Example #3: Slide Show III & Slide Show IV

If there is no css, or no javascript, the user still gets the images they wanted in the first place.

Transitions are nice...but its the data that's important and ultimately what the user is there for.

Even this!

This presentation software is an example of Unobtrusive Javascript. It is a collaborative work headed up by Eric Meyer called S5.

Go ahead and disable javascript and see what happens.

Resources

My site: slayeroffice.com
The WaSP DOM Scripting Task Force: http://domscripting.webstandards.org/
Steve Champeon: Progressive Enhancement
Quirksmode: http://www.quirksmode.org/
Bobby van der Sluis:
10 Good Practices for Writing Javascript in 2005
Christian Heilmann: Unobtrusive Javascript

Questions?

Thanks for coming! Any questions?

New Skool DOM Scripting: The Unobtrusive Behavior Layer

August 18, 2005