This chapter contains the following lessons and scripts:
- Lesson 11: Prompts and Variables
- Lesson 12: Dates and Times
- Lesson 13: Hierarchy of Objects
- Lesson 14: Creating a Function
- Lesson 15: An Introduction to Arrays
- Lesson 16: The Third End-of-Chapter ReviewA <BODY> Flag Script
Lesson 11: Prompts and Variables
Creating a Variable
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.
Are you still with me? Let's get back to this example.
This lesson's script uses the following line to denote a variable:
var username = prompt ("Write your name in the box below", "Write it here")
We created the variable following this format:
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.
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.
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")
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
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:
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.
Figure 3.1 The prompt box asks for the user's name.
Figure 3.2 The script responds appropriately to the user's input.
To see this script's effect on your computer, click Lesson Eleven Effect in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/lesson11effect.html.
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 commandsit 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:
var user_name = prompt ("Write your name in the box below", "Write it here"); document.write("Hello " + username + ". Welcome to my page!");
The variable name username is assigned to the output of the prompt.
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 usedwe 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.
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.
... 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 youjust 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 and document 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.
You can see a possible answer to this assignment on your own computer by clicking Lesson Eleven Assignment in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/assignment11.html.