Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV tag mimic for CLASS object

    jayakodiu@yahoo.com

    DIV tag mimic for CLASS object


    A DIV tag does not show anything unless the background color and width or height are defined; this makes it an ideal candidate to be an invisible 'container' to hold info by setting attributes of our liking. The following code for a DIV tag mimics a CLASS object, which otherwise is quite complex:

    <SCRIPT>
    //The function to create the rectangle class and properties
    function addrec(sx,sy,w,h){
    var ele=document.body.appendChild(document.createElement('DIV'))
    //add properties to our rectangle object
    ele.setAttribute('name','rectangle')
    ele.setAttribute('sx',sx)
    ele.setAttribute('sy',sy)
    ele.setAttribute('w',w)
    ele.setAttribute('h',h)
    area=w*h
    ele.setAttribute('area',area)
    perimeter=2*(w+h)
    ele.setAttribute('peri',perimeter)
    momtofinertia=w*h*h*h/12
    ele.setAttribute('momin',momtofinertia)
    }

    //test the class creating 5 rectangles
    addrec(100,100,10,20)
    addrec(100,100,20,20)
    addrec(100,100,30,20)
    addrec(100,100,40,20)
    addrec(100,100,50,20)

    var rn=document.all.tags("DIV")
    n=rn.length
    for(i=0;i<n;i++){nam=rn[i].getAttribute('name')
    if(nam=='rectangle'){alert(rn[i].momin)}
    }

    //we can have an attribute 'index' or have a parent DIV to hold our objects as children.
    </SCRIPT>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    don't abuse the dom, use objects:

    Code:
    <SCRIPT>
    //The function to create the rectangle class and properties
    function addrec(sx,sy,w,h){
    var ele=(addrec.el||(addrec.el={}));
    //add properties to our rectangle object
    ele.name='rectangle';
    
    ele.sx=sx;
    ele.sy=sy;
    ele.w=w;
    ele.h=h;
    ele.area=w*h;
    ele.peri=2*(w+h);
    ele.momin=w*h*h*h/12;
    return ele;
    }
    
    //test the class creating 5 rectangles
    addrec(100,100,10,20)
    addrec(100,100,20,20)
    addrec(100,100,30,20)
    addrec(100,100,40,20)
    addrec(100,100,50,20)
    
    alert(addrec.el.momin)
    
    </SCRIPT>
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your observation; my purpose was to highlight the unused properties of simple element like DIV; well, the abuse is perhaps 'new use' and certainly it will not burst the system.

    By the way, are the 'objects' really complete and anywhere close to Object-oriented programming OOPS??

    jayakodiu@yahoo.com

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by u jayakodi View Post
    Thanks for your observation; my purpose was to highlight the unused properties of simple element like DIV; well, the abuse is perhaps 'new use' and certainly it will not burst the system.

    By the way, are the 'objects' really complete and anywhere close to Object-oriented programming OOPS??

    jayakodiu@yahoo.com
    im not syaing it will break, im saying it's slow and cumbersome to use a method like getAttribute on an external object simply to store key:value pairs; something native object are ideally suited for.



    im not sure what you mean by complete, or "anywhere close" to other oop languages. Prototypal inheritance is (imho) a far better match for most application development. Jquery is a great example of how easy and popular chaining (prototypal) is to use.


    if you want to fake old-school inheritance, you can do that too. I doubt you'll find every construct and operator you're used to in other OOP environs, so you'll have to create your own.

    check out http://eloquentjavascript.net/chapter8.html for a decent examination of OOP in js.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    New Coder
    Join Date
    Sep 2010
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your reference doc on js oop is really nice and thanks for it. Just now I had a look at your profile and note that you are a web developer and that makes the difference in the angle of view on my snippet; I am a civil engineer and in my field we do not have anims and loads of data but we use js with less concern on speed and I wanted to share a snippet I developed and used for years. Thanks again for a useful interaction.

    jayakodiu@yahoo.com


  •  

    Posting Permissions

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