HTML and CSS Reference
In-Depth Information
9
I
n Chapter 2,
The Test-Driven Development Process,
we saw how test-driven
development can help create “clean code that works.” Unfortunately, even per-
ceptibly clean code can cause problems, and on the web there are many degrees of
“working.” Unobtrusive JavaScript is a term coined to describe JavaScript applied
to websites in a manner that increases user value, stays out of the user's way, and en-
hances pages progressively in response to detected support. Unobtrusive JavaScript
guides us in our quest for truly
clean code
; code that either works, or knowingly
doesn't; code that behaves in any environment for any user.
To illustrate the principles of unobtrusive JavaScript, we will review a particu-
larly obtrusive tabbed panels implementation. Equipped with our new knowledge,
we will build an improved replacement backed by unit tests.
Accessible websites that work for as wide an audience as possible is the ultimate
goal of unobtrusive JavaScript. Its most important principles are separation of con-
cerns and certainty over assumptions. Semantic markup is in charge of document
structure, and document structure only. Semantic HTML not only enhances acces-
sibility potential, it also provides a rich set of hooks for both CSS and JavaScript
to attach to. Visual styles and layout are the responsibility of CSS; presentational
attributes and elements should be avoided. Behavior is the domain of JavaScript,
177
