DIV tag mimic for CLASS object

[u jayakodi]

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>

[rnd me]

don't abuse the dom, use objects:

<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>

[u jayakodi]

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

[rnd me]

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.

[u jayakodi]

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