Some more about JavaScript (and a few examples)

18 August 2008

Permalink: http://douggreenall.co.uk/site/?p=72

So in my last post I wrote a little about JavaScript functions and classes and gave some rather simple examples of both. Today I'm going to delve a little deeper into the kind of things you can do with the language as well posting a few examples of things I've written in the past.

Being an interpreted language (no compilation) JavaScript is loosely typed and hence very dynamic - there's no real distinction between code and data (for the pedants, code is data), so you can pass anything you like as an argument and any variable can hold any kind of content - let me demonstrate:

Here we have a simple class:

function ASimpleClass(arg1)
{
  this._arg1 = arg1;

  this.ASimpleMethod = function()
  {
    alert(this._arg1);
  };
}

And we can instantiate the class in any of the following ways, all of which are completely legitimate:

var aSimpleClassInstance0 = new ASimpleClass();
var aSimpleClassInstance1 = new ASimpleClass(null);
var aSimpleClassInstance2 = new ASimpleClass("null");
var aSimpleClassInstance3 = new ASimpleClass(0);
var aSimpleClassInstance4 = new ASimpleClass("abcdefg");
var aSimpleClassInstance5 = new ASimpleClass(new ASimpleClass());
var aSimpleClassInstance6 = new ASimpleClass(function() { alert("I'm a function"); });

Calling ASimpleClass.ASimpleMethod will give the following output via an alert box:

aSimpleClassInstance0.ASimpleMethod(); // undefined
aSimpleClassInstance1.ASimpleMethod(); // null
aSimpleClassInstance2.ASimpleMethod(); // null
aSimpleClassInstance3.ASimpleMethod(); // 0
aSimpleClassInstance4.ASimpleMethod(); // abcdefg
aSimpleClassInstance5.ASimpleMethod(); // [object Object] (in Opera - other browsers may vary)
aSimpleClassInstance6.ASimpleMethod(); // function() { alert("I'm a function"); }

Regardless of the arguments however, all of these calls are perfectly acceptable and won't result in errors. What's interesting though is that in the final instance, the internal variable _arg1 has become an entirely new method itself:

aSimpleClassInstance6._arg1(); // I'm a function

What's more, we can actually attach any arbitrary data and functionality to any complex object instance on the fly by simply declaring a new member variable and populating it (although I don't recommend doing this for reasons I'll explain in a subsequent post):

aSimpleClassInstance6._newVar = "I'm a new variable";
aSimpleClassInstance6.NewMethod = function() { alert(this._newVar); };
aSimpleClassInstance6.NewMethod(); // I'm a new variable

Now allowing this kind of behaviour means JavaScript objects can be somewhat volatile (and incredibly difficult to debug) but the power it provides us if we are careful is almost overwhelming - despite the fact that it's a scripting language, JavaScript is still very elegant and expressive and often it's not its limitations that hinder us, but limitations of the platform (i.e. web-browsers).

Anyway, I'm going to end this post with a couple of examples of things I wrote a while back to give you a taste of the kind of stuff I'll be writing about in the future. I'll go through the code for these components step by step in the coming days, explaining exactly how they work and why. It's also worth noting that everything I'll post here will be cross-browser compatible (IE6, IE7, Opera, Firefox 2, Firefox 3 and Safari) and in almost all instances, all browsers use exactly the same code path and standards-compliant markup.

Right, first of all is the in-no-way-influenced-by-Apple-style menu (Download FruityDock.js (unoptimised)):

Followed closely by a carousel - drag it with the mouse to spin it around (there's a couple of usability issues that I'm going to address before I post about this, but I'll detail them at the time - Download Carousel.js (unoptimised)):

And we'll finish off with a slide puzzle - enjoy (Download SlidePuzzle.js (unoptimised)):

Scramble Reset