Lab 7: Iteration
FIT 100, Winter 2005

Key Words:function, method, procedure, form control, input, id, onchange, event handler, function call, function definition, function head, formal parameter, function body, variable, variable declaration, assignment operator, assign, getElementById(), value, text, string of characters, +, string concatenation, string, innerHTML.
See Wikipedia (http://www.wikipedia.org/) for a detailed description of the key words.

Preparation

You are required to have completed the objectives in Lab 6 before doing this lab.

Remember to use the online resources! When you encounter a new HTML element, look at W3Schools XHTML tutorial and W3C's XHTML and HTML recommendations. When you encounter a Javascript function or want to find what you can do with an HTML element in you Javascript code, look at W3Schools Javascript tutorial and W3Schools DHTML/DOM (Dynamic HTML/Document Object Model) tutorial. You do not need to understand everything in their tutorials, but you should at least know where to find help.

If-Else Statements

The goal of this section of the lab is to practice writing if/else statements.

Create a new HTML document for lab7. Save this into your lab7 folder on Dante.
Add to the <BODY> element of your page some Javascript which initializes a variable count in the HTML file. Print the variable to the screen and view the results. (Try to come up with code to do that before looking at the solution below! It may take you longer, but you will learn better.)
```
<script type="text/javascript">
var count = 1;
document.writeln("The count is: "+count);
</script>
```
Now modify the code so that tests and modifies the value of count before alerting the user. Study the solution code below and try to understand it before trying it out. (If you understand it, you will be able to predict what you will see on the screen. If you can't predict it, you don't understand it).
```
<script type="text/javascript">
var count = 1;
if (count == 0) {
  ready = false;
} else {
  ready = true;
  count = count-1;
}
alert("Ready: "+ready+", Count is "+count);
</script>
```
Change the initial value of count to 0. Reload the page (predict it first!).
Using an <input> field, allow the user to input the count variable using a text input field. The idea is that until the user types in a value (and presses Enter), the alert message won't show up. This is a more complex change. The input field in the HTML document mght look like this:
```
Enter a number: <input id="count" type="text" onchange="alertMe()"/>You will have to change the variable initialization and assignment for the count variable.  
 
```
Now, notice that the input field mentions a function called alertMe. Where must alertMe be defined? Here is how you can get the value from the input field:

var count = document.getElementById("count").value;

Hint: You may need to move your Javascript code into a function!

Change the math in the if statement so that when the count is greater than 10, ready will be false.

Program Basic Iterations

The goal of this section of the lab is to practice writing iteration statements and become familiar with how the for-statement works. We will also place images, which may be helpful on Project 2.

Start by initializing a variable loopcount in your document. Copy in the for-loop as shown below. Try to understand what it is doing. Notice that in the for-loop, you initialize and assign the variable i, which will be used as an "iteration variable" (it can have any valid variable name, but programmers often use i). There are many things to understand in this short segment of code. Just getting the page to load is not enough -- it's important to understand how it operates.
```
<script type="text/javascript">
var loopcount = 2;
for (i=0; i< loopcount; i++) {
	document.write("Print this text.");
}
</script>
```
After the page is loading and working properly, change loopcount to have the initial value of 5 instead of 2. Reload the page (predict first what it will do!)

Once you understand what the above code is doing, write your own loop that iterates 5 times, repeating the statement each time:
document.write("The iteration variable " + "has the value " + i + " ");
If the loop’s initialization sets i to 0 and limits the iteration to numbers less than 5 and increments by 1 each time, then the result should be
Change the loop’s test to be i<10. Show the result. Change the field of the for-statement to increment (step up) by 2 each time instead of by 1. Show the result.
As it stands, the statements count up. Change the for-statement to count down from 10 to 1 by 1 (the calculation must somehow subtract 1 on each cycle). Show the result.
Copy the following image to your desktop (or wherever your lab 7 html file is).
Revise your code to show this image five times. Take it in steps. How would you show it once? (answer: using an <img> tag). The trick for this lab is NOT to write five <img> tags, but to use iteration. Write your iteration so that it just loops five times. (It doesn’t matter where you start, stop or the amount you change the iteration variable by, as long as the loop iterates only five times.) Make the following statement be the statement that is repeated:
```
document.write("<img src='lab7-star.jpg' />");

The result should look something like the following
```

HTML References