JavaScript Example 1-2
Displaying File Modification Date and URL

Click Here for Previous JavaScript Tutorial Home Click Here for Next

Purpose

When I look at a document on the web I usually like to see how recently it's been updated. With my own documents, for years I would manually insert the modification date each time I edited the file. This example shows how to use JavaScript to automatically display the file's actual modification date and other document attributes. It also illustrates some more advanced JavaScript coding.

This example is based on material in Netscape's JavaScript Reference Manual.

Displaying the Document URL

The URL is one of the many properties of the document object. Reading and displaying it is easy, as the following embedded script shows:

<script type="text/javascript">
<!--  hide from old browsers
  document.writeln("The current URL of this page is: " + document.URL)
// -->
</script>

When executed, this script prints the following line:

Displaying the File Modification Date

In Example 1-1 we used the following bit of code to illustrate the use of the NOSCRIPT tag:

 1:  <script type="text/javascript">
 2:    <!--
 3:    lastmod = document.lastModified     // get string of last modified date
 4:    lastmoddate = Date.parse(lastmod)   // convert modified string to date
 5:    if (lastmoddate == 0) {               // unknown date (or January 1, 1970 GMT)
 6:       document.writeln("Last Modified: Unknown")
 7:    } else {
 8:       document.writeln("Last Modified: " + lastmod)
 9:    }// -->
10:  </script>
11:  <noscript>
12:    Updated November 19, 2000
13:  </noscript>

Line 3 starts us off by grabbing the aptly named document.lastModified property and assigning it to a variable lastmod. Note that no declaration for lastmod was necessary. This is the value we want to display. Everything else is just cruft to make the display readable. The value at this point is a string, and if you print it out here's what you get:

Sometimes your browser doesn't know the document's modified date. In that case, the lastModified property will read, January 1, 1970 GMT, and we wouldn't want that, would we? Hence line 4. The parse() method of the Date class takes a date string (such as "January 1, 1970") and returns the number of milliseconds since January 1, 1970, 00:00:00 (local time). That value is zero if the modified date is unknown. Note that the value assigned to lastmoddate is an integer, not a string and not a Date object.

Lines 5 through 9 should be clear enough. They illustrate the facts that

Parsing the Date

Different browsers will format the modified date in different ways. Netscape will display something like Monday, November 20, 2000 11:44:41, while IE will display 11/20/2000 11:44:41 for the same page. If you want control over how the date is formatted you have to parse it yourself. This would not be worth bothering about for something is trivial as displaying the file modification date. However it may be useful in other circumstances and the code is a good exposure to more nuts and bolts JavaScript language features.

The following code is a variation of the previous example.

    <script type="text/javascript" language="JavaScript1.1">
      <!-- 
      function dayofWeek(day)
      {
       switch( day ) {
       case 0: s = "Sunday"; break;
       case 1: s = "Monday"; break;
       case 2: s = "Tuesday"; break;
       case 3: s = "Wednesday"; break;
       case 4: s = "Thursday"; break;
       case 5: s = "Friday"; break;
       case 6: s = "Saturday"; break;
       default: s = "Unknownday"
       }
       return s;
      }
      function monthofYear(mon)
      {
       switch( mon ) {
       case 0: s = "January"; break;
       case 1: s = "February"; break;
       case 2: s = "March"; break;
       case 3: s = "April"; break;
       case 4: s = "May"; break;
       case 5: s = "June"; break;
       case 6: s = "July"; break;
       case 7: s = "August"; break;
       case 8: s = "September"; break;
       case 9: s = "October"; break;
       case 10: s = "November"; break;
       case 11: s = "December"; break;
       default: s = "Unknownmonth"
       }
       return s;
      }
      
      lastmod = document.lastModified     // get string of last modified date
      lastmoddate = Date.parse(lastmod)   // convert modified string to date
      if(lastmoddate == 0){               // unknown date (or January 1, 1970 GMT)
         document.writeln("Last Modified: Unknown")
      } else {
1:      d = new Date(lastmod);
2:      document.write("Day=", day=dayofWeek(d.getDay()), ", ");
3:      document.write("Month=", mon=monthofYear(d.getMonth()), ", ");
4:      document.write("Date=", dte=d.getDate(), ", ");
5:      document.write("Year=", year=d.getYear(), "<br>");
6:      document.write("Last Modified: ", day + ", " + mon + " " + dte + ", " + year);
      }// -->
    </script>

Here is the result of executing the JavaScript above:

Most of this is pretty intuitive. The action of functions dayofWeek and monthofyear is elementary: they take integer arguments for the day of week (0..6) and month (0..11) and return the appropriate string. Note how much like C is the function declaration, return and call syntax, except that variables are not declared. Likewise notice the C-style switch statement.

The interesting stuff is in the else clause at the bottom, in the lines numbered 1 through 6. Line 1 constructs a new Date object, initialized with the lastModified date. This is so we can use the built-in Date methods, getDay(), getMonth(), getDate(), and getYear() in lines 2 through 5 to pull out the pieces of the date.

Note that a <br> is written in line 5. Could we have achieved the same effect by using document.writeln() instead?  No.  The extra newline generated by writeln() would be ignored by the HTML parser, but the <br> tag causes an actual newline in the output.

Here are some other things to notice:

Resources

Netscape JavaScript Developer's Guide
See the section on Variables.
Netscape JavaScript Reference Manual
Refer to the sections describing the document object and the Date object.
 
Click Here for Previous JavaScript Tutorial Home Click Here for Next