cs335 Notes

CMPS 335 Advanced Web Publishing JavaScript Programming

[Working with Windows] [Working with Dates] [Creating a Calendars]
Working with Windows

Window Properties and Window Methods

   Window Property        Description
  ------------------------------------------------------------------
   document          A reference to the Document object
   frames            An array listing the frame objects in a window   
   history           A reference to the History object

   Window Method          Description
  ---------------------------------------------------------------------
   alert(message)    Displays a window with a message and an OK button
   confirm()         Displays a window with OK and Cancel buttons
   prompt()          Displays a window for a user to enter information
   open()            Opens a new window
   close()           Closes a window
   setInterval(function, milliseconds)  Executes a function after a
                        specified amount of time
   setTimeout(function, milliseconds)   Executes a function after a
                        specified amount of time

The setTimeout() and setInterval() can have the following syntax:

var variable = setInterval("code", millisecond);
var variable = setTimeout("code", millisecond);

The code argument must be enclosed in double or single quotes and can be a segment of JavaScript statements or a function call. The variable declaration assigns a reference to the setInterval() or setTimeout() method to a variable. These variables can be used in the clearInterval(variable) and clearTimeout(variable) methods. The setInterval() and setTimeout() methods are used extensively when creating animation.

The code with the setTimeout() method executes only once. The setInterval() method is similar to the setTimeout() method, except that it repeatedly executes the same code after being called only once.

The window.open method is a convenient way to open new windows to display additional information without clearing the current window. The window.close is used to close the windows. We can easily create a new window of any size at any location by using one of the following formats:

open("URL","targetName","Options");
window.open("URL","targetName","Options");
windowObject = window.open("URL","targetName","Options");

where

URL represents the address of a Web page or image file to be loaded into the new window.
targetName is a text string to identify the window to any link on the page that has a TARGET attribute.
Options is a list of comma-separated features that control the appearance of the new window. These features include left=integer, top=integer, width=integer, height=integer, location=1 or 0, toolbar=1 or 0, menubar=1 or 0, status=1 or 0, and scrollbars=1 or 0. You may use yes or no instead of 1 or 0. Do not include any spaces between the option features.
windowObject is a global variable name used to identify the opened window object.
Either double-quotes or single-quotes can be used to enclose the function parameters.

The only problem with the method 1 syntax is that you cannot easily close the window by using a script. Using the method 2 syntax, you can identify the new window with a global variable name and refer to it to close the window at a later time. The window object refers to the current window and it does not require the window. prefix when referring to its properties and methods.

The following are some examples of the window opening and closing statements:


  open("cat2.html","catWin","width=550,height=320,left=70,top=100");
  window.open("cat2.html","catWin","width=550,height=320,left=70,top=100");
  catWin = window.open("cat2.html","cat2","width=550,height=320,left=70");
  catWin.close();

Example of Opening and Closing a Window

     <script language=JavaScript type=text/javascript>
   function openWindow() { 
     catWindow = window.open('cat2.html','catWin', 
      'height=150,width=200,left=50,top=70,toolbar=yes,scrollbars=1');
   }
   function closeWindow() {
     if (catWindow && !catWindow.closed) {
        catWindow.close();
     }
   }
   </script>
   </head>
   <body link=red vlink=blue>
   <center><a href="javascript:openWindow()">[Open Window]</a>
       <a href="javascript:closeWindow()">[Close Window]</a>
   </center>

Examples: [Open A Window] [Close A Window] [Open Multiple Windows]

Working with Dates and Times

The Date object is a built-in JavaScript object that enables you to work conveniently with dates and times. You can create an instance of Date object using the new keyword as shown in the following examples:

If no parameters are used, the current date is stored in the object. The variable today contains a number equal to the number of milliseconds that have elapsed since midnight of January 1, 1970. After you have created an instance of Date object, you can use a variety of methods to manipulate dates and times. The following is a list of some important methods of the Date object:

getDate()
Returns the day of the month of a Date object (a number from 1-31)
getDay()
Returns the day of the week (a number from 0-6, 0 for Sunday, ...)
getFullYear()
Returns the year in four-digit format
getHours()
Returns the hour (0-11 for AM hours, 12-23 for PM hours)
getMonth()
Returns the month (a number for 0-11, 0 for January, ...)
getTime()
Returns the time as the number of milliseconds since January 1, 1970.
toGMTString()
Returns the date and time as text using the Greenwich Mean Time.
toLocaleString()
Returns the date and time as text using the local time.
parse()
Converts a date string to a number in milliseconds since 1/1/1970.
UTC()
Converts a DATE value in milliseconds to a date string in GMT time.

