1. Programming the Web using XHTML and JavaScript
Chapter 14
Loops and Arrays

2. Back to Repetitive Code
Problem: the same code is repeated over and over but with minor changes
How can this be implemented?
Example: A series of conditional statements …
Consider a number of questions
Meyers-Briggs personality test
Each of which has three possible responses

3. Repetitive Code var scoreA=0, scoreB=0, scoreC=0
if (document.question1.choiceRB[0].checked) { scoreA=scoreA+1 }
else if (document.question1.choiceRB[1].checked) { scoreB=scoreB+1 }
else if (document.question1.choiceRB[2].checked)
{ scoreC=scoreC+1 }

4. Repetitive Code Conditional statements Is there a better alternative?
Take up a lot of room
Offer multiple opportunities for typos
Are hard to change later
Is there a better alternative?

5. Loop: A programming construct that controls the repetition of code
Loops

6. Three Types of Loops
For
While
Do-While

7. For
While
Do-While
Three Types of Loops

8. For Loops for loop Repeats a set of instructions for a number of times
Basic syntax (pseudocode)
for (some number of times) {
execute this set of instructions }

9. Incrementing instruction
For Loops
“Some number of times” is the hard part
JavaScript syntax:
var ctr
for (ctr=1; ctr<=5; ctr=ctr+1) { … }
Counter
Starting value
Continuing condition
Incrementing instruction

10. For Loops Sequence of events: Ch14-Ex-01.html Set ctr to 1
var ctr
for (ctr=1; ctr<=5; ctr=ctr+1) {
[statements to be executed] }
Sequence of events:
Set ctr to 1
Is ctr<=5?
If so, execute statements then continue at step 3
If not, exit loop and execute statement at step 5
Increment ctr by adding the increment value
Next statement following for block
Ch14-Ex-01.html

11. For Loops Don’t have to start at 1, any value will work: var ctr
for (ctr=-27; ctr<=5; ctr=ctr+1) { … }

12. For Loops Can decrement also: var ctr
for (ctr=5; ctr>1; ctr=ctr-1) { … }

13. For Loops Can increment or decrement by values other than one var ctr
for (ctr=1; ctr<=100; ctr=ctr+5) { … }

14. For Loops Tips for for loops It’s for not For
Separate statements with semicolons:
for (ctr=1; ctr<=5; ctr=ctr+1) { … }
ctr is not special, any variable can be used
(Why do older programmers use “i”?)
Remember the global/local nature of the counter
The value of the counter when the loop completes is not necessarily the “stop” value

15. For
While
Do-While
Three Types of Loops

16. While Loops
while loop
Continues execution as long as a condition is true
Good for situations where you don’t know exactly how many times the loop should be executed

17. While Loops Basic syntax (pseudocode) while (some condition is true) {
execute these statements }
Read
“as long as”

18. While Loops Unlike a for loop, a while loop:
Has no built-in starting value
Has no built-in increment instruction
The continuing condition is tested at the beginning of the loop
Ch14-Ex-02.html
Has a potential problem
Fix: Ch14-Ex-02a.html

19. While Loops
If the while is used for counting: There is no starting condition or increment instruction, the programmer must supply them:
var ctr=0
while (ctr<=3) {
ctr=ctr+1
alert(“The counter is “+ctr) }

20. While Loops Sequence of events: Ch14-Ex-03.html Set ctr to 0
var ctr=0
while (ctr<=3) {
ctr=ctr+1
alert(“The counter is “+ctr) }
Sequence of events:
Set ctr to 0
Is ctr<=3?
If so, execute code inside while block
Increment ctr by one
Execute the alert statement
Continue at step 2
If not, exit loop and execute statement at step 3
Next statement following while block
Ch14-Ex-03.html

21. Infinite Loops (While)
Infinite loops – repeat forever
Usually not a good thing!
var ctr = 0
while ( ctr<2 ) { … }
ctr = ctr + 1

22. Infinite Loops (While)
Another “infinite” loop
Loop forever?
var ctr = 0
while ( ctr<2 ) { …
ctr = ctr - 2 }

23. Infinite Loops (For) Another infinite loop var ctr
for ( ctr=1; ctr<5; ctr++ ) { …
ctr = 3 }

24. Infinite Loops (For) Yet another infinite loop var ctr
for ( ctr=1; ctr!=4; ctr = ctr + 2 ) { … }

25. For
While
Do-While
Three Types of Loops

26. Do-While Loops do-while loop
Like while except test is at end instead of at beginning
Code in the loop brackets executed at least once
Basic syntax (pseudocode)
do {
these statements
} while (some condition is true)
Ch14-Ex-04.html

