Wednesday, October 25, 2006
Torn Between Two Locations
Blog Entry #55
Joe discusses the following script over the course of Script Tips #5, #6, #7, #8, and #9:
<script language="javascript">
function JemWebCONFIRM( ) {
if (!confirm("YOUR MESSAGE GOES HERE"))
history.go(-1); return " " }
</script>
"That's it? Five script tips for five lines of code??"
Yeah, that was my reaction too. And even then, some key aspects of the script are left out or ignored, as we'll see later. Tellingly, Script Tip #8 contains a link to a demo page whose relevant source code differs considerably from the Script Tips #5-9 Script itself.
The Script Tips #5-9 Script is conceptually similar to the Primer #13 Script that we discussed in Blog Entry #28. Both scripts pop up a confirm( ) box whose "OK" and "Cancel" buttons correspond to a choice of Web locations; clicking the "OK" button takes the user to one location, whereas clicking "Cancel" takes the user to the other location. The scripts have significant differences, however, which we'll detail below.
Calling the JemWebCONFIRM( ) function
As shown above, the expressions of the Script Tips #5-9 Script are wrapped in the JemWebCONFIRM( ) function. (The expressions of the Primer #13 Script are not functionized, but Joe addresses their functionization in the Primer #13 Assignment.) JavaScript functions are treated generally in Chapter 6 ("Functions") of the JavaScript 1.5 Core Guide; we for our part discussed JavaScript functions in Blog Entry #23. Contra Script Tip #7, a JavaScript function is not "really a method"; syntactically, the opposite is true: JavaScript methods are functions associated with specific objects, as we learned in Blog Entry #43.
Amazingly, in none of Script Tips #5-9 does Joe discuss or provide code for calling the JemWebCONFIRM( ) function, so it's up to us to 'fill in the blank' here. Joe does at least say in his summary in Script Tip #9 that "[t]he function is enacted upon the loading of the page," and there are three simple ways we can do that:
After the closing brace } of the JemWebCONFIRM( ) function and before the closing </script> tag,
(1) JemWebCONFIRM( );
or
(2) window.onload=JemWebCONFIRM; /*parentheses do not follow the function name in this case*/
can be used to call the JemWebCONFIRM( ) function. More conventionally, we can coordinate the JemWebCONFIRM( ) function call with the document loading process via the <body> tag, i.e.,
(3) <body onload="JemWebCONFIRM( );">
We noted here in Blog Entry #10 that onload is an event handler of the window object, bringing us to...
Window object? What window object?
The confirm( ) method and the history object, which are respectively a method and a property of the window object, play important roles in the Script Tips #5-9 Script. Amazing omission #2: there is no mention, at all, of the window object in Script Tips #5-9.
In the classic JavaScript Navigator object hierarchy, the window object sits at the top, at a position higher than that of the document object, even as the JavaScript 1.3 Client-Side Reference informs us that both the window object and the document object are created by/for the <body> tag.
"Where does the window object fit in the DOM?"
Ah, an excellent question - Mozilla's DOM Reference contains a DOM window Reference, which states:
"The window object implements the Window interface, which in turn inherits from the [DOM] AbstractView interface. "
Turning to the DOM Level 2 Views Specification, we see no mention of the "Window interface" in the AbstractView Interface section. This doesn't mean that the W3C isn't hard at work on the matter, however; in April 2006 the W3C posted a Window Object 1.0 'working draft in development' - a draft that discusses neither the confirm( ) method nor the history object (nor most other window object methods and properties).
Back to onload for a moment. The Window Object 1.0 draft notes that window events are "not in this specification." Nonetheless, three classic JavaScript window object events - specifically, error, load, and unload - are listed in the "HTML event types" section of the DOM Level 2 Events Specification, so I think it's safe to say that at least the onerror, onload, and onunload window object event handlers are part of the DOM. Mozilla's DOM Reference has a page here for window.onload.
The confirm( ) command and its true/false outputs
Like the Primer #13 Script, the Script Tips #5-9 Script uses a confirm( ) command as the condition of an if statement to set up a user choice between two Web locations. (If you need an if...else refresher, then the JavaScript 1.5 Core Reference if...else statement entry is here.)
As noted in Blog Entry #28, clicking the "OK" and "Cancel" buttons of a confirm( ) box outputs the Boolean values true and false, respectively. In the Primer #13 Script, Joe ties the "OK" and "Cancel" confirm( ) box buttons to the execution of two separate units of code; this requires the use of both an if statement and an else statement (alternatively, two if statements could be used). In the Script Tips #5-9 Script, no commands execute if the user clicks the confirm( ) "OK" button, as we'll explain in a bit, so Joe (actually, JemWeb, to whom Joe credits the script's authorship) gets away with using a single if statement to set up the Web location choice.
Let's look now at the condition of that if statement:
if (!confirm("YOUR MESSAGE GOES HERE"))
On his demo page, Joe uses "Are you sure you want to enter?" for "YOUR MESSAGE GOES HERE" - seems reasonable.
We first consider the "Cancel" choice when the confirm( ) box pops up. If the user clicks the "Cancel" button, then confirm("Are you sure you want to enter?") returns false, and thus !confirm("Are you sure you want to enter?") returns true. Amazing omission #3: Joe says nothing at all about the ! logical operator, which we discussed in Blog Entry #47.
With the if condition true, the subsequent history.go(-1) command takes the user to the preceding (second-from-the-top) location in the browser's History folder - the history.go(-1) command is thus the functional equivalent of the "Back" button on the browser's toolbar. (We used a history.go(0) command as a "Refresh" button equivalent in the hybrid prompt/confirm box script of Blog Entry #29.)
And if the user clicks the "OK" confirm( ) button? In this case, confirm("Are you sure you want to enter?") returns true and thus !confirm("Are you sure you want to enter?") returns false; no commands are tied to this return and therefore the JemWebCONFIRM( ) function exits and the current document continues to load because, as Joe points out in Script Tip #8, "[t]his script is sitting on the page we wanted to go to."
"What about the return " " code at the end of the JemWebCONFIRM( ) function, huh?"
Joe doesn't say anything about that, either. In fact, the return " " code at the end of the JemWebCONFIRM( ) function serves no purpose and should be removed.
However, as I was drifting off to sleep last night, it occurred to me that an appropriately retooled Primer #13 Script can profitably employ a return statement, as follows:
<head><script type="text/javascript">
function HTMLGoodiesCONFIRM( ) {
var user_choice=window.confirm("Are you sure you want to enter HTML Goodies?");
if (user_choice)
window.alert("Good choice.");
else {
window.alert("Then you'll stay right here."); return user_choice; } }
</script></head>
<body>
Click <a href="http://www.htmlgoodies.com" onclick="return HTMLGoodiesCONFIRM( );">here</a> to go to HTML Goodies.
</body>
In the script above, the confirm( ) dialog is triggered by a link as opposed to when the page loads. If the user chooses the "Cancel" confirm( ) button, then false is returned to the onclick function call, which cancels the linking-to-www.htmlgoodies.com process; we previously demonstrated in Blog Entry #47 that click events are cancelable. FYI: the W3C DOM "HTML event types" link above notes that neither load events nor unload events are cancelable.
An if...else alternative to the Script Tips #5-9 Script
If desired, the if statement of the Script Tips #5-9 Script is easily recast as an if...else statement à la the Primer #13 Script; the resulting code reads more straightforwardly, IMO:
<script type="text/javascript">
function JemWebCONFIRM( ) {
if (window.confirm("Are you sure you want to enter?"))
window.alert("Welcome, visitor.");
else
{window.alert("Fair enough - we now return you to the previous page."); history.go(-1);} }
JemWebCONFIRM( );
</script>
In the next post, we'll look at the first of two browser detection scripts that respectively span Script Tips #10-12 and #13-15.
reptile7
- posted by A. Peak @ 3:12 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)