1. JavaScript 101
Lesson 8: Loops

2. Lesson Topics Introduction to loops The advantages of loops
Increment and decrement operators
For loop and while loop syntax
Controlling loops with conditional expressions

3. Loops
A powerful feature computers is the ability to repeat steps over and over as many times as necessary
Programming languages include statements that define a section of code that repeats
The generic name for a programming statement that repeats is a loop
The set of statement which is repeatedly executed is called the body of the loop

4. Controlling loops
Loops repeat code over and over, but eventually they do have to stop
Common way to control loops is to repeat a section of code a certain number of times
This requires counting how many times the loop has repeated, then stopping when the right number has been reached

5. Counting with the increment and decrement operators
JavaScript uses the increment and decrement operators for counting
Increment means increase (get larger), decrement means decrease (get smaller)

6. Increment operator
The increment operator ++ adds 1 to the value of a variable
Example:
num++;
++num; both add 1 to value in num
Can use ++ before or after the variable

7. Decrement Operator
The increment operator -- subtracts 1 from the value of a variable
Example:
num--;
--num; both subtract 1 from value in num
Can use -- before or after the variable

8. The for Loop
The for loop repeats a section of code a specific number of times
Syntax:
for (expression1;expression2;expression3) {
statements to be repeated go here }

9. The for Statement (cont.)
The for statement has three parts
part 1: Initializes the control variable in expression1
part 2: Tests expression2. If it is true, the body of the loop repeats
part 3: Update the value of the control variable using expression3
Repeats steps 2 and 3,until expression2 becomes false

10. The while Loop The while loop is repeats until its condition is false
Syntax:
while (condition) {
Statements to be repeated }
Where condition is a true or false test

11. The while Loop (cont.)
The while loop is implemented using the following steps
Step 1: The condition is tested to see whether it is true or false
Step 2: If condition is true, the loop body repeats
Repeats steps 1 and 2 until condition becomes false

12. In the lab You will use loop statements in your code
Open Notepad and create a new HTML document named lesson0801.html
Enter the code on p exactly as you see it
Save the file and open it using either Internet Explorer or Netscape

13. Student Modifications
Execute the code on p using different values
Find and display another image in the loop body
Re-write the code using a while loop instead of a for loop

14. Student Modifications (cont.)
Modify the code on p as follows:
Add a second button that calls the function shake() with a different value for the parameter
Use the onLoad event handler to shake your window as soon as it loaded

15. Lesson Summary Loops are sections of code that repeat over and over
JavaScript statements that repeat include the for loop and the while loop
The increment operator and the decrement operator are used to control loops
How to use the onLoad event handler