Here, you can see a dialog box asking for a password. When programming your HTML5 web page, you can use JavaScript to achieve this same box with a while loop. The program keeps asking for a password until the user enters the correct password.
Here's the HTML code used for two different while examples:
<body>
<h1>While Loop Demo</h1>
<p>The password is 'HTML5'</p>
<form action = ">
<fieldset>
<button type = "button"
onclick = "getPassword()">
guess the password
</button>
<button type = "button"
onclick = "threeTries()">
guess the password in three tries
</button>
</fieldset>
</form>
</body>
The first version keeps popping up a dialog box until the user gets the answer correct.
function getPassword(){
//from while.html
var correct = "HTML5";
var guess = ";
while (guess != correct){
guess = prompt("Password?");
} // end while
alert("You may proceed");
} // end getPassword
A while loop for passwords is not hard to build:
Store the correct password in a variable.
Variable names are important because they can make your code easier to follow. Beginners often call one of these variables pass-word, but that can be confusing because there are actually two passwords (the correct password and the guessed password) in play here.
The best way to design variable names is to anticipate the conditions they will be used in. This function is based on the condition guess==correct. This is a really nice condition because it's really easy to determine what we're trying to figure out (whether the guess is correct). It takes some practice to anticipate variable names well, but it's a habit well worth forming.
Initialize the guess to an empty value.
The key variable for this loop is guess. It starts as an empty string. It's critical to initialize the key variable before the loop begins.
Set up the while statement.
The while statement has extremely simple syntax: the keyword while followed by a condition, followed by a block of code.
Build the condition.
The condition is the heart of a while loop. The condition must be constructed so the loop happens at least once (ensure this by comparing the condition to the variable initialization). When the condition is true, the loop continues. When the condition is evaluated to false, the loop will exit. This condition compares guess to correct. If guess is not equal to correct, the code will continue.
Write the code block.
Use braces and indentation to indicate the block of code that will be repeated in the loop. The only code in this particular loop asks the user for a password.
Add code to change the key variable inside the loop.
Somewhere inside the loop, you need code that changes the value of the key variable. In this example, the prompt statement changes the password. As long as the user eventually gets the right password, the loop ends.
