Implementing program flow

Program flow can be conditional, iterative, or behavioral:

Conditional program flow is based on evaluating state to make a decision as to which code should run.
Iterative flow is the ability to process lists or collections of information systematically and consistently.
Behavioral flow can be defined as an event or callback in which specific logic should be applied based on user engagement with the web application or the completion of another task.
Exception handling constructs provide the ability to run specific logic in the case of an error in the program.

Evaluating expressions

To use a conditional flow statement, you must evaluate some data against some condition, which you do by using conditional operators.

Combining logical and conditional operators is useful when condition must be met before processing specific logic. The following Table outlines the available conditional and logical operators:

Operator	Type	Description
>	Conditional	Evaluates whether the value on the left is greater than the value on the right
<	Conditional	Evaluates whether the value on the right is greater than the value on the left
>=, <=	Conditional	Evaluates the same as > or < but with the additional logic that the values can also be equal
!=	Conditional	Evaluates whether the values aren’t equal
==	Conditional	Evaluates whether the values are equal independent of the underlying data type
===	Conditional	Evaluates whether the values are equal both in value and underlying data type
&&	Logical	The AND logical operator, in which the expressions on both sides must evaluate to true
\|\|	Logical	The OR logical operator, in which at least one expression on either side must evaluate to true

Using if statements

This if statement starts on a new line with the keyword if. In parentheses following the if statement is a series of one or more expressions, separated by logical operators when more than one expression is provided.

The code block immediately following the if statement conditional expression runs only when the expression evaluates to true.

The following code demostrates this:

<head>
<style type="text/css">
    #canvas1 {
        width: 150px;
        height: 150px;
        border: 1px solid red;
    }
</style>
</head>
<body>
<input type="submit" onclick="ifStatement()" value="IF STATEMENT" /><br />
<canvas id="canvas1" style="background-color:green;"></canvas>           
<script type="text/javascript">
     var ifStatement = function() {
        var canvas = document.getElementById("canvas1");
        if (canvas.style.backgroundColor == 'green') {
            alert("Proceed");
        }
     }
</script>
</body>

Using else-if statements

When the expression evaluates the if statement to false, the block immediately following the else keyword runs.

The else keyword is optional. An if statement can exist as a standalone statement when no logic is available to run when the expression evaluates to false.

The following code runs the else-if statement:

<body>
<input type="submit" onclick="elseIf()" value="ELSE-IF STATEMENT & OR OPERATOR" /><br />
<canvas id="canvas1" style="background-color:green;"></canvas>           
<script type="text/javascript">
    var elseIf = function () {
        var canvas = document.getElementById("canvas1");
        if (canvas.style.backgroundColor == 'red' || 
            canvas.style.backgroundColor == 'yellow') {
            alert('Stop!!! Because is Red or Yellow ');
        } else if (canvas.style.backgroundColor == 'green') {
            alert('Proceed Because is Green');
        }
    }
</script>
</body>

Using switch statements

The switch statement consists of several parts. The first is the switch keyword itself, followed by parentheses surrounding an expression to evaluate.

Following the switch line is a series of case statements enclosed in braces. The case statement provides the values to evaluate against.

Each case statement contains a required break keyword which denotes the end of that particular case statement. Omitting the break keyword will cause unexpected behavior.

The default keyword, which serves as a fail safe. If none of the case statements evaluate to true, the default statement provides a way to handle the situation.

The following example demonstrates a switch statement:

<body>
<input type="submit" onclick="step1()" value="Switch Statement" /><br />
<canvas id="canvas1" style="background-color:green;"></canvas>
<script type="text/javascript">
    var step1 = function () {
        var canvas = document.getElementById("canvas1");
        switch (canvas.style.backgroundColor) {
            case 'yellow':
                alert('slow down');
                break;
            case 'green':
                alert('proceed because is green');
                break;
            case 'red':
                alert('stop');
                break;
            default:
                alert('unknown condition');
                break;
        }
    }
</script>
</body>

Leveraging the OR operator in a switch statement

You leveraging the OR operator in a switch statement. The case statements are stacked onto each other. If any of this case statements evaluates to true, the code following that case is processed.

The following code demonstrates this:

<body>
<input type="submit" onclick="step2()" value="Switch and OR" /><br />
<canvas id="canvas1" style="background-color:green;"></canvas>
<script type="text/javascript">
    var step2 = function () {
        var canvas = document.getElementById("canvas1");
    switch (canvas.style.backgroundColor) {
        case 'yellow':
        case 'green':
            alert('proceed because is Green OR Yellow');
            break;
        case 'red':
            alert('stop');
            break;
        default:
            alert('unknown condition');
            break;
    }
}
</script>
</body>

Using ternary operators

The ternary operator is essentially a shorthand mechanism for an if statement. When the expression evaluates to true, the true part runs; otherwise, the false part runs.

This code demonstrates using the ternary operator to check the background color:

<body>
<input type="submit" onclick="ternaryOperator()" value="TERNARY OPERATORS" /><br />
<div id="#div1"> </div>
<canvas id="canvas1" style="background-color:green;"></canvas>
<script type="text/javascript">
   var ternaryOperator = function () {
       var canvas = document.getElementById("canvas1");
       canvas.style.backgroundColor == 'green' ? document.getElementById("#div1").innerHTML 
                                     = ("Proceed Because is Green!!!") :
     document.getElementById("#div1").innerHTML = ("Stop");;
   }
</script>
</body>

Ads Right