Saturday, June 04, 2005
The Prompt( ) Method
Blog Entry #11
Let's get on with the prompt( ) method. On the aforementioned prompt box are four features:
(1) a message or query for the user;
(2) a text box-like field, for user input, which can have an initial "value" (message) if desired;
(3) an "OK" button in the lower-right-hand corner; and
(4) a "Cancel" button to the left of the "OK" button.
The basic syntax for popping up a prompt box is:
window.prompt("message or query for the user");
(As noted at the very end of Blog Entry #7, methods and properties of the window object do not need to reference the window object, and you will often see the command above written as: prompt("message or query for the user");.)
Text can be put in the user input field via a second prompt( ) subparameter, with a comma delimiting the two subparameters:
window.prompt("message or query for the user", "text in the user input field");
The second prompt( ) subparameter is optional. Contra the "The Prompt Command" section of the primer, it is not necessary to include a second set of quotes, and the box will not read "undefined" as a result.
Roll your mouse over these words for a demo.
On my computer, when using MSIE, the prompt box user input field, although not visually highlighted, is nonetheless 'selected' in the sense that pressing the delete key will clear it, replacing the text with focus in the form of a blinking vertical line (a.k.a. an insertion point cursor). Netscape, in turn, pops up a prompt box with a blinking vertical line already appearing at the end of the text in the user input field. (If the second prompt( ) subparameter is left out, then the prompt box pops up with only an insertion point cursor in the user input field, whether using MSIE or Netscape.)
The Primer #6 Script
Primer #6's focal point is the script below:
/* This script is intended to take information
from the user and place it upon the page */
var user_name = prompt ("Write your name in the box below","Write it here");
document.write("Hello " + user_name + ". Welcome to my page!");
Subsequently, the document.write( ) statement makes use of the "user_name" variable, splicing it, as a subparameter, with two text strings in order to write "Hello name-inputted-by-user. Welcome to my page!" on the page.
(The Primer #3 script featured a document.write( ) statement that acted on variable-containing commands, but this is the first time we have seen a variable by itself appear in the write( ) parameter.)
It's not necessary to variabilize the output of the prompt command. Joe could have written:
document.write("Hello " + prompt("Write your name in the box below","Write it here") + ". Welcome to my page!");
Use of a variable makes the code a bit easier to follow, however.
If the user clears the input field and clicks "OK" without entering a name, then the output does not contain "null" but simply reads:
Hello . Welcome to my page!
however, if the user responds to the prompt box by clicking the "Cancel" button, then the output is indeed:
Hello null. Welcome to my page!
<span onclick="var colour = window.prompt('What is your favorite color?','Enter a color here'); style.color = colour;">Click on this sentence to change its text color.</span>
Try it out:
Click on this sentence to change its text color.
(The Primer #6 script itself can be executed by an event handler, although the end result is a bit strange in that the document.write( ) output supersedes the rest of the page - click here to see it for yourself.)
The end-of-primer assignment and its answer
Joe asks the reader to 'deconstruct' a script that obtains the reader's first name and the date and then writes them, as part of a sentence, to the title bar of the browser window.
You will notice that the script does not execute as advertised, i.e., the title bar reads "Assignment 6", and not "Hi name-inputted-by-user Today's date is m/d/y Thanks for coming". Why might this be?
Check the source code of Joe's "Assignment 6" page. Near the top, we have:
On my computer, the needed corrective action is browser-dependent. When using MSIE, if I delete the "Assignment 6" between the <title> tags (so that nothing or only whitespace is there), or remove this line altogether, then the script works fine. Netscape requires me to remove the entire line.
The scripting of the Assignment 6 page is noteworthy in other ways:
(2) In extension of the main script, Joe sprinkles the user's name throughout the page text with the code:
<SCRIPT>document.write("" +name+ "")</SCRIPT>
Presumably, the quotes in the write( ) parameter are there to ensure that the "name" variable is recognized as a text string by the document.write( ) command, but I found that I could remove the quotes and use:
But speaking of "main" and "subsequent" scripts, it's possible for the entire page to be one big script, using the following code:
var name = window.prompt("Please write in your first name");
var d = new Date( );
var y = d.getFullYear( );
var m = d.getMonth( ) + 1;
var d = d.getDate( );
var t = m + '/' + d + '/' + y + ' ';
document.write("Hi "+ name + " Today's date is " + t + "Thanks for coming");
document.write("Hi, " + name + ". We've been expecting you, etc.");
We see from the above that a script can straddle the head and body parts of a document - click here to see it in action.
Finally, some nitpicking about the script deconstruction on the answer page (the temptation is there to go through this line by line, but the points I would make have been already covered, directly or indirectly, above and in previous entries, so I'll limit myself to the following):
(a) The fifth bullet point (• See the "+ 1900" after the year?...) should be deleted; it refers apparently to an earlier version of the primer that used the now-deprecated getYear( ) method instead of the getFullYear( ) method.
(b) The sixth bullet point should read:
• See that "+ 1" at the end of the "m" variable? That's a trick that sets the