COSC 122 - Computer Fluency
Lab 7: JavaScript - Iteration

In this lab, we will learn to write JavaScript programs that use loops and arrays.

Loops

A loop allows us to repeat a set of statements as many times as we want. We have seen the for loop which has a general structure like this:

for (<initialization>; <continuation>; <next iteration>)
{	<statement list>
}

The initialization part is usually used to initialize a loop variable that will count the number of times the loop has been executed. The continuation is a conditional test that determines if the loop should stop, usually based on the value of the loop variable. The next iteration normally increments the loop variable by 1 but other increments or even decrements are possible.

The following is an example of a loop that prints the numbers from 0 to 9 in the HTML document:

var i;
for (i=0; i < 10; i++)
{	document.write(i);
	document.write("<br/>");		// Line break after each number puts each number on a separate line
}

Arrays

An array is a data structure that can store multiple objects. An array has a size when it is created. Unlike other variables, we must create an array using the new keyword and provide its size. Each element in the array is accessed by providing the array name and an index that starts from 0 and goes up to the size of array - 1. The index, also called a subscript, is put in square brackets.

An example of declaring an array of size 5 and setting and retrieving values in array is below:

var myArray = new Array(5);
var size = myArray.length;			// size will have value 5

myArray[0] = 4;
myArray[1] = 2;
myArray[2] = 1;
myArray[3] = myArray[2];			// myArray[3] now has value 1
myArray[4] = myArray[0]*myArray[1];		// myArray[4] now has value 8

Lab Tasks

You will create three separate JavaScript programs to submit in the assignment. The first should be saved in a file called lab7_1.html, the second in a file called lab7_2.html, and the third in a file called lab7_3.html.

Task #1

Download the starter program and edit it. Create a program that writes to the HTML document the numbers 0 to 9 and beside them print if the number is odd or even. Your program should use a for loop. Hint: Remember the mod operator "%". Your output should look as below:

Task #2

Download the starter code file and begin editing it. Your code will use an array to store the names of 5 colors: "red", "orange", "yellow", "green", and "blue". The code will prompt the user 4 times for a number between 0 and 4. If the user enters 0, the background should change to "red", 1 to "orange", etc. If the user enters something that is not a number or not a number between 0 and 4, you should change the background to black. Below are four screenshots after the user entered 0, -1, 4, and test.

Note: You must use Mozilla Firefox not Internet Explorer for this to work properly!

User Enters 0

User Enters -1

User Enters 4

User Enters test

Task #3

Guessing Game: We will create a program where the computer will guess a number that you pick between 1 and 100 (no cheating once you pick the number!). It will work like this:

  1. You think of a number between 1 and 100, but do not tell the computer.
  2. The computer will make a random guess and ask if it is correct. If the computer guesses the correct number using up to 7 guesses, the computer wins. Otherwise, you win.
  3. If a guess is incorrect, the computer will ask if your number is higher or lower.
  4. If your number is higher, the next guess will be a random number that must be greater than the last guess and no larger than the maximum possible guess number.
  5. If your number is lower, the next guess will be a random number that must be less than the last guess and no smaller than the minimum possible guess number.
  6. For example, if your number is 40, assume the computer guesses 65. Your number is lower. The next computer guess should be between 1 and 64.

Important hint: You should create variables to keep track of the minimum and maximum number in which the computer can guess. The starter code provided has a method to create a random guess when you pass it the minimum and maximum numbers in the guess range. It also has all the code for prompting the user. You are responsible for creating an array to store up to 7 guesses, creating a loop to guess up to 7 times (and storing the guesses in the array), making correct guesses by modifying the guessing range, and then printing out the list of guesses that were made. Remember, since guesses are random, your code will not make the same guesses every time. Two examples are below:

Computer Wins Guessing 55

Human Wins Guessing 31

Bonus Mark Opportunity (+3 marks)

It is possible to have the computer make guesses in such a way that it will always win this game with 7 guesses. For 3 bonus marks, create a different guessing method that generates guesses in this form. Hint: The computer's guesses should not be random!

Submission Instructions and Marking

For this lab assignment, submit using Connect your three answer files lab7_1.html, lab7_2.html, and lab7_3.html. You can submit the files either individually (recommended) or in a single zip file.

Grading (20 Marks Total)

  1. Task 1 (5 marks)
  2. Task 2 (5 marks)
  3. Task 3 (10 marks)
*Home