1. Unobtrusive JavaScript

2. Dave Verwer
http://daveverwer.com
http://shinydevelopment.com

3. What is UJS?

4. Did it have full functionality? No
Was it as quick? No
Was it as pretty? No
Was it as usable? No
Did it basically work? Yes

5. Why should you care?

6. Accessibility

7. Mobile Browsing

8. SEO

9. As of 1st September 2005, every web
site built for a dutch government
agency is required by law to conform to:
Valid HTML 4.01 or XHTML 1.0
CSS and semantic HTML and separation of structure and presentation
Progressive enhancement
The W3C DOM (instead of the old Microsoft document.all)
Meaningful values of class and id
Meaningful alt attributes on all images
Scripts that work on links should extend the basic link functionality (think accessible popups)
If a link makes no sense without a script, it shouldn't be in the HTML (but be generated by JavaScript)
Use of forms or scripts as the only means of getting certain information is prohibited
Removing the focus rectangle on links is prohibited
Information offered in a closed format (think Word) should also be offered in an open format
The semantics of many HTML elements are explicitly defined

10. Point 3:
Progressive Enhancement.

11. Point 7:
Scripts that work on links
should extend the basic
link functionality.

12. Point 8:
If an element makes no
sense without a script, it
shouldn't be in the HTML.

13. Point 9:
Use of forms or scripts as
the only means of getting
certain information is
prohibited.

14. So JavaScript is evil,
right?

15. Good JavaScript

18. Bad JavaScript

20. The Dark Ages
of the Web

23. Seperating content
from design

24. <b><font size=quot;5quot;><font color=quot;#0000FFquot;>THIS
SITE IS UNDER CONSTRUCTION!!</font></font></b>
<style>
p.construction {
color: #00f;
font-size: 1.5em;
font-weight: bold;
}
</style>
<p class=quot;constructionquot;>
THIS SITE IS UNDER CONSTRUCTION!!
</p>

25. Seperating content
from design
and behaviour

26. target=“_blank”
demo

27. Prototype & LowPro

28. <a class=“external”>

29. Event.addBehavior({
quot;a.external:clickquot;:
function(event) {
window.open(this.href, quot;extquot;);
return false;
}
});

30. Setting a class becomes
an indicator of behaviour
not just style

31. Make sure
nothing breaks

32. Start minimal and show UI
or
Start big and hide UI

33. JS Specific UI
demo

34. UJS plugin for Rails
demo

35. Summary

36. Does it really need it?

37. Do links still work?

38. Does this break the
back button?

39. Don’t rely on alert()
for confirmations

40. Scripts hidden away
when possible?

41. Enhancing Accessibility
with JavaScript?!?

42. Questions?
dave.verwer@shinydevelopment.com