| Table of Contents | Previous Next |
12.2 Static date and time on the Web12.2.1 A page can say good morningOne simple use of time detection is to develop a Web page that can greet visitors with some voice messages depending on the time. A few seconds of voice messages such as "Good Morning" can give a warm welcome to your visitors and customers. Our next example shows how to divide the time into four sections with time-dependent text and voice messages. The structure of the page is listed below:
If someone visits this page at, say, eight o'clock in the morning, the page will display the message "Good Morning" and play the sound file gm.wav. The structure of this page is simple and can be accomplished by a series of detections on the value returned by the getHour() function. The code of this page is listed in ex12-06.htm.
Example: ex12-06.htm - A Page Can Say Good Morning
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>A Page Can Say Good Morning -- ex1206.htm</title></head>
6: <body style="background:#000088;text-align:center;font-family:arial;
7: font-size:16pt;color:#ffff00">
8: <script>
9: cDate = new Date()
10: cHours = cDate.getHours()
11: lMsg = "<br />A Page Can Display And Say Something <br />"+
12: 'Depending On The Current Time<br /><br />'+cDate+
13: '<br /><span style="color:#00ffff"><br />'
14: sFile="ge.wav"
15:
16: if ( cHours >= 0 && cHours < 6){
17: lMsg = lMsg +"Now Is Very Early Morning "+
18: "<br />Please Go To Bed!<br /><br />"
19: sFile = "gb.wav"
20: }
21: if ( cHours >= 6 && cHours < 12){
22: lMsg = lMsg +"Good Morning! <br /><br />"
23: sFile = "gm.wav"
24: }
25: if ( cHours >=12 && cHours < 17){
26: lMsg = lMsg +"Good Afternoon! <br /><br />"
27: sFile = "ga.wav"
28: }
29: if ( cHours >=17 && cHours < 24){
30: lMsg = lMsg +"Good Evening! <br /><br />"
31: sFile = "ge.wav"
32: }
33:
34: lMsg = lMsg +"</span>I Can Determine The Time Now"
35: document.write('<div>'+lMsg+'</div>')
36: document.write('<embed src='+sFile+' hidden="true" autostart="yes" />')
37: </script>
38: </body>
39: </html
We use four conditional statements to detect different time periods of a day. If the hour value in the variable cHour falls into one of the time periods or zones, a message related to the time is added to the message string lMsg. A sound file corresponding to the time zone is also assigned to the variable sFile. Each of the sound files plays back a simple voice message:
By using the date and time functions of the date object, Web pages can determine the time and act accordingly. The screen shots are shown in Figs 12.5 and 12.6. Figure 12.5. ex12-06.htm
Figure 12.6. Good Evening!
12.2.2 Matching the names of weekdays and monthsFrom the discussion in section 12.1.3, we know that all get functions related to the date object return numerical values. In many applications, we may need to convert some of the numeric values to commonly used names. Two such conversions frequently found on the Web are the matching of the days of a week and months of a year. By using the array structure, we can perform this matching easily. For example, the following declaration defines an array of seven elements:
mDay = new Array("Sunday","Monday","Tuesday",
"Wednesday","Thursday","Friday","Saturday")
The index of the array can be used to match the names of the days of a week as mDay[0]="Sunday", mDay[1]="Monday",..,mDay[6]="Saturday" Now, let's consider an example that can display a logo together with a date string. This example uses an XHTML string to integrate a text header with date and time. Consider the following example ex12-07.htm:
Example: ex12-07.htm - A Header With Date
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>A Header With Date - ex1207.htm </title></head>
6: <style> .mSt{font-size:16pt;color:#ffff00;font-weight:bold } </style>
7: <body style="background:#000088;text-align:center;font-family:arial">
8: <script src="date.js"></script>
9: <div align="center" id="myHeader"></div>
10: <div class="mSt"><br />A Page With Logo and Today's Date.<br /><br />
11: All Components Of The Header Are <br />
12: Integrated As A Single String</div>
13: <script>
14: document.getElementById("myHeader").innerHTML=disHeader()
15: </script>
16: </body>
17: </html>
This page includes an ECMAScript program file called date.js in line 8. This program file provides the function disHeader() to be used in line 14. Line 9 creates an initially empty division with id="myHeader" for the header. The script function disHeader() (i.e., display header) at the end of line 14 is defined in date.js. This function returns an XHTML string with header and date to the getElementById() function in line 14 and ultimately will be displayed at the location defined in line 9. The program file date.js is listed in ex12-02.txt.
Listing: ex12-02.txt - The ECMAScript date.js
1: mDay = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday",
2: "Friday","Saturday")
3: mMonth = new Array("January","February","March","April","May","June",
4: "July","August","September","October","November","December")
5:
6: function disHeader()
7: {
8: dateObj = new Date()
9:
10: lHeader = '<table><tr class="mSt"><td width="60%">'+
11: '<img src="logo_web.jpg" width="160" height="80" alt="pic" /></td>'+
12: '<td>'+mDay[dateObj.getDay()]+'<br />'+
13: dateObj.getDate()+' '+mMonth[dateObj.getMonth()]+' '+
14: dateObj.getFullYear()+'</td></tr></table><br />'+
15: '<img src="line1.gif" width="450" height="6" alt="pic" /><br />'
16: return(lHeader)
17: }
18:
This program file begins with two arrays mDay (match day) and mMonth (match month). These arrays are used inside the function disHeader()to display the header in lines 617. When the dateObj.getDay() function in line 12 returns the numeric value, the array mDay is used to match the names of the days. The mMonth array used in line 13 is the array to match the names of the months. They represent part of an XHTML language string called lHeader declared in lines 1015. This string technique is popular on the Web and used to build one or more local header messages. The variable lHeader is in fact just an XHTML table. This table contains a logo picture and today's date. The disHeader() function combines all components of the header into a table string. This way, the header can be considered as an entity and can be printed out or handled as a single object and/or returned to the caller as demonstrated in line 16. A screen shot of this page is shown in Fig. 12.7. Figure 12.7. ex12-07.htm
12.2.3 Detecting leap yearsOne of the oldest problems when dealing with date and time is the detection of leap years. For example, you probably know that 2004 and 2008 are leap years; and you can hardwire the code to deal with them directly. Obviously, this is not an ideal solution and a leap year calculation (or detection) function is necessary. Also, we don't want to use the complicated rules of leap years such as:
One easy option is to use the built-in functions of the date object such as getTime() to determine the number of days in February. For example, you can develop a leap year detection function, e.g., leapYear(), based on getTime() as in the listing ex12-03.txt. In this chapter, we want to expand the file date.js into a functional date and time function library. The leapYear() function and many others are added at the end of the program file date.js as follows:
Listing: ex12-03.txt - Adding The Function leapYear() Into date.js
19: function leapYear(iYear)
20: {
21: dateObj1= new Date(iYear,1,1,0,0,0)
22: dateObj2= new Date(iYear,2,1,0,0,0)
23: cntV1 = dateObj1.getTime()
24: cntV2 = dateObj2.getTime()
25: daysFeb = Math.round((cntV2-cntV1)/(1000*60*60*24))
26: if (daysFeb != 29)
27: {
28: return(false)
29: } else {
30: return(true)
31: }
32: }
33:
This function is to determine whether the input year (iYear) is a leap year. First, we need a date object (i.e., dateObj1) to have the time string as February 1. The second date object (dateObj2) declared in line 22 has the time string as March 1. The difference between these two date objects in terms of the getTime() function represents the time units of the entire February. If this time unit is divided by (1000*60*60*24) as indicated in line 25, the number of days in February is obtained. To avoid any calculation confusion (floating points and integers) in some systems, you may also need to use a simple rounding method (Math.round) to find the number of days in February. If the number of days is 29, you know that you have a leap year and can return the value true. To test this function, you can develop the following page (ex12-08.htm) to display some leap years.
Example: ex12-08.htm - Detecting Leap Years
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Detecting Leap Years -- ex1208.htm </title></head>
6:
7: <script src="date.js"></script>
8:
9: <body style="background:#000088;text-align:center;font-family:arial;
10: font-size:18pt;color:#ffff00;font-weight:bold">
11:
12: <div>A Page To Display Some Leap Years <br /></div>
13: <img src="line1.gif" width="450" height="6" /><br /><br />
14:
15: <script>
16: for (ii=2000;ii<=2010;ii++)
17: {
18: if (leapYear(ii))
19: document.write(ii+' is a leap year.<br />')
20: else
21: document.write(ii+' is not a leap year.<br />')
22: }
23: </script>
24: </body>
25: </html>
Apart from the program file date.js in line 7, the main operation of this page is the for-loop in lines1622. If the conditional on the leapYear() function (see line 18) returns a true value, the output statement in line 19 is executed. If the returned value is false, the year is not a leap year and the statement in line 21 is output. A screen shot of this page is shown in Fig. 12.8. Figure 12.8. ex12-08.htm
12.2.4 Getting an input date with drop-down boxesOne of the essential techniques on the Web is to get a date from users (or customers). This can be a birthday, delivery date, pay date, or any important date that needs to be remembered. A simple efficient way to obtain this information could be important in a commercial environment. As a practical example, we are going to develop a Web page with drop-down boxes to obtain the date information. One main advantage of using drop-down boxes is that it can minimize user errors. Three drop-down boxes representing year, month, and date are used. Users can simply pick the value inside the boxes and no additional input such as typing is needed. In this section a programming technique to change the contents of some drop-down boxes interactively is also introduced. For example, if the user selects April as the month, the drop-down box for the date will only display 30 days (from 1 to 30). Once the Submit button is pressed, the input date is displayed immediately. Our example can also handle leap years at the same time. The treatment here serves as an introduction to professional Web programming; it is neither perfect nor complete. The structure of this page contains two files, one for the XHTML code (ex12-09.htm) and the other for programming code inside date.js. The XHTML file acts as an interface and is listed as follows:
Example: ex12-09.htm - Getting An Input Date With Drop-Down Boxes
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Controlling An Input Date - ex1209.htm </title></head>
6: <style>
7: .mSt{font-size:16pt;color:#ffff00;font-weight:bold }
8: .bSt{font-size:14pt;color:#000088;font-weight:bold;font-family:arial;
9: width:150;height:30;background:#aaccaa}
10: </style>
11: <body style="background:#000088;text-align:center;font-family:arial">
12: <script src="date.js"></script>
13: <div align="center">
14: <div id="myHead"></div><br /><br />
15: <span class="mSt">Getting An Input Date With Drop-Down Boxes</span>
16: <br /><br />
17: <table border="0" cellspacing="10" class="mSt">
18: <tr><td width="160">Year : </td>
19: <td width="280"><span id="yearL"></span></td></tr>
20: <tr><td>Month: </td><td><span id="monthL"></span></td></tr>
21: <tr><td>Date : </td><td><span id="dateL"> </span></td></tr>
22: <tr><td><input type="button" value="Get Input Date"
23: onclick='document.getElementById("dayL").innerHTML=disInputDate()'
24: class="bSt" /></td><td><span id="dayL"></span></td></tr>
25: </table>
26: </div>
27: <script>
28: document.getElementById("myHead").innerHTML=disHeader()
29: myGetDate(1940,2020,"yearL","monthL","dateL","dayL")
30: </script>
31: </body>
32: </html>
Similar to earlier examples, this interface page includes the program file date.js in line 12. It contains all script functions that are needed to perform the actions. Line 14 of this interface defines a division with id=myHead ready for us to output a header string in line 28. Lines 1725 define a table with four rows. Each row has an identity location for output. For example:
A button is created in lines 2224 to trigger the printout of the date string dayL. In this example, the main controlling function is myGetDate(1940,2020,"yearL","monthL","dateL","dayL") in line 29. The first two arguments of this function are the start and end years. In this case, the date information between 1940 and 2020 is considered. The next four arguments are location identities specified by XHTML elements. In this case, the year drop-down box is displayed at the location where id="yearL" (year location). The month drop-down box is located at the element with id="monthL". Finally, if the user presses the button as shown in line 22, the function disInputDate() returns the input date and displays it at the location defined by id="dayL". Some screen shots of this page in action are shown in Figs 12.9 and Fig. 12.10. Figure 12.9. ex12-09.htm
Figure 12.10. Get input date
The interesting part of this page is the ability to control the number of days corresponding to a particular month. As demonstrated in Fig. 12.10, if you pick the year 2004 (a leap year) and February, the drop-down box of the date only has 29 days (129). The implementations of these features are discussed below. First, in order to simplify the variable passing, global variables are used in this example. After the global variable section, we have the main controlling function myGetDate() as follows:
Listing: ex12-04.txt - Adding The Function myGetDate() Into date.js
34: gl_stYear = 1940
35: gl_endYear = 2020
36: gl_yearL =''
37: gl_monthL=''
38: gl_dateL =''
39: gl_dayL=''
40:
41: function myGetDate(l_stYear,l_endYear,l_yearL,l_monthL,l_dateL,l_dayL)
42: {
43: ldateObj = new Date()
44: gl_stYear = l_stYear
45: gl_endYear = l_endYear
46: gl_yearL = l_yearL
47: gl_monthL = l_monthL
48: gl_dateL = l_dateL
49: gl_dayL = l_dayL
50: disYear()
51: document.getElementById("gYear").selectedIndex=
52: (ldateObj.getFullYear()-gl_stYear)
53: disMonth()
54: disDay()
55: }
56:
Lines 3439 define some global variables for the start and end years and display locations. The first job of this function myGetDate() is to assign the input to the global variables (lines 4449). Line 50 is to call another function disYear(). This function generates a drop-down box at the location gl_yearL. Lines 5152 are used to guarantee that the first year appears in the year drop-down box as the current year. The functions disMonth() and disDay() generate boxes for months and days respectively. The disYear()function has the listing
Listing: ex12-05.txt - Adding The Function disYear() Into date.js
57: function disYear()
58: {
59: // yearSt - A String To Represent The Drop-Down Box For Year
60: yearSt ='<select id="gYear" name="gYear" class="bSt" '+
61: 'style="width:90px" onchange="disDay()">'
62:
63: for (ii=gl_stYear;ii<=gl_endYear;ii++)
64: {
65: yearSt = yearSt + '<option>'+ii+'</option>'
66: }
67: yearSt = yearSt + '</select>'
68: document.getElementById(gl_yearL).innerHTML=yearSt
69: }
70:
This is a drop-down box defined by the element <select> (line 60). The contents of this box are stored in the string variable yearSt. The for-loop in lines 6366 is used to fill the year (from gl_stYear to gl_endYear) information in the box. When the contents of this drop-down box are filled, the string, yearSt, is output to the location where id=gl_yearL (line 68). We use a special event onchange in line 61 to detect the selected value of this drop-down box. If it has been changed, the function disDay() is called to recalculate the number of days corresponding to the month field automatically. This will guarantee that you have a dynamic number of days. The next function disMonth() (i.e., display month) has a similar structure as disYear() and is listed in ex12-06.txt.
Listing: ex12-06.txt - Adding The Function disMonth() Into date.js
71: function disMonth()
72: {
73: // monthSt - A String To Represent The Drop-Down Box For Month
74: monthSt = '<select id="gMonth" name="gMonth" class="bSt" '+
75: 'onchange="disDay()">'
76: for (ii=0;ii<=11;ii++)
77: {
78: monthSt = monthSt + '<option>'+mMonth[ii]+'</option>'
79: }
80: monthSt = monthSt + '</select>  '
81: document.getElementById(gl_monthL).innerHTML=monthSt
82: }
83:
The for-loop in lines 7679 is used to add the month information to the drop-down box. The array variable mMonth (line 78) matches the name of the months, i.e., mMonth[0]=January, ..., mMonth[11]=December Next is the function disDay() to show the drop-down box for the date. This function generates the box on the fly to respond to the month information.
Listing: ex12-07.txt - Adding The Function disDay() Into date.js
84: function chgButMsg()
85: {
86: daySt = ""
87: document.getElementById(gl_dayL).innerHTML=daySt
88: }
89:
90: function disDay()
91: {
92: noDays = 31
93: yIndx = document.getElementById("gYear").selectedIndex
94: mIndx = document.getElementById("gMonth").selectedIndex
95: chgButMsg()
96: if (mIndx ==1)
97: {
98: if (leapYear(yIndx+gl_stYear)) noDays = 29
99: else noDays = 28
100: }
101: if ((mIndx ==3)||(mIndx ==5)||(mIndx ==8)||(mIndx ==10)) noDays = 30
102:
103: // daySt - A String To Represent The Drop-Down Box For Date
104: daySt = '<select id="gDate" name="gDate" class="bSt" '+
105: 'style="width:60px" onchange="chgButMsg()">'
106:
107: for (ii=1;ii<=noDays;ii++)
108: {
109: daySt = daySt + '<option>'+ii+'</option>'
110: }
111: daySt = daySt + '</select>'
112: document.getElementById(gl_dateL).innerHTML=daySt
113: }
114:
First, we get the drop-down box values for year and month (lines 9394) and store them in the index variables yIndx and mIndx. Then the function chgButMsg() (see line 95) is called to destroy the previous result. If the month is February (see line 96) and the year is a leap year (see line 98), we assign the number of days variable noDay as 29. Since the month index mIndx starts from zero, the statement in line 101 is used to detect
These months have 30 days. Armed with the information on number of days stored in variable noDays, you can use a for-loop in lines 107110 to build a customized drop-down box as a string called daySt. Finally, when the user presses the Get Input Date button (line 22 in ex12-09.htm), the following function disInputDate() is activated:
Listing: ex12-08.txt - Adding The Function disInputDate() Into date.js
115: function disInputDate()
116: {
117: // dIndx - Store the Date From DropDown Box (Values 0-Max:31)
118: dIndx = document.getElementById("gDate").selectedIndex
119:
120: // mIndx - Store the Month From DropDown Box (Values 011)
121: mIndx = document.getElementById("gMonth").selectedIndex
122:
123: // yIndx - Store the Year From DropDown Box (Starting from 0)
124: yIndx = document.getElementById("gYear").selectedIndex
125:
126: lMsg = 'Date: '+(dIndx+1)+' '+mMonth[mIndx] +' '+(yIndx + gl_stYear)
127: return(lMsg)
128: }
129:
This function gets the year, month, and date information from the drop-down boxes (see lines 117124). This information forms a string lMsg to be returned to the calling function in lines 126127. Since all selected indices from drop-down boxes start from zero, you need some adjustments in line 126 to reflect the true identity (or value) for year, month, and date. You now have a vehicle to get a user input date. This can be used to get delivery date, payment day, customer's birthday, meeting date, appointment date, etc. As mentioned before, the main advantage of this approach is that no user typing is needed and therefore user errors are minimized. One direct use of this structure is to build a Web page to find the day of a week from a user input date. 12.2.5 A page to find the weekdayAnother simple application of drop-down boxes introduced in the previous section is to find the weekday of a given date. With the help of the program file date.js, this page is easy to construct and is listed in ex12-10.htm.
Example: ex12-10.htm - A Page To Find The Weekday
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>To Find The Weekday -- ex1210.htm </title></head>
6: <style>
7: .mSt{font-size:16pt;color:#ffff00;font-weight:bold }
8: .bSt{font-size:14pt;color:#000088;font-weight:bold;font-family:arial;
9: width:150;height:30;background:#aaccaa}
10: </style>
11: <body style="background:#000088;text-align:center;font-family:arial">
12: <script src="date.js"></script>
13: <div align="center">
14: <div id="myHead"></div><br /><br />
15: <span class="mSt">Getting An Input Date With Drop-Down Boxes</span>
16: <br /><br />
17: <table border="0" cellspacing="10" class="mSt">
18: <tr><td width="160">Year : </td>
19: <td width="280"><span id="yearL"></span></td></tr>
20: <tr><td>Month: </td><td><span id="monthL"></span></td></tr>
21: <tr><td>Date : </td><td><span id="dateL"></span></td></tr>
22: <tr><td><input type="button" value="Find The Day"
23: onclick='document.getElementById("dayL").innerHTML=findDay()'
24: class="bSt" /></td><td><span id="dayL"></span></td></tr>
25: </table>
26: </div>
27: <script>
28: document.getElementById("myHead").innerHTML=disHeader()
29: myGetDate(1940,2020,"yearL","monthL","dateL","dayL")
30: </script>
31: </body>
32: </html>
This page is very similar to the page listed in ex12-09.htm. The only difference lies in lines 2224. Line 22 is a button with the name "Find The Day." When the user presses this button, the function findDay() is activated in line 23. This function is used to read the year, month, and date from the drop-down boxes. It calculates the corresponding day of the week and returns it to the caller. The caller displays the returned day at the location with id=dayL. We have added this function findDay() at the end of our program file date.js.
Listing: ex12-09.txt - Adding The Function findDay() To date.js
130: function findDay()
131: {
132: // dIndx - Store the Date From Drop-Down Box (Values 0-Max:31)
133: dIndx = document.getElementById("gDate").selectedIndex
134: // mIndx - Store the Month From Drop-Down Box (Values 011)
135: mIndx = document.getElementById("gMonth").selectedIndex
136: // yIndx - Store the Year From Drop-Down Box (Starting from 0)
137: yIndx = document.getElementById("gYear").selectedIndex
138: dateObj = new Date(yIndx+gI_stYear,mIndx,dIndx+1)
139: return(mDay[dateObj.getDay()])
140: }
141:
This function reads the year, month, and date values from the drop-down boxes (see lines 133137). The information is used to declare a date object (dateObj) in line 138. The member function (or method) getDay()returns the day associated with the date object. Finally, the array variable mDay is used to match the names of the weekday. A screen shot of this page is shown in Fig. 12.11. Figure 12.11. ex12-10.htm
|
| Table of Contents | Previous Next |
