Quick & easy JavaScript programs

The following are some quick and easy things that you can do to enhance your pages without knowing much about JavaScript.

Displaying "Last Modified" date on your Web pages

Stick the following script at the end of your Web pages to automatically display the date when they were last modified. You can also put your initials between the quotation marks, on line 3 to have them show up right after the date. 

<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- begin hiding...
var Initials = "EdG" //-- Put your initials between the quotes
document.write("Last Modified: ")
document.write(document.lastModified)
document.write(" " + Initials)
// -- stop hiding -->
</SCRIPT>

The lastModified document property actually returns the date and time, in the form of MM/DD/YY hh:mm:ss. To display only the date, we could apply the substring method (function) to the lastModified character string, namely: document.lastModified.substring(0,8)

Take people to your new home

The following script will come in handy to redirect people to your new home page. 

<HEAD>
   <TITLE>Redirection Example</TITLE>
   <SCRIPT LANGUAGE="JAVASCRIPT">
   <!-- begin hiding...
   function redirect() {
      if (confirm('We have moved. Click OK to go to our new home')) {
         location="http://www.accc.uic.edu/itl/";
      }
   }
   // -- stop hiding -->
   </SCRIPT>
</HEAD>
<BODY onLoad="redirect()">

Confirm returns true if you click the OK button, and false if you press Cancel. The if statement will only let the location assignment redirection execute if Confirm returns true. Notice how the redirect() function is defined in the <HEAD> portion of the page. The onLoad event is used in the <BODY> tag to trigger a call to redirect() as soon as the page finishes loading.

Warn people before clicking on a link

In this example, we make use of the onClick event handler to prompt the users for a confirmation before chasing a given link. The link might require Java or a special Plug-in that the users might not have. Note that since we are using an event handler, the following is just plain HTML code embedded anywhere in the document, i.e. without the need for a <SCRIPT> tag.

<a href="some-dangerous-URL" onClick="return confirm('Are you sure you want to visit this site?')">Bleeding Edge Site</a>

Providing additional navigation buttons

JavaScript provides a variety of navigation controls. You could use the following script to add custom Back and Forward buttons anywhere on your document; these buttons would carry out the same function and their counterparts found on the toolbar. Again, since we are using an event handler, the JavaScript code does not need to be enclosed within the <SCRIPT> tag. 

<form>
  <input type=button" value="<- 2 Pages" onClick="history.go(-2)">
  <input type=button" value="Previous Page" onClick="history.go(-1)">
  <input type=button" value="Next Page" onClick="history.go(1)">
  <input type=button" value="2 Pages ->" onClick="history.go(2)">
</form>

The onClick event handler tells the browser what to do when the user clicks on a button: the browser executes history.go to go through the history list. -2 means go back two (2) pages, 2 means go forward two (2) pages, and so forth.

Status Bar Messages

Status bar messages is something that people use a lot, mostly because they are easy to implement. In this example, we use the onMouseOver event to trigger the time when to write on the status bar. When the mouse pointer moves over the link, the status bar message will be displayed. windows.status requires that we include the return true statement. 

<a href=hell.html" 
   onMouseOver="window.status='This link will take you to hell';
   return true">Hell Web Page</a>

One link to update two frames 

<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- begin hiding...
function updateFrames(){
    parent.frame1.location = 'http://...'
    parent.frame2.location = 'http://...'
}      
// -- stop hiding -->
</SCRIPT>            
<a href='javascript:updateFrame()'>a some link</a>

Let's try it

Looking at the browser characteristics 

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from old borrowers 
// -- Traverse the navigator object and display its properties 
for (prop in navigator) {
    document.write("&nbsp;&nbsp;" + navigator 
         + "." + prop + " = " + navigator[prop] + "<br>");
}              
// -- End the hiding here. -->
</SCRIPT>

Let's try it.

Likewise, one can easily test for browser characteristics, like browser name, version, platform. Here are some examples: 

if (navigator.appName == "Netscape") {
   if (navigator.appVersion.indexOf("Win95") != -1) {
      if (navigator.appVersion.indexOf("4") != -1) {
         // -- we have Nestcape 4.0 or later on Win95
      }
   }
}

 

JavaScript Seminar Home | Previous | Next

Last Modified: March 2, 2001 — UIC Instructional Technology Lab