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

[previous] [next]

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

More About Functions

Whereas variables store information, functions process that information.

All functions take the form functionName(). Sometimes there's something in the parentheses and sometimes there isn't. You've already seen one of JavaScript's many built-in functions, window.document.write(), which writes whatever lies between the parentheses to the web page. Before diving into the date functions that you'll need to write the date to your web page, I'll talk about two interesting functions, just so you get the hang of how functions work.

alert()

One handy function is alert(), which puts a string into a little announcement box (also called an alert box). Figure 2-7 demonstrates how to call an alert(), and Figure 2-8 shows what the alert box looks like.

Figure 2-7: Creating an alert box

The first thing visitors see when they come to the page Figure 2-7 creates is an alert box announcing that I wrote the page (Figure 2-8). The alert box appears because of line 7, which tells JavaScript to execute its alert() function.

While the alert box is on the screen, the browser stops doing any work. Clicking OK in the alert box makes it go away and allows the browser to finish drawing the web page. In this case, that means writing the words To code, perchance to function to the page (line 12).

The alert() function is useful for troubleshooting when your JavaScript isn't working correctly. Let's say you've typed in Figure 2-6, but when you run the code, you see that you must have made a typo—it says there are 0 seconds in a day instead of 86400. You can use alert() to find out how the different variables are set before multiplication occurs. The script in Figure 2-9 contains an error that causes the script to say there are "undefined" seconds in a year; and to track down the error, I've added alert() function statements that tell you why this problem is occurring.

Figure 2-9: Using alert() to find out what's wrong

Line-by-Line Analysis of Figure 2-9

The problem with this script is in line 10. Notice the accidental capitalization of the first letter in Hours_per_day. This is what causes the script to misbehave. Line 14 multiplies the other numbers by the variable hours_per_day, but hours_per_day was not set—remember, JavaScript considers it a different variable from Hours_per_day—so JavaScript thinks its value is either 0 or undefined, depending on your browser. Multiplying anything by 0 results in 0, so the script calculates that there are 0 seconds in a day. The same holds true for browsers that think hours_per_day is undefined. Multiplying anything by something undefined results in the answer being undefined, so the browser will report that there are undefined seconds in a day.

This script is short, making it easy to see the mistake. However, in longer scripts it's sometimes hard to figure out what's wrong. I've added lines 11, 12, and 13 in this example to help diagnose the problem. Each of these statements puts a variable into an alert box. The alert on line 11 will say seconds_per_minute is: 60. The alert on line 14 will say hours_per_day is: 0, or, depending on your browser, the alert won't appear at all. Either way, you'll know there's a problem with the hours_per_day variable. If you can't figure out the mistake by reading the script, you'll find this type of information very valuable. Alerts are very useful debugging tools.

prompt()

Another helpful built-in function is prompt(), which asks your visitor for some information and then sets a variable equal to whatever your visitor types. Figure 2-10 shows how you might use prompt() to write a form letter.

Figure 2-10: Using prompt() to write a form letter

Notice that prompt() in line 7 has two strings inside the parentheses: "What's your name?" and "put your name here". If you run the code in Figure 2-10, you'll see a prompt box that resembles Figure 2-11. (I've used the Opera browser in this illustration; prompt boxes will look somewhat different in IE and other browsers.) If you type Rumpelstiltskin and click OK, the page responds with Dear Rumpelstiltskin, Thank you for coming to my web page.

The text above the box where your visitors will type their name ("What's your name?") is the first string in the prompt function; the text inside the box ("put your name here") is the second string. If you don't want anything inside the box, put two quotes ("") right next to each other in place of the second string to keep that space blank:

If you look at the JavaScript in the body (starting in line 12), you'll see how to use the variable the_name. First write the beginning of the heading to the page using normal HTML. Then launch into JavaScript and use document.write(the_name) to write whatever name the visitor typed into the prompt box for your page. If your visitor typed yertle the turtle into that box, yertle the turtle gets written to the page. Once the item in the_name is written, you close the JavaScript tag, write a comma and the rest of the heading using regular old HTML, and then continue with the form letter. Nifty, eh?

The prompt() function is handy because it enables your visitor to supply the variable information. In this case, after the user types a name into the prompt box in Figure 2-10 (thereby setting the variable the_name), your script can use the supplied information by calling that variable.

Parameters

The words inside the parentheses of functions are called parameters. The document.write() function requires one parameter: a string to write to your web page. The prompt() function takes two parameters: a string to write above the box and a string to write inside the box.

Parameters are the only aspect of a function you can control; they are your means of providing the function with the information it needs to do its job. With a prompt() function, for example, you can't change the color of the box, how many buttons it has, or anything else; in using a predefined prompt box, you've decided that you don't need to customize the box's appearance. You can only change the parameters it specifically provides— namely, the text and heading of the prompt you want to display. You'll learn more about controlling what functions do when you write your own functions in Chapter 6.

[previous] [next]

URL: