HTML and CSS Reference
In-Depth Information
Okay, I'm sorry about the math lesson, but it couldn't be avoided. Moving on . . .
Now that you have your randomNumber, you create another variable, guess , to store the user's latest attempt to
beat the game.
The next step is to create the while loop that will check to see if the user's guess is correct and prompt her to make
another guess if it is not.
while(guess != randomNumber) {
guess = prompt('What is your guess?');
The condition of the while loop compares the guess variable to the randomNumber variable using the not-
equal operator ( != ). If the guess is correct, it will continue to execute the rest of the JavaScript. However, if it is in-
correct, then you will prompt the user to make another guess and store this new attempt in the guess variable. The
next time the while loop condition evaluates, it will check against the new guess.
You may have noticed that you enter the while loop before the user has made a guess at all. Because you have de-
clared the guess variable but not initialized it with a value, it will be undefined . This means that when the
while loop compares it to randomNumber , the result will be false and the user will be prompted to make a guess.
This eliminates the need to duplicate the code for the prompt outside of the while loop.
Once the user guesses correctly, the rest of the code will be executed, and therefore you add a little congratulations
message to let the user know that she won.
alert('Congratulations! You guessed correctly. The number was ' +
randomNumber + '.');
Here you have used the alert function. This will display the text in a pop-up similar to the one displayed by the
prompt function.
That's it for loops. Hopefully, you now understand how you can use for and while loops to make your code much
more maintainable by reducing the amount of code that you have to write.
The Document Object Model (DOM)
The Document Object Model (or DOM for short) is a structural representation of a web page. The DOM is generated
by taking all your HTML code and all your CSS code and putting them together to create a master blueprint of the
page (the DOM). This is then presented on the screen by the browser. As a developer, you can then manipulate the
DOM (and therefore the page that is displayed) using JavaScript.
The DOM Tree
The DOM tree consists of all the elements that you have defined in your HTML code. These elements are converted
to what are known as nodes . Each node represents an object, and these objects are what you will interact with in your
JavaScript programs. Remember all of those attributes that you were placing on your HTML elements? These have
now become properties of the new DOM objects.
The DOM tree follows the same structure as your HTML document, and therefore elements that are nested in your
markup will appear as children of their parent element in the DOM. This parent-child relationship is important to the
way that the DOM tree works. Let's look at an example.
Search WWH ::

Custom Search