...

View Full Version : Learning OOP in JavaScript



oClient
01-10-2007, 09:24 AM
I learn OOP in javascript. and a few articles say that we can create a static prop/meth to an object just like a predefined object. But i think it just a prop/meth assingned to a constructor. Or is there really static meth/pro in javascript?.

Kor
01-10-2007, 12:06 PM
It depends on what they mean by "static" method/property.

I have a different vision about that. From the javascript point of view, elements have native methods/properties, but, if treated like ordinary objects, the may gain other custom methods/properies as well.

For instance, an input has, among other native properties, the native property type:
<input id="myinput" type="text">
so that
var myPropertyValue=element.type will return the value of the type property.

But, as any other element/property/method/variable, that input may be treated as an object, and you may assign to that element a custom property, let's say required. When assigning a custom property, you must take care not to use a javascript reserved word, and is better to avoid native properties names as well.
element.required='yes';
var myPropertyValue=element.required;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
/* <![CDATA[ */
onload=function(){
var e=document.getElementById('myinput');
e.required='yes';
alert(e.required)
}
/* ]]> */
</script>
</head>
<body>
<form action="">
<div>
<input id="myinput" type="text" />
</div>
</form>
</body>
</html>


This a dynamic way to assign a new property to the elements. It is true that you may do that in a static way as well:
<input id="myinput" type="text" required="yes">
It will work, but two things are to be considered in this case:
1. Even it works in all the modern browsers, the static custom property is not considered a valid HTML code by the validators
2. In full DOM compliant browsers (Mozilla...) the new property is not to be found, in this case, on using the classical read method:
var myPropertyValue=element.required
as it is not a native property. But the DOM 1 or, even better, the DOM 2 level methods are to be used:
var myPropertyValue=element.getAttributeNode('required').nodeValue;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
/* <![CDATA[ */
onload=function(){
var e=document.getElementById('myinput');
alert(e.getAttributeNode('required').nodeValue)
}
/* ]]> */
</script>
</head>
<body>
<form action="">
<div>
<input id="myinput" type="text" required="yes"/>
</div>
</form>
</body>
</html>


I hope it helps...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum