Sunday, March 13, 2011
Append to Prepend
Blog Entry #208
We wind up our treatment of HTML Goodies' "Bring Your Forms to Life With JavaScript" tutorial with one last topic.
The utils.js ac( ) function
The non-default clauses of the first Validate( ) switch statement aren't the only parts of the original Validator.js/utils.js scripts that don't see any action: as noted in the "Code Overview" section of Blog Entry #202, at no point in the tutorial code is the utils.js ac( ) function ever called. Let's look at that function, shall we?
function ac( ) {
if (ac.arguments.length > 1) {
var a = ac.arguments[0];
for (i = 1; i < ac.arguments.length; i++) {
if (arguments[i]) {
a.appendChild(ac.arguments[i]); } }
return a; }
else {
return null; } }ac( ) is named for the appendChild( ) method, which it features; appendChild( ) is another method that (like removeChild( ) and insertBefore( )) was introduced with the Node interface of the DOM Level 1 Core. I suspect that ac( ) was a forerunner of the utils.js InsertAfter( ) function, i.e., the author originally aimed to use ac( ) to append
<img src="check.gif">/<img src="x.gif"> elements to the required fields of the liveForm form. Interestingly, however, if we were to replace the InsertAfter( ) calls of the Validator object's valid( ) and invalid( ) methods with corresponding ac( ) callsac(this.currentSelector.parentNode, this.currentSelector.validImage, this.currentSelector); // For the valid( ) method
ac(this.currentSelector.parentNode, this.currentSelector.invalidImage, this.currentSelector); // For the invalid( ) methodthen the check.gif/x.gif images would be prepended to the selectors they are 'bringing to life'.
Your first name: *
Here's a brief rundown of what happens:
(1) An if statement first checks if ac( ) has more than one argument: true.
FYI: The arguments object is no longer a child object of the core JavaScript Function object (this relationship was deprecated by JavaScript 1.4), i.e., the
ac. parts of the ac.arguments expressions in the statement can and should be removed.(2) The first-in-source-order ac( ) argument, this.currentSelector.parentNode (the p element parent of the currentSelector we're validating), is given an a identifier.
(3) A two-iteration for loop begins.
(a) The loop's first iteration appends ac( )'s arguments[1], this.currentSelector.validImage (
<img src="check.gif">) or this.currentSelector.invalidImage (<img src="x.gif">), to a's list of children. For a valid firstName input, we now have:<p>Your first name: * <br /><input type="text" id="firstName" name="firstName" onblur="Validator.Validate(this);" /><img src="check.gif"></p>(b) The loop's second iteration moves ac( )'s arguments[2], this.currentSelector, from its current position to the end of a's list of children; continuing with our valid firstName example, we end up with:
<p>Your first name: * <br /><img src="check.gif"><input type="text" id="firstName" name="firstName" onblur="Validator.Validate(this);" /></p>In sum, via appendChild( )-ing first the check.gif/x.gif image and then the to-be-validated field, ac( )'s overall effect is to insert the marker image before the field (i.e., between the post-label br element and the field) - something we could actually accomplish with a single line of code:
arguments[0].insertBefore(arguments[1], arguments[2]);Complementarily, we can append the marker image to the to-be-validated field with:
arguments[0].appendChild(arguments[1]);Pretty simple, huh? But not simple enough to resurrect the Validator.js/utils.js scripts in favor of the code we've developed in the last couple of entries. (You can just as easily prepend the marker image as append it using the image visualization approach of Blog Entry #206, although an appended image looks better IMO.)
We won't be covering the next three Beyond HTML : JavaScript sector tutorials.
(1) "Building Simulations with JavaScript"
I can't figure out what's going on in this poorly fleshed-out article (its promise of "applying real data" notwithstanding), so I'm not going to discuss it.
(2) "How to Create Remote Ajax Requests"
Another Kris Hadlock production, this advanced tutorial is beyond where we are, so to speak, and is maybe even beyond the scope of this blog. (However, the Beyond HTML : JavaScript sector also features a "How to Develop Web Applications with Ajax: Part 1" tutorial, which we will probably check over later.)
(3) "Object-Oriented JavaScript"
The first two pages of this article offer an abstract discussion of objects and object-oriented programming, much of it unrelated to JavaScript. The article's third page goes over some advanced aspects of JavaScript functions; this page contains some code samples and provides links to demos for some of those samples, but the material here isn't meaty enough to write about.
The sector tutorial after that, "How to Create a JavaScript Animation", is much more up our alley and will complement our past forays into the animation area, so we'll put it under the microscope in the following entry.
reptile7
- posted by A. Peak @ 3:07 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)