Mastering Loops in JavaScript

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 decrementoperators 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. 8-10 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. 8-10 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. 8-12 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