JavaScript 101 Lesson 8: Loops

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

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

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

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)

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

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

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 }

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

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

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

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

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

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

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