Web Programming– UFCFB3-30-1 Lecture 16 Introducing JavaScript Loops Web Programming– UFCFB3-30-1 Lecture 16 Instructor : Mazhar H Malik Email : mazhar@gcet.edu.om Global College of Engineering and Technology

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.

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.

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).

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.

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.

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.

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)

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

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

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

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)

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

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

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).

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.

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

Questions?