Experiment 11

Experiment 11
— print (last updated: Nov 11, 2009) — print

The purpose of this experiment is to illustrate the use of the JavaScript debugger in the Firefox web browser. HTML-Kit's error messages for JavaScript code are often uninformative. Internet Explorer has no built-in JavaScript handling, but Firefox has very good built-in JavaScript handling.

As an example, we'll use the square root computation program from .

<html>
<head>
<title>Square from Hyperlink</title>
<script type="text/javascript">
<!--
function do_sqr()
{
  var output = document.getElementById("output")   // get output paragraph
  var str = prompt( "Enter a number", "" )   // prompt
  var num = parseFloat(str)                  // string -> numeric
  if (isNaN(num)) {
    alert( "Inputs Cancelled/Invalid" ) 
  } else {
    var result = num * num                           // compute
    output.innerHTML = num + " squared is " + result  // replace contents
  }
}
// -->
</script>
</head>

<body>

<a href="javascript:do_sqr()">Compute A Square</a>

<p id="output">Answer</p>

</body>
</html>

Create this program in HTML-Kit and save it, say, as sqr.html in your favorite location, like the Desktop. Verify the correctness by running it once.

Then, one at a time, make the following mistakes in this program and run HTML-Kit to see how it behaves

Misspell the isNaN function:
```
if (isNan(num))
```

Misspell the getElementById function:

var output = document.getElementByID("output");

Misspell the do_sqr function call in the hyperlink:
```
href="javascript:dosqr()"
```

Omit the last "+" in the output operation:

output.innerHTML = num + "<sup>2</sup> = " result

For mistake 1, 2 and 4, HTML-Kit points you to the right line, but the error message is confusing. For mistake 3, the error message completely misses the mark.

Using Firefox's (JavaScript) Error Console

Put the program back to its original state and save it as sqrt.html to somewhere (like the Desktop).

Open up the program in Firefox. Presumably on a Windows system, you can do this by:

Right-click the HTML document you want to open and select Open With.
Select Firefox from the list of choices.

Alternatively, open the program HTML document by starting Firefox, selecting

File Open File

and navigating to the document.

Once Firefox is running, open the Error Console window via:

Tools Error Console

At this point you should have 3 windows at your disposal:

HTML-Kit, serving as the editor
the Firefox browser to render the document
the Firefox Error Console serving as the JavaScript debugger

For each of the above mistakes, do these steps:

Make the mistake in HTML-Kit.
Save the changes.
Refresh the Firefox Browser
Activate the hyperlink (if necessary) and monitor the feedback in the JavaScript console

Firefox's Error Console gives much better information about the mistakes than HTML-Kit.

Errors Firefox cannot identify

For better or worse (mostly worse in your situation), the JavaScript language supports the creation of arbitrary properties for most objects. The significance is that the "error"

output.innerHMTL = ...

is not detected by JavaScript per se. We meant to type "innerHTML", but transposed two characters. The mistake will go unreported and most likely something will misteriously not work as intended.

Experiment 11 — print (last updated: Nov 11, 2009) — print

Using Firefox's (JavaScript) Error Console

Errors Firefox cannot identify

Experiment 11
— print (last updated: Nov 11, 2009) — print