Using Variables and Built-in Functions to Update Your Web Pages Automatically - Page 2

[previous] [next]

Using Variables and Built-in Functions to Update Your Web Pages Automatically

Variables Store Information

Think back to those glorious days of algebra class when you learned about variables and equations. For example, if x = 2, y = 3, and z = x + y, then z = 5. In algebra, variables like x, y, and z store or hold the place of numbers. In JavaScript and other programming languages, variables also store other kinds of information.

Syntax of Variables

The syntax of variables (the rules for defining and using variables) is slightly different in JavaScript from what it was in your algebra class. Figure 2-3 illustrates the syntax of variables in JavaScript with a silly script that figures out how many seconds there are in a day.

Note: Figure 2-3 does not write the results of the JavaScript to the web page—I'll explain how to do that in Figure 2-4.

Figure 2-3: Defining and using variables

There's a lot going on here, so let's take it line by line. Line 8 is a statement (a statement in JavaScript is like a sentence in English), and it says to JavaScript, "Create a variable called seconds_per_minute and set its value to 60." Notice that 8 ends with a semicolon. Semicolons in JavaScript are like periods in English: They mark the end of a statement (for example, one that defines a variable, as above). As you see more and more statements, you'll get the hang of where to place semicolons.

The first word, var, introduces a variable for the first time—you don't need to use it after the first instance, no matter how many times you employ the variable in the script.

Note: Many people don't use var in their code. Although most browsers let you get away without it, it's always a good idea to put var in front of a variable the first time you use it. (You'll see why when I talk about writing your own functions in Chapter 6.)

Naming Variables

Notice that the variable name in line 8 is pretty long—unlike algebraic variables, it's not just a single letter like x, y, or z. When using variables in JavaScript (or any programming language), you should give them names that indicate what piece of information they hold. The variable in line 8 stores the number of seconds in a minute, so I've called it seconds_per_minute.

If you name your variables descriptively, your code will be easier to understand while you're writing it, and much easier to understand when you return to it later for revision or enhancement. Also, no matter which programming language you use, you'll spend about 50 percent of your coding time finding and getting rid of your mistakes. This is called debugging—and it's a lot easier to debug code when the variables have descriptive names. You'll learn more about debugging in Chapter 14.

There are four rules for naming variables in JavaScript:

The initial character must be a letter, an underscore, or a dollar sign, but subsequent characters may be numbers as well. No spaces are allowed. Variables are case sensitive, so my_cat is different from My_Cat, which in turn is different from mY_cAt. As far as the computer is concerned, each of these would represent a different variable—even if that's not what the programmer intended. To avoid any potential problems with capitalization, I use lowercase for all my variables, with underscores (_) where there would be spaces in ordinary English. You can't use reserved words. Reserved words are terms used by the JavaScript language itself. For instance, you've seen that the first time you use a variable, you should precede it with the word var. Because JavaScript uses the word var to introduce variables, you can't use var as a variable name. Different browsers have different reserved words, so the best thing to do is avoid naming variables with words that seem like terms JavaScript might use. Most reserved words are fairly short, so using longer, descriptive variable names keeps you fairly safe. I often call my variables things like the_cat, or the_date because there are no reserved words that start with the word the. If you have a JavaScript that you're certain is correct, but it isn't working for some reason, it might be because you've used a reserved word.

Arithmetic with Variables

Line 12 in Figure 2-3 introduces a new variable called seconds_per_day and sets it equal to the product of the other three variables using an asterisk (*), which means multiplication. A plus sign (+) for addition, a minus sign (-) for subtraction, and a slash (/) for division represent the other major arithmetic functions.

When the browser finishes its calculations in our example, it reaches the end of the JavaScript in the head (line 15) and goes down to the body of the HTML. There it sees two lines of HTML announcing that the page knows how many seconds there are in a day.

So now you have a page that knows how many seconds there are in a day. Big deal, right? Wouldn't it be better if you could tell your visitors what the answer is? Well, you can, and it's not very hard.

[previous] [next]

URL: