Saturday, June 18, 2011
Modular, Dynamic, Resources
Blog Entry #218
Next up in HTML Goodies' Beyond HTML : JavaScript sector are three tutorials that don't really deserve their own entries but that I wanted to comment on briefly.
"Creating a Modular JavaScript Toolbox"
Authored by Anthony Corbelli, this tutorial presents code for creating script elements and adding them to a head element on the fly in the name of incorporating .js "modules" into a main document.
var hHead = document.getElementsByTagName("head").item(0);
/* The head element is one of a small handful of elements that
cannot validly take the id attribute. */
function AddModule(mFileName) {
var sTag = document.createElement("script");
sTag.setAttribute("src", mFileName);
sTag.setAttribute("type", "text/javascript");
hHead.appendChild(sTag); }
AddModule("NewScript1.js");
AddModule("NewScript2.js");
AddModule("NewScriptEtc.js");Maybe I'm missing something, but I fail to see the advantage in doing this vis-à-vis importing scripts in the normal way:
<script type="text/javascript" src="NewScript1.js"></script>
<script type="text/javascript" src="NewScript2.js"></script>
<script type="text/javascript" src="NewScriptEtc.js"></script>That's it. Task accomplished. Go for a coffee break.
"Creating Dynamic Websites Using JavaScript"
Also authored by Anthony Corbelli, this tutorial presents code that dynamically sets some basic CSS properties (ground we broke very early on) for a series of div elements.
(1) The author first specifies a dynamic_style.css style sheet that statically sets the properties in question.
(2) Next is a dynamic_display.js script comprising four functions that separately change the
(a) background-color,
(b) color,
(c) width and height, or
(d) left and top
propert(y|ies) for a specific div element.
(3) The tutorial code concludes with an ourTestPage.html main document that specifies the div elements and their contents.
Some readers might conclude from the tutorial's opening paragraph that the tutorial code's operations date to the
debutof JavaScript: in fact, JavaScript 1.0 and 1.1 provide no access at all to the div element*, whereas JavaScript 1.2-1.3's access to the div element via the layer and style objects is buggy (my attempts to dynamically set div styles via document.tags expressions when using Netscape 4.61 have been uniformly unsuccessful**, for example). Support for the code specifically goes back to IE 5 on the Microsoft side - it'd go back to IE 4 if you were to replace the document.getElementById references in the dynamic_display.js script with document.all references - and to Netscape 6 on the Netscape side.
*JavaScript 1.0 and 1.1 slightly predate HTML 3.2, which introduced the div element; however, there is no document.all-type mechanism in these versions of JavaScript that would allow access to new elements after the fact.
**The document.tags mechanism allows me to statically set the background color, foreground color, and width of a div element but not change those properties with event handlers.
Div elements (more generally, block-level elements) can be styled with most CSS properties and thus are a pretty safe choice for illustrating DHTML. For their part the background-color, color, and position and by extension left and top properties apply to all elements; the tutorial negligently does not mention that the width and height properties do not apply to non-replaced inline elements (e.g., span, a, em) under normal circumstances.
Regarding the dynamic_style.css style sheet, the author alleges,
Note that if you do not declare a style for a class or tag, some JavaScript implementations will refuse to modify them; maybe this is true for some user agents but it's not true for any of the DHTML-supporting browsers on my computer, all of which smoothly execute
object.style.property = "value"; commands without needing 'pre-values' to work with. (The position property must be set before changing the left and top property values, but the position property can itself be set dynamically.)No demo is offered for the tutorial code, so I thought I would load it into a TextEdit file and see how it runs. Some observations:
• The ourTestPage.html user interface is a set of links that when clicked respectively trigger the dynamic_display.js functions; however, these links are rendered as normal text because they lack href attributes.
• Without delineating the szModBox div element in some way (say, with a background color or border), there's no visual effect upon clicking the Click here to modify the box size! link.
• So, I give the szModBox div element a
border: 1px solid red;. Clicking the Click here to modify the box size! link changes the div width but not its height because the ModifyBoxSize( ) function's mElement.style.height = newheight; assignment contains a typo: newheight should be newHeight.• The pModBox div element's
position: absolute; left: 15px; top: 15px; places it between the bgModBox and cModBox div elements; above and beyond its unsightly appearance, this placement interferes with the clicking of the Click here to modify the background color! and Click here to modify the text color! links.The demo below sorts out these issues:
Click here to modify the background color!
Click here to modify the text color!
Click here to modify the box position!
Click here to modify the box size!
"JavaScript Resources: Tutorials, Articles and References"
Composed by Scott Clark, this tutorial provides links to various JavaScript-related resources organized into four categories:
(1) JavaScript tutorial and article collections;
(2) JavaScript references;
(3) JavaScript script archives; and
(4) JavaScript discussion forums.
I've checked the links and can confirm that they're all live as of this writing.
Every one of the resources, without exception, has been culled from the internet.com empire of Web sites, which includes HTML Goodies, and thus the tutorial has a somewhat self-promotional feel to it; even the links to the JavaScript 1.5 Guide and Reference lead to WebReference pages. It is of course the author's prerogative to do this, but I nonetheless find it a bit sloppy that there are no tutorial links to official sites maintained by Mozilla, the W3C, and Microsoft, so perhaps I should fill in some blanks in this regard, eh?
Mozilla
• The Mozilla Foundation is today the steward of JavaScript. Mozilla's JavaScript portal will connect you to the current JavaScript Guide and Reference and to pages that detail new developments in JavaScript 1.6-1.8.5.
• Although now deemed "obsolete" by Mozilla, the JavaScript 1.3 Client-Side Guide and Reference remain the best sources of information on classical (pre-DOM) JavaScript and its basic interfaces for working with various HTML element objects.
• JavaScript shed its client-side features in going from JavaScript 1.3 to JavaScript 1.4; Mozilla now documents these features in its Document Object Model (DOM) reference.
W3C
Most of the non-programming parts of classical JavaScript are, or are on track to be, documented somewhere in a W3C specification. Here are the highlights:
• Properties and methods relating to HTML elements are inventoried in the DOM Level 2 HTML Specification.
• Event handlers relating to HTML elements are summarized here in the HTML 4.01 Specification. The Netscape-cum-W3C event model is described in the DOM Level 2 Events Specification.
• The window object, the history object, the location object, and the navigator object (more precisely, the interfaces implemented by these objects) are all now part of HTML5.
• Some classical window object properties and methods (e.g., innerWidth, pageXOffset, scrollTo( )) and the screen object will be defined in a CSSOM View Module.
Microsoft
• In my book, the crown jewel of the MSDN Library is its HTML and DHTML Reference: DOM objects, properties, methods, event handlers, they're all here.
• Microsoft hosts largely overlapping documentation for both JavaScript and JScript, the Microsoft 'dialect' of JavaScript.
• Microsoft's event model, which differs from the W3C event model, is described in an "Understanding the Event Model" article.
In the following entry we'll check over the next Beyond HTML : JavaScript sector tutorial, "Hovering HTML Windows and Animated Hovering Using JavaScript".
reptile7
- posted by A. Peak @ 4:23 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)