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.
