WebDeveloper.com ®: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource DirectoryWebDev Jobs  
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    CSS
    Graphics
    HTML
    JavaScript
    XML
    Dreamweaver/FrontPage
    Multimedia
    Web Video
    General
    Accessibility

 Server-Side
  Development

    ASP
    Perl
    PHP
    .NET
    Java
    SQL
    Other

 Web Development
  Business Issues

    Business Matters
    Website Reviews

 E-Commerce
    Domain Names
    Search Engines

 Etc.
    Computer Issues
    Forum Software
    Feedback
    The Coffee Lounge



Script Downloads
Focus Slide Menu

Featured: July 18, 2008
Description: Mousing over a list item will cause the bluish green DIV to slide over to that list item. Interesting menu effect. Easily customizable. Degrades very nicely for those with JavaScript turned off.

Get Script

Hosting Search
Unix   Windows
PHP   Webmail

Sign up for the free WebDeveloper E-mail newsletter!


JupiterWeb Commerce
Partners & Affiliates
Partner With Us
Website Load Testing
Disney World Tickets
Promotional Products
Computer Deals
Promotional Golf
Desktop Computers
Car Donations
Best Price
KVM over IP
Corporate Gifts
Promotional Pens
Phone Cards
Find Software
Online Education

internet.com
IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Turbo Screen Sharing
Adobe Acrobat Connect Professional offers users the ability to have a more productive and engaging web conferencing experience while providing the IT department with a program that efficiently utilizes bandwidth and minimally impacts the infrastructure. Learn More! »

Informal Learning: Extending the Impact of Enterprise Ideas and Information
Forward-thinking organizations are turning to enterprise learning in their quest to be better informed, better skilled, better supported at the point of need, and more competitive in their respective marketplaces. Learn More! »

Rapid E-Learning: Maturing Technology Brings Balance and Possibilities
Rapid e-learning addresses both time and cost issues by using technology tools to shift the dynamics of e-learning development. Learn why more skilled learning professionals use these tools and how you can get a solution to keep pace with your business demands. »

Delivering on the Promise of ELearning
This white paper defines the framework to launch e-learning as a set of teaching, training, and learning practices not bound by a specific technology platform or learning management system. It offers practical suggestions for creating digital learning experiences that engage learners by building interest and motivation and providing opportunities for active participation. »

JavaScript Programming: Debugging

by Heidi Brumbaugh

Learning JavaScript can be liberating, even fun. Scripting gives you the power to make your pages more dynamic and interesting. Best of all, its flexibility lets you add your own touches to personalize your page. If you've been following along in this series and--I hope--experimenting and testing out your own ideas about what might or might not work, you have more than likely already encountered your first error message.

You know what I'm talking about. You plan the perfect script for hours, check and double-check the documentation, enter the code in carefully bracketed <SCRIPT> tags, recheck your brilliant logic, save out the HTML file and load it into your browser, prepare to be dazzled, and...your ungrateful browser comes back:

Netscape - (Alert) JavaScript Error: script.html ,
line 40

syntax error
else
. . . . . . . . . . . ^

If you've programmed in C, Basic, or another scripting language, you're likely to sigh and dig in. Here we go again. If you're new to programming, however, these error messages can be frustrating and discouraging. This article gives you an overview of the debugging process and some tips that will serve you well here, as well as elsewhere in your programming life.

What is a Bug?

A bug is an instruction in a program that is causing an undesirable result. There are two main types of bugs: Syntax and logic errors. Syntax errors happen when you say something the computer doesn't understand, causing program interpretation to stop. Logic errors are when the program works, but doesn't do what you thought you meant.

A syntax error is asking for a "scwerdriver".

A logic error is asking for a flathead screwdriver, then trying to use it on a Philips screw.

Most other programming languages have a debugging environment that helps you zero in on errors. If you're programming JavaScript from a text editor and checking the results in a browser, however, debugging is difficult. The browsers are designed to be upwards compatible, so they may simply ignore instructions they don't understand. When they do report errors, the messages don't always tell you what you need to know to solve the problem.

You can follow along with the bugs.html file, which gives examples of many of the problems I talk about here.

When the browser gives you a syntax error, note the line number of the error. When you dig back into the script to see what's wrong, however, check for problems above and around that line for the problem as well. An error above the line, especially a missing ), >, or } could be causing the browser to misinterpret what happens next.

On a related note, be aware of "cascading" errors. This means that one error, such as an incorrectly defined function, can cause errors further down the line, for example, when you try to call the function. Correct the first error, then try to run the program again. Subsequent errors may be gone.

Here are some more tips on avoiding--and troubleshooting--programming errors.

  • Be careful about using reserved words--words that are part of JavaScript itself--as variable or function names.
  • Make sure your double and single quotation marks are matched correctly, especially in long expressions.
  • When you're writing code that generates HTML or JavaScript, it can be especially easy to make a mistake. Examine your output directly by running the code to create a new document, then clicking on View Page Source in the browser to see what actually got generated.
  • Take small steps. Test your program each time you make a small addition or modification. Back up working versions of a script, so that if difficult errors creep in you can easily go back a step.
  • If the browser doesn't seem to be responding to your changes, make sure your files are in sync. Did you save a backup to a different folder, then make changes and forget to save the new version out to the original name? I hate it when that happens.
  • Check and double-check your spelling. The browser will notice if you misspell a keyword, but not if you misspell one of your own variable names. JavaScript allows implicitly declared variables, which means it will treat the second word as a new variable.
  • Also, use consistent style for variable names, and remember that JavaScript is case sensitive. If you always begin variables with lower case letters, you're less likely to slip up and use upper case instead.
  • Finally, add debugging statements. These are statements that tell you what is happening inside the program, what the variables are at different times, and so on. They can be invaluably helpful. Note which lines are debugging statements so you can find and remove them easily when the program works.

See Also




Acceptable Use Policy

JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers