Object-Oriented JavaScript: Building Real-World Examples - The first hands-on example: building object-based pop-up windows
(Page 2 of 4 )
The first practical example that uses most of the concepts related to custom objects in JavaScript consists of developing a constructor function that returns pop-up window objects. Although overall, pop-ups can be considered rather outdated elements in modern Web development, in this particular case I’ll write the appropriate constructor, so you can see how the theory explained in the earlier articles can be applied to real-world situations.
To begin, here’s the definition for the “popUpWin()” constructor function, along with a couple of additional object methods:
// define popUpWin object
function popUpWin(url,width,height,res,stat,loc,sbars,top,left){
this.url=url;
this.width=!width?200:width;
this.height=!height?250:height;
this.res=!res?false:true;
this.stat=!stat?false:true;
this.loc=!loc?false:true;
this.sbars=!sbars?false:true;
this.top=!top?0:top;
this.left=!left?0:left;
this.display=display;
this.minimize=minimize;
// display window
function display(){
this.win=window.open(this.url,'','width='+this.width+',height='+
this.height+',resizable='+this.res+'status='+this.stat+',
scrollbars='+this.sbars+'top='+this.top+',left='+this.left);
}
// minimize window
function minimize(){
this.win.blur();
}
}
In simple terms, the above constructor function builds up some configurable pop-up windows, and as one would expect, accepts a series of parameters for using the window object itself and its “open()” method. Probably you’ve been working with similar functions in the past, so this one should be quite familiar to you.
However, as you can see, working with pop-up constructor objects implies having some additional advantages that certainly aren’t present when using conventional functions. The main benefit rests on the ease of programmatically controlling the behavior of each pop-up window object, since each method can be called up according to the logic that a given application dictates. Take a look at the simple “minimize()” method, which exemplifies the high level of programmatic control exposed by each pertinent object:
function minimize(){
this.win.blur();
}
Now, after defining the corresponding constructor functions, as well as the additional “minimize()” method, it’s time to spawn a sample pop-up window object, and utilize its methods. The corresponding script could be written as follows:
// instantiate popUpWin object
var pWin=new popUpWin('',500,250);
// open pop up window
pWin.display();
// minimize pop up window
pWin.minimize();
As the above example clearly shows, a new pop-up window object has been instantiated from its corresponding constructor, passing into it only the width and height of the window to be displayed. The remaining parameters take default values, so they’re not specified when the object is created.
The rest of the snippet is responsible, first, for displaying the pop-up window, and second, for minimizing it through its homonymous method, which, as you can see, is simply a wrapper for the “blur()” window’s object method.
After demonstrating how pop-up window objects can be created and properly utilized in JavaScript applications, the next example will rest on building http requester objects, something that you’ll hopefully find quite useful, particularly if you’re using AJAX very often in your JavaScript applications. So, let’s see how these objects can be defined and put to work for you.
Next: Object-oriented AJAX: creating http requester objects >>
More JavaScript Articles
More By Alejandro Gervasio
