Home arrow JavaScript arrow Page 2 - Object-Oriented JavaScript: Building Real-World Examples
JAVASCRIPT

Object-Oriented JavaScript: Building Real-World Examples


In the first two parts of this series, we've explored the most important points related to object-oriented JavaScript. In this final part, we go through the development of some practical examples for creating helpful objects that can be used in different JavaScript applications.

Author Info:
By: Alejandro Gervasio
Rating: 2 stars2 stars2 stars2 stars2 stars / 93
December 12, 2005
TABLE OF CONTENTS:
  1. · Object-Oriented JavaScript: Building Real-World Examples
  2. · The first hands-on example: building object-based pop-up windows
  3. · Object-oriented AJAX: creating http requester objects
  4. · A final example: building quick and dirty form validating objects

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials