SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Help with OOP javascript

    Hi,

    I am trying to learn object oriented javascript and I ran into a problem, which I can't understand. To keep it simple I created a dummy object and then placed everything into one html file, which is below:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Object Test</title>
    
    <script type="text/javascript">
    
    function ObjectTest()
    {
    	var height ;
    	//CONSTRUCTOR BEGIN
    	this.setHeight(250) ;
    	
    	//CONSTRUCTOR END
    	
    	//PREVILIGED FUNCTION BEGIN
    	this.setHeight = function(aHeight)
    	{
    		height = aHeight ;
    		alert(height) ;
    	}
    	//PREVILEGED FUNCTION END
    }
    </script>
    
    </head>
    
    <body>
    
    <script type="text/javascript">
    	var myObj = new ObjectTest() ;
    	//myObj.setHeight(250) ;
    </script>
    
    </body>
    </html>
    If you try to run this html file, it will create an object of ObjectTest. In the constructor,
    Code JavaScript:
    this.setHeight(250) ;
    line is giving the actual error. I get an error that says this.setHeight is not a function.

    But if you comment that line and uncomment
    Code JavaScript:
    myObj.setHeight(250) ;
    inside the body tag, then, everything works fine.

    My question is how do I call previleged methods such as setHeight() from the constructor of the javascript object.

    Thank you so much in advance for your help.
    With Regards
    Pman
    http://www.pmansLab.com

  2. #2
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could always pass the object to the function itself.

    Something like this (modify as appropriate to your situation).
    Code:
    <div id="someDiv"><a href="#" onclick="ObjectTest(document.getElementById('someDiv'))">Link</a></div>
    You'd have to modify your function to receive the parameter being passed to it.
    Code:
    function ObjectTest(someObject) {
    Try running with the ball from there and see where it takes you.
    Walk on my Path (my blog)

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi parvez, Javascript objects are not classes, they are just objects, the way you wrote your object, it looks like a class, below is how to make an object contructor then extend that contructor using prototypal inheritance, check out the Douglas Crockford talks, especially the Advanced javascript ones, he talks about this stuff specifically.

    Code:
    // Create object Constructor
    var TestObj = function () {
    
        this.height = 250;
        this.width = 250;
    };
    
    // Prototypal inheritance / extension (using object literal syntax)
    TestObj.prototype = {
    
        setHeight: function (aHeight) {
    
            this.height = aHeight;
        },
        showHeight: function () {
    
            alert(this.height);
        }
    };
    
    // This way is a lot more long winded
    TestObj.prototype.setWidth = function (aWidth) {
    
      this.width = aWidth;
    }
    
    TestObj.prototype.showWidth = function (aWidth) {
    
      alert(this.width);
    }
    
    
    // create instance / initialize object
    var newRun = new TestObj();
    newRun.setHeight(370);
    newRun.showHeight();
    Last edited by abb; May 24, 2007 at 06:36. Reason: formating and removed uncertainties


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •