The principles of

unobtrusive JavaScript
Peter-Paul Koch (ppk)
http://quirksmodeor!
"n #vent "part $oston% June &'th% &(()
*ell is other bro+sers - Sartre

,nobtrusive JavaScript
-ikipedia:
.an emer!in! paradi!m in the
JavaScript pro!rammin! lan!ua!e/
0e:
it1s 2ust a !ood idea

,nobtrusive JavaScript
3t1s not a technique
3t1s more like a philosoph4
for usin! JavaScript in its conte5t:
usable% accessible% standards-
compliant +eb pa!es

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
&) The script doesn1t assume
an4thin!

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
&) The script doesn1t assume
an4thin!

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
- Separate them
- 7onnect them

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
- Separate them
- 7onnect them

Separate them
Separation of *T08 and 7SS:
9div st4le:/position: relative/;

Separate them
Separation of *T08 and 7SS:
9div st4le:/position: relative/;
<o inline st4les=

Separate them
Separation of *T08 and 7SS:
9div class:/container/;
divcontainer >
position: relative?
@

Separate them
Separation of *T08 and JavaScript:
9input onmouseover:/doSomethin!()/ /;

Separate them
Separation of *T08 and JavaScript:
9input onmouseover:/doSomethin!()/ /;
<o inline event handlers=

Separate them
Separation of *T08 and JavaScript:
9input id:/special/ /;
A(1special1)onmouseover :
function () >
doSomethin!()?
@

Separate them
"dvanta!es
- #ase of maintenance

Separate them
Separation of *T08 and JavaScript:
9input id:/special/ /;
A(1special1)onmouseover :
function () >
doSomethin!()?
@

Separate them
Separation of *T08 and JavaScript:
9input id:/special/ /;
A(1special1)onmouseover : A(1special1)onfocus :
function () >
doSomethin!()?
@

Separate them
"dvanta!es
- #ase of maintenance
- The 7SS and JavaScript la4ers can
be edited simultaneousl4

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
- Separate them
- 7onnect them

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
- Separate them
- 7onnect them

7onnect them
*ooks

7onnect them
- id
document!et#lement$43d()?

7onnect them
- id
document!et#lement$43d(1special1)
onmouseover : doSomethin!?

7onnect them
- id
var el : document!et#lement$43d(1special1)?
if (el) >
elonmouseover : doSomethin!?
@
.3s this element availableB/

7onnect them
- id
- class
!et#lements$47lass<ame()?
or a librar4 function

7onnect them
- id
- class
var els :
document!et#lements$47lass<ame(1special1)
if (elslen!th) >
// !o throu!h all elements and do somethin!
@

7onnect them
- id
- class
,se the same hook for presentation
and behavior? for 7SS and JavaScript

7onnect them
9ol class:/dropdo+n.;
<o+ +hat +ould this 9ol; beB
Surprise:
it1s a dropdo+n menu

7onnect them
9ol class:/dropdo+n.;
The class is a hook for both la4ers
oldropdo+n >
// presentation la4er
@

7onnect them
9ol class:/dropdo+n.;
The class is a hook for both la4ers
var dropdo+ns : A(1dropdo+n1)?
if (dropdo+nslen!th) >
// initialiCe behavior la4er
@

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
- Separate them
- 7onnect them

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
&) The script doesn1t assume
an4thin!

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
&) The script doesn1t assume
an4thin!


,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
&) The script doesn1t assume
an4thin!
- .JavaScript is al+a4s available/
- .#ver4bod4 uses a mouse/

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
&) The script doesn1t assume
an4thin!
- .JavaScript is al+a4s available/
- .#ver4bod4 uses a mouse/

JavaScript is al+a4s available
<onsense=

JavaScript is al+a4s available
- Primitive cell phones don1t support
it (sufficientl4)
- Speech bro+sers1 support ma4 be
spott4
- 7ompan4 net+orks ma4 filter out
9script; ta!s

JavaScript is al+a4s available
0ake sure that the content and
navi!ation of the site can be used
+ithout JavaScript

JavaScript is al+a4s available
0ake sure that the content and
navi!ation of the site can be used
+ithout JavaScript
The pa!e +ill remain accessible in all
circumstances

JavaScript is al+a4s available
0ake sure that the content and
navi!ation of the site can be used
+ithout JavaScript
Dou can use JavaScript for nice
e5tras% thou!h

JavaScript is al+a4s available
*o+ever
-ithout JavaScript the pa!e +ill
become less user-friendl4
7an1t be helped

JavaScript is al+a4s available
*o+ever
-ithout JavaScript the pa!e +ill
become less user-friendl4
"fter all% the purpose of JavaScript is
to add interactivit4 to a pa!e

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
&) The script doesn1t assume
an4thin!
- .JavaScript is al+a4s available/
- .#ver4bod4 uses a mouse/

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
&) The script doesn1t assume
an4thin!
- .JavaScript is al+a4s available/
- .#ver4bod4 uses a mouse/

#ver4bod4 uses a mouse
<onsense=

Eevice
independence

Take a dropdo+n menu:
var dropdo+n : >
set#vent*andlers: function (ob2) >
ob2onmouseover : thisover?
ob2onmouseout : thisout?
@%
over: function () >
// code
@%
// etc
@

3t doesn1t +ork +ithout a mouse
var dropdo+n : >
set#vent*andlers: function (ob2) >
ob2onmouseover : thisover?
ob2onmouseout : thisout?
@%
over: function () >
// code
@%
// etc
@

var dropdo+n : >
set#vent*andlers: function (ob2) >
ob2onmouseover : thisover?
ob2onmouseout : thisout?
@%
over: function () >
// code
@%
// etc
@
-e need evens that are fired +hen
the user .enters/ or .leaves/ a link b4
usin! the ke4board
focus and blur

