Intranet Journal: JavaScript By Example

Basic JavaScript with Examples
A tutorial with reusable code snippets

Page 1 2 3

Displaying page update information

Let's say you have some content you update frequently. Wouldn't it be nice to timestamp the most recent update on your pages? Well, here's how:

Displaying automatic page update information

<HTML>
<HEAD></HEAD>
<TITLE> Displaying Update Info</TITLE>
<BODY bgcolor=ffffff>
<script language="JavaScript">
<!--hide script from old browsers
document.write("<h2>This page has been updated: " +
document.lastModified + "</h2>");
// end hiding -->
</script>
</BODY>
</HTML>

Test This Example

All you needed to do here is use the lastModified property of the document. That's all!

Measuring users' time on a page

This script can tell the visitors of your homepage how much time they have spent on your page. To do that, first we create a function called person_in(). This function creates a new date instance which is called via the onLoad() event handler.

We then create another function called person_out() which is called via onUnload() event handler. This function also creates a new date instance. We then take the difference of the two date instances, divide the result by 1000, and round the result. The reason to divide the result by 1000 is to convert the visited time into seconds. The result is then displayed via an alert() method.

Measuring a user's time on a page

<HTML>
<HEAD>
<TITLE>Detecting User's Time on a Page</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function person_in() {
   enter=new Date();
}
function person_out() {
   exit=new Date();
   time_dif=(exit.getTime()-enter.getTime())/1000;
   time_dif=Math.round(time_dif);
   alert ("You've only been here for: " + time_dif + " seconds!!")
}
</SCRIPT>
</HEAD>
<BODY bgcolor=ffffff onLoad='person_in()' onUnLoad='person_out()'>
</BODY>
</HTML>

Test This Example

Detecting a particular browser

Our next example shows you how to detect a particular browser. As mentioned earlier, this is useful because you could have a page that supports JavaScript for only Netscape 3.0, therefore, you don't want a visitor to visit the page without that browser.

Detecting the appropriate browser

<HTML>
<TITLE>Detecting User's Browser</TITLE>
<HEAD></HEAD>
<BODY BGCOLOR=ffffff>
<SCRIPT Language="JavaScript">
if (navigator.appName == "Netscape"){
   if (navigator.appVersion.substring(0, 3) == "3.0"){
      if (navigator.appVersion.substring(3, 4) == "b"){
         alert('You are using :' + navigator.appName + ' (' +
         navigator.appCodeName + ') ' + navigator.appVersion +
            '\nSorry! You are not using Netscape 3.0+');
         history.back();
      }
   }
}
else {
     alert('Sorry! You are not using Netscape 3.0+');
  }
</SCRIPT>
</BODY>
</HTML>

Test This Example

Here we use the some of the properties of the Navigator object. First we find out if the browser is a Netscape browser. If so, we detect if the version is 3.0. If the version is a beta version, we display the whole browser information with its platform, and alert the user that he or she is not using a Netscape 3.0 browser.

Notice that before we closed the if statement, we used the history.back() statement. It is used so that when the user presses OK on the alert message box, the document automatically takes the user to the previous page. This is useful because sometimes if you run JavaScript 1.1 on Netscape browser 2.0 or earlier, the browser might crash; this will prevent users from crashing their browsers.

Here's another useful tip: You can send the user to a different page if the browser isn't Version 3.0. Instead of the history.back() statement, you need to type the following statement: window.location="myotherpage.html".

This script can also alert visitors that if they want to view this page, they need to acquire the appropriate browser.

Alert: The else statement is not effective unless you use a JavaScript-enabled browser besides Netscape, such as Microsoft's Explorer 3.0.

Page 1 2 3