HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

The most common type of JavaScript error in HTML5 is a crash or syntax error, usually meaning you misspelled a command or used a function incorrectly. From the user's point of view, browsers don't usually tell you directly when a syntax error occurs, but simply sit there and pout. The best way to discover what's going wrong is to call up the debugging console.

As soon as you discover a page not acting correctly, go to the debugging console and look at the Console tab. You'll see error messages there, and you can often click on an error message to see the problem. As an example, take a look at the following code from syntaxError.html:

 function getPassword(){
  var correct "HTML5";
  var guess = ";
  while (guess != correct){
  guess = prompt("Password?");
  } // end while
  alert("You may proceed");
 } // end getPassword

Run the program in your browser, click the Guess the Password button, and the browser will seem to do nothing but glare at you insolently. However, if you activate the Debugging console, you'll realize it's telling you what it thinks is wrong.

image0.jpg

It would be great if the debugger told you exactly what is wrong, but normally there's a bit of detective work involved in deciphering error messages. It appears in this case that there are two errors, but they're really the same thing. Click the link to the right of the first error and you'll be taken to the Sources view with the offending line highlighted.

image1.jpg

The error messages aren't always as clear as they could be, but they are usually helpful in their own way. The error message here is “unexpected string.” That means the browser encountered a string value when it expected something else. That's somewhat helpful, but the real strategy is to know that something is probably wrong with this line, and you need to look it over carefully.

At some point, you'll probably realize that line 10 should have a single equals sign. Rather than var correct ”HTML5”, it should read var correct=”HTML5”. This was (as are most syntax errors) a problem caused by sloppy typing. Like most syntax errors, it's kind of difficult to find (but much easier with the debugger).

After you find the error, it's usually pretty easy to fix. Change the code in your editor and reload in the browser (with the F5 key) to see if your change fixes things.

Note that fixing the “unexpected string” error automatically resolves the “function not defined” error. This is pretty common because often one error cascades and causes other error messages. Generally you only need to worry about the topmost error on the list because resolving it may solve the other errors with no further work. (Of course, resolving one error may unmask other heretofore hidden errors, but this is less common.)

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: