Part X
Troubleshooting: What To Do If . . .
You can't make an omelet without breaking some
eggs, as the saying goes. By the same token, you
can't create a JavaScript-enabled Web page without
making at least a few syntax or logic errors.
Fortunately, most of the errors you'll make will
fall into one of the categories described in this
part.
Although the troubleshooting hints and debugging
tips you find in this part don't represent the
definitive causes of all errors (lots of
ways exist to make errors; I have faith that you'll
even invent a few yourself!), the hints in this
part can give you a head start in tracking down
the problems you're most likely to encounter.
In this part . . .
- Debugging your scripts
- Tracking down logic errors
- Deciphering the JavaScript interpreter's error
messages
Some HTML Elements Don't Display
First, note exactly what HTML elements appear
on-screen (and which ones don't). For example,
if only the first two HTML elements that you defined
appear, begin checking your source code at the
statement that defines the second element. Then
check the following items:
- Check to see whether the last displayed element's
closing HTML tag is misspelled or missing
- Check to make sure that no closing angle brackets
(>) are missing
- Check to see that all your form element definitions
are embedded inside the <
FORM>...</FORM>
tags
Your JavaScript Script Page
Doesn't Execute
If you load a JavaScript-enabled Web page into
either Navigator 3.0 or Internet Explorer 3.0
and the script doesn't execute, chances are that
JavaScript support has been turned off in your
browser. To turn it on again, follow these steps:
Navigator
To turn on JavaScript support:
- Choose Options-->Network
Preferences-->Languages.
- Make sure that the check box next to
Enable JavaScript is checked.
Internet Explorer
To turn on JavaScript support:
- Choose View-->Options-->Security.
- Make sure that the check box next to
Run ActiveX scripts is checked.
Your JavaScript Code Has a
Logic Error
A logic error (otherwise known as a human error!)
isn't always characterized by anything so drastic
as an error message; sometimes it takes a more
subtle form. Incorrect assumptions can lead to
a calculation that's just a little off in some
circumstances, for instance -- and faulty reasoning
can yield an incorrect result if a user does something
just a tad unexpected.
The best way to unearth logic errors is to have
someone else try out your Web page. By the time
you finish creating your scripted Web page, you're
so familiar with how you expect the page to behave
that you have a tendency to miss things that a
fresh pair of eyes would spot in a heartbeat.
In addition, you may find these hints helpful:
- Be sure that you understand what it is
you want to do. If you haven't clarified
the results you expect from your scripts, you
can't determine whether or not (or how) they're
in error.
- Break large chunks of logic into separate
functions. In a perfect world, the functions
you create will perform a single conceptual
task, like determining if a value exists or
calculating a number. In real life, though,
you may find yourself tempted to add in everything
but the kitchen sink until your functions are
a whole page long and do lots of completely
unrelated things. Resist that temptation! Small
functions are easier to debug than large ones,
for two reasons: They're easier to read, and
they can be tested separately.
- Display variable values with the
alert()
method. Pop up a window at strategic places
in your script to display the values of your
script's variables. Often, this technique can
help you pinpoint where your logic begins to
take a wrong turn.
You Get an Error Message
The errors in this section are generated by Navigator's
version of the JavaScript interpreter. Internet
Explorer's JavaScript implementation generates
similar errors -- the format is slightly different,
but the information they provide is pretty much
the same. Both browsers display the approximate
line number of the error encountered and a little
arrow pointing straight at the offending keyword
or symbol.
The first thing to do when you get an error is
to look at the statement corresponding to the
line number in your file. Does anything immediately
jump out at you? (If not, don't despair; often,
the JavaScript interpreter displays the line number
of the point at which it couldn't go on -- meaning
that the real problem is a few lines back.)
Next, find the line in your source file that
contains the character or keyword that the error
suggests (it may be on a different line than the
displayed line number) and examine it for missing
punctuation, misspellings, and so on.
Still no luck? Then read on for real-life solutions
to the most common JavaScript errors.
Take a note of when the error appears. Does the
error appear as soon as the page loads? If so,
the error is probably in a line before the <FORM>...</FORM>
declaration. Does the error appear after you click
on a button or enter a text value? If so, the
first place to look is in the event handler associated
with that button or text element.
The is not a function
error
<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showIt(inputString) {
- document.writeln(inputString.bold())
- document.close()
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="myButton"
VALUE="Press me"
onClick="showIt(666)">
In the code sample above, line six is getting
the bad rap:
document.writeln(inputString.bold())
In reality, it's the way that line six is
being called that's the problem. Take
a look at the last line, where showIt(
) is being passed the value of 666.
As soon as showIt( ) receives
666, it tries to call a string
method (bold( )) on it -- and
that dog won't hunt. The answer? Pass showIt(
) a string value of "666"
instead of the numeric value 666.
If you really want to be able to send numbers
to this function, you can insert a couple
of lines similar to the following at the beginning
of showIt( ):
var tempValue = "" // tempValue
is a string
// assign tempValue a string version of
the number
tempValue += inputString
// now you can do this: tempValue.bold()
The is not a error
error
This one's pretty easy to figure out! Take
a look at the figure below and then at the
code snippet that produced the error:
<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function compute(a, b, c) {
return (a * b * c)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="myButton"
VALUE="Press me"
onClick='compute("scooby", "dooby",
"doo")'>
Line six looks like this: return (a
* b * c). The error message says that
b is not a number, and if you
trace down to where line six is being called,
you'll see that b isn't
a number -- it's a string. (So are a
and c!) You can fix this problem
either by calling compute( )
with numbers or by using the eval( )
function inside compute( ) to
change strings into numeric values (before
any computations take place).
The is not defined
error
If you try to call a function that the JavaScript
interpreter doesn't recognize, likely as not
you'll get this error:
Here's the code responsible for the error
noted in the preceding figure. Take a close
look at line 11, the line that the JavaScript
interpreter is indicating:
<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function NoSuchFunction() {
alert("Executing NoSuchFunction...")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="myButton"
VALUE="Press me"
onClick='noSuchFunction()'>
Line 11 corresponds to the <FORM>
statement. On close inspection, there doesn't
appear to be anything wrong with it. There
is something wrong with one of the
form elements, though -- myButton.
The function myButton's onClick
event handler is calling is spelled noSuchFunction(
), and it should have been spelled
NoSuchFunction( ).
The missing variable
name error
<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calculateYearsLeft() {
var 2retirementAge = 65
Well, line six does so have a variable
name. The problem is that it starts with a
number -- and JavaScript variables must begin
either with alphabetic characters or an underscore
(_). Change the variable name to retirementAge
and this error disappears.
The missing )
after argument list error
<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showIt(a, b, c) {
alert("a is " + a, "b is
" + b, "c is " + c
}
As you can probably see right off the bat,
it's line six that has the problem, not line
seven; line six is missing a closing parenthesis
at the very end. The corrected statement looks
like this:
alert("a is " + a, "b
is " + b, "c is " + c)
The missing )
after formal parameters error
<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showIt(a, b, c {
This time the error message is dead on: line
five is missing a ). Here's
what line five should look like:
function showIt(a, b, c) {
syntax error
A syntax error is usually caused by misplaced
punctuation: a curly brace, parenthesis, comma
-- that type of thing. Take a look at the
following code snippet and then check out
the JavaScript interpreter's reaction.
<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function tryme() {
alert('hi')
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
The error message suggests that line 12 is
the culprit, and yet it's also pointing its
bony finger at a closing curly brace. Well,
as you can see in the preceding code listing,
line 12 doesn't contain a curly brace; but
line 8 does -- and there's no corresponding
opening brace for it, either. That's the culprit!
The unterminated
string literal error
On line eight, you can see that the string
being sent to alert( ) contains
only one double quote, before Thanks.
Putting a closing double quote after me.
will fix this error right up.
<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="myButton"
VALUE="Press me"
onClick='alert("Thanks for pressing
me.)'>
JavaScript Statements Display
If your JavaScript statements are splashed
on your Web page:
- Check to make sure that the displayed
statements are surrounded by
<SCRIPT>...</SCRIPT>
tags.
- Note the first word in the statement that
appears and find the line that contains
that word in your .html source file; then
check the preceding line for anything that
looks suspicious.
- Check for unmatched double quotes.
|