var dropdo+n : >
set#vent*andlers: function (ob2) >
ob2onmouseover : ob2onfocus : thisover?
ob2onmouseout : ob2onblur : thisout?
@%
over: function () >
// code
@%
// etc
@

var dropdo+n : >
set#vent*andlers: function (ob2) >
ob2onmouseover : ob2onfocus : thisover?
ob2onmouseout : ob2onblur : thisout?
@%
over: function () >
// code
@%
// etc
@
Festriction:
the ob2ect must be able to !ain the
ke4board focus
- links
- form fields

var dropdo+n : >
set#vent*andlers: function (ob2) >
ob2onmouseover : ob2onfocus : thisover?
ob2onmouseout : ob2onblur : thisout?
@%
over: function () >
// code
@%
// etc
@
Festriction:
the ob2ect must be able to !ain the
ke4board focus
- links
- form fields
- elements +ith tabinde5

"nd +hat about clickB
-e1re in luck: the click event fires also
+hen the user activates an element b4
the ke4board
click should be called activate

"nd +hat about clickB
-e1re in luck: the click event fires also
+hen the user activates an element b4
the ke4board
Festriction:
the ob2ect must be able to !ain the
ke4board focus

7lick as activate
arro+onclick : sho+0enu?

7lick as activate
arro+onclick : sho+0enu?
6) 0ouse click on the arro+

7lick as activate
arro+onclick : sho+0enu?
6) 0ouse click on the arro+
&) a) Ke4board focus on the arro+

7lick as activate
arro+onclick : sho+0enu?
6) 0ouse click on the arro+
&) a) Ke4board focus on the arro+
b) Space bar on the arro+
That1s t+o actions

7lick as activate
arro+onclick : arro+onfocus : sho+0enu?
6) 0ouse click on the arro+
&) Ke4board focus on the arro+
b) Space bar on the arro+

7lick as activate
arro+onclick : arro+onfocus : sho+0enu?
6) 0ouse click on the arro+
&) Ke4board focus on the arro+
The ne5t tab +ill focus on the sub-menu The
user +on1t be able to skip it

7lick as activate
arro+onclick : arro+onfocus : sho+0enu?
Generall4% ke4board users need more actions
to achieve the same !oals as mouse users
Eon1t interfere too much There are reasons for
this behavior% and ke4board users are used to
it

Separate concepts
Era!-and-drop
uses the mousemove event

Separate concepts
Era!-and-drop
uses the mousemove event
and if there1s one thin! that1s
impossible to emulate +ith the
ke4board
it1s movin! the mouse

Separate concepts
Era!-and-drop
uses the mousemove event
*o+ do +e make this accessibleB
$4 allo+in! the user to use the arro+
ke4s
Ke4 events

Separate concepts
Era!-and-drop
Hor detectin! arro+ ke4s (or other
special ke4s) +e need the ke4do+n
event
<ot ke4press (Eoesn1t +ork in 3# and
Safari)

Separate concepts
Era!-and-drop
Hor detectin! arro+ ke4s (or other
special ke4s) +e need the ke4do+n
event
<ot ke4press (Eoesn1t +ork in 3# and
Safari)

Separate concepts
Era!-and-drop
ob2onmousemove :
ob2onke4do+n : move#lement?

Separate concepts
Era!-and-drop
ob2onmousemove :
ob2onke4do+n : move#lement?
Eoesn1t +ork

Separate concepts
Era!-and-drop
ob2onmousemove :
ob2onke4do+n : move#lement?
0ousemove e5pects mouse
coordinates
The la4er moves to these coordinates

Separate concepts
Era!-and-drop
ob2onmousemove :
ob2onke4do+n : move#lement?
The ke4 events e5pect a ke4stroke
$ut +hat does .user hits ri!ht arro+
once/ meanB

Separate concepts
Era!-and-drop
ob2onmousemove :
ob2onke4do+n : move#lement?
6(p5B
I(p5B
.0ove to ne5t receptor elementB/
Somethin! else that fits 4our interfaceB

Separate concepts
Era!-and-drop
ob2onmousemove :
ob2onke4do+n : move#lement?
-e have to pro!ram for t+o totall4
different situations
-e need separate scripts

Separate concepts
Era!-and-drop
ob2onmousemove : move$40ouse?
ob2onke4do+n : move$4Ke4s?
-e have to pro!ram for t+o totall4
different situations
-e need separate scripts

Separate concepts
Era!-and-drop
ob2onmousemove : move$40ouse?
ob2onke4do+n : move$4Ke4s?
Des% that1s more +ork

Separate concepts
Era!-and-drop
ob2onmousemove : move$40ouse?
ob2onke4do+n : move$4Ke4s?
$ut if 4ou do it ri!ht 4ou1ve !ot a
!eneric dra! and drop module 4ou can
use an4+here

Separate concepts
Era!-and-drop
ob2onmousemove : move$40ouse?
ob2onke4do+n : move$4Ke4s?
$esides% 3 created a first draft for 4ou

Separate concepts
Era!-and-drop
http://quirksmodeor!/
2s/dra!drophtml
$esides% 3 created a first draft for 4ou

,nobtrusive JavaScript
T+o fundamental principles:
6) Separation of structure%
presentation% and behavior
&) The script doesn1t assume
an4thin!

,nobtrusive
JavaScript
3t1s not that hard

<eed helpB
7hris *eilmann:
http://onlinetoolsor!/articles/unobtrusive2avascript/
http://icantcouk/articles/seven-rules-of-unobtrusive-2avascript/
Jerem4 Keith:
http://+++alistapartcom/articles/behavioralseparation
and of course quirksmodeor!

JuestionsB