Friday, October 06, 2006
Documentzilla Meets the W3C
Blog Entry #53
If someone were to ask me to recommend a JavaScript reference resource, then I would direct the questioner to Netscape's JavaScript manuals - it was Netscape that developed JavaScript, you will recall. However, there's very much a limit to what Netscape's reference materials will do for you. To really understand JavaScript, you've got to study practical JavaScript scripts, and we'll be doing just that as we journey through HTML Goodies' JavaScript Script Tips.
(Netscape's manuals are not devoid of practical examples, but most of them are too 'skeletal' for my tastes. Admittedly, this would be a wimpy excuse for not discussing them, because we should be able to 'fill in the blanks' at this point. In any case, the Script Tips offer us a more suitably programmatic course of instruction.)
We begin with Script Tip #1, whose title asks, "What's an 'object'?" Actually, the definition of "object" in a programming sense can get pretty complicated depending on how wide a net you want to cast, but for our present purposes, Dictionary.com's entry for object: Computers accurately captures the essence of what we'll be doing with objects:
"Any item that can be individually selected or manipulated, as a picture, data file, or piece of text."
We can divide the objects of JavaScript into three classes; we will be concerned with:
(1) Browser-related objects - termed "predefined client-side objects" or "Navigator objects" by Netscape - that are no longer part of JavaScript but are now described by the Document Object Model (DOM) standard promulgated by the World Wide Web Consortium (W3C); and
(2) "Core" objects intrinsic to the JavaScript language - both client-side and server-side JavaScript can make use of these objects.
Not discussed in any of the script tips are:
(3) User-created objects.
Joe is thus referring to the first two object classes above when he defines "objects" in Script Tip #1 as "things that already exist without having to be created through scripting."
Script Tip #1 briefly looks at the following short script:
<script language="javascript">
document.write("<font color='green'>Green Text</font>")
</script>
If the code above looks familiar, it should - it differs only slightly from the script appearing in HTML Goodies' JavaScript Primers #1, which we discussed in Blog Entry #2. It's not clear from the HTML Goodies site whether Primer #1 or Script Tip #1 was written first.
Anyway, as simple as the Script Tip #1 script is, a few comments are nonetheless in order.
We begin, appropriately enough, with the <script> tag itself, which in a way is one of the most important parts of any JavaScript script. Consider Frank Zappa's comments on the role of the frame in art:
"The most important thing in art is The Frame. For painting: literally; for other arts: figuratively - because, without this humble appliance, you can't know where The Art stops and The Real World begins."
- The Real Frank Zappa Book, p 140
We might correspondingly say that the humble, opening and closing <script> tags are necessary to set a boundary between the script and the code that surrounds it.
Chapter 18 of the W3C's HTML 4.01 Specification deals with the HTML script element. The W3C notes here that the language attribute of the script element has been deprecated. A more current formulation for specifying JavaScript as the scripting language uses the type attribute with the value "text/javascript"; however, according to the Internet Society's recently approved Scripting Media Types RFC 4329 informational document, the "text/javascript" content type is now obsolete. RFC 4329 states that a content type of "application/javascript" or "application/ecmascript" should be specified instead.
Which <script> tag variant should you use? On my computer,
<script language="javascript">,
<script type="text/javascript">, and even just
<script>
all work OK when using either MSIE 5.1.6 or Netscape 7.02; neither browser recognizes <script type="application/javascript"> or <script type="application/ecmascript">. (Netscape 7.02 does recognize <script type="application/x-javascript">, however - I picked up the x-javascript MIME subtype here.) Both <script language="javascript"> and <script type="text/javascript"> strike me as safe options in this regard for the time being, notwithstanding their 'obsolescence.'
We turn now to the single command of the Script Tip #1 script:
document.write("<font color='green'>Green Text</font>")
Joe remarks, "This HTML page you're looking at is, in my opinion, the most commonly used object. In JavaScript speak, the page is named 'document'." At this point, we already know quite a bit about the document object - we ran through a number of document object properties in Blog Entry #13, for example - anything new to add?
With respect to the object classes listed above, the document object is a browser-related object. As noted in Blog Entry #22, Netscape last provided documentation for the document object, and for all other browser-related objects, in JavaScript 1.3. Here is the document object page of the JavaScript 1.3 Client-Side Reference; it must be said that this page is much more intelligible than the document object documentation of the DOM, notwithstanding the now-"obsolete" status of the JavaScript 1.3 Client-Side Reference.
More recently, the Mozilla Foundation, an offspring of the now-defunct Netscape, maintains a Gecko DOM Reference with a DOM document Reference that summarizes the DOM's document object documentation and provides links to the specific document interface sections of the DOM Level 2 Core and HTML Specifications.
(Gecko is the "layout engine" of Mozilla-based browsers. It's gratifying to see that the Mozilla guys are fellow herpetophiles.)
Back to the script - as Joe notes, the document object is "acted upon" by its write( ) method, whose entry in the JavaScript 1.3 Client-Side Reference is here. The HTMLDocument interface in the DOM Level 2 HTML Specification suggests that a document.write( ) command should be preceded by a document.open( ) command, but this is obviously not necessary.
As noted in Blog Entry #2, the write(x) method writes its argument x to the display of the document; with respect to JavaScript data types, x can be a string, a number, a Boolean value, or even the keyword null. For example, document.write(false) writes false to the page; as a write( ) argument, false does not need to be quoted.
(In the name of completeness: document.write(undefined) writes undefined to the page when using Netscape 7.02 but throws an "'undefined' is undefined" runtime error with MSIE 5.1.6.)
If x is a string containing HTML, as in the present case, then the browser will render, and not print, that HTML; as shown in Script Tip #1:
document.write("<font color='green'>Green Text</font>")
displays
Green Text
but not
<font color='green'>Green Text</font>
If for some reason you want to print the HTML (as I'm doing in this post), then the < and > metacharacters must be escaped, i.e., replaced with their HTML character references, as follows:
document.write("<font color='green'>Green Text</font>")
or less intuitively,
document.write("<font color='green'>Green Text</font>")
60 and 62 are the ASCII decimal code positions for the < and > characters, respectively.
Now, about that document.write( ) argument...
The W3C notes here that both the font element and its color attribute are now deprecated; "their use is discouraged in favor of style sheets." Very well, then - we can alternately write:
document.write("<span style='color:green;'>Green Text</span>")
A JavaScript-based alternative is also at hand; we can use the fontcolor( ) method of the core JavaScript String object here as follows:
document.write("Green Text".fontcolor("green"))
Joe concludes Script Tip #1 by describing the document.write( ) command as "a very simple hierarchy statement." To my understanding, however, the document object and its write( ) method, although both part of the DOM, do not constitute a DOM "parent/child relationship"; methods do not occupy nodes on a "DOM tree." Rather than being a hierarchy statement, then, the document.write( ) expression merely reflects the object.method( ) syntax of JavaScript.
We'll see bona fide hierarchy statements in the script that spans Script Tips #2-4, which we'll go over in the next post.
reptile7
- posted by A. Peak @ 3:22 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)