JAVASCRIPT

Debugging in Javascript

Despite its widespread use, there is little support for debugging in Javascript. When scripts get complicated, the debugging process can cause even the most patient programmer to pull out their hair in frustration. Chris Root offers several tools and techniques that just might keep you from going prematurely bald during the debugging process.

Author Info:

By: Chris Root

Poor Best

Rating:

/ 22

February 16, 2005

TABLE OF CONTENTS:

Just as you would troubleshoot anything, if the problem isn't immediately plain to you, you should start at the beginning. If a button click is supposed to call a function, first determine that the call is reaching the function. Javascript, like Java, C, C++, PHP and a lot of other languages use "//"(single line) and "/* */"(multi-line) for commenting code. Commenting is useful for documenting what your code is doing for someone who didn't write it, but it is also useful for keeping some code from executing. Any code or text that is commented is ignored by the Javascript interpreter.

In this case we will comment out everything that is within the body of the function and insert an alert to monitor the value being sent to the function.

<script language="Javascript">
//The Script
function doIt(fName)
{
   alert(fName);
   /*var fObj = document.getElementsByName(fName).item(0);
   if(fObj.value == "")
   {
      fObj.value = 'You're really pushing my buttons!"
   }*/
}

<body>
<form>
<input type="button" value="Do It" onClick="doit('myField')">
<input type="text" name="myField" value="Hello">
</form>
</body>

This script will fail and you will see no alert box. Why? It reflects a very common problem when speeding through writing you code. Javascript, like many other languages, is case sensitive. If you look closely, our onClick handler is calling a function called "doit," but our actual function is called "doIt." The convention (but not the absolute rule for your own names) in Javascript is to capitalize the beginning of each word that is part of the function or object name except for the first one. A good example is document.getElementById("elementid");. Now this might have been our intention in the above example, but mistakes like this can happen easily.

If you had panicked and jumped into the middle of your code, especially if it was more complex than the above example, you may have been tearing your hair out (not an option for us older folk) for hours trying to figure this one out.

Now correct the mistake and then try clicking the button again after reloading the page. You should see an alert that shows you the name of the text field "myField."

Now select the comment characters "/*" and move them to just before the if construct and move the alert line to the line below the first line in the function code and change the argument, as below.

<script language="Javascript">
//The Script
function doIt(fName)
{
   var fObj = document.getElementsByName(fName).item(0);
   alert(fObj);
   /*if(fObj.value == "")
   {
      fObj.value = 'You're really pushing my buttons!"
   }*/
}
</script>

When you run the script by clicking the button you should get an alert that displays the object string for a text box. However, we are using a document method getElementsByName("name"). This method isn't quite like document.getElementById() in that it returns a collection of objects that have the name for which you are looking. You need to use the item() function to retrieve the correct object from the collection. In this case we only have one with the name "myField." Not all browsers currently support or completely implement document.getElementsByName("name"). Implementation problems such as this are commonplace in Web development. If you are just starting out, then believe me, you have many of these wonderful problems (bugs if you will) to live through.

Please note that the "name" attribute for HTML tags is supposed to be depreciated for any further versions of HTML in favor of the "id" attribute. Unfortunately, many browsers will not send data from form controls to the server that do not have a name attribute set. Use both id and name, the document.forms collection, or pass this .form.nameOfTargetObject (nameOfTargetObject being the name of whatever form control you are trying to address in your script) to your scripts when working with form controls.

The code you see below should pass the test.

<script language="Javascript">
//The Script
function doIt(fName)
{
   var fObj = document.getElementById(fName);
   alert(fObj);
   /*if(fObj.value == "")
   {
      fObj.value = 'Your really pushing my buttons!"
   }*/
}
</script>

<body>
<form>
<input type="button" value="Do It" onClick="doIt('myField')">
<input type="text" name="myField" id="myField" value="Hello">
</form>
</body>

We now have a name and id attribute for "myField" which allows us to use the more convenient and well supported document.getElementById(). We can now move to the "if" construct inside our function. Move both sets of comment characters "/*" and "*/"and move the alert inside the if block as shown below.

<script language="Javascript">
//The Script
function doIt(fName)
{
   var fObj = document.getElementById(fName);
   if(fObj.value == "")
   {
      alert(fObj);
      /*fObj.value = 'You're really pushing my buttons!";*/
   }
}

Why is there no alert? That's because we are checking to see if the form field is blank (empty string). Since we have an initial value of "Hello" for our form field, the if construct will not evaluate to true and the code inside the if block will not execute. If that is what you intended, cool, we can move on; otherwise change "==" in the if statement to "!=" which means not equal to.

Next: Are We There Yet? >>