The address for this web page is: www.crosswinds.net/~fishcaro/day_J7_getting_input.htm
On to the next lesson! Back to the COURSE SYLLABUS

J7. GETTING INPUT FROM THE USER

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.
prompt(message,default);
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!


<SCRIPT LANGUAGE="JavaScript">

ret = prompt("What is your name?","name");

document.write("Well, " + ret + ", it\'s nice to have you here!");

</SCRIPT>

If you want the name formatted in a fancy way, just insert some style info, like this:


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);

Here's what's happening: JavaScript is smart enough to know that if you're multiplying 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!

Printable version of Index Card J7a

Printable version of Index Card J7b

Printable version of Index Card J7c

Printable version of Index Card J7d

WORKSHEET #J7:

(WJ7.1) Experiment with return values from the prompt command by writing the following, and studying the results:
ret = prompt("a test:","name"); document.write(ret,"<BR>");
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: http://www.pageresource.com/jscript/index2.htm Work through the lesson titled:
JavaScript Prompts
This tutorial reinforces the material from today's lesson.