SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 45
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help in object oriented programming

    Hi,

    I am trying to make a round corners script in object oriented programming method. This is purely for learning purposes.

    The script is no where near complete but I am already having problems with it.

    I am trying out the techniques described in 'David Flanagan ' text book 'JavaScript: The Definitive Guide, 5th Edition'

    This code is called from html page which once working will place a round container around element

    Code:
    Factory_rounded_corners("content", "#507742", "all_round");
    /* content is id of element
    * #507742 is color to be applied
    * all_round means round corners will be applied on top and bottom of element
    * one means only one element is to be affected
    */


    **************Javascript functions below *******************
    Code:
    /* Function	Factory_rounded_corners
    *	-------------------------
    *	Parameter: selector
    *	Return: None
    *	Description: Create a rounded container around elements to be affected
    */
    function Factory_rounded_corners(selector, color, type, numb_elem)
    {
    	var rounded_container;
    	if(numb_elem == "one" && type == "all_round")
    	{
                    rounded_container = new All_rounded_corners_one_element(selector, color);
    		alert(rounded_container.color);//works
    		rounded_container.elements_to_be_affected()//Does not work
     
    	}
    }
    
    /* Function	All_rounded_corners_one_element
    *	-------------------------
    *	Parameter: selector
    *	Return: None
    *	Description: Create a rounded container around elements to be affected
    */
    function All_rounded_corners_one_element(selector, color)
    {
    	alert("Inside All_rounded_corners");
    	this.superclass(selector, color); // works
    	//Custom_rounded_container.call(this, selector, color);
    }
    *	Function custom_rounded_container
    *	----------------------------------
    *	Parameters: selector
    *	Properties: this.temp_array
    *	Methods: this.elements_to_be_affected, this.apply
    *	Returns: Returns a object 
    *	Description: 
    */
    function Custom_rounded_container(selector, color)
    {
    	alert("Inside Custom_rounded_container"); // works
    	this.temp_array = selector.split(" ");
    	this.color = color;
    	//alert(this.temp_array);
    }
    
    /*	Function elements_to_be_affected
    *	----------------------------------
    *	Parameters: None
    *	Properties: None
    *	Local variables:	None 
    *	Local methods: None
    *	Returns: elements in array or one element
    *	Description: Retrieves elements to be affected
    */
    Custom_rounded_container.prototype.elements_to_be_affected = function()
    {
    	alert("Inside elements_to_be_affected");//DOES NOT WORK
    }
    All_rounded_corners_one_element.prototype.superclass = Custom_rounded_container;
    All_rounded_corners_one_element.prototype  = new Custom_rounded_container();
    If anyone has a better idea of how to do this, please let me know.

    Thankyou

    Shippuuden

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Here's the declaration for a constructor:

    Code:
    function Custom_rounded_container(selector, color)
    And here's how that constructor is being called:

    Code:
    All_rounded_corners_one_element.prototype  = new Custom_rounded_container();
    Something seems to be missing.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Do you mean the arguments?

    I didn't put them in because it wasn't in the textbook.

    I have put the arguments in now and it still doesn't work.

    This is how it looks like now:
    Code:
    All_rounded_corners_one_element.prototype  = new Custom_rounded_container(selector, color);

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shippuuden View Post
    Hi Paul,

    Do you mean the arguments?

    I didn't put them in because it wasn't in the textbook.
    Which part of the textbook are you referring to?

    Let's explain things a bit better.
    Why the code initially didn't work is because the .split() method was attempting to be used on an undefined object.

    Code:
    this.temp_array = selector.split(" ");
    After your update you are passing in a variable called selector, but that's still undefined.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have inserted following if statement inside Custom_rounded_container function:

    Code:
    if(selector == undefined)
    {
    	alert("selector is undefined");
    }
    else
    {
    	alert("selector is:		" + " " + selector);
    	alert("Inside Custom_rounded_container");
    }
    You were correct though. When I changed
    Code:
    All_rounded_corners_one_element.prototype  = new Custom_rounded_container(selector, color);
    back to
    Code:
    All_rounded_corners_one_element.prototype  = new Custom_rounded_container();
    It was showing that the ''selector is undefined"

    but when i changed it back to
    Code:
    All_rounded_corners_one_element.prototype  = new Custom_rounded_container(selector, color);
    Only the else part of the if statement is executing, it is showing the selector value.

    but rounded_container.elements_to_be_affected() is still not working.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shippuuden View Post
    I have inserted following if statement inside Custom_rounded_container function:

    Code:
    if(selector == undefined)
    {
    	alert("selector is undefined");
    }
    else
    {
    	alert("selector is:		" + " " + selector);
    	alert("Inside Custom_rounded_container");
    }

    Only the else part of the if statement is executing, it is showing the selector value.
    That's good, your updated code must be doing something else than what has already been covered, because when I follow what you have stated, my web browser still shows "Uncaught ReferenceError: selector is not defined"

    Could you put up your code at jsfiddle.net so that we can get a better idea of how things currently are?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://jsfiddle.net/shippuuden/pzrgL/

    I have only uploaded the relevant html code.

    Let me know if you want rest of the html code as well.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shippuuden View Post
    http://jsfiddle.net/shippuuden/pzrgL/

    I have only uploaded the relevant html code.

    Let me know if you want rest of the html code as well.
    No that's fine. Where is this line getting the selector from?

    Code:
    Custom_rounded_container(selector, color);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's getting it from :

    Code:
    this.superclass(selector, color);
    Code:
    function All_rounded_corners_one_element(selector, color)
    {
    	alert("Inside All_rounded_corners");
    	this.superclass(selector, color);
    }

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shippuuden View Post
    It's getting it from :

    Code:
    this.superclass(selector, color);
    Code:
    function All_rounded_corners_one_element(selector, color)
    {
    	alert("Inside All_rounded_corners");
    	this.superclass(selector, color);
    }
    Follow it through - you'll see that this line doesn't know about the selector or color variables.

    Code:
    Custom_rounded_container(selector, color);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does know because when I add

    Code:
    		alert(rounded_container.color);//works
    		alert(rounded_container.temp_array);
    inside Factory_rounded_corners function

    Code:
    function Factory_rounded_corners(selector, color, type, numb_elem)
    {
    	var rounded_container;
    	if(numb_elem == "one" && type == "all_round")
    	{
    		rounded_container = new All_rounded_corners_one_element(selector, color);
    		alert(rounded_container.color);//added
    		alert(rounded_container.temp_array); //added
    		rounded_container.test();
    		//rounded_container.elements_to_be_affected();//Does not work
    		
    	}
    }
    it is showing correct values.

    color and temp_array are both inside Custom_rounded_container

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shippuuden View Post
    color and temp_array are both inside Custom_rounded_container
    Move those alerts to where they are just before the line of code I pointed out before.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you mean before
    Code:
    this.superclass(selector, color);
    Code:
    function All_rounded_corners_one_element(selector, color)
    {
    	alert("Inside All_rounded_corners");
    	alert("color is 	" + " " +color);//works
    	alert("selector is 	" + " " + selector);	
    	this.superclass(selector, color);
    }
    It is still showing correct values

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shippuuden View Post
    Did you mean before
    Code:
    this.superclass(selector, color);
    No, I mean before this line:

    Code:
    Custom_rounded_container(selector, color);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Umm is this what you meant?

    alert(selector);
    alert(color);
    All_rounded_corners_one_element.prototype = new Custom_rounded_container(selector, color);

    Nothing is showing now.

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shippuuden View Post
    Umm is this what you meant?

    alert(selector);
    alert(color);
    All_rounded_corners_one_element.prototype = new Custom_rounded_container(selector, color);

    Nothing is showing now.
    That is correct. That's one of the causes of the problems you are facing
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, so what would be the best way to do this?

    I want All_rounded_corners_one_element to inherit Custom_rounded_container.

    Selector and color needs to be inside Custom_rounded_container because other objects will also inherit Custom_rounded_container.

    The book I am following seems to be wrong then.

    This is the code in the JavaScript: The Definitive Guide, 5th Edition text book by David Flanagan

    Code:
    // Here is a simple Rectangle class.
    // It has a width and height and can compute its own area
    function Rectangle(w, h) {
        this.width = w;
        this.height = h;
    }
    Rectangle.prototype.area = function( ) { return this.width * this.height; }
    
    // Here is how we might subclass it
    function PositionedRectangle(x, y, w, h) {
        // First, invoke the superclass constructor on the new object
        // so that it can initialize the width and height.
        // We use the call method so that we invoke the constructor as a
        // method of the object to be initialized.
        // This is called constructor chaining.
        Rectangle.call(this, w, h);
    
        // Now store the position of the upper-left corner of the rectangle
        this.x = x;
        this.y = y;
    }
    
    // If we use the default prototype object that is created when we
    // define the PositionedRectangle( ) constructor, we get a subclass of Object.
    // To subclass Rectangle, we must explicitly create our prototype object.
    PositionedRectangle.prototype = new Rectangle( );
    
    // We create this prototype object for inheritance purposes, but we
    // don't actually want to inherit the width and height properties that
    // each Rectangle object has, so delete them from the prototype.
    delete PositionedRectangle.prototype.width;
    delete PositionedRectangle.prototype.height;
    
    // Since the prototype object was created with the Rectangle( ) constructor,
    // it has a constructor property that refers to that constructor.  But
    // we want PositionedRectangle objects to have a different constructor
    // property, so we've got to reassign this default constructor property.
    PositionedRectangle.prototype.constructor = PositionedRectangle;
    
    // Now that we've configured the prototype object for our subclass,
    // we can add instance methods to it.
    PositionedRectangle.prototype.contains = function(x,y) {
        return (x > this.x && x < this.x + this.width &&
                y > this.y && y < this.y + this.height);
    }
    
    var r = new PositionedRectangle(2,2,2,2);
    print(r.contains(3,3));  // invoke an instance method
    print(r.area( ));         // invoke an inherited instance method
    
    // Use the instance fields of the class:
    print(r.x + ", " + r.y + ", " + r.width + ", " + r.height);
    
    // Our object is an instance of all 3 of these classes
    print(r instanceof PositionedRectangle &&
          r instanceof Rectangle &&
          r instanceof Object);
    
    // Store a reference to our superclass constructor.
    PositionedRectangle.prototype.superclass = Rectangle;
    
    With this property defined, the syntax for constructor chaining is simpler:
    
    function PositionedRectangle(x, y, w, h) {
        this.superclass(w,h);
        this.x = x;
        this.y = y;
    }
    I based my code on the sample code in the text book.

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shippuuden View Post
    The book I am following seems to be wrong then.
    What I notice that seems to be different from what you show from the book, is the second line here.

    Code:
    All_rounded_corners_one_element.prototype.superclass = Custom_rounded_container;
    All_rounded_corners_one_element.prototype  = new Custom_rounded_container();
    For what reason did you add in that second line?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understood the text book correctly, if I want to subclass the parent, I must explicitly create the prototype object.

    The parent being Custom_rounded_container.

    From the textbook:

    // If we use the default prototype object that is created when we
    // define the PositionedRectangle( ) constructor, we get a subclass of Object.
    // To subclass Rectangle, we must explicitly create our prototype object.
    Code:
    PositionedRectangle.prototype = new Rectangle( );

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shippuuden View Post
    If I understood the text book correctly, if I want to subclass the parent, I must explicitly create the prototype object.
    Notice in the Rectangle constructor how even if the values are undefined which they will be when called with no arguments) that no errors will be thrown since the values being assigned to the object will just be undefined?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you are right.

    but shouldn't

    Code:
    	if(selector == undefined)
    	{
    		alert("selector is undefined");
    	}
    	else
    	{
    		alert("selector is:		" + " " + selector);
    		alert("Inside Custom_rounded_container");
    	}
    inside Custom_rounded_container function catch the undefined selector variable though.

    When I had
    Code:
    All_rounded_corners_one_element.prototype  = new Custom_rounded_container();
    it was displaying that 'selector is undefined'

    but since I changed it to
    Code:
    All_rounded_corners_one_element.prototype  = new Custom_rounded_container(selector, color);
    it is displaying the actual selector value.

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Let's make it as it should be.

    Take new Custom_rounded_container(selector, color); back to how you started with it

    Code:
    ... = new Custom_rounded_container();
    And then adjust the Constructor so that the split part will only be done if the selector is not falsy, so that an error won't be thrown.

    Code:
    this.temp_array = selector && selector.split(" ");
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is this what you meant?

    Code:
    function Custom_rounded_container(selector, color)
    {
    	/*
    	if(selector == undefined)
    	{
    		alert("selector is undefined");
    	}
    	else
    	{
    		alert("selector is:		" + " " + selector);
    		alert("Inside Custom_rounded_container");
    	}
    	*/
    	alert("Inside Custom_rounded_container");
    	if(selector != undefined && color != undefined)
    	{
    		this.temp_array = selector.split(" ");
    		this.color = color;
    	}
    }
    Now
    Code:
    		alert(rounded_container.color);
    		alert(rounded_container.temp_array);
    inside Factory_rounded_corners function is not working:

    Code:
    function Factory_rounded_corners(selector, color, type, numb_elem)
    {
    	var rounded_container;
    	if(numb_elem == "one" && type == "all_round")
    	{
    		rounded_container = new All_rounded_corners_one_element(selector, color);
    		alert(rounded_container.color);//Does not work
    		alert(rounded_container.temp_array); //Does not work
    		rounded_container.elements_to_be_affected();//Does not work
    		
    	}
    }

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shippuuden View Post
    is this what you meant?
    No, what I meant is much simpler, and involved just putting a guard condition on the selector part.

    Code:
    function Custom_rounded_container(selector, color) {
        this.temp_array = selector && selector.split(" ");
        this.color = color;
    }
    So if the selector variable contains a falsy value (which could be undefined, false, null, "", 0) it will be that falsy value which is assigned to this.temp_array

    If selector doesn't contain a falsy value, it will be considered as a truthy value and execution will carry on to the selector.split(" ") part, which will then be assigned to this.temp_array

    That way, regardless of even if selector and/or color are undefined, the properties still get set on the object without causing an error to occur.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, I didn't know that.

    But those two alerts are still not working.


Tags for this Thread

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
  •