Putting the Current Date into a Web Page
JavaScript can determine the current date and time from your computer (which it gets as a number) and then manipulate that figure in many ways. Your script has to handle the conversion from a number into a textual date, however. Script 13.1 shows how to get the current date, convert it from a number into a standard date, and then write the result to a document window.
Script 13.1. This script writes the current date to the document window.
window.onload = initDate;
function initDate() {
var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
 "Friday", "Saturday");
var monName = new Array("January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December");
var now = new Date();
var dtString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.
getDate();
document.getElementById("dtField"). innerHTML = dtString;
}
|
To put the current date into a Web page:
1. |
window.onload = initDate;
When the document loads, call initDate().
| 2. |
var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
"Saturday");
First, we need to create a new array that contains the days of the week. Make sure to use commas to separate the items in the array; and because they are text strings, each item must be enclosed in quotes. The array gets assigned to the variable dayName.
| 3. |
var monName = new Array("January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December");
In this step, we're doing the same thing with month names; and assigning them to the brilliantly named monName variable.
| | | 4. |
The last thing to do in this first section is to tell JavaScript to create a new Date object, call it now, and fill it with the current date.
| 5. |
var dtString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate();
The object dayName[now.getDay()] is read from right to left; getday() is the JavaScript method that gets the day of the week, and asking now for it gets today's day of the week. The numerical result references one of the entries in the array dayName.
Next, we concatenate a comma and a space to the text string that we're building, and then we concatenate the next expression, which is the month name, expressed by the object monName[now.getMonth()]. This gets the month in much the same fashion as getting the day name; and references one of the entries in the array monName.
A space is concatenated next, and we end with the object now.getDate(), which returns the date of the month. All of this is assigned to the dtString variable.
| 5. |
document.getElementById("dtField"). innerHTML = dtString;
The id dtField is in the HTML page (the HTML is trivial, so we haven't included it here); it's within a <span> tag, like so:
<h1>Today is <span id="dtField"> </span>.</h1>
The JavaScript sets the innerHTML property of dtField to the value of dtString. The result is shown in Figure 13.1.
|
|
As mentioned earlier in this book, JavaScript begins numbering at zero in most cases, so numbering begins with 0, 1, 2, 3, etc. But this isn't consistent with dates, which begin with the number 1. So if you have an array that deals with the days of the week, you'll have this:
Sunday = 0
Monday = 1
Tuesday = 2
Wednesday = 3
Thursday = 4
Friday = 5
Saturday = 6
In much the same way, the 12 months of the year are numbered from 0 through 11.
On the other hand, when you're dealing with the date of the month, it makes no sense to start at zero (personally, I've never heard of April 0), so JavaScript starts at 1.
Hours are dealt with from 0 (midnight) to 23 (11 P.M.), as with military time. Later in this chapter we'll show you how to convert from military time to A.M./P.M.
|
|
