Writing good javascript

Until recently, I hated javascript. It wouldn't work the same on two different browsers and too many webmasters were crap at making it work well on any browser. It was the internet's biggest embarrassment.

Then Google showed how it should be done with it's Google Maps and other javascript tools, that "just work". To "Just Work" is a term that is becoming more and more common to describe good software and good websites. The quality of software produced these days is plummetting and the quality of websites is very variable. When people go to a website that "just works", ie. it doesn't break with loads of errors, brash your browser, or have things in stupid places, it gives an enormous amount of satisfaction. People are so used to visiting sites that don't work and are annoying that when they visit a site that "just works", it really stands out. It's a great term because good software is easy to write and so are good websites. It shouldn't be difficult to write a website that "just works" and isn't annoying, but the incompetence of the human race suggests otherwise.

Your task is to create javascript that "just works" and is completely seamless to the user.

<noscript>

Always use the <noscript> tag to provide alternative functionality. Only leave it out if the javascript functionality is superfluous and you don't mind non-javascript users not having the funcationality. Using the <noscript> tag to ask your users to switch javascript on is amateur. The only circumstances under which this is acceptable is if the entire context of your website is only usable because of javascript. For example, Google Maps cannot be used without javascript, the entire basis of Google Maps is that it's a javascript mapping engine, you can't do it with HTML. Having a javascript navigation however is not the entire basis of any website, so make sure you use <noscript> to provide alternative navigation methods.

It can be annoying and hard work to provide the alternatives but that's what you have to do to earn the most money. Ignore it at your peril.

Browser Checking

Do not use the following sort of code:

if (IE) {
  // do this
} else if (Mozilla) {
  // do something else
}

Somebody will use a browser that you haven't catered for or a browser that you haven't even heard of and then your website will break. You'll might even end up with half working javascript which is very embarrassing.

The best strategy for using javascript, is not to try to find out what browser the visitor is using, but to find out what features they have. Firstly, I test if they have javascript with the simple use of the <noscript> tag and I provide a nice alternative for users who prefer to not have javascript. Then, inside the javascript, I test for certain features that are not common to all browsers and I test for things that can be different between browsers. A very good example is AJAX because only the newest browsers support it. So, I try to create some AJAX objects and I test for the failures, as follows:

function getRequestObject() {
  var localxmlhttp = null;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      localxmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        localxmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        localxmlhttp = false;
      }
    }
  @else
  localxmlhttp = false;
  @end @*/
  if (!localxmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      localxmlhttp = new XMLHttpRequest();
    } catch (e) {
      localxmlhttp = false;
    }
  }
  return localxmlhttp;
}

xmlhttp = getRequestObject();

if (null != xmlhttp) {
  // Use the xmlhttp object
}

The getRequestObject() function uses various methods for trying to create the AJAX object because various browsers use different methods. All of these methods fail safe thanks to the use of macros such as @if (@_jscript_version >= 5), @else and @end (which appear as comments on browsers which don't support javascript macros) and the use of try-catch blocks to prevent unknown classes causing the javascript to fail. On top of all this the final check, if (null != xmlhttp), determines whether any of the methods have worked, ie. whether the browser supports AJAX at all, and if not, nothing happens so it fails safe.

You should use exactly the same principles when designing any javascript. Test you code in as many browsers as possible. IE, Firefox and Opera are an absolute minimum. And if anything goes wrong, find out exactly what the difference is, and code around it instead of coding for the particular browser. If one browser gets it wrong, chances are that another one will too. It's annoying, but you'll have to live with it and get over it.

When to Use Javascript

You should really avoid javascript wherever possible. Don't use it to just make your website look fancy, it will discourage your visitors because fancy websites are annoying. Only use javscript to provide useful functionality. Avoid using Javascript to reinvent the wheel. Using javascript to implement a fancy looking pulldown menu is pointless, a pulldown menu is good enough as a <select> block. People know what to do when they see those types of pulldown menu, if you make it look too different people will get confused (yes, they really can be that stupid, but hey, they're paying your wages). Read my Website Standards and Usability article to find out about what functionality your visitors expect from your website and what will just confuse them.