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

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

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 }

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?

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

Three Types of Loops For While Do-While

For While Do-While Three Types of Loops

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 }

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

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

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

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

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

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

For While Do-While Three Types of Loops

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

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

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

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) }

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

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

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

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

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

For While Do-While Three Types of Loops

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

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

Arrays

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

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

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

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

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

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

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

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]

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

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

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:

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

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.

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!

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

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

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

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

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