Caution!
The comments below contain personal opinions you might just strongly disagree with. Take them with a grain of salt, and try to glean any value from them that they may have.
;-)
There is a disease common among those who write in languages descended from Object C (which includes Javascript). I call it "drunk on objects."
The typical manifestation you see in DHTML is abuse of the DOM in order to code using deep object hierarchies. This is not only horribly inefficient, it leads to obsure code. Worse yet, attempts to correct for these inefficiencies by caching object references to things deep down in the multiply-nested object hierarchy makes the code even
less readable.
You don't only end up with unnecessary globals and the need to write more globs of code to initialize them. No, worse than this you end up inventing a whole parallel set of names for things that already have been given perfectly good names in the DOM via the
property!
This insanity continues by using bizarre and dangerous constructs such as
Code:
objRef.firstChild.nodeValue
that spin the wheel of fortune hoping against hope that the particular browser in use
just happened to implement a useful property such as
as the first child node in the object's properties collection. Nowhere is such a thing specified in the W3C's DOM definition documents.
As the W3C says:
Document Object Model (DOM) Level 1 Specification (Second Edition)
Version 1.0
W3C Working Draft 29 September, 2000
"1.1.4. Inheritance vs. Flattened Views of the API
"The DOM Core APIs present two somewhat different sets of interfaces to an XML/HTML document; one presenting an 'object oriented' approach with a hierarchy of inheritance, and a 'simplified' view that allows all manipulation to be done via the Node interface without requiring casts (in Java and other C-like languages) or query interface calls in COM environments. These operations are fairly expensive in Java and COM, and the DOM may be used in performance-critical environments, so we allow significant functionality using just the Node interface. Because many other users will find the inheritance hierarchy easier to understand than the 'everything is a Node' approach to the DOM, we also support the full higher-level interfaces for those who prefer a more object-oriented API."
DOM 2.0 says the same thing exactly.
You can see the "drunk on objects" disease even in the writings of the W3C, where they laughably claim deep object hierachies are
easier to understand!!!
While object concepts are valuable things, just as with so much in life there is such as thing as too much of a good thing. "Object orientation" is a form of mental illness, and it wastes valuable resources and obscures code. But this is an old debate, and there is little to be accomplished now besides trying to educate people. It is sad there are so many bad books and worse examples out there floating around.
Nasty, nasty, ptui!
I was also amused by the statement that DHTML should be coded in Javascript to
think for the future. This is highly amusing as well, since browsers that don't support VBScript are nearly extinct. Use of Javascript is clearly
thinking in the past. But I cannot dispute the value of client-side Javascript in getting you that last 8% of die-hards who are still fighting the Microsoft juggernaut, and I salute you. That's about the only place I could be persuaded to use Javascript myself.
Something more productive
Ok, now that the ranting is (mostly) out of the way, here is how to code the thing so that it is still DOM-compliant (as was the VBScript example), but does not suffer from the excesses of "drunk on objects."
Ironically, the comments have been deleted for clarity.
Code:
<html>
<head>
<title>testbed</title>
<style type="text/css">
#clockDiv {
font-size: 16px;
font-family: "Courier New", monospace;
color: #333333;
background-color: #CCFFCC;
border: 1px solid black;
width: 75px
}
</style>
<script language=JavaScript>
function start() {
refreshDateTime();
setInterval("refreshDateTime()", 1000)
};
function refreshDateTime() {
var rightNow = new Date();
var hours = rightNow.getHours()
hourSpan.innerText = (" " + ((hours + 11) % 12 + 1)).slice(-2);
minSpan.innerText = ("0" + rightNow.getMinutes()).slice(-2);
halfSpan.innerText = ((hours / 12).floor == 1) ? "PM" : "AM";
toggleSeparator()
};
function toggleSeparator() {
if (sepSpan.innerText == ":")
sepSpan.innerText = " "
else
sepSpan.innerText = ":"
}
</script>
</head>
<body onload="Javascript: start()">
<div id=clockDiv><span id=hourSpan></span><span id=sepSpan></span><span
id=minSpan></span><span id=halfSpan></span></div>
<p>V2.0+: Digital Clock <span style="font: normal 20pt Wingdings">C</span><br>
This example eliminates several poor practices common in Javascript.</p>
</body>
</html>
You might want to replace the <!DOCTYPE> for those very few browsers that do not default to "loose transitional." It doesn't hurt anything, but it adds no value here either.
See how much more compact and understandable this is?
No "magic incantations" like
Code:
objRef.firstChild.nodeValue
, all clear and explicit. The only ugly parts are the garish Javascript syntax required for arithmetic, string manipulation, and conditional expressions.
In conclusion
I hope this was informative and useful, and not too upsetting. If it doesn't discourage you entirely from writing Javascript in the future, perhaps it will provide you with the knowledge that you
can write
better Javascript. Better means
shorter, clearer, and cleaner. No mumbo-jumbo, no flag waving claims about "standards compliance" (the W3C
specifically says there is no scripting language specified in the DOM or in the HTML standards, all are equal, plus the so-called "simplified" view of the DOM is baked into the DOM's DNA).
And you know what? This
is the VBScript forum!
Much of the above emotion comes from a deep frustration that Microsoft won the browser wars in 1997. Which doesn't matter much because they won the desktop wars by 1994. But these are both deeply disturbing events. I also do not recommend posting to forums well after midnight, as you can get (more than) a little crazy by then.
![[spin2]](/data/assets/smilies/spin2.gif "[spin2] [spin2]")
