Manipulating Data and the Hierarchy of JavaScript
This chapter is from the book
This chapter is from the book
This chapter is from the book
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 Review—A <BODY> Flag Script
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.
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.
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.
){kind=link}
){kind=link}
Figure 3.1 The prompt box asks for the user's name.
Figure 3.2 The script responds appropriately to the user's input.
Click Here!
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 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:
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 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 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.
Click Here!
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.