CSD 340 (Blum) 1

For Loops

See Beginning JavaScript (Paul Wilton) p. 87

CSD 340 (Blum) 2

Start of LoopIntro code

CSD 340 (Blum) 3

Rest of LoopIntro code

CSD 340 (Blum) 4

LoopIntro in the browser

CSD 340 (Blum) 5

LoopHTML = "<p>" for(i=1; i<=10; i++) { LoopHTML += "Iteration #" + i + "<br />" } LoopHTML += "</p>”• After the key word for, there are three items in the

parentheses separated by two semicolons. – The first “i=1” says that we are going to use the variable i for

counting the number of times we will repeat and that we are starting at the value of 1

– The second “i<=10” says that we will continue to repeatedly execute the statements within the structure until this condition is no longer true

– The third “i++” is short hand notation for i=i+1 or i+=1 which says that after each iteration (repetition cycle) we should add 1 to i (also known as incrementing).

CSD 340 (Blum) 6

Code: Changing the “initialization” (starting place)

CSD 340 (Blum) 7

Browser: Changing the “initialization” (starting place)

CSD 340 (Blum) 8

Code: Changing the condition

CSD 340 (Blum) 9

Browser: Changing the condition

CSD 340 (Blum) 10

Code: Changing the increment

CSD 340 (Blum) 11

Browser: Changing the increment

CSD 340 (Blum) 12

Code: Counting down by two’s

CSD 340 (Blum) 13

Browser: Counting down by two’s

CSD 340 (Blum) 14

Code: Let user decide

CSD 340 (Blum) 15

Browser: Let user decide (1)

CSD 340 (Blum) 16

Browser: Let user decide (2)

CSD 340 (Blum) 17

Browser: Let user decide (3)

CSD 340 (Blum) 18

Code: A single column table

CSD 340 (Blum) 19

Browser: A single column table

CSD 340 (Blum) 20

Code: Adding attributes

CSD 340 (Blum) 21

Browser: Adding attributes

CSD 340 (Blum) 22

Code: Varying the attributes

CSD 340 (Blum) 23

Browser: Varying the attributes

CSD 340 (Blum) 24

Code: Varying height and color

CSD 340 (Blum) 25

Browser: Varying height and color