27. While vs. Do-While Loops
while is useful when you might not want to execute code in the loop block under certain conditions
do-while is useful when you always want to execute code in the loop block at least once

28. Arrays

29. Arrays Single variables have limited usefulness
Sometimes many of the same “type” of data need to be stored:
Students
Scores
Questions, etc.
The programming construct suited for this purpose is an array

30. Arrays
Arrays are compound variables organized as an ordered collection of data
(a bunch of stuff numbered and retrievable by its number)
Collection (array) itself has a name
Individual data items (“array elements”) are referred to by an index value

31. Arrays Array named sampleArray “Hi” 39.72 25 true -54.9
Element numbers 4 3 2 1
sampleArray[0] contains “Hi”

32. Number of elements in sampleArray
Arrays
Arrays must be created
Similar to declaring a variable
Syntax (JavaScript):
var sampleArray = new Array(5)
Number of elements in sampleArray

33. Arrays Array elements are referred to by: sampleArray[0] = “Hi”
The array name and
The element number (or index) enclosed in square brackets:
sampleArray[0] = “Hi”
sampleArray[1] = 39.72
sampleArray[2] = 25
sampleArray[3] = true
sampleArray[4] = -54.9

34. Arrays There is no implied order in assignment statements
The element number is sufficient
sampleArray[0] = “Hi”
sampleArray[1] = 39.72
is equivalent to

35. Arrays
The array size can be increased even after the array was constructed
sampleArray[6]=false
The numbers do not need be contiguous

36. Arrays
There are two other ways of creating and filling an array in one statement
var sampleArray = new Array (“Hi”, 39.72, 25, true, -54.9)
-or-
var sampleArray = [“Hi”, 39.72, 25, true, -54.9]

37. Arrays Filling then displaying the contents of an array
Ch14-Ex-05.html

38. Arrays An HTML form is like an array
There are a certain number of elements
Text boxes
Radio buttons
Check boxes, etc.

39. Arrays The following code: Creates a form like this:
<form id=“namesForm” name=“namesForm”>
<input type=“text” name=“n1Box” size=“15”>
<input type=“text” name=“n2Box” size=“15”>
<br/>
<input type=“text” name=“n3Box” size=“15”>
<input type=“text” name=“n4Box” size=“15”>
</form>
Creates a form like this:

40. Arrays document.namesForm.n2Box.value document.namesForm.n1Box.value
<form id=“namesForm” name=“namesForm”>
<input type=“text” name=“n1Box” size=“15”>
<input type=“text” name=“n2Box” size=“15”>
<br/>
<input type=“text” name=“n3Box” size=“15”>
<input type=“text” name=“n4Box” size=“15”>
</form>
document.namesForm.n2Box.value
document.namesForm.n1Box.value
document.namesForm.n3Box.value
document.namesForm.n4Box.value

41. Arrays JavaScript treats a form and its components like an array
Each element in a form can be referred to by its:
Name - or -
Position in the form
In the elements array
First element in an array is element[0]
Second element is element[1]
Etc.

42. Arrays Setting and extracting the data in an array: Ch14-Ex-06.html
Note: can access by using the element name or the index number!

43. Arrays JavaScript also provides a forms array
Same as an elements array except it numbers the forms in a document
First form is forms[0]
Second form is forms[1]
Etc.
Ch14-Ex-07.html

44. Arrays – multiple forms (by form name)
<form id="form1" name="form1">
<input type="text" name="n1Box" size="15">
<input type="text" name="n2Box" size="15">
</form>
<br/>
Form 2:
<form id="form2" name="form2">
<input type="text" name="n3Box" size="15">
<input type="text" name="n4Box" size="15">
document.form1. elements[1].value
document.form1.elements[0].value
document.form2. elements[0].value
document.form2. elements[1].value

45. Arrays – multiple forms (by form index)
<form id="form1" name="form1">
<input type="text" name="n1Box" size="15">
<input type="text" name="n2Box" size="15">
</form>
<br/>
Form 2:
<form id="form2" name="form2">
<input type="text" name="n3Box" size="15">
<input type="text" name="n4Box" size="15">
document.forms[0]. elements[1].value
document.forms[0].elements[0].value
document.forms[1]. elements[0].value
document.forms[1]. elements[1].value

46. Arrays
Warning: the order the elements are “entered” in the code gives the item its index
Original order:
Ch14-Ex-08.html
After order change:
Ch14-Ex-08a.html

47. Assignment PTW14 Grade based on: See Assignments web page Appearance
Technical correctness of code
Proper results