In this post, I'll discuss some of the techniques that I personally write JavaScript. There's no right or wrong, this is all my opinion (still, feel free to flame me if you feel it's necessary 😛). This post is aimed at people that understand basic JavaScript and HTML techniques, and want to see how I code my JavaScript. I will talk about the JavaScript of the past, how it's changed, and some techniques used in modern JavaScript development. This will probably be a multi-part series if I ever get around to writing more posts 😛 

The Bad Old Days

So where do we begin? In the old days, JavaScript wasn't used very much at all. Browsers didn't really support much JavaScript, so it was only used to add little bits of functionality to sites. The one site might have had a few little procedural functions for the whole site. Global variables were used everywhere, but as the scripts were very small, this wasn't *too *much of an issue. Usability also wasn't considered much of an issue, and there was no proper event model, leading to things like:

<a href="javascript:DoSomething();">Do something</a>

However, the JavaScript of today is something very different — It is everywhere, and is used for more than just trivial uses. On a normal website, a large amount of JavaScript might be used. Nowadays we even have web applications like Gmail and Google Docs which contain heaps of JavaScript for all their core functionality. There are a lot of web applications that are mainly client-side, with a very small server-side component. Because of this use of large scripts, we can no longer rely on unorganised scripts and use of global variables as in the past. Scripts written using these techniques of the past become very unmaintainable very quickly. Additionally, usability is a bigger issue today than it used to be, mainly due to the number of users on the Web (many of which have disabilities and require sites to be accessible).

So what can we do to improve our JavaScript? Well, let's first see how we can neatly organise our JavaScript using...

Object Literal Syntax

You might be thinking, "what the heck is object literal syntax"? Simply put, it's a simple syntax for creating a JavaScript object, added with the release of JavaScript 1.2 in June 1997. Here's an example of an object created with this syntax:

var MyObject =
{
	myVariable: 123,
	hello: 'world'
}
alert(MyObject.myVariable) // alerts "123"
alert(MyObject.hello)      // alerts "world"

See? Pretty simple. It's a lot like a hashtable in other programming languages (such as C#, Perl, and arrays in PHP). One of the great things about JavaScript (and a feature that differentiates it from some other languages) is that you can store** functions inside variables**. We can use this to our advantage:

var MyObject =
{
	myVariable: 123,
	hello: function()
	{
		alert('Hello world ' + this.myVariable);
	}
}

MyObject.hello(); // alerts "Hello world 123"

See what we can do? Instead of having variables functions laying around all over the place, we can group them together into objects. This is a similar idea to namespaces in other languages, and is probably about the closest equivalent in JavaScript. When coding a site that uses JavaScript, my personal approach is generally to make one object per unique page that uses JavaScript. This keeps things nicely organised, and makes each page's functions and variables self-contained.

Of course, we can also use proper classes to hold reusable components, but this is outside the scope of this post and will probably be covered in a future post 😃.

Another modern technique is unobtrusive JavaScript...

So what is unobtrusive JavaScript?

In a nutshell, unobtrusive JavaScript is a coding technique that separates JavaScript from HTML in the same way that CSS is separate from HTML. Basically, with unobtrusive JavaScript, you have no JavaScript in the HTML at all, except for the