Thursday, March 28, 2024

Using JavaScript Variables and Built-In Functions, Part 3

Excerpted from Chapter 2, JavaScript 2nd Edition: A Practical Guide To Interactive Web Pages from No Starch Press



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 Y, Z, and [ in this example to help diagnose the problem. Each of these statements puts a variable into an alert box. The alert on Y will say seconds_per_minute is: 60. The alert on [ 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.

<html><head>
<title>A Form Letter</title>
<script type = “text/javascript”>
<!– hide me from older browsers

X var the_name = prompt(“What’s your name?”, “put your name here”);

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

Y <h1>Dear

<script type = “text/javascript”>

<!– hide me from older browsers

document.write(the_name);

// show me –>

</script>

,</h1>

Thank you for coming to my web page.

</body>

</html>





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

Notice that prompt() in X 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:

var the_name = prompt(“What’s your name?”, “”);

If you look at the JavaScript in the body (starting in Y), 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.

Writing the Date to Your Web Page

Now that you know about variables and functions, you can print the date to your web page. To do so, you must first ask JavaScript to check the local time on your visitor’s computer clock:

var now = new Date();

The first part of this line, var now =, should look familiar. It sets the variable now to some value. The second part, new Date(), is new; it creates an object.

Objects store data that require multiple pieces of information, such as a particular moment in time. For example, in JavaScript you need an object to describe 2:30 PM on Saturday, January 7, 2006, in San Francisco. That’s because it requires many different bits of information: the time, day, month, date, and year, as well as some representation (in relation to Greenwich Mean Time) of the user’s local time. As you can imagine, working with an object is a bit more complicated than working with just a number or a string.

Because dates are so rich in information, JavaScript has a built-in Date object to contain those details. When you want the user’s current date and time, you use new Date() to tell JavaScript to create a Date object with all the correct information.

NOTE: You must capitalize the letter D in Date to tell JavaScript you want to use the built-in Date object. If you don’t capitalize it, JavaScript won’t know what kind of object you’re trying to create, and you’ll get an error message.

Built-in Date Functions

Now that JavaScript has created your Date object, let’s extract information from it using JavaScript’s built-in date functions. To extract the current year, use the Date object’s getYear() function:


var now = new Date(); var the_year = now.getYear();

Date and Time Methods

In the code above, the variable now is a Date object, and the function getYear() is a method of the Date object. Methods are simply functions that are built in to objects. For example, the getYear() function is built in to the Date object and gets the object’s year. Because the function is part of the Date object, it is called a method. To use the getYear() method to get the year of the date stored in the variable now, you would write:


now.getYear()

Table 2-1 lists commonly used date methods. (You can find a complete list of date methods in Appendix C.)




NOTE: Notice that getMonth() returns a number between 0 and 11; if you want to show the month to your site’s visitors, to be user-friendly you should add 1 to the month after using getMonth() as shown in Y in Figure 2-12.


Internet Explorer and various versions of Netscape deal with years in different and strange ways:


  • Some versions of Netscape, such as Netscape 4.0 for the Mac, always return the current year minus 1900. So if it’s the year 2010, getYear() returns 110.
  • Other versions of Netscape return the full four-digit year except when the year is in the twentieth century, in which case they return just the last two digits.
  • Netscape 2.0 can’t deal with dates before 1970 at all. Any date before January 1, 1970 is stored as December 31, 1969.
  • In Internet Explorer, getYear() returns the full four-digit year if the year is after 1999 or before 1900. If the year is between 1900 and 1999, it returns the last two digits.

You’d figure a language created in 1995 wouldn’t have the Y2K problem, but the ways of software developers are strange. Later in this chapter I’ll show you how to fix this bug.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured