Javascript Degradation
on Sat Jul 05 08:31:43 GMT 2008 in Javascript and viewed 3220 times
Javascript can be a very useful tool, Unfortunately, not all browsers have equal support for it. Here I’ll discuss a few methods for making sure your scripts don’t mess up your page in browsers without support.
Javascript is a useful technology to have in any website. With the ability to manipulate a page’s Document Object Model, and the buzz about the technology of Asynchronous Javascript and XML more commonly known as AJAX, Javascript is becoming a common occurence in websites.
While Javascript is very useful, one must always remember to have the scripts degrade gracefully. What I mean by graceful degradation, is that people that browse your site with Javascript turned off should have the same experience as people who have it turned on. Granted, the people with Javascript will have some cooler stuff imposed on top, but the functionality should be the same.
To start with an example, say you wanted to open a link in a new window. The code would probably be something like:
<a href="#" onclick="window.open('http://mysite')">Open</a>
If someone browsed the site without Javascript, it would lose all of the functionality. An easier way to do this might be:
<a href="http://mysite" onclick="window.open(this.href)">Open</a>
Now the problem with this is that the current window will still change pages, so in the onclick attribute, change the value to:
window.open(this.href); return false;
This will prevent that from happening. The only thing for readability would be to put the idea to open a new window into a function.
Who are these people with Javascript turned off?
Well, they’re the most important to your site. That would be the bots, namely the search engine bots who categorize your website. If they can’t access your content, they have no idea what the content on your website is.
I’ll just run through a few more ideas to check for graceful degradation:
Form Validation
If you’re relying on Javascript to check the fields of forms for your clients and have no server side code to check “just-in-case,” then people can easily hack into your application by disabling Javascript.
Even if you do have all validation server side, if you are using AJAX to interact with the server and your form goes nowhere to be submitted, then others without Javascript have wasted time filling out your form.
Image Galleries
If you are going to have an image gallery, you might want some of this stuff here. If your application dynamically displays larger versions of images you can click on, and uses that same href=”#” idea, then others can’t view any image. The idea is to use the same technique as I demonstrated previously, except for this maybe to have the href pointing to the image, then using the DOM to find the child image for the Javascript magic.
The last thing to cover is how to gracefully degrade applications using such conventions as getElementById and getElementsByTagName, two functions used while editing the Document Object Model of the page. The problem with these is that some older browsers don’t support these functions. Any version 4 browser and below won’t.
The easy way to check is simply an trigger.
if(document.getElementById){
//code
}
else {
return false;
}
Now this can get a bit messy if we are to do this for every DOM function, like getElementById, getElementsByTagName, getAttribute, setAttribute, etc. An easier way that would eliminate a block would just be to check if there is no support and break out then.
if(!document.getElementById){
return false;
}
Much cleaner, yet still too messy for me. I think you could do this in one line of code.
if(!document.getElementById) return false;
Short, concise, to the point, and readable. It’ll take maybe two, three lines of code depending on the DOM conventions you use, and you browser-proof your application without the need for the messy browser sniffing.