reptile7's JavaScript blog
Saturday, October 13, 2007
Bouncer Script B: JavaScript
Blog Entry #91

We return now to HTML Goodies' JavaScript Script Tip #74's password-protection script. Having mowed through the script's HTML in the previous entry, we are ready to put its JavaScript under the microscope. Without further delay, here's what happens when the user follows Script Tip #74's "Here's the Script" link to the script demo page:

<body onload="window.status=('You will need a password and username to proceed further...');">

When the demo page document loads, the string You will need a password and username to proceed further... is written to the browser window's status bar.

"What's with the parentheses surrounding the window.status value?"

I was wondering that myself; they are, of course, 100% unnecessary.

<td id="cell1">
<input id="input0" name="iName" maxlength="15" /><br /><br />
<input id="input1" name="iAccID" maxlength="15" />

The user enters respectively a user name and a password into the iName and iAccID text fields in the second table cell.

<td id="cell2">
<input type="button" value="Login" onclick="Getstats( );" />

The user attempts to access the target page by clicking the third table cell's Login button, which triggers the Getstats( ) function in the document head.

function Getstats( ) {
window.status = "Attempting to Login to user area.";

The string Attempting to Login to user area. is written to the status bar.

var iName, AccId;
iName = document.iAccInput.iName.value;
AccId = document.iAccInput.iAccID.value;

The variables iName and AccId are first declared but not initialized; subsequently, the value values (i.e., user input) for the iName and iAccID fields are respectively assigned to iName and AccId.

if (iName == "" || AccId == "") {
alert("\nERROR\nYou must enter ALL Details,\nto View your statistics.\n");
window.status = "Missing data or Invalid. Check spelling and Ensure Names are in Correct Case."; }

If either iName or AccId is an empty string, i.e., if the user leaves blank either the iName field or the iAccID field, then an alert( ) box pops up

Alert( ) box for blank user name or password fields

and (after the alert( ) OK button is clicked) another message is written to the status bar. We noted in Blog Entry #82 that a \n newline induces a line break on a prompt( ) box - so it goes for an alert( ) box as well.

else {
var location = ("pw" + iName + AccId + ".html");
// The parentheses surrounding the location value are unnecessary.

If iName and AccId are not empty strings, then the user's entered user name (iName) and password (AccId) are concatenated with the strings pw and .html as shown above, and the resulting URL string is assigned to the variable location. Although "location" is not a JavaScript reserved word, Joe correctly notes in Script Tip #74 that 'location' isn't a good [choice for a variable identifier] - never name a variable after an actual JavaScript command.

this.location.href = location;
window.status = " Verifying: " + iName + "-" + AccId + " Please wait........"; } }

A link to the location URL is set up by assigning location to this.location.href. The this keyword is unnecessary and should be removed (location is of course a property of the top-level window object); indeed, it's downright strange that this statement doesn't throw an error. (The this operator is used in the body of constructor functions to associate custom properties and methods with custom objects - see Chapter 7 ("Working with Objects") of the JavaScript 1.5 Core Guide - but that's not what's going on here.)

If the user name and password are correct, then the user is sent to the target page, e.g., at the script's demo page, iName=script and AccId=tip inputs take the user to a "You're in!" pwscripttip.html page. If either the user name or the password is incorrect, then the user is taken to a "404/File not found" page (assuming that there's no pw_wrongUserName_wrongPassword.html page in the current directory) - the browser takes care of the bad logins for you, as Joe puts it.

In principle, yet another message is written to the status bar at this point. In practice, on my computer and regardless of browser, neither the Attempting to Login... nor the Verifying:...Please wait........ message is visible in the status bar long enough for me to see it when both the iName and iAccID input fields have not been left blank. (If the user doesn't enter a user name or a password, then the Attempting to Login... message is visible in the status bar when the \nERROR\n... alert( ) box pops up, but if the alert( ) command is commented out, then only the subsequent Missing data or Invalid... message is seen.)

Separating the script's HTML and JavaScript

At the beginning of Blog Entry #86, we listed several practical reasons why HTML and JavaScript should normally not be commingled. The small amount of JavaScript in the Script Tip #74 Script's HTML is easily relocated to the script's script element:

(1) Replace the body element's onload/window.status command with the following script element block:

function intromessage( ) {
window.status = "You will need a password and username to proceed further..."; }
window.onload = intromessage;

As we have already replaced the bgcolor="#00ff00" attribute with a style rule, this reduces the body element start-tag to simply <body>.

(2) Similarly, replace the Reset button's onclick/window.status command with the following script element block:

function resetmessage( ) {
window.status = "RESET: Please enter your USERNAME and ACCOUNT ID."; }
document.forms[0].elements[3].onclick = resetmessage;

The original Reset button's value=" Reset " attribute is unnecessary and can be removed. Recast the Reset button as:

<input type="reset" />

Unlike var variableName = functionName( ); statements, the object.onevent = functionName; statements above are not function calls; rather, each of these statements merely assigns a reference for the functionName( ) function to the onevent property of the object in question, and as for an onevent="functionName( );" HTML attribute, it is the associated event itself (in the cases above, the loading of the document and the clicking of the Reset button) that triggers functionName( ) - see the "Defining an Event Handler" section of the JavaScript 1.3 Client-Side Guide.

(3) Finally, we can replace the Login button's onclick="Getstats( );" function call with the following script element statement:

document.forms[0].elements[2].onclick = Getstats;

With this formulation, I found that the

var location=("pw" + iName + AccId + ".html"); this.location.href = location;

code threw an error

Runtime error: 'this.location' is not an object

when I tried to link to a custom pwscripttip.html; however, the slightly modified commands below smoothly took me to the target page:

var newLocation = "pw" + iName + AccId + ".html";
location.href = newLocation;

One more point: after making these changes, relocate the script element itself to the document body and place it after the iAccInput form element, or the browser will throw an error when it hits the first-in-source-order document.forms[0].elements[#].onclick = functionName; statement.

XHTML compliance/validation

My virgin experience with the W3C's (X)HTML validator definitely deserves its own entry and we'll get to it next time.


Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)