Using JavaScript Variables and Built-In Functions, Part 2

By - thau!

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.
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.

<title>An Alert Box</title>

<script type = "text/javascript">
<!-- hide me from older browsers

X alert("This page was written by thau!"); 
// show me --> </script>


Y <h1>To code, perchance to function</h1> </body> </html>
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 X, 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 Figure 2-8: The alert box to the page (Y).

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.
<title>Seconds in a Day</title>

<script type = "text/javascript">
<!-- hide me from older browsers

var seconds_per_minute = 60;

var minutes_per_hour = 60; 
X var Hours_per_day = 24; 
Y alert("seconds per minute is: " + seconds_per_minute); 
Z alert("minutes per hour is: " + minutes_per_hour); 
[ alert("hours per day is: " + hours_per_day); 
\ var seconds_per_day = seconds_per_minute * minutes_per_hour * hours_per_day;

// show me --></script></head><body>

<h1>My calculations show that . . .</h1>

<script type = "text/javascript"><!-- hide me from older browsers

var first_part = "there are ";var last_part = " seconds in a day.";var whole_thing = first_part + seconds_per_day + last_part;


// show me --></script>

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 X. Notice the accidental capitalization of the first letter in Hours_per_day. This is what causes the script to misbehave. Line \ 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.

Come back next week when we wrap up this chapter with more on using the prompt function, and show you how to dynamically write the date to your web page!

This chapter is excerpted from The Book of JavaScript, 2nd Edition: A Practical Guide to Interactive Web Pages, from No Starch Press.

Page 2 of 2

Previous Page
1 2

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date