Online Book Reader

Home Category

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [134]

By Root 1304 0
a variable. The purpose of a prompt() command is to get data from the user, so prompts are nearly always connected to a variable. When the code is finished, the variable contains the indicated value.

Responding to the user

This program uses the alert() statement to begin a greeting to the user. The first alert works just like the one from the helloWorld program, described earlier in this chapter in the “Writing Your First JavaScript Program” section:

alert(“Hi”);

The content of the parentheses is the text you want the user to see. In this case, you want the user to see the literal value “Hi”.

The second alert() statement is a little bit different:

alert(person);

This alert() statement has a parameter with no quotes. Because the parameter has no quotes, JavaScript understands that you don’t really want to say the text person. Instead, it looks for a variable named person and returns the value of that variable.

The variable can take any name, store it, and return a customized greeting.


Using Concatenation to Build Better Greetings

To have a greeting and a person’s name on two different lines seems a little awkward. Figure 1-5 shows a better solution.

The program asks for a name again and stores it in a variable. This time, the greeting is combined into one alert (see Figure 1-6), which looks a lot better.

Figure 1-5: Once again, I ask the user for a name.

Figure 1-6: Now the user’s name is integrated into the greeting.

Concatenation and your editor

The hard part about concatenation is figuring out which part of your text is a literal value and which part is a string. It won’t take long before you go cross-eyed trying to understand where the quotes go.

Modern text editors (like Aptana and Komodo) have a wonderful feature that can help you here. They color different kinds of text. By default, Aptana colors variable names black and literal text dark green (at least when you’re in JavaScript — in HTML, literal text is blue).

I find it hard to differentiate the dark green from black, so I changed the Aptana color scheme. I have string literals blue whether I’m in JavaScript or HTML. I find this color more consistent and easier for me to read. With this setting, I can easily see what part of the statement is literal text and what’s being read as a variable name. That makes concatenation a lot easier.

To change the color scheme in Aptana, choose Window⇒Preferences. An expandable outline appears in the resulting dialog box. In the section Aptana — Editors — JavaScript Editor — Colors, scroll down to find color settings for any type of data. I found string (another term for text) under literals and changed the color from dark green to blue.

If you make a mistake, clicking the Restore Defaults button reverts to the default values.

Most editors that have syntax highlighting allow you to change settings to fit your needs. Don’t be afraid to use these tools to help you program better.

The secret to Figure 1-6 is one of those wonderful gems of the computing world: a really simple idea with a really complicated name. The term concatenation is a delightfully complicated word for a basic process. Look at the following code, and you see that combining variables with text is not all that complicated:

For the sake of brevity, I include only the script tag and its contents throughout this chapter. The rest of this page is a standard blank XHTML page. You can see the complete document on the Web site or CD-ROM. I do include a comment in each JavaScript snippet that indicates where you can get the entire file on the CD-ROM.


Comparing literals and variables

The program concat.html contains two kinds of text. “Hi there, ” is a literal text value. That is, you really mean to say “Hi there, ” (including the comma and the space). person is a variable. (For more on variables, see the section “Introducing Variables,

Return Main Page Previous Page Next Page

®Online Book Reader