How to Resolve JavaScript Logic Errors for HTML5 and CSS3 Programming - dummies

How to Resolve JavaScript Logic Errors for HTML5 and CSS3 Programming

By Andy Harris

Logic errors in JavaScript are troublesome. In fact, they’re nearly impossible to resolve on your HTML5 page without some sort of debugging tool. However, like a syntax error, when you can find a logic error, it’s usually quite easy to repair.

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

Just looking at the code, it’s very difficult to see the problem. Worse, when you run the program in your browser, it won’t report an error. It won’t work correctly, but the code is all technically correct. Rather than telling it to do something illegal (which would result in a syntax error), this code has told the program to do something that’s completely legal but not logical.

Logic errors are called bugs, and they’re much more interesting (but subtle) to resolve than syntax errors (normally called crashes).

To resolve a logic error, there’s a few steps:

  1. Understand what you’re trying to accomplish.

    Whenever you write a program, be sure you review what you’re trying to accomplish before you run the program. It’s often good to write down what you expect so you’ll know if you got there. (Professional programmers are required to list expectations before they write code.) For this example, when the user clicks the Guess the Password button, the user should get a prompt allowing them to guess the password.

  2. Understand what your code did.

    Run the logicError.html page yourself to see what actually happens. With a logic error, the behavior is unpredictable. A loop may never happen, it may never end, or it might sometimes work right and sometimes not.

    The key to finding logic errors is to predict why the code is doing what it’s doing and why it’s not doing what you want. In this example, when you press the Guess the Password button, the You May Proceed dialog box immediately appears, never giving you the chance to guess a password.

  3. Form a hypothesis or two before looking at code.

    Think about what is wrong before you look over the code. Try to describe in plain English what is going wrong. In this case, something is preventing the prompt from appearing. Maybe the statement causing the prompt is written incorrectly, or maybe the code is never getting there. Those are the two most likely possibilities.

    Decide this before you look at code because the moment you see code, you’ll start worrying about details rather than thinking about the big picture. Logic errors are almost always about logic, and no amount of staring at code will show you logic errors, nor will a debugger spot them for you.

  4. Resolve syntax errors.

    Go to the console and see if there are any syntax errors. If so, resolve them. Logic errors will not appear until you’ve resolved all syntax errors. If your code shows no syntax errors but still doesn’t work correctly, you’ve got a logic error.

  5. Start the debugger.

    Interactive debugging is incredibly helpful with logic errors. Begin with your English definitions of what you think should happen and what you know is happening. Find the function you think is the problem and set a breakpoint at that function.

  6. Identify key variables or conditions.

    Most logic errors are centered around a condition that’s not working right, and conditions are usually based on variables. Begin by taking a careful look at the conditions that control the behavior you’re worried about. In this case, there’s a loop that doesn’t seem to be happening — ever. This means an investigation of that loop statement and any variables used in that statement needs to happen.

  7. Step to your suspicious code.

    If you’re worried about a condition, use the debugger tools to step to that condition, but don’t run it yet. (In most debuggers, a highlighted line is about to be run.)

  8. Look at the relevant variables.

    Before running the condition line, think about what you think any variables used in that condition should contain. Use the Watch tools or hover over the variable names to ensure you know the current values and they’re what you think they should be.

  9. Predict what the suspicious line should do.

    If you’re worried about a condition, you’re generally expecting it to do something it isn’t doing. In this case, the condition should trigger the prompt command on line 13 when the function is called, but it appears that we’re never getting to line 13. The goal of debugging is to identify which possible problems could be happening and isolate which of these problems are actually occurring.

  10. Compare your expectations with reality.

    As you step through the getPassword() function in the debugger (with the step into button or F11 key), you might see the problem. The while loop begun in line 12 never executes, meaning line 13 never happens, but it should always happen on the first pass. Now you know exactly what the program is doing, but you don’t know why yet.

  11. Think about your logic.

    Logic errors aren’t about getting the commands right (those are syntax errors). Logic errors are about telling the computer to do the wrong thing. Think hard about the logic you’ve applied here.

    In this case, it appears the condition is backwards. You told the computer to continue looping as long as the guess is correct. You probably meant to continue as long as the guess is incorrect. The guess starts out incorrect because of the way you (appropriately) initialized both variables. Thus the condition is automatically skipped and the prompt never happens.

  12. Fix it.

    Fixing code is easy when you know what’s wrong. In this case the condition was legal but illogical. Replace guess==correct with guess!=correct and your code will work correctly.

Don’t worry if you find debugging difficult. It does get much easier with practice and experience.