Sams Teach Yourself JavaScript in 24 Hours

Avoiding Bugs

A bug is an error in a program that prevents it from doing what it should do. If you've tried writing any scripts on your own, you've probably run into one or more bugs. If not, you willno matter how careful you are.

Although you'll undoubtedly run into a few bugs if you write a complex script, you can avoid many others by carefully writing and double-checking your script.

Using Good Programming Practices

There's not a single programmer out there whose programs always work the first time, without any bugs. However, good programmers share a few habits that help them avoid some of the more common bugs. Here are a few good habits you can develop to improve your scripts:

• Format your scripts neatly and try to keep them readable. Use consistent spacing and variable names that mean something. It's hard to determine what's wrong with a script when you can't even remember what a particular line does.

• Similarly, use JavaScript comments liberally to document your script. This will help if you need to work on the script after you've forgotten the details of how it worksor if someone else inherits the job.

• End all JavaScript statements with semicolons. Although this is optional, it makes the script more readable. Additionally, it might help the browser to produce meaningful error messages.

• Declare all variables with the var keyword. This is optional in most cases, but it will help make sure you really mean to create a new variable and will avoid problems with variable scope.

• Divide complicated scripts logically into functions. This will make the script easier to read, and it will also make it easy to pinpoint the cause of a problem.

• Write a large script in several phases and test the script at each phase before adding more features. This way, you can avoid having several new errors appear at once.

Avoiding Common Mistakes

Along with following good scripting practices, you should also watch for common mistakes in your scripts. Different people make different mistakes in JavaScript programming, but the following sections explore some of the most common ones.

Syntax Errors

A syntax error is an incorrect keyword, operator, punctuation mark, or other item in a script. Most often, it's caused by a typing error.

Typical syntax errors include mistyped commands, missing parentheses, and functions with the wrong number of arguments. Syntax errors are usually obviousboth to you when you look at the script and to the browser's JavaScript interpreter when you load the script. These errors usually result in an error message and can easily be corrected.

Assignment and Equality

One of the most common syntax errors made by beginning JavaScript programmers is confusing the assignment operator (=) with the equality operator (==). This can be a hard error to spot because it might not result in an error message.

If you're confused about which operator to use, follow this simple rule: Use = to change the value of a variable, and use == to compare two values. Here's an example of a statement that confuses the two:

If (a = 5) alert("found a five.");

The statement looks logical enough, but a = 5 will actually assign the value 5 to the a variable rather than compare the two. The browser usually detects this type of error and displays an error message in the JavaScript console, but the opposite type of error (using == when you mean =) may not be detected.

Local and Global Variables

Another common mistake is confusing local and global variables, such as trying to use the value of a variable that was declared in a function outside the function. If you actually need to do this, you should either use a global variable or return a value from the function.

Using Objects Correctly

Another common error is to refer to JavaScript objects incorrectly. It's important to use the correct object names and to remember when to explicitly name the parent of an object.

For example, you can usually refer to the window.alert() method as simply alert(). However, there are some cases when you must use window.alert(), such as in some event handlers. If you find that alert() or another method or property is not recognized by the browser, try specifying the window object.

Another common mistake is to assume that you can omit the document object's name, such as using write() instead of document.write(). This won't work because most scripts have a window object as their scope.

HTML Errors

Last but not least, don't forget that JavaScript isn't the only language that can have errors. It's easy to accidentally create an error in an HTML documentfor example, forgetting to include a closing </table> tag, or even a closing </script> tag.

Although writing proper HTML is beyond the scope of this book, you should be aware that sometimes improper HTML can cause errors in your JavaScript. When you experience bugs, be sure to double-check the HTML, especially the objects (such as forms or images) that your script manipulates.