Page 3 —
Common Programming Mistakes
Most mistakes are just silly syntactic ones. It takes a long time to
remember to close all those quotes, curly braces, and parentheses, but
luckily the automatic JavaScript bug detector catches most of those errors
for you. Though JavaScript bug detectors keep improving as browsers get
more sophisticated, a few bugs still slip through the
cracks. Here are a few common ones to look out
for:
Messing up variable or function
names.
Mistakes with capitalization and pluralization of variable and
function names are annoyingly typical and sometimes the JavaScript
bug
detector fails to catch them. By creating and adhering to a naming
convention for your variables and functions, you can greatly reduce the
number of these mixups. For instance, I name my variables in all lower
case and with underscores in the place of spaces (my_variable,
the_date, an_example_variable), and I use in-fix notation
for my functions (addThreeNumbers(), writeError(), etc.).
I avoid pluralizing anything because I always forget which
variables are plural and which variables aren't.
Accidentally
using reserved words.
Some words can't be used as variables because
they're already in use by JavaScript. For example, you can't have a
variable named "if" because it's actually a part of JavaScript — if you use
"if," you'll wreak all kinds of havoc. While you'd have to be pretty
deranged to name a variable "if," a variable called "document" may be more
tempting. Unfortunately, "document" is a JavaScript object. Another often used, but generally
problematic thing to call a variable is "name"
(form elements have "names").
Naming a variable "name" doesn't always
cause problems, only sometimes, which can be even more confusing — all the
more reason to avoid calling a variable "name."
Unfortunately,
different browsers have different reserved words, so there's no
way to
know exactly which words to eschew. The safest course of action is to
avoid words that are part of JavaScript as well as those found in HTML.
If
you're having problems with a variable and you can't figure out what's
wrong, try renaming the variable. If that works, then you've probably
stumbled across a reserved word.
Remembering that you need two
equals signs in logical tests.
Some browsers catch this error, and some
don't. This is a very common mistake and extremely difficult to catch if
the browser doesn't point it out for you. Here's an example of the
error:
var the_name = prompt("what's your name?", "");
if (the_name = "the monkey")
{
alert("hello monkey!");
} else {
alert("hello stranger.");
}
This code
will throw up the "hello monkey!" alert box regardless of what you type
into the prompt, which isn't what we want. That's because there's only one
equals sign in the if-then statement, which tells
JavaScript that
you want to set one thing equal to another thing. Let's say you type
"robbie the robot" into the prompt. Initially, the_name will be
"robbie the robot." But then the if statement tells JavaScript
that you want to set the_name = "the monkey." So JavaScript
happily follows your command, and sends a "true" message to
the
if-then statement, and the alert box shows up with the "hello
monkey!" message every time.
This insidious bug can drive you belfry
batty. So concentrate on doubling those equals
signs.
Accidentally quoting variables, or forgetting to quote
strings.
This one gets me time and time again. The only way
JavaScript knows the difference between a variable and a string is that
strings have quotes around them and variables don't. Here's an obvious
error:
var the_name = 'koko the gorilla';
alert("the_name is very happy");
This
will produce an alert box that says "the_name is very happy,"
even though
the_name is a variable. This is because once JavaScript sees
quotes around something, it stops thinking about it, so by putting
the_name in quotes, you stop JavaScript from looking it up in its
memory.
Here's a less obvious extension of this bug (which
we saw in Day 3):
function wakeMeIn3()
{
var the_message = "Wake up! Hey! Hey! WAKE UP!!!!";
setTimeout("alert(the_message);", 3000);
}
The problem here is that you're telling
JavaScript to execute alert(the_message) in three seconds. Three
seconds from now, however, the_message no longer exists because
you've exited the function. The solution to this problem is
this:
function wakeMeIn3()
{
var the_message = "Wake up!";
setTimeout("alert('" + the_message+ "');", 3000);
}
By pulling the_message out of
the quotes like this, the command "alert('Wake up!');" is
scheduled by the setTimeout, which is what you
want.
These are just some of the harder-to-debug errors
that might sneak into your code. Once you've found your bugs,
there are good and bad ways to go about fixing them. Lucky for you, I can
give you the benefit of my trials and errors.
