Quick Javascript Object-Orientation Tutorial
Javascript is a loosely typed, highly dynamic language. It has its pros, you can write beautiful code bordering on magic, and its cons, it's hard to debug and the code easily becomes difficult to follow. The web contains tons of information, tutorials and examples on HTML/Javascript programming. Most of which, of course, only cover a specific topic. We especially advise you to the following resources, they've helped us a lot:
-
If you need a Javascript programming reference you'll find an excellent one
here!
-
If you're new to DHTML - how to access HTML elements from Javascript and CSS - you'll find a tutorial
here!
JSON
An object in Javascript is highly dynamic and its members are "declared when set". This means that all you need to do to create a member is to assign it a value. An object in Javascript can also be considered an array of named properties. Furthermore, to simplify creation and readability, Javascript supports a specific syntax called JSON (Javascript Object Notation). All in all, we end up with three different apporaches to use when declaring an identical objects eacg havng its advantages.
| "Plain" |
JSON |
Dynamic (array-wise) |
|
var o = new Object;
o.ID = 17;
o.Name = 'hello';
|
var o = { "ID" : 17, "Name" : "hello" }; |
var o = new Object;
o['ID'] = 17;
o['Name'] = 'hello'; |
Of course, the constants in all three samples above can be replaced with variables, i.e. var o = { "ID" : theID, "Name" : theName };.
The JSON syntax is commonly used in AJAX based web applications. For instance, web services generated using RISE has integrated support for JSON alongside SOAP (for PHP this feature is included in RISE version 4). Generally, it's trivial to generate a JSON string and the Javascript standard method
eval makes it equally easy to convert the string back to an object. Most environments, such as .NET and PHP, provide general purpose tools for JSON string encoding and decoding. Unfortunately, there isn't a standardized Javascript JSON encoder available in todays web browsers, though, most frameworks (such as
YUI and
Prototype) will provide one for you. However, if you need a browser independent
stringify method you find one in
Craig Buckler's blogg.
Object orientation
If you'd like a more traditionally object-oriented approach to Javascript programming you need to declare classes, i.e. you need the ability to create objects having the same members (attributes and methods). A class in Javascript is a function that assigns members to the "this" variable. You create an instance by calling new on the class function. To declare methods you assign function members to the implicit "prototype" member of the class function according to:
|
<script type="text/javascript">
function MyClass(name) {
this.Name = name;
}
MyClass.prototype.Hello = function() {
return 'Hello ' + this.Name + '!';
}
var myObject = new MyClass('Test Object');
var sayHelloTo = myObject.Hello();
</script> |
The Prototype Javascript Framework introduces a class called Class that, together with JSON, gives the resulting code a more object-oriented look-and-feel.
|
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
var MyClass = Class.create();
MyClass.prototype = {
initialize: function(name) {
this.Name = name;
},
Hello: function() {
return 'Hello '+ this.Name + '!';
}
};
var myObject = new MyClass('Test Object');
var sayHelloTo = myObject.Hello();
</script> |
