JavaScript Example...

You may think that the "left navigator" (at the left of the page) and the "main navigator" (at the top of the page) on this web site, uses JavaScript - right? Wrong. It actually uses the CSS hover property of anchor tags (<a href=...>) to perform the rollovers.

The only place JavaScript has been used on this site, is the "Contact | Online Request" page. This contains some client-side JavaScript validation to ensure that the data is valid before posting to the server. Otherwise, server-side validation would be required, which is much slower and the information needs to be posted each time to perform the validation. On a site which contains a lot of server-side processing of (for example) forms, processing power is spent validating user input rather than serving pages to web users.

JavaScript can also be used to create DHTML - a simple example may be the validation of an email address, the formatting of a date or even the modification of user input as they type (see below ¹). The example below is coded using the following:

  <script language="JavaScript">
  <!--
  function calcName() {
     var theName = document.jsform.name.value;
     document.jsform.nameuc.value=theName.toUpperCase();
     return false;
  }
  //-->
  </script>

  ...

  <form name="jsform" onsubmit="false;">
      Your name: <input name="name" onchange="calcName()" type="text">
      In uppercase: <input name="nameuc" type="text" disabled>
  </form>

Your name:
In uppercase:

When you enter your name, it simply triggers an "onKeyPress" event (a DHTML property of the INPUT field) and causes a small amount of JavaScript to run, displaying your name in uppercase letters below.

JavaScript can be as simple as the above example or as complex as an online shopping cart.

1 -- This is a very basic example of JavaScript but it demonstrates quite well the differences in browser versions. If you are using Netscape, then the second input box will only update when focus is removed from the first (hitting the tab key). While with Internet Explorer, it will update as you type. Both browsers will not update the second input field, while the backspace key is hit.