Wednesday, August 15, 2007

Classes

JavaScript doesn't have a keyword specific to class, so we must go back to basics and develop classes in a different way. This isn't very difficult.

javascript class object is create as soon as you put a '.' after a var name. eg 'var summary.total' makes a 'summary' object with 'total' property. But the drawback off this technique is that you have to create class object quite often, but helps processing at client.

eg:
lets take an example, summary report which displays 'type' based total values. each type can have various 'currencies' amounts.

solution:
var summary = new Array();
summary.typeList = new Array();
summary.currencyList = new Array();
summary.riembersmentAmount=0;
summary.riembersmentCurrency=getRiembersmentMoney().currency.getSymbol();

summary[TypeId]=new Array();
summary[TypeId].riembersmentAmount=0;
summary[TypeId].riembersmentCurrency=getRiembersmentMoney().currency.getSymbol();
summary[TypeId].currencyList=new Array();

summary[TypeId][CurrencyId]=new Array();
summary[TypeId][CurrencyId].amount=0;
summary[TypeId][CurrencyId].currency= (assign each type currency here);

now point to remmber summary, summary[0] and summary[0][0] are all different i.e
summary -> is the summary object
summary[x] -> is the type object with each type riemberment amount and currency, where x is TypeId
summary[TypeId][y] -> is the currency object for each type object with amount and currency, where y is CurrencyId


Class Properties

script inside html-head

function House(rooms,price,garage) {
this.rooms=rooms;
this.price=price;
this.garage=garage;
}
house1=new House(4,100000,false);
house2=new House(5,200000,true);
with (house1) document.write('House 1 has '+rooms+' rooms, '+(garage?'a':'no')+' garage, and costs £'+price);
with (house2) document.write('House 2 has '+rooms+' rooms, '+(garage?'a':'no')+' garage, and costs £'+price);

script inside html-head

We define a House function that takes three parameters, rooms, price and garage. The function uses the this keyword to create an object.

When we call the House function, we assign the result to our variable, which becomes an object.

So, identical code would be:

house1=new Object();
house1.rooms=4;
house1.price=100000;
house1.garage=false;

We would have to type this in for all houses, which would be very tedious and is why we use the class structure instead.

When we display the details for a house, I have introduced the ternary operator, '?:'. The ternary operator is a compacted version of:

if (garage) str='a'; else str='no';

(garage?'a':'no') means if garage is true, return 'a' else return 'no'. Using the ternary operator removes a line of code, and avoids having to create a new variable.

Similary in JavaScript, we would define the Pet class as follows:

// JavaScript Pet class

function Pet(name) {
this._name = name;
}

Pet.prototype._name;

Pet.prototype.getName = function() {
return this._name;
}

Our JavaScript program (most likely a web page) could create an instance of Pet and invoke the getName() method as follows:

var p = new Pet("Max");
alert(p.getName());


The following list compares the JavaScript version to the C# version:

*

In C#, a constructor is defined using this syntax:

public class Pet() { // ...

In JavaScript, class constructors are defined as functions:

function Pet(name) { ... }

However, as in C#, class instances are created using the new keyword:

var p = new Pet("Max");

*

Methods and properties in JavaScript are attached to a class via the prototype keyword. For example, the class defines a prototype property called _name that will contain the name of the Pet, and a prototype method named getName() that returns the value of _name.

A complete description of prototype-based object modeling is beyond the scope of this article; suffice it to say that this is the recommended syntax for defining the properties and methods that your JavaScript class will expose.
*

Unlike C#, JavaScript properties and methods are untyped: the _name property is not declared as a string, and the getName() function is not declared to return a string. There is no compile-time check for proper type usage. The burden of ensuring proper type usage is placed entirely on the developer.
*

A JavaScript class must always refer to its own properties and methods using the this keyword; unlike Java or C#, JavaScript objects do not provide an implicit this scope.
*

JavaScript does not support any concept of method or property visibility: every property and method is always public. The developer is responsible for ensuring proper usage of a JavaScript class's members. As a result, it is a common convention to tag member variables that should be considered private with a leading underscore, as in the _name property in the example.
*

C# method names typically use the upper camel case naming convention, in which the first letter of each word is capitalized, including the first word; JavaScript (and Java) methods are commonly named using lower camel case, in which the first letter of every word except for the first is capitalized.



Javascript Class Links

http://www.codeproject.com/aspnet/JsOOP1.asp

Contract Class