SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DOM Node Inheritance

    I don't quite understand the difference between classical and prototypal JS inheritance as much as I would like to, but I still need to figure this out.

    My ultimate goal is to create a toolbox of usable modules that are essentially extensions of the form elements that already exist. Without giving a hairy explanation, I basically want to do this in my code:

    var customRadioButton=new CustomRadioButton();
    customRadioButton.style.border="1px solid red";
    document.appendChild(customRadioButton);

    Any ideas or examples?

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Suppose you define a constructor function for an object like this:
    Code:
    function Apple() //constructor function
    {
    	this.name = "red";
    	this.size = 12;
    }
    
    var myobj = new Apple();
    Then suppose you try to access a property of an object, e.g.:
    Code:
    var x = myobj.age;  //not one of myobj's properties
    the first place js searches for the name 'age' is in myobj. If the name 'age' is not present in myobj, then js searches something called Apple's prototype object for the name 'age'. If a property called 'age' is found in the prototype object, then that value is retrieved. Otherwise, 'age' will be undefined. You set a property for the prototype object like this:
    Code:
    Apple.prototype.someName = "someValue";
    After you do that, all objects of type Apple will be appear to have a property called someName.

    What will happen in the following case?
    Code:
    function Apple()
    {
    	this.name = "red";
    	this.size = 12;
    	this.age = "3 weeks old";
    }
    
    Apple.prototype.age = "10 weeks old";
    
    var myobj = new Apple();
    var x= myobj.age;
    In other words, what will happen when an object and it's prototype both have a property with the same name? According to the rules, js first searches the properties of the object for the name, and if the name is found in the object, then its value is returned. Since the name 'age' is found in myobj, that value is returned. So a name in an object hides the same name in its prototype object.

    In your case, you will be able to write code like this:
    Code:
    var customRadioButton = new CustomRadioButton();
    
    customRadioButton.name = "myRadio1";
    customRadioButton.style.border = "1px solid red";
    
    document.getElementsByTagName("body")[0].appendChild(customRadioButton);
    Here is the js that will make that happen:
    Code:
    function CustomRadioButton() //constructor function
    {
    	this.textColor = "blue";
    	return this.createButton(); //tries to access the name 'createButton' for the current object
    }
    
    CustomRadioButton.prototype.createButton = function() //add property to prototype object
    {
    	var button = document.createElement("input");
    	button.type = "radio";
    	
    	button.style.backgroundColor = this.textColor;
    	
    	return button;
    }
    Note: styling a radio button like that doesn't work in FF1.0.7.
    Last edited by 7stud; Jan 22, 2007 at 11:52.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect explanation.

    Thanks a ton, that's exactly what I was looking for!

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I have one problem left.

    In that example, how do I define a new function? I assumed it would be the same as usual so I added this function:

    CustomRadioButton.prototype.show=function()
    {
    document.getElementsByTagName("body")[0].appendChild(this);
    }

    Then I called:

    customRadioButton.show();

    and Firefox threw an error saying that customRadioButton.show(); is not a function...

    How do I get around this?

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post the full example. Make it as small as possible but still able to demonstrate that error.

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem you are seeing is most likely because I defined the constructor function so that it doesn't return a CustomRadioButton object, which means the returned object doesn't have the .show property, you defined. That's not what one would expect from a constructor function, so that's bad code. I wrote the constructor function to fit the statements you posted instead of defining it sensibly.

    Rewrite the constructor function to return a CustomRadioButton object, and then add add a .show function that both creates and adds a button that has the properties specified in CustomRadioButton. Or, create a .button property that is assigned the button created by a .createButton function, and then in the .show function add the button stored in .button to the document.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess what I really need is for the CustomRadioButton to actually be a node that can be added to the DOM via the appendChild function.

    Possible? Can I "extend" the Node class or even the HTMLInputElement class so that the custom object can be appended to the DOM?


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
  •