The JavaScript commands in this chapter are grouped together because they all
deal with data in some way, shape, or form. That data can consist of dates,
times, or input from the user. In addition, each of these lessons introduces you
to one of the most important topics in JavaScriptthe hierarchy of
objects.

You have already been introduced to JavaScript hierarchy in the
object.method and object.property statements in Lesson Nine
(see Chapter 2, "Popping Up Text with Mouse Events"). But now
you'll learn about creating hierarchy with variables and other types of
JavaScript data.

As Lesson 13 in this chapter states, "... after you understand the
hierarchy of objects, you've conquered JavaScript."

Lesson 11: Prompts and Variables

This lesson has two concepts. First is the prompt box, which you use when you
want to prompt the user for information. The second, creating variables, is one
you'll use throughout the remainder of your JavaScript life. Let's
begin by examining these concepts.

Creating a Variable

The concept of variables is paramount in JavaScript, so you must know how to
create them. When you create a variable, you are denoting a one-word (or
one-letter) representation for the output of a JavaScript command line. Remember
when you were posting the name of the browser to the page using the method
appName? When you placed the name in the document.write
statement, you wrote out the entire navigator.appName. Because you did
it only once, it wasn't so hard. But what if you wanted to write it ten
times across the same page? Writing those characters again and again would get
boring.

So you assign a variable to represent the output of the method. Let's
say you choose the variable NA. That way, you would have to write
navigator.appName only once and assign NA to it. The rest of
the way through, you would write only NA when you wanted the
navigator.appName.

Please keep in mind that the variable is "NA" with two capital
letters. You'll need to follow whatever capitalization pattern you choose
every time you call for the variable you created because JavaScript is case
sensitive. You could also have a variable "na" in the same script, and
it would be seen as completely different from "NA". Please understand
I'm just making a point by showing "NA" and "na"
together. You would never want to do that in a script simply because it would be
confusing. The point I want to make is to be aware of your capitalization when
creating variable names.

var proclaims that the word immediately following will be the
variable name.

username is the name of the variable. I made this up. It
didn't have to be this long; in fact, I could have made it N if I
wanted. It's always best to create the variable names in such a way that
you can easily remember what the variables represent.

The equal sign (=) denotes that the variable name will equal
the output of the commands that follow. In this case, the variable will
represent the output of the prompt box.

One more thing: Variable names can be just about any word or combination of
letters and numbers you want; however, some variable names are off limits.

For instance, you should not create a variable name that is the same word as
a JavaScript command. You'll know you didn't mean for the word to be
used as a command, but the computer won't.

In addition to not using JavaScript commands as variable names, Appendix C,
"JavaScript Reserved Variable Words," has a list of other words you
should avoid. Some of the words are already in use as JavaScript commands, and
some are reserved words that will be used in upcoming JavaScript versions. You
might want to take a quick look at the list before going further.

I've found that as long as you create a variable name that is
representative of the data, you shouldn't run into any trouble, but just to
be sure, take a look at Appendix C.

Please notice that no quotation marks surround either var or the
variable name. Just follow one word with the next as shown in the code. The
JavaScript will understand what you're saying.

The Prompt Command

I used a new command for this example: prompt. This method pops up a
box prompting the user for a response.

Here's the basic format of the prompt:

var variable_name = prompt("Message on the gray box","Default Reply")

The default reply is the text that will appear in the user-entry field on the
prompt box. You should include text in case the user doesn't fill anything
in. That way, you'll have something for the JavaScript to work with.

But if you like the look of an empty user-entry field on the prompt box,
that's fine. If the user doesn't enter any text, the text
null will be returned for you.

In case you're wondering ... to get a blank white box in the user-entry
field, do not write any text between the second set of quotation marks. And yes,
you need the quotation marks even if they're empty. If you do not put the
second set of quotation marks in, the white box will read
undefined.

The var and the variable name you assigned are included in the
format. They have to be; otherwise, you'll get the prompt, but nothing will
be done with the data the user enters.

The Sample Script

Now you're back to creating full JavaScripts rather than just adding
events to HTML, so you'll need to again start using the full <SCRIPT
LANGUAGE="javascript"> to </SCRIPT> format.

Here's what you're going to do. You'll ask the user for his
name and assign a variable to that name. After the variable is assigned, you can
enter it in a document.write line that posts the user's name to
the page. The script is as follows:

<SCRIPT LANGUAGE="javascript">
/*This script is intended to take information from the user
and place it upon the page*/
var username = prompt ("Write your name in the box below",
"Write it here");
document.write("Hello " + username + ". Welcome to my page!");
</SCRIPT>

This script brings up a prompt box asking for the user's name, as shown
in Figure 3.1. Figure
3.2 shows the result after the user enters his name and clicks OK.

Wait! What Are Those /* and */ Things?

Yeah, I stuck in two extra commands that comment out text in the script. When
you comment out something, the text sits in the source code for you and
anyone else who's interested to read it, but it won't affect the
script nor show up on the resulting page. It's a great way to add
copyrights, tell what the script does, and generally help yourself along by
adding instruction text that's not part of the script.

These comment commands allow for multiple lines. Just have /* at the
beginning and */ at the end, and everything in between will comment
out. You can write a whole paragraph of commented text as long as it is between
the two comment commandsit won't affect the script in any way.

Deconstructing the Script

Now that you know all the parts of the prompt, let's examine the meat of
the script:

The prompt asks the user to write his name in the box. The white box
reads "Write it here".

A semicolon ends the line because I wanted it there. It is not
necessary.

The document.write statement calls for the text
"Hello " (space for continuity).

The plus sign (+) denotes that what follows will write right
after the line of text.

username is representative of the output of the prompt. No
quotation marks are usedwe don't want it printed.

Another plus sign is used.

". Welcome to my page!", with a period and a space
for continuity, completes the text.

The semicolon is placed on purpose to show me that the line has
ended.

That's all.

Please make a point of truly understanding the concept of variables before
you proceed. Variables are used extensively in this language. If you're
lost at this point, reread the lesson.

Your Assignment

... is a review.

Let's combine a couple of the commands you've learned so far with
the new variable and prompt commands you just learned.

Here's what I want you to do:

Create two prompts. One will ask for the user's first name, and
one will ask for the user's last name. Don't let this throw
youjust create two fully formed prompt lines in the preceding script and
assign each one a different variable name. One will simply follow the other in
the script.

Using the prompts, create this line of text: Hello first-name
last-name. I see you are using browser-name. Thanks for coming to
document-title.

BUT! Write the code so that the browser-name anddocument title
items are called by the variables BN and PT,
respectively.

Think it through, and then write the script. There are bonus points if
you comment out a couple of lines.