Home arrow JavaScript arrow Page 3 - Object-Oriented JavaScript: An Introduction to Core Concepts
JAVASCRIPT

Object-Oriented JavaScript: An Introduction to Core Concepts


JavaScript is a powerful object-oriented language whose capability has frequently been underestimated when compared with other OO languages. This article, the first of several parts, should help you gain a better understanding of JavaScript's true value. It will show you the basics of creating custom objects and defining their methods and properties. You will also learn some advanced concepts such as Inheritance. Plenty of real-world examples will be included.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 42
November 28, 2005
TABLE OF CONTENTS:
  1. · Object-Oriented JavaScript: An Introduction to Core Concepts
  2. · Working with objects in JavaScript : introducing the key concepts
  3. · Coupling methods to objects: defining self-contained constructors
  4. · Functions and objects: a closer look at the “Function” object
  5. · Getting information about objects: looking at the “constructor” property

print this article
SEARCH DEVARTICLES

Object-Oriented JavaScript: An Introduction to Core Concepts - Coupling methods to objects: defining self-contained constructors
(Page 3 of 5 )

As the term suggests, self-contained constructors are simply regular constructors that contain, or include inside their structure, the definition for all the methods of the pertinent object. Returning to the example you saw earlier, the constructor for “Div” objects might be rewritten as follows:

function Div(w,h,t,l,p,bg){
    // define object properties
    this.div=document.createElement('div');
    this.w=w+'px';
    this.h=h+'px';
    this.pos='absolute';
    this.top=t+'px';
    this.left=l+'px';
    this.pad=p+'px';
    this.bord='1px solid #000';
    this.bg='#'+bg;
    // define 'display()' method
    this.display=function(){
        this.div.style.width=this.w;
        this.div.style.height=this.h;
        this.div.style.position=this.pos;
        this.div.style.top=this.top;
        this.div.style.left=this.left;
        this.div.style.padding=this.pad;
        this.div.style.border=this.bord;
        this.div.style.background=this.bg;
        document.getElementsByTagName('body')[0].appendChild(this.div);
    }
}

Now, the constructor shows a slightly more compact structure, since all the properties, along with the definition for the “display()” method, are placed inside of its context. As you can appreciate, the above used syntax makes it easier to see at first glance what methods are exposed by the corresponding object. Of course, this notation doesn’t imply changing the way that objects are instantiated, therefore, if I wanted to spawn another “Div” object, I’d use the same syntax that you previously learned:

var div=new Div(300,250,100,100,5,'00f');
div.display();

As shown above, spawning user-defined objects in JavaScript isn’t very different from other programming languages. Once the constructor has been defined, an object can be instantiated with the “new” keyword and assigned to a regular JavaScript variable.

Now that you know how a self-contained constructor looks and works, it’s time to take a look at another interesting topic of object-based JavaScript: the “Function” object. Just scroll down the page and keep reading.


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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials