CS 120, Fall 2012, Lab 7:
Looping with WHILE

For this lab, you will create two web pages that use JavaScript while loops. The first exercise also introduces the document.write() function, which we have not talked about in class.

Begin the lab by starting a new Web Project named lab7 in Aptana Studio, using the default location (Aptana Studio 3 Workspace) for the project. Copy the contents of the folder /classes/cs220/lab7-file into your project. (There is only one file, colors.html, in that folder.)

This lab is due before our next lab, on Friday, October 19. You should have it completed at that time. I will look for it in your Aptana Studio 3 Workspace folder. (However, you should really complete it before the test on Wednesday.)

A Little Loop With document.write()

This short exercise is really just about implementing a simple counting loop of the kind we discussed in class. It also introduces the function document.write(x), which you should probably know about but almost never use.

Open the file colors.html in Aptana. If you look at this file in a web browser, you will see a page with a narrow band of color across the top. That band is actually a <div>, and its color is set randomly using JavaScript. If you reload the page, you'll get a different random color.

The heart of the page is the following lines of JavaScript, in a <script> in the <body> of the page: 

var colorValue;
colorValue = randomColorCSS();
document.write("<div style='background-color: " + colorValue + "'></div>");

Your assignment is to use a loop to repeat these lines 100 times. You must use a counting loop, with "while(true)", as covered in class. Once you do this correctly, opening the page in a web browser will show 100 randomly colored bars. Each bar is a <div> produced by one execution of the above code. There are 100 bars since it is executed 100 times.

This is meant to be an easy exercise, to help you get used to the syntax for writing a loop. The rest of this section tells you about document.write—which you don't need to know to do the exercise.

Recall that scripts are executed as the page loads. The function document.write writes HTML content to the page as it loads. It lets you compute some of the content instead of just putting the content in as literal HTML code. In the above code, colorValue is a variable whose value is a CSS color string, such as "#C385F0". (The value is created randomly by a function named randomColorCSS, which you don't have to understand.) So, the statement

document.write("<div style='background-color: " + colorValue + "'></div>");

will write something like

<div style='background-color: #C385F0'></div>

to the page. The effect is exactly the same as if this text had appeared in the source code of the page, instead of being produced by a script.

It only makes sense to execute document.write while the page is being loaded, and there is rarely any need to use it. In particular, you cannot use document.write to change the content of a page once it has finished loading. For that, you can use document.getElementById with innerHTML.

Guessing Game

For the second, more substantial, part of the lab, you will implement a simple guessing game: The computer picks a random number in the range 1 to 100. The user tries to guess it. When the user makes a guess, the computer tells the user whether the guess is correct, too high, or too low. The user gets up to six guesses. If the user guesses the number, the user wins. If the user makes six guesses without guessing the number, the user loses. At the end of the game, the computer tells the user whether the user won or lost.

Create a new web page that just shows a button. When the button is clicked, the game begins. The game should be defined as a JavaScript function that is called when the button is clicked. The function does not end until the game is over and the user has won or lost.

All interaction with the user should be done using alert and prompt. Nothing happens on the web page, which will just continue to show a button. After a game ends, the use can click the button again to play another guessing game.

We did an example in class that will be useful in this exercise. The following code picks a number in the range 1 to 10, asks the user for a guess, and tells the user whether the guess is correct, high, or low. You can start with this example, modify it, and add to it.

var number;
var userguess;
number = Math.ceil( 10*Math.random() );
userguess = prompt( "Guess my number" );
if (userguess == number) {
   alert("Correct");
}
else {
   if ( userguess < number ) {
      alert("Too low");
   }
   else {
      alert("Too high");
   }
}

For a little extra credit: If you write the game in the obvious way, the computer will put up a pop-up with a message such as "Too low" or "Too high", and it will then immediately put up another pop-up asking for the next guess. It would be nicer to combine the two pop-ups into one prompt with a message such as "Too low. What is your next guess?" or "Too high. What is your next guess?". Implement this idea. You will have to rearrange the code a bit. You might want to keep both versions available on your page, with separate buttons.

For another improvement, note that the pop-up for a prompt has a "Cancel" button as well as an "OK" button. If the user clicks Cancel, you really should end the game. You can test for this by testing if (userguess == "")