Thursday, April 10, 2008

Objects in Javascript

Javascript does not use a standard class model. It uses objects that are like associative array structures of data, or so I have read. Regardless of how it works, you can make a class-ish type construct in Javascript.

I'll try to go over the basics here to help anyone who is interested.

Objects are defined by creating a new function. Inside the function you can define variables and methods that are attached to the primary function. The primary function is really like the constructor for the object as well.

For example:


function ObjectExample(constructorParameter1, constructorParameter2)
{
//define a variable and assign a constructor value to it
this.variable1 = constructorParameter1;
this.variable2 = constructorParameter2;

//you can also define variables with var, but they act differently
var variable3 = this; //assigns an instance pointer to a "constructor" variable

//defines a function that is attached to the object
//this function has one parameter
//pretend that this.variable1 is a reference to a div element
this.statusIndicator = function(statusText)
{
//make sure an element reference was returned before trying to set properties
if(this.variable1 != null)
{
document.getElementById(this.variable1).innerHTML = statusText;
}
}

//you can also have a function with zero parameters
this.aBoringFunction = function()
{
alert('YO!');
}

//you can call an instance function from inside the "constructor" (aka. primary function)
this.aBoringFunction(); //every time an instance is created we will get a pop-up
}



To use the object we just defined we would do something like this:

//create a new instance
var newObjectInstance = ObjectExample('7', divReference);

//execute a object function
newObjectInstance.statusIndicator('Hello...');




That's about it, let me know if I missed something, or there was an error. I typed the code out rather then copying something I know works for readability reasons.

Javascript Rant

I've been working on something recently where I decided to have most of the program run in a client's browser. It's basically a blog system that works with that asp- xml-to-access-db class I released on here as an LGPL piece of code. The clients browser sends/requests information in XML to the server script and everything turned out peachy. I'm overall extremely happy with it.

Now that I'm done writing the script. I learned quite a bit more about Javascript that I didn't know in the past. The initial few days of working with it were tragic. I'm not too fond of Javascript's "object" model and lack of a standard class model. While javascript works and provides a good deal of functionality, it feels "dirty." Maybe my fellow "old school" programmers can understand.

Besides the object model, the DOM in general is a pain to work with, and hard to find information about (that works in multiple browsers). Inconsistencies, things that logically should work don't, and, trying ~5 different suggested methods to do something, but finding out that only 1/ 5 seems to actually work.

If you don't agree with me, have you ever tried encapsulating XMLHttpRequest in a "class" object? There are a few gotchas that I stumbled on, which I hope to talk about in the future.

My tip of the day about Javascript: Objects are functions are objects can be variables with no data hiding what-so-ever...