JavaScript becomes interesting when it can respond to user input.

Click here to see the next example.

Here is the source:




<html> 
<head> 
<title> JavaScript Example 2
</title> 
</head>
<body> 
This is the first line of text on the page. < /br> 

<script type="text/javascript" language="JavaScript"> 

	name = prompt("Please enter your name:");
	alert("hello " + name );

</script> 

This is the second line of text on the page.

</body> 
</html>

There is a new function used in this example,

prompt

. prompt is a function that directs the browser to pop up a little window with a prompt and an input box. The prompt displayed in the window will be whatever message you included in the parentheses.

In general, you can say

	prompt(" your prompt goes here ");

and whatever prompt you specify will be displayed.

You can also supply a default answer, so that the user can just click on "OK". Click here for an example. To get this effect, you specify a second parameter for prompt:

	prompt(" Enter your answer: ", "yes");

will create a prompt that says Enter your answer: and has the input box already filled in with the answer yes. The user can choose to click "OK" or to change the answer by typing over it.

Notice that each parameter is enclosed by quotation marks and that there is a comma separating the two parameters.

What happens to the answer that the user types in? Usually the JavaScript program will need to use that value to control what the program does. We save the input value by storing it in a location in memory called a variable. The statement

	name = prompt("Please enter your name:");

causes the browser to display a prompt, and then takes the answer from the input box and stores it in a variable called name. We say that name is assigned the value.

In this example, we use the input value to issue a customized welcome message. The next line of the program is

	alert("hello " + name );

The + is used to concatenate, or join, two character strings. "ab" + "cd" is the string "abcd".

What is the difference between

"hello" + "there" and "hello " + "there"?

The first one will result in hellothere; the second will give hello there. A blank counts as a character!

Going back to our example, notice that the word hello is in quotes, but the word name is not. That is because hello is to be treated as a constant value. name is the name of a variable. We don't want to display the word "name"; we want to display the value that is stored in the memory location called name.

More on quotes

Quotes are used to tell the JavaScript interpreter that a particular sequence of text is a string, and that it should be treated as one unit, not meant to be understood in terms of what it actually says. In fact, if we made a spelling mistake and typed

alert ("Hello theer");

then the words Hello theer would be displayed on the screen. Even though this is a spelling error, JavaScript does not complain. However, if we try this statement

aletr("Hello there");

then we would get an error message (why? what's wrong with this statement?).

Clearly, JavaScript treats these two spelling errors very differently. The second spelling error will cause JavaScript to produce an error message because it violates the rules of JavaScript syntax -- the rules that describe the format of acceptable JavaScript programs. In this case, aletr is not a command that JavaScript can understand, so we get an error message. Because this error is caused by our violation of the rules of syntax, it is called a syntax error. The first spelling error is not a syntax error, though, because the quotes tell JavaScript that it doesn't need to worry about what the text actually means.

Exercise:

Write an HTML page that displays a prompt asking What is your favorite sport? and then responds with Baseball is my favorite sport too (Baseball should be replaced with whatever the user happened to type in.)