|
JavaScript Tip:
Top 5 JavaScript Mistakes
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
If a writer forgets to include a comma inside a sentence or misspells a simple word most readers still understand the meaning of the text. JavaScript isn't nearly as forgiving: a missing comma can break your JavaScript code - or even your whole page. We'll show you how to find some of the most common mistakes.
1. Spell Check Your Code
Unfortunately, your word processing spell checker won't help you debug your JavaScript. You'll have to go through it line by line to make sure that everything is correct.
Check these first:
- Capitalization: Be careful with the spelling of your JavaScript events. JavaScript's naming convention is that the first word in an event is lower case while subsequent words are capitalized. OnMouseOver is not the same as onMouseOver.
- Variable names: Be sure that the spelling in the variable definition statement matches the statement where you actually call the variable. It's a common mistake to define a variable name as catPic, for instance, but then call it in the function as "catpic" or "Catpic."
- Find HTML errors: Verify the accuracy of the HTML formatting instructions you include in JavaScript document.write statements. A misspelled HTML tag or code problem can keep the document.write statement from displaying. Use an HTML check program like HTML Toolbox to correct coding errors and make sure that you haven't included any browser-specific tags. A JavaScript debugger won't alert you to HTML code problems!
|
2. Know When Equal Isn't Equal
The number of equal signs (=) in your statement matters.
Use one equal sign to assign a value:
Use two equal signs to tell JavaScript that you want to compare one value with another:
if (birthMonth == 9)
{
alert ("You have a September birthday!")
}
|
Suppose you forget to use the two equal signs in your statement and write birthMonth = 9 instead. This sets the variable birthMonth to always be equal to 9. You'll congratulate every visitor on their September birthday - even the ones born in January!
3. Close Everything
Remember your mother pestering you to close the window, close the refrigerator door, etc.? Well, she didn't know it, but she was actually training you to write error-free code. In JavaScript, you have to close everything you open.
- Curly Braces: look like this "{" and "}". They enclose blocks of statements in functions and IF statements. They aren't required for single line statements, but use them anyway. The habit will help you avoid errors.
- Quotation Marks: Strings can be enclosed in either single or double quotation marks, but be consistent. Both the opening and closing marks must be the same type, so if you open the string with double quotes, close it the same way.
Be very careful if you embed one quoted string within another. You'll need to use both types of quotation marks for that statement. If the inner statement begins with double quotes, close it with double quotes and enclose the entire statement in single quotes like this:
document.write('<i>"So what?"</i> she said.')
|
- Parentheses: have many uses: around the return statement in a function, to differentiate a method from an object, and to enclose groups in a statement. Be particularly careful with parentheses when you're using a lot of nested statements.
- Script Tag: This seems obvious, but you'll be really annoyed if you spend a frustrating hour debugging a script only to find that the problem is a missing SCRIPT tag (/SCRIPT).
|
You find these problems more quickly if you indent your code according to a constant set of rules. The code is easier to maintain when you can quickly scan for opening and closing parentheses, curly braces, etc.
4. Avoid Line Breaks
In our April 2001 newsletter article, we discussed how to use JavaScript to customize new browser windows by specifying the height, width, and other parameters.
You can use quite a long list of attributes and parameters, so it's tempting to break up the list for readability and place each on its own line. The script is easier to read and code if you aren't constantly scrolling horizontally. But JavaScript interprets the line breaks to mean that you're trying to close the string improperly. Always remember to remove them before you try to run the script in a browser.
5. Watch Your Language
Reserved words are words that can't be used as variable or function names in JavaScript because they're part of the language's syntax. Most of them are pretty obvious: else, if, function, return, do, etc.
Other words aren't officially reserved, but are part of the JavaScript language. Although technically you can use them in a script, they may cause unpredictable results on your page. Think of some the most common objects and methods you use: onFocus, document, open, name, and location.
There's not much chance you'd want to name a function "onFocus()", but you might logically consider using either "name" or "location" as variable names. Avoid that temptation and you avoid debugging problems later.
General Debugging Hints
You may think you've spent a lot of time writing your JavaScript code, but that's nothing compared to the time you'll spend debugging it! Even experienced programmers regularly report spending at least half their total programming time looking for errors.
The process is less painful if you can break up a complicated script into smaller parts and test them individually. Always make a copy of the script before you begin to debug it. Otherwise, you could accidentally break the parts of the script that work while you're trying to find the error.
Serious JavaScript programmers often use special JavaScript debuggers to help them quickly isolate their problem code. A debugger lets you check your code for syntax and logic errors. Most also let you set break points in the code so you can stop processing at intervals and step through each line of code.
But if you're writing simple scripts or using some cut and paste scripts, you can probably get by with Netscape's JavaScript utility. Open a Netscape browser and load your page. If your script isn't working properly, type javascript: into the URL bar at the top of the browser window. You'll get a pop-up box that looks something like this:
The error messages aren't always very helpful - oblique is more like it. For instance, to get this message, we left a single quote out of a script that defines a new browser window. Can't you tell?
Still, as you work with JavaScript, you'll start to recognize the error messages and decipher them more easily. Once you have your script working in one browser, be sure to test it in others too.
You may be surprised. Netscape 6.x breaks some DHTML code. WebTV uses a slimmed-down version of JavaScript called JellyScript, so more complex JavaScript operations may not work at all.
The only way to really know for sure is to test your pages in multiple browsers. Browser Photo makes that both easy and cost-effective. You can quickly view your page in 16 different browser, versions, operating system, and screen resolution combinations. Browser Photo will alert you to errors so you can correct them before your visitors complain.
|
