1. JavaScript and Ajax (Control Structures) Week 4 Web site: http://fog.ccsf.edu/~hyip

2. Control Structures Control structures let the programmer controls the flow of the program make the programs capable of reacting dynamically to a variety of conditions.

3. if Control Structure “if” statement has two forms:  The first form is (no else clause): if (condition) statement; OR if (condition) { statements; }  The second form introduce an else clause that it executed when condition is false: if (condition) { statements; } else { default statements; }

4. else if Statements “else if” is not really a JavaScript statement, but simply a frequently used programming idiom that results when repeated if/else statements are used. if (condition) { statements; } else if (condition2) { statements; } else if (conditon3) { … } else { default statements; }

5. The Switch Statement When a switch executes, it computes the value of expression and then looks for a case label that matches that value. If it finds one, it starts executing the block of code at the first statement following the case label if it does not find a case label with a matching value, it starts execution at the first statement following a special default: label. Or, if there is no default: label, it skips the block of code all together. switch (expression) { case label1: statements; break; case label2: statements; break; … default: statements; }

6. The for Loop The for loop is the perfect tool when you know how many times you need to perform a particular set of actions. for (initial expression; condition; update expression) { statements; } for (var i=1; i < 3; i++) { document.write("i is: ", i); }

7. The for/in Loop The for/in statement provides a way to loop through the properties of an object. for (variable in object) { statements; } The body of the loop is executed once for each property of object. Before the body of the loop is executed, the name of one of the object’s properties is assigned to variable as a string. Within the body of the loop, you can use this variable to loop up the value of the object’s property with the [ ] operator: for (var prop in obj) { document.write("Prop name: ", prop, "value: ", obj[prop], " "); }

8. The for/in Loop (continue…) You can copy the name of all object properties into an array: var obj = { x: 1, y:2, z:3 }; var my_array = new Array(); var i = 0; for (my_array[i++] in obj) { /* empty loop body */ } // result my_array[0] = x etc… JavaScript arrays are special kind of object: for (i in my_array) { alert(i); // index of array will be display, 0 to 2 }

9. The while Loop The while statement works by evaluating “expression”. If it is fales, JavaScript moves on to the next statement after while statement in the program. If it is true, the “statements” that forms the body of the loop is executed, and “expression” is evaluated again. The cycle continues until “expression” evaluates to false: while (expression) { statements; }

10. The do/while Loop The do/while loop is much like a while loop, except that the loop expression is tested at the bottom of the loop rather than at the top. This means that the body of the loop is always executed at least once: do { statements; } while (expression) The do/while loop is less commonly used than its while cousin. It is somewhat uncommon to encounter a situation in which you are always sure that you want a loop to execute at least once.

11. label The “case:” and “default:” labels used with the switch statement are a special case of a more general label statement. Any statement may be labeled by preceding it with an identifier name and a colon (:) identifier: statement; parser: for (var i=0; i<5; i++) { } By labeling a statement, you give it a name that you can use to refer to it elsewhere in your program. You can label any statement, although the only statements that are commonly labeled are loops – while, do/while, for and for/in. By giving a loop a name, you can use break and continue to exit the loop or to exit a single iteration of the loop.

12. The break Statement The break statement causes the innermost enclosing loop or a switch statement to exit immediately: break; Sometimes a loop is used to perform a task like searching for a desired string. Once the desired item is found, there is no need to continue looping. “break” statement provides a way for us to break out of such a loop when our task is accomplished. var a = ["ABC", "xyz", "target", "BbC", "ccd"]; for (var i=0; i<a.length; i++) { if(a[i] == "target") { alert("Found it"); break; }

13. The break statement with label JavaScript allows the break keyword to be followed by the name of a label: break lebel_name; outerloop: for (var i=0; i<5; i++) { innerloop: for (var j=0; j<5; j++) { if(j>3) break; // quit the innermost loop if(i == 2) break innerloop; // quit the inner loop if(i == 4) break outerloop; // quit the outer loop }

14. The continue Statement The continue statement is similar to the break statement. Instead of exiting a loop, however, continue restarts a loop in a new iteration: continue; The continue statement, in both its labeled and unlabeled forms, can be used only within the body of a while, do/while, for, or for/in loops. Using it anywhere else causes a syntax error. The continue statement can also be used with a label: continue label_name;

15. The throw Statement An exception is a signal that indicates that some sort of exceptional condition or error has occurred. To throw an exception is to signal an error or exceptional condition. To catch an exception is to handle it – to take whatever actions are necessary or appropriate to recover from the exception. In JavaScript, exceptions are thrown whenever a runtime error occurs and whenever the program explicitly throws one using the throw statement. Exceptions are caught with the try/catch/finally statement. The throw syntax: throw expression;  Expression may evaluate to a value of any type. Commonly, it is an Error object or an instance of one of the subclasses of Error. It can also be useful to throw a string that contains an error message, or a numeric value that represent some sort of error code.  The expression can be a string, integer, Boolean or an object.

16. The throw Statement (continue…) When an exception is thrown, the JavaScript interpreter immediately stops normal program execution and jumps to the nearest exception handler. Exception handlers are written using the catch clause of the try/catch/finally statement. If the block of code in which the exception was thrown does not have an associated catch clause, the interpreter checks the next highest enclosing block of code to see if it has an exception handler associated with it. This continues until a handler is found. If no exception handler is ever found, the exception is treated as an error and is reported to the user.

17. The try/catch/finally statement The try/catch/finally statement is JavaScript’s exception-handling mechanism. The try clause of this statement simply defines the block of code whose exceptions are to be handled. The try block is followed by a catch clause, which is a block of statements that invoked when an exception occurs anywhere within the try block. The catch clause is followed by a finally block containing cleanup code that is guaranteed to be executed, regardless of what happens in the try block. Both the catch and finally blocks are optional, but a try block must be accompanied by at least one of these blocks. The try, catch, and finally blocks all begin and end with curly braces. These braces are a required part of the syntax and cannot be omitted. try { } catch (e) { } finally { }

18. The try/catch/finally statement (continue…) var x=prompt("Enter a number between 0 and 10", ""); try { if(x>10) { throw "Err1"; // pass a string } else if (x<0) { throw "Err2"; }

19. The try/catch/finally statement (continue…) catch(err) { if (err == "Err1") { alert("Error number > 10"); } else if (err == "Err2") { alert("Error number < 0"); } else { alert("Error unknown"); } finally { alert("done"); }

20. The empty statement The empty statement: ; Executing the empty statement has no effect and performs no action.