A quick note on unobtrusive Javascript
Posted on 01 March 2007 (12:49 PM)
For Javascript to work truely unobtrusive, a webpage should remain usable at all times. This means that a page should work if:
- Javascript is enabled
- Javascript is disabled
- The required Javascript function is unavailable
"Javascript is enabled"
Obviously, this is the responsibility of the client-side programmer. Don't code stuff that doesn't work!
"Javascript is disabled"
Don't rely on Javascript to be available! This means: don't fill an a element's href attribute with stuff like javascript:doStuff();, or just with #.
Always use the right value, e.g. the URL you want to anchor to point to. People who have Javascript disabled can then still visit your pages.
"The required Javascript function is unavailable"
This is a different kind of beast. What if only half of Javascript's native functions is available? This scenario is most likely to happen on intranets that make use of firewalls or other security systems.
It's even possible a user has limited Javascript a bit himself, so webpages won't interfere with his browsing experience. But how can you be sure a certain function is available?
Testing before executing
I almost always start my DOM scripts with the following:
var W3CDOM = (document.getElementsByTagName && document.getElementById && document.createElement);if (!W3CDOM) return false;- Download this code: /code/a_quick_note_on_unobtrusive_javascript1.txt
I've seen the "var W3CDOM = ..." convention once at Peter-Paul Koch's Quirksmode and adopted this good practice. This checks if your favourite DOM manipulation functions are available before starting the script and using them.
Use return values
To get back at the a element example; most of the time you can use a function's return value to determine wether or not to proceed. Take this bit of HTML:
<a href="http://www.whatstyle.net" onclick="return !window.open('http://www.whatstyle.net');">Click me!</a>- Download this code: /code/a_quick_note_on_unobtrusive_javascript2.txt
As you can see, the onclick event on this a element returns the inverted return-value of the window.open function.
That's quite a mouth-full. What it means is this:
I take the return-value of window.open (either true or false) and invert that using the NOT operator "!".
In other words: if window.open returns true, ! makes it false, and vice versa.
As you probably know, this piece of code...
<a href="http://www.whatstyle.net" onclick="return false;">Click me!</a>- Download this code: /code/a_quick_note_on_unobtrusive_javascript3.txt
...will get a user nowhere, because the default action of the link (travelling through hyperspace to another location) is disabled, while this...
<a href="http://www.whatstyle.net" onclick="return true;">Click me!</a>- Download this code: /code/a_quick_note_on_unobtrusive_javascript4.txt
...acts as your regular link. Taking these facts into account, the event handler above will return false if window.open is successfully executed, and thus open a new browser window while keeping the original window in the current place (instead of opening a new window containing Whatstyle.net AND travelling to Whatstyle.net in the original window).
Naturally, when window.open fails to execute, the event handler will return true, sending the user effectively to the correct location in the same browser window. Yay! Everyone can enjoy your content.
An example can be found here. Testing is easy; just disable Javascript and see what happens. Testing for unavailable methods is harder, so for your convenience, I've also created a second example, which includes the following code:
<script type="text/javascript">window.open = null;</script>- Download this code: /code/a_quick_note_on_unobtrusive_javascript5.txt
Presto; a call to window.open will always return false, but your content is still available to all.
Filed under Javascript
- ← previous article: Pretty form controls with CSS
- → next article: Broken comments
Comments:
Great article!
So, I have been asked to implement a way to increase/decrease font size using Javascript...Is this wise? Bearing in mind it wont work if Javascript is disabled?
Hi Colin,
that seems to be okay, because users can always resize text in their browser, so there's always a failsafe.
Another option is providing a server-side fallback, like I did here at Whatstyle.
When Javascript is disabled, the links on the right go to a PHP script that sets the cookie.
Thanks for the reply, I was wondering what you meant by your server-side fallback? Are you saying with Javascript disabled the PHP script will still increasing and decreasing your text size?
Exactly :)
If Javascript is disabled, the user will travel to a page that sets cookie with the desired font-size, before returning to the page they came from.
If a cookie is present, the font-size value will be printed out as an inline style to the page.