Microsoft 70-480: Implement program flow

Exam Objectives

Iterate across collections and array items; manage program decisions by using switch statements, if/then, and operators; evaluate expressions

Quick Overview of Training Materials

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 3 and 6
Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 4
MSDN - Controlling Program Flow (JavaScript)
MSDN - JavaScript Statements - if(), switch(), while(), for()
MSDN - forEach Method (Array)
Stackoverflow - JavaScript Collection
MozDN - Statements - for...in, break
Detecting Object Property and Method Support - O'Reilly

Iteration

Iteration over collections and arrays is done with loops.  There are several forms of loops and iterators:

• while - checks a condition, and if true it executes a block of code. After each execution, it rechecks the condition. When the condition is no longer true, the loop ends.
• do/while - executes a block of code, then checks a condintion. Similar to while, but will always run at least once (if the first check for while is false, the code block will never run)
• for - uses a counter to determine how many times to execute the code block.
• for/in - executes a block of code for each property in an enumerable object
• forEach - a method of the Array object that executes a callback function for each index in the array. The callback function must be in the form function [callbackName] (value, index, array) {}.

Most loops can also be stopped by using the break statement (NOT forEach).  Here are some quick examples of each:

var i = 0; while(i<5){console.log(i);i++;}   // 0, 1, 2, 3, 4

var i = 5; while(i<5){console.log(i);i++;}   // undefined

var i = 5; do{console.log(i);i++;}while(i<5) // 5

for(i=0; i<5; i++){console.log(i);}          // 0, 1, 2, 3, 4

obj = {"1":"abc","2":"def","3":"ghi",} // define object
for( key in obj ) {console.log(key + " : " + obj[key]);}
// 1 : abc, 2 : def, 3 : ghi

var arr = ["a","b","c"] // define array

arr.forEach(function (v, i, a) { console.log(v); })

// a, b, c ... notice this uses an anonymous callback

var i = 0;while(i<5){console.log(i);i++; if(i==3)break;}

// 0, 1, 2

Conditionals - If, If...else, Switch

Conditionals will evaluate a condition statement and execute a block of code if the condition results in true.  The simplest is if(), which will evaluate a single condition statement and either execute or skip the following lnie or block of code. If only one line of code is subject to the condition, it is not necessary to use brackets, however blocks of code will need brackets (this is true of other loops and conditionals as well):

if(true)
   console.log("true");
   //this line is outside the if

if(true){
   console.log("true");
   //this line is inside the if
}

The if...else statement can be used when two blocks of code are mutually exclusive:

if(test == true)
   console.log("true");
else
   console.log("false");

if...else statements can be chained together:

if(order == 1)
   console.log("first");
else if(order == 2)
   console.log("second");
else
   console.log("... in the back");

In some cases (such as when you have a long list of possible values with different behavior for each) it makes sense to use a switch-case. A switch is passed a variable that acts like a key, and begins executing code when it matches a case label, stopping when it hits a break statement. Multiple labels can be stacked to execute the same block of code, and a default can be specified that :

switch(animal){
   case "puppy":
   case "dog":
      says = "woof";
   break;
   case "kitty":
   case "cat":
      says = "meow";
   break;
   case "cow":
      says = "moo";
   break;
   case "fox":
      says = "Gering-ding-ding-ding-dingeringeding";
   break;
   default:
      says = "uhhh....";
   break;
}

Switch wrapped in a function and executed in the console.

Logical  and Comparison operators

A discussion of conditional statements is moot without an understanding of operators with boolean return values. The three most important logical operators are:

• && AND - Compares two expressions, if both are true, the operator returns true.
• || OR - Compares two expressions, if EITHER is true, the operator returns true.
• ! NOT - Returns the opposite. so !true => false, and !false => true.

An interesting thing about logical operators is that they "short circuit". If the left side of an AND is false, the whole expression is immediately false (without even looking at right side). If the right side of an OR is true, then the whole expression is true.  This quality makes AND good for graceful feature checking (progressively more specific checks, if one is false then the following checks are skipped) and make OR good for assigning values in case of NULL:

if(API && API.Feature && API.Feature.value == X) {...}

// if the API is present, check for feature, if feature is present check for value equal to X. If that is all true, execute code block...

a = b || c ;

// if b has a truthy value, a = b, but if b is null, then a = c;

Comparison operators are used on numbers and some strings, and are mostly self explanitory. One note is that strict equality (===) checks for value AND type. So 3 === '3' will return false, while 3 == '3' will return true.  Comparison operators include:

• == Equal 
• != Not Equal
• === Strictly Equal
• !== Not Strictly Equal
• >= Greater than or Equal
• <= Less than or Equal
• < Greater than 
• > Less than