Today a normal interactive page might well contain hundreds of lines of javascript code. If written improperly , they can be a nightmare to modify and reuse. With advent of AJAX applications, writing javascript is increasingly becoming a complex task and don't forget the browser inconsistencies. This is where object oriented programming comes into picture. For those who don't know, yes it is possible to do object oriented programming in javascript. This article is not a 'How to' on that topic for I am myself a learner. There are tons of articles on this topic available on the internet. Some are listed at the end of this article.

Introduction
In this article we will see how object oriented programming with javacript promotes high reuse of properly written code. We will take previously written code , make it object oriented and ourselves see what benefits we get out of it. I am taking the code for 'animated collapsible panel' written by me for this purpose. Right now the code for the panel is very procedural and depends on a couple of functions and global variables. The user has to cut/paste the HTML code in order to construct a new panel. If done improperly , our code might throw an exception. The basic complain one may have is , the entire structure of the collapsible panel is visible to the user .The user is only interested in displaying his content on the panel. There is no need for him to know that the panel is actually a table , with tow rows , upper being the title row ... I mean these things are like private information of a panel. It really does no value to the user , so long as he is not interested in modifying the behavior or look of the panel. But then, if he does want to modify the behavior or look of the panel , he might have put more global variables and functions. He also has to make sure that they are called on corresponding events of elements of panels (onclick , onchange..etc) and maybe in a particular order.Wont it be nice if all these things were taken care of automatically ? If you think yes , then read through.

Very Brief Intro to OOP in Javascript
As previously stated, this is not a tutorial on OOP with javascript. Here we will see a simple class in javascript.

function test()
{ 
var x =  new COOPPanel('a',' Panel','Hello! how are you',180,0.85,0.1,10);
//x.Collapsed(false);
x.SetIconURLs('images/plus.gif','images/minus.gif');
x.Collapsed(true);
}

function Account(no)
{var acc_number; //Private member
 var balance=0;  //Private member
 
function init() //Private function used for initialization
{ 
  if(! Account.IsValidAccNumber(accno))
  {alert("This is not a valid account number");}
}
 
 //Public functions
 this.deposit = function(amt){balance+=amt;}
 this.withdraw = function(amt){balance+=amt;}
 this.getbalance = function(){return balance;}
}
 
//Public static function 
Account.IsValidAccNumber = function(x)
{ return (x.length == 10)? true:false;}

var i= 'AB34567890' 
if( Account.IsValidAccNumber(i))//static method  of  classAccount  called
{ var  acc1 =  new Account('1234567890')  //new object of class Account created
  acc1.deposit(100);
  acc1.withdraw(21.32);
  acc1.deposit(12.42);
  alert('Balance of account '+ i + ' is ' +acc1.getbalance());
 }   
 

The syntax for declaring a class can slightly differ . One thing to note here is this is the traditional way of declaring class in Javascript. There is one more , slightly cryptic syntax using JSON . A discussion on JSON is out of scope of this article. But it is worth knowing this , especially if you stumble across some code written in that manner , which is quite possible these days . Complex OOP behavior can be obtained by using very cryptic techniques. Inheritance in javascript is not very simple to achieve and there are quite a few mechanisms of doing it. Our requirements are not complex . We will take what is required.

var mypanel = Panel("mypanel",100,100,"The Title","This is the content") ; //constructs a panel of 100x100
mypanel.Collapse(); //collapse the panel
mypanel.SetTitle("New Title"); //change title
mypanel.SetContent("New Content"); //change content
mypanel.SetCollapseSpeed(20); //Set collapse speed
mypanel.Expand();

var smallpanel = Panel("mypanel",10,50,"Small Panel","Content for small Panel") ; //
mypanel.Collapse();
mypanel.SetTitle("New Title");
mypanel.SetContent("New Content");
mypanel.SetCollapseSpeed(20);
mypanel.Expand();

//what ever you fancy.

• Not all aspects of object oriented are directly supported by javascript. There are no keywords like public , private ,virtual ..etc. These behaviours have to be simulated using some syntax or mechanism.
• There is no graphics library available for javascript. You can only use HTML as front end. So if you are planning to write a 'paint' program in javascript think again.
• The event model for web browsers is very very constraint. To add to your troubles their implementation vary with browsers.
• What you can do with javascript is very limited . You really cant control the performance of your script nor can you bypass restrictions imposed by the browser (like javascript can not read from file).
• Javascript can be disabled by user on his/her browser.
• Larger size javascript will cause your page to load slowly.
• Last and the most important. You are required to write code that works on major browsers , considering the above 5 points ,for it to be reusable.

Its certainly no luxury or enjoyable task to do OOP in javascript. We need to live by such limitations.

Planning the COOPPanel object
COOPPanel will be similar to the panel discusses in previous article , but it will be object oriented.The most notable difference, would be that the user will not write mark up to create a new panel .That job will be done by the constructor. So the constructor will tailor the required HTML and put it to place inside a place holder of our choosing. The placeholder has to be a simple <DIV> tag with unique id. This is all the care the user has to take .
One important aspect that influences our object oriented design is , that the HTML though looks like part of the panel object , it really isn't . For example , the icon image (used for resizing) does not understand 'this' keyword in context of the logical object it is contained in. I mean , this line wont work.

<img src='resizeicon.jpg' onclick=this.OnclickHandler() ....>

• Fading opacity while collapsible and reverse when it restores.
• Relative opacity for the whole panel.
• Adjustable speed of resizing.
• Adjustable smoothness of resizing.
• Adjustable width using CSS class.
• Ability to modify the contents of panel at runtime. This will be very for use with AJAX as discussed later in this article.
• Ability to modify the style of Title, icons and content area using CSS classes.
• Ability to modify resize icon pair. Here again there is lot of temptation to add more features.

Short Walkthrough of code
In my opinion the most important part of these demos is not what the user sees on screen but what he see after clicking on 'View Source' in his or her browser . Clean , OOP javascript. The code that does most of the trick is in the file OOPPanel.js.

The init() function is the constructor. This function creates the HTML structure required for a panel , using createElement() and appendChild() methods of DOM. The CAJAXPanel.OnTitleClick() is a static function , that does job of minimizing and maximizing the panel. This had to be made static because, it calls 'minimisepanel()' and 'maximisepanel()' functions internally, which again are static. These functions had to made static, since they are called recursively using the javascript's 'setTimeout' method. So all the important values are passed on to these functions as parameters. The code is similar to what it was for the older collapsible panel. I am not willing to discuss it in detail, right now. Important thing here is, we are still using the functions from Yahoo UI library. So our panel is dependent on the Yahoo UI Library.

How to do AJAX ?
As such there is no code for doing AJAX, inside the panel object. However it does have a 'SetContentHTML()' method.So the idea is to use any implementation for AJAX , fetch data from server and display it into the panel. In the demos, I have used Yahoo UI library's AJAX implementation. You can see the demo here.

Tiny documentation/mannual
This is very small documentation or manual I wrote for the panel. Hope you find it useful. Criticism and suggestions are always welcomed.

Links

• Download js for this article
• View demos of the panel in action
• Nice tutorial on OOP using Javascript.
• Another nice Article on same topic.
• UI Library home page.
• Information on JSON.