How to Manage Complex Loops in JavaScript for HTML5 and CSS3 Programming

It won't take long before you find situations where JavaScript’s standard for or while loops do not seem adequate for HTML5 programming. Consider a password box. You want to ask for a password until the user gets the password correct or guesses incorrectly three times. Think about how you would build that code. There are a number of ways to do it, but here's the cleanest approach:

 function threeTries(){
  //continues until user is correct or has three
  //incorrect guesses
  //from while.html
  var correct = "HTML5";
  var guess = ";
  var keepGoing = true;
  var tries = 0;
  while (keepGoing){
  guess = prompt("Password?");
  if (guess == correct){
   alert("You may proceed");
   keepGoing = false;
  } else {
   tries++;
   if (tries >= 3){
   alert("Too many tries. Launching missiles...");
   keepGoing = false;
   } // end if
  } // end if
  } // end while
 } // end threetries

This code is a little more complex, but it uses a nice technique to greatly simplify loops:

1. Initialize correct and guess.

   Initialize the correct and guess passwords.

2. Build a counter to indicate the number of tries.

   The tries variable will count how many attempts have been made.

3. Build a Boolean sentry variable.

   The keepGoing variable is special. Its entire job is to indicate whether the loop should continue or not. It is a Boolean variable, meaning it will only contain the values true or false.

4. Use keepGoing as the condition.

   A condition doesn't have to be a comparison. It just has to be true or false. Use the Boolean variable as the condition! As long as has the value keepGoing, the loop will continue. Any time you want to exit the loop, set keepGoing to false.

5. Ask for the password.

   You still need the password, so get this information from the user.

6. Check to see if the password is correct.

   Use an if statement to see if the password is correct.

7. If the password is correct, provide feedback to the user and set keepGoing to false.

   The next time the while statement is executed, the loop ends. (Remember, you want the loop to end when the password is correct.)

8. If the password is incorrect, if the (guess==correct) condition is false, that means the user did not get the password right.

   In this case, add one to the number of tries.

9. Check the number of tries.

   Build another if statement to check the number of tries.

10. If it's been three turns, provide feedback (threatening global annihilation is always fun) and set keepGoing to false.

The basic idea of this strategy is quite straightforward: Create a special Boolean variable with the singular job of indicating whether the loop continues. Any time you want the loop to exit, change the value of that variable.

If you change most of your while loops to this format (using a Boolean variable as the condition), you'll generally eliminate most while loop issues.