Lesson 12: Dates and Times
This lesson talks about how you can display existing information using a new object, Date, and seven new methods: getDay(), getDate(), getMonth(), getYear(), getHours(), getMinutes(), and getSeconds().
Date is an object that contains the current day of the week, month, day of the month, current hour, current minute, current second, and current year. All that and looks, too, huh?
So, if Date has all that, why use any of the methods? Because you might not want all that stuff every time. What if you want only the day of the week? Then you use getDay() to extract just that day of the week from the Date object.
The Date and Time Methods
Even before beginning to delve into the sample script, let's discuss each of the Date object methods. They are quirky to say the least.
First, all seven methods return numbers rather than text. It would be nice if getDay() would give you Monday, or Wednesday, or Saturday, but it doesn't. It gives you a number between 0 and 6.
Between 0 and 6?
So, if you call for getDay() and it's Wednesday, you will actually get only the number 3 returned. Goofy, yes, but that's what happens.
The Methods and What They Return
Here's a quick rundown of each method and what it returns. It'll help you to understand what pops up on your page when using the variable, as I'll show:
getDate()Believe it or not, this one acts normally. It returns the day of the month as the correctly numbered day of the month.
getDay()Returns the numbers 0 (Sunday) through 6 (Saturday), depending on the day of the week.
getHours()Returns the hour of the day in a 24-hour format counting the hours up from 0 through 23.
getMinutes()Returns the minute of the hours counting up from 0 up through 59, but this one isn't bad. There actually is a 0 at the top of the hour, so we're good to go with getMinutes.
getMonth()Returns the month of the year counting up from 0. The month of February therefore returns the number 1.
getSeconds()Returns the second of the minute counting up from 0 to 59. This method, like getMinutes, is okay in that there is actually a 0 at the top of the hour.
The Sample Script
Take a look at this lesson's script:
The script displays the date and time the page was loaded with this script, as shown in Figure 3.3.
Figure 3.3 The date and time methods display a variety of useful information.
To see this script's effect on your computer, click Lesson Eleven Effect in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/lesson12effect.html.
Wait! What's That // Thing?
You are an observant one, aren't you? That double slash denotes a single comment line inside the script. It means that the text that follows will not be used in the process, but rather will just be reprinted as is. It works just like the multiline comment you saw in Lesson 11, earlier in this chapter. You can add as many of them as you want, as long as each line starts with the double slash.
document.write("text") //This writes text to the page
Deconstructing the Script
If you look at the sample script, you'll see that the effect is created by asking the script to write the month, date, year, hour, minute, and second to the page. The extra verbiage stuck in there just makes it obvious what you're looking at.
Let's start with the first one called for in the preceding scriptthe monthand then we can start to break down how this works. As stated before, getMonth() is a method. That said, we now must concern ourselves with what object getMonth() is a method of.
It might appear from the script that getSomething() is a method of document. Not sothe method of document is write. getMonth() is actually a method of the object Date. Look up at the script and you'll see that Date is set aside in the command:
RightNow = new Date();
What is happening here is we are setting aside the object for the method getMonth() to work on. Actually, we're creating a new Date object to work with in the script.
Date, remember, contains all the date and time information you'll need. In fact, when you use one of the getSomething() methods, you're simply extracting one section of what Date possesses.
I'll prove that to you. Here's code that uses only the Date object without any method:
With just that, look at Figure 3.4 to see all the good stuff you get.
Figure 3.4 Using the Date object yields a lot of information.
Defining a Variable for the Date Object
If that seems backwards to you, it does to me, too. It seems like it should be new Date = RightNow, but it isn't. You're learning a new language, and you have to play by its rules.
The earlier command is saying this: RightNow is the variable that represents a new Date();.
But why "new" Date? The date has to be new so that you get a new date every time the page is entered or reloaded. Without the new command, the date would remain static. You reinforce the fact that the date has to be new by giving it a variable name, too.
Hooray! You have your object variable name set so that your getMonth() method can act on it. You want this month to be printed on the page, so you need to have a document.write() statement in there somewhere. You also know that what appears in the parentheses is printed on the page, so put together a smaller version of the big script in this lesson by following a logical process:
Then, insert a comment line that tells what this thing does.
You'll need to create a new Date object before you can call on the getMonth() portion, so insert that. Make sure the call ends with a semicolon.
Now you can place the document.write() statement.
Inside the document.write's incidence, follow the same format as in Lesson 1 in Chapter 1, "The Basics."
Text that is to be printed must be inside double quotation marks.
Finish up with </SCRIPT>.
Here's what you get:
Look at the full script again. That long line of text doesn't look so tough now. It's simply the RightNow object variable name followed by the next getSomething() method. I separated each with a hyphen; remember the hyphen is to be printed so it must be in quotation marks.
Building the Lines of document.write Code
I won't go through it all because you probably have the swing of it by now, so I'll discuss just the date portion of the script. It looks like this:
document.write("Today's date is " + RightNow.getMonth()+ "-") document.write(+ RightNow.getDate() + "-" + RightNow.getYear() + ".")
It starts with "Today's date is ", with a space at the end for continuity.
The plus sign is next.
RightNow.getMonth() is added without quotation marks because we do not want that printedwe want the number returned.
Another plus sign follows.
Now, a hyphen appears in quotation marks to separate it from the next number. No space is used because we want the next number to butt right up against it.
Next comes a plus sign.
Then comes the next document.write statement.
It starts with a plus sign because the first item in this statement is a return.
Now RightNow.getDate is added because we want the number of the day (no quotation marks).
A plus sign is next.
Another hyphen appears in quotation marks so it is printed right to the page.
Another plus sign is next.
Last is another new method, RightNow.getYear, which returns the number of the year.
Just continue to follow this same format, and the script will print out what you tell it to. So now you can tell everyone what time it is. But as Chicago sang, "Does anybody really know what time it is? Does anybody really care?"
Wait! What About Some of the Numbers Being One Off?
It's actually pretty easy to fix. So far, you've seen the plus sign used to surround text so that it acts as a return rather than printing to the page.
To get the returns from getDay(), getMonth(), and getSeconds() to display correctly, you must add a couple of steps to the process.
To return the correct number, you need to return each of the method.objects (listed earlier) and assign each a variable name.
Also, when you assign a variable name, you must add 1. Here's an example of a script that returns the date in ##/##/#### format:
See the format? I assigned the variable name dy to the code that would return the number representing the day of the week and added 1. Then, in the document.write statement, I called only for the variable name dy. That returns the number returned by RightNow.getDay() plus 1.
Now it's correct.
I did the same for RightNow.getMonth(). The command getFullYear() returns the entire four-digit year.
This one isn't so tough:
Write a script that asks for the user's name through a prompt.
Use that name to write a piece of text that reads Welcome user-name. It is minutes past hour. Thanks for coming.
Now, here's the kicker: Make that text appear in an alert that pops up when the page loads.
Bonus points are available if you call for the minutes and hours by using variable names.
You can see a possible answer on your own computer by clicking Lesson Twelve Assignment in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/ assignment12.html.