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 1 to 10 and beside them prints 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: "green", "blue", "yellow", "orange", and "red". The code will prompt the user 4 times for a number between 0 and 4. If the user enters 0, the text color should change to "green", 1 to "blue", etc. If the user enters something that is not a number or not a number between 0 and 4, you should change the text to black. Below are four screenshots after the user entered 0, -1, 4, and test.

Note: You must use Mozilla Firefox or Microsoft Edge, not Internet Explorer or Safari, 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 pick a random number, and the user will try to guess the random number with feedback from the computer. It will work like this:

  1. Have the computer generate a random number between 1 and 100.
  2. The computer should then prompt for a number between 1 and 100. The computer should check to ensure that the number entered was a valid number, and was between 1 and 100.
  3. If the guess entered by the user is higher than the computer's number, then the computer should tell the user its number is lower.
  4. If the guess entered by the user is lower than the computer's number, then the computer should tell the user its number is higher.
  5. If the guess entered by the user is the computer's number, the computer will tell the user that they guessed correctly and the game stops.
  6. The computer will ask for up to 6 guesses. If you do not guess correctly after 6 guesses, the computer wins.
  7. The computer should store in an array each guess. After the game is complete, regardless who wins, you should print out all the guesses in the array.

Important hint: You should use a variable to keep track of the computer's number. The starter code provided has a method to create a random number 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 6 guesses, creating a loop to guess up to 6 times (and storing the guesses in the array), determining if the user's guess is correct, too low, or too high, and then printing out the list of guesses that were made at the end of the game. Remember, since the computer's number is random, your output will not be the same each time. Two examples are below:

Computer Wins (Computer's Number was 17)

Human Wins (Computer's Number was 98)

Bonus Mark Opportunity (+3 marks)

It is always possible to win this game as a human guesser if you have 7 guesses (but not 6). Explain what your strategy could be to guarantee that you always win. (+1 mark) Explain why this strategy does not work for only 6 guesses (+1 mark). Add this explanation to your code file as a comment. (+1 mark)

Submission Instructions and Marking

For this lab assignment, submit using Canvas 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