Examples


  <script language=JavaScript>
  birthDate1 = new Date();
  document.write("<br>"+birthDate1);
  birthDate2 = new Date("December 10, 1982");
  document.write("<br>"+birthDate2);
  today = new Date();
  Date1 = today.getDate();
  document.write("<br>"+Date1);
  Date2 = today.getDay();
  document.write("<br>"+Date2); 
  Date3 = today.getMonth();
  document.write("<br>"+Date3);
  Date4 = today.getFullYear();
  document.write("<br>"+Date4);   
  Date5 = today.getTime(); 
  document.write("<br>"+Date5);
  Date6 = today.getHours();
  document.write("<br>"+Date6);
  Date7 = today.toGMTString();
  document.write("<br>"+Date7); 
  Date8 = today.toLocaleString();  
  document.write("<br>"+Date8);
  </script>
  
  Output of the script
  Tue Nov 7 17:28:02 CST 2000
  Fri Dec 10 00:00:00 CST 1982
  7
  2
  10
  2000
  973639682600
  17
  Thu, 09 Nov 2000 15:17:58 GMT  (Netscape)
  Thursday, November 09, 2000 09:17:58  (Netscape)
  Thu, 9 Nov 2000 15:17:58 UTC  (Internet Explorer)
  11/09/2000 15:17:58  (Internet Explorer)

The Days of the Week and the Months of the Year

The following code shows an example of converting a number (0-6) obtained from the getDay() method and a number (0-11) obtained from the getMonth() method to the textual day of the week (eg., Sunday) and the textual month of the year (eg., January):


    <script language=JavaScript>
    dayName = new Array("Sunday","Monday","Tuesday","Wednesday",
          "Thursday","Friday","Saturday");
    mothName = new Array("January","February","March","April","May","June",
          "July","August","September","October","November","December");   
    today = new Date();
    </script>
    </head>
    <body>
    <script language>
    document.write("<h2>Today is " + dayName[today.getDay()] + "," +
         montthName[today.getMonth()] + " " + today.getDate());
    </script>

Click [Open Window]
Click [Close Window] or the Close button (X) of the new window to close the window

Creating a Clock

The following code can be used to add a time clock to a Web page. The setInterval() method of the window object is used for scheduling a task to be executed repeatedly with a given delay between repetitions. It is similar to the setTimeout() method that schedules a task to be executed once after a given delay.


   <html>
   <head>
   <script language=JavaScript>
     function showClock() {
       var now = new Date();
       document.clock.datetime.value = now.toLocaleString();
     }
   </script>
   </head>
   <body onLoad="setInterval('showClock()',1000);">
   <center>  
   Date and Time
   <form name="clock">
     <input name="datetime" size=45> 
   </form>
   </center>
   </body>
   </html>

Click [Show Clock]
Click [Close Clock] or the Close button (X) of the clock window to close

Creating a Calendar

The script below creates the following monthly calendar:


    <script language=JavaScript>
      dayInfo = new Array;
      dayInfo[3] = "CMPS 335 Quiz 2";
      dayInfo[14] = "CMPS 297 Test 2";
      dayInfo[20] = "CMPS 335 Test 2";
      dayInfo[23] = "Thanksgiving Holiday";
      dayInfo[24] = "Thanksgiving Holiday";

      function showInfo(thisDay) {
       document.calendar.dateInfo.value = dayInfo[thisDay]
      }
    </script>
    </head>
    <body link=red vlink=blue>
    <table cellspacing=2 cellpadding=2 align=left>
      <tr>   
        <td colspan=7 align=center><font size=+1>November 2000</font></td>
        <td rowspan=8>  </td>
      </tr>                          
      <tr align=right>   
        <th>S</th> <th>M</th> <th>T</th> <th>W</th> 
        <th>T</th> <th>F</th> <th>S</th>  
      </tr>
      <tr align=right>
        <td colspan=3> </td>
        <td>1</td> <td>2</td> 
        <td><a href="javascript:showInfo(3)">3</a></td>
        <td>4</td>
      </tr>
      <tr align=right>
        <td>5</td> <td>6</td> <td>7</td>
        <td>8</td> <td>9</td> <td>10</td> <td>11</td>
      </tr>
      <tr align=right>
        <td>12</td> <td>13</td>
        <td><a href="javascript:showInfo(14)">14</a></td>
        <td>15</td> <td>16</td> <td>17</td> <td>18</td>
      </tr>
      <tr align=right>
        <td>19</td>
        <td><a href="javascript:showInfo(20)">20</a></td>
        <td>21</td> <td>22</td>
        <td><a href="javascript:showInfo(23)">23</a></td>
        <td><a href="javascript:showInfo(24)">24</a></td>
        <td>25</td>
      </tr>
      <tr align=right>
        <td>26</td> <td>27</td> <td>28</td>
        <td>29</td> <td>30</td>
      </tr>
    </table>     
    <br><br><form name="calendar">
      <textarea rows=7 cols=23 name="dateInfo" readonly wrap>Click on
      any underlined day to display activities
      </textarea>
    </form>

[Show Calendar] [Close Calendar]

Go to [Working with Windows} [Working with Dates] [Creating Calendars]
Return to CMPS 335 Main Page
Return to Web Site Home Page