Building Simple Javascript Classes

Three cheers for jQuery, Prototype, YUI, and other javascript libraries that have made the web developer's life simpler. These libraries make doing what needs done straight forward and clean cut.

However, these little gems do not solve some of the basic "no-no's" of javascript development.

  1. They simplify the namespaces issue, but they don't make it go away.
  2. They often don't do much to promote good programming patterns.
  3. They usually promote a procedural approach to solving problems, rather than a object oriented approach.
On that last note, the object oriented aspect of javascript is almost completely ignored by many developers. Most developers who user these libraries assume that the libraries have removed the need to learn this aspect of the language. Why learn it if you don't have to?

Simply put, learning javascript as an object oriented language means the same thing as it does for every other language. Your code is generally cleaner, more reusable, and solves the horrors of namespaces (or lack thereof).

Since I'm nice, here's a quick primer on how to create a javascript "class".First, create a variable that equals a function like this.

jsclass = function() { // Code goes here!}Next let's create a few properties. Properties are variables that live inside the class and belong to it.

jsclass = function() { this.variable1 = "This is our first variable."; this.variable2 = "This is our second.";}Now we are going to add a few methods. Methods are functions that live inside the class and belong to it. We are going to allow the script that calls this little method to pass it an argument.

jsclass = function() {

this.variable1 = "This is our first variable."; this.variable2 = "This is our second.";

this.method1 = function(anArgument) { alert(anArgument); }

}Wahoo! We now have a fully functional javascript class! It may not do much, but it works. Let's test it. Create an HTML file and put this script in its head.

Next, throw this little bit of code into the same script block to create an object from our class.

newObject = new jsclass();Next, in the body of your HTML document, create a button and add an onclick event as follows.

<input type="button" value="A Button" onclick="newObject.method1('Hello world.');" />Now load your page and press the button. Prepare yourself as you are underwhelmed by a nice little alert box containing the industry standard and massively overused "Hello world".

Now let's do just one more thing to round out the basics of using javascript classes. Let's use member functions and variables inside our class. We are going to change up our class just a bit so make sure to note the changes.

jsclass = function(ourMessage) {

this.userMessage = ourMessage; this.errorMessage = "No message sent.";

this.method1 = function(anArgument) { alert(anArgument); }

this.method2 = function() { if(this.userMessage=="") { this.method1(this.errorMessage); } else { this.method2(this.userMessage); } }

}

newObject1 = new jsclass("Hello world.");newObject2 = new jsclass("");Now add a second button to your HTML document.

<input type="button" value="Message" onclick="newObject1.method2();" /><input type="button" value="Nothing" onclick="newObject2.method2();" />Clicking the buttons will give you either the message you sent, or the error message contained within the class.

Before you say it, I know that this function is basically useless and could be easily done in other ways. However, when it comes to things like roll-overs, javascript classes can be a life saver. You can have multiple roll-overs on a page that use the same code for their functionality. You can then take that same class and use it on the next project you do easier than with a procedural approach.

So take the OO dive into javascript. You may find that some of the problems (like roll-overs, menus, etc.) that took a lot of convoluted javascript functions to get working become clean and easy when created as a class. Happy experimenting!