Bod's JavaScript FAQ

Most everyone who surfs the web has heard of JavaScript, and many even know what it is - but for a lot of people it is just "that thingy which makes pages interactive, or something like that". Well, hopefully I will be able to take this "thingy" and help you gain an understanding of it. I don't profess to be an expert in JavaScript (far from it), and I know there are many other JavaScript tutorials out there providing far more in depth information than this one (see my Link Search and select JavaScript from the drop-down list for some examples), but this tutorial should at least whet your appetite to learn more.

Before we can proceed any further, however, we must determine whether our browser is set to allow JavaScript to function. If you can see the Congratulations! message in the next line then all is OK ...

(PS - if you're interested in how we do the line above then the code is shown below - line numbers are for clarity only, they serve no function) ...

1  <script language="javascript">
2  <!--
3  document.write("<p align=\"center\"><font color=\"#800000\">Congratulations!
    Your browser is JavaScript-enabled</font></p>");
4  //-->
5  </script>
      

Now, let us consider why we should use JavaScript - what do we gain from it? A well-constructed page uses JavaScript to perform client-level form validation so that any form data sent to an ASP script is structured in the necessary way. This means that the level of server-side validation may be reduced which means less server loading and hence faster operating pages. But what is client-level form validation, and how do we do it? Let's consider the simple form below ...

Well then, did you try it out? What happened? If all of the information you entered was valid then you probably saw your full name appear in the last box. If any of the information was invalid then you will have seen a pop-up box appear telling you what the error was. This is an example of JavaScript in action. The full code to do this is shown below (line numbers are shown for clarity only, they do not perform any function) ... and this code is called from within the <form> tag using onSubmit="return chkmyform(this);" ...

1 <script language="javascript">
2 <!--
3  function chkmyform(theForm) {
4    var validchars =
      "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789.-'";
5    var allvalid = true;
6    for (var i=0; i<theForm.length-2; i++) {
7      var theElement = theForm.elements[i];
8      var chkdata = theElement.value;
9      if (chkdata.length == 0) {
10       alert ("Form element '" + theElement.name + "' has no data in it.
          Please enter the required information.");
11       theElement.focus();
12       allvalid = false;
13       break;
14     } else {
15       var badchars = "";
16       for (var j=0; j<chkdata.length; j++) {
17         if (validchars.indexOf(chkdata.charAt(j)) == -1) {
18           badchars += chkdata.charAt(j);
19         }
20       }
21       if (badchars.length > 0) {
22         alert ("Form element '" + theElement.name + "' contains the invalid
            following invalid characters ...\n " + badchars);
23         theElement.focus();
24         allvalid = false;
25         break;
26       }
27     }
28   }
29   if (allvalid) {
30     document.myform.FullName.value = "Your full name is ... " +
        document.myform.FirstName.value + " " + document.myform.LastName.value + ".";
31   }
32   return false;
33 }
34 //-->
35 </script>
      

Still here? :O) Looks pretty tricky, doesn't it? Well, in reality it's not - all we need to do is go through it step-by-step whilst keeping in mind the Document Object Model. The what? I hear you ask. The Document Object Model basically defines the structure of a web page, where certain elements have a pre-determined set of parameters. In essence ...

A (browser) window contains a document (web page) which contains certain items (e.g. forms), which contain elements which have certain properties (e.g. type, name, value). Therefore the value of a text box in a form can be located by the JavaScript structure window.document.formname.elementname.value; So, now that we know this then we have a means of navigating around the elements of a web page. However, don't just take my word for it - see the Netscape JavaScript Reference for the definitive word on this subject.

That was an example of a basic form involving only 2 text boxes (and a results box). However, if you click Here you can see an example of a generic form test script in action. If you save the file to your local computer it will also run equally well.