1. Web Programming– UFCFB3-30-1 Lecture 16
Introducing JavaScript Loops
Web Programming– UFCFB Lecture 16
Instructor : Mazhar H Malik
Global College of Engineering and Technology

2. Goals Understand how to create while loops in JavaScript.
Understand how to create do/while loops in JavaScript.
Understand how to create simple for (counting) loops in JavaScript.

3. Computing Structures
Remember, last time we identified that all executable statements fall into one of three categories:
Sequential Structures – those structures where instructions happen in sequence. That is “A before B”, “B before C”, “C before D”, etc.
Looping Structures – Today’s unit.
Decision (Selection) Structures – those structures where code alternate executes based on some Boolean test.

4. What is a Loop?
A loop is a programming structure that contains code that will repeat until that code causes something to happen to satisfy or to not satisfy a given condition, thus ending the loop.
There are two basic “families” of loops:
Conditional Loops: Loops that depend solely on some type of Boolean test.
Iterative Loops (a.k.a. For, For … Next loops): Loops that depend on matching a maximum or minimum number of iterations (repetitions).

5. Parts of a Loop All loops share some basic parts. These include:
Condition to test: This can be a Boolean test (for conditional loops) or a test against a maximum or minimum integer value (for iterative loops).
Executable block: The block of code that will execute so long as the loop has/hasn’t yet satisfied the condition tested.
A way to end the loop: In terms of syntax, this is not necessary, but forgetting to include the method for ending the loop somewhere (usually the executable block) results in an endless loop.

6. Conditional Loops
Conditional loops are based on some type of Boolean test.
Conditional loops are useful when the loop’s executable block should execute for an indeterminate length of time. You, as the programmer, don’t know how many times the executable block will execute in practice.

7. Conditional Loops
Conditional loops are often defined by where the condition is written, in reference to the executable block:
Pre-test loops: The condition is located before the executable block. There is a possibility that a pre-test loop may never execute. In JavaScript, the while loop is a type of pre-test loop.
Post-test loops: The condition is located after the executable block. A pre-test loop’s executable block will always execute at least once. In JavaScript, the do … while loop is a type of post-test loop.

8. The “while” Loop Allows repeatable code until a given condition is met
Useful when the program should go on for an indeterminate length of time
Must have a way of terminating the structure from within the loop!
Pre-Test Loop (Loop may NEVER execute)

9. 3 Basic Parts of a While Loop
The condition being tested
The action to be performed while the condition is evaluated to be true
A method by which the condition can be evaluated to be false, ending the while loop

10. While Loop – Everyday Example
while (sign is not a stop sign) { keep driving; recognize next sign; }
condition to test
what to do while true
what to do while true
how to stop

11. While Loops and User Control
Many while loops have a definitive ending specified in the condition programmed by the programmer (i.e. – counters)
However, most of the time we need code to repeat until the user (not the programmer) decides when it’s time to quit
You can write a program like this using a combination of while and if/else structures

12. The “do/while” Loop
Allows repeatable code while a given condition is true.
Useful when the program should go on for an indeterminate length of time
Must have a way of terminating the structure from within the loop!
Post-Test Loop (Loop always executes AT LEAST ONCE)

13. Basic Parts of a Do/While Loop
The action to be performed AT LEAST ONCE and while the condition is evaluated to be true
The condition to test
A method by which the condition can be evaluated to be false, ending the while loop

14. Do/While Loop – Everyday Example
do { keep driving; recognize next sign; } while (sign is not a stop sign);
what to do while true
how to stop
condition to test

15. The “for” Loop AKA – The Counting Loop OR Counter-Controlled Loop
Allows repeatable code until in an iterative loop for a finite amount of times.
Useful when the program runs for a pre-determined length of time.
Must have a way of terminating the structure from within the loop’s header (test against an maximum or minimum value).

16. Parts of a For Loop The conditions for the test
Starting point for counter
A maximum/minimum value
A way to increment/decrement the counter
The action the loop should perform while the counter hasn’t met the max/min.

17. for(var i=0; i<100; i++) { keep driving; }
For Loop – Example
Maximum Value
for(var i=0; i<100; i++) { keep driving; }
How to Increment
Starting Point
what to do when i<100

18. Questions?