Once you know how to get input from the user, you can really start
personalizing your web pages and having some fun!
INDEX CARD #J7:
the "prompt" command (J7a)
How can I get string input from the user?
Use the following command to bring up a dialog box with a specified
message. The default value puts a starting value in
the dialog box.
For example, the code:
prompt("Please type your name:","First Middle Last")
will cause something like this to appear:
Getting an Empty Dialog Box (J7b)
Use the empty string "" for the default value to display an
empty input box, like this:
prompt("Please type your name:","")
It will cause something like this to appear:
NOTE: The text displayed in the "prompt" dialog box can only be plain text,
not HTML-formatted text. Also, there's no way to get rid of the word "Script Prompt" (different
browsers say slightly different things). It is there to prevent people from writing code
that tries to imitate system dialogs
and trick users into entering their passwords and such.
Return Value from the prompt command (J7c)
The value returned from the prompt command is:
the string entered by the user (if the user enters a string and clicks OK);
the default value (if any), if the user doesn't enter a string and clicks OK;
null, if the user clicks CANCEL.
Here's a sample program, that asks a user for their name, and then prints
out a personalized message. Be sure to try it out!
ret = prompt("What is your name?","name");
document.write("Well, " + ret + ", it\'s nice to have you here!");
If you want the name formatted in a fancy way, just insert some style info,
document.write("Well, <font style='color: green; font-family: fantasy; text-transform: uppercase'>" + ret + "</font>, it\'s nice to have you here!");
Changing a String to a Number (J7d)
The return value from a prompt is a string, so if you type in a number
3, it actually gets stored as the string character '3'. However, you
can easily transform it into a number, as follows:
num = prompt("Please input a number:","number");
num = num*1;
document.write("Your number, plus 5, is ",num+5);
by one, then you must REALLY want a number, so it changes its type for you. Be sure
to try out the code above! Then, REMOVE THE CODE "num = num*1" and see what happens; explain why!
(WJ7.1) Experiment with return values from the prompt command by writing the
following, and studying the results:
ret = prompt("a test:","name");
Respond to the prompt in different ways: type in your name and click OK; leave the default
in place and click OK; type in your name and press Cancel; leave the default and press Cancel.
What is returned in each case?
(WJ7.2) Write a script that does the following: if the user clicks "Cancel," then
it should print out "I'm sorry that you pressed Cancel." If the user clicks OK, then it
should print out "Thanks for clicking OK!"
(WJ7.3) Write a script that prompts a user for their name (like 'Carol'), and
then prints out a personalized message, "Hello, CAROL!", centered and in fancy purple type.
The name should be ALL CAPITALIZED, even in the user didn't type it in using all capital letters.
(WJ7.4) Write a function that takes a name (like "CAROL") and prints it out
in REVERSE ORDER, like this: "LORAC". (HINT: Input a name; determine the length of the string;
use a FOR loop that prints out each character in reverse order.)
(WJ7.5) Write a function that prompts the user to input two numbers (like 3 and 5), and then
prints out "The average of 3 and 5 is 4." The user should "call up" the function by clicking a
button that says: "Click here to find the average of two numbers!".
(WJ7.6) Elaborate on the previous function. This time, the user is FIRST asked HOW MANY
averages they'd like to find (like 5). Then, they are given ten opportunities to find average,
after which they are told: "Thanks for finding 5 averages!"
ASSIGNMENT #J7: (AJ7.1) Please continue with the tutorial located at: