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:

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.
On to the next lesson!
Back to the COURSE SYLLABUS
© 2001 Carol J.V. Fisher    All Rights Reserved