Using Variables and Built-in Functions to Update Your Web Pages Automatically - Page 4
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
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
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).
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 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
60. The alert on line 14 will say
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.
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
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:
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
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.
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.