Using Control Structures

Goals Understand the three basic forms of control structures Understand how to create and manage conditionals Understand how to change program execution flow based on conditionals Understand branching ◦ Simple if ◦ Two branch if-else ◦ Multi-branch conditionals  Else if  Nested branching  Case/Switch ◦ Branching and Defensive Programming Practices

Programming and Control Structures All programming languages support Control Structures Essentially, control structures give programmers a toolset for “controlling” what code gets executed, and how many times. There are three basic control structures: ◦ Sequential ◦ Branching ◦ Looping

Control Structures: Sequential Sequential Code – Unless otherwise indicated, programming instructions are executed in order… the first line of code, then the next, then the third. Sequential processing is the default control structure (ie, as a programmer, you get it without asking!)

Control Structures: Branching Branching structures allow the programmer to structure mutually exclusive blocks of code Based on the value of some conditional, either one block of code executes or another…. For example: If it’s raining, take an umbrella. Else, leave the umbrella at home.

Control Structures: Looping Looping structures allow the programmer to create repeating blocks of code. The code can repeat zero or many times, based on the value of some conditional. For example: Would you like to play a game? Game is played and ends, and the user is asked: Would you like to play again? Game is played and ends, and the user is asked: Would you like to play again…

Introducing Decision Structures Decision structures consist “of a test condition together with one or more groups (or blocks) of statements. The result of the ‘test’ determines which of these blocks” the program will execute (Venit) In all decision structures, ONE AND ONLY ONE block executes. The program will then execute the next sequential section of code, after it evaluates a decision structure and executes the appropriate code block.

Types of Decision Structures JavaScript gives us three distinct types of Decision Structures: ◦ Single-Alternative (a.k.a – If-Then) Structure  Contains a single block of executable code that will execute IF AND ONLY IF the associated condition (test) evaluates to TRUE (we don’t care if it evaluates to false). ◦ Dual-Alternative (a.k.a – If-Then-Else) Structure  Contains exactly two blocks of code. One block will execute IF AND ONLY IF the associated condition (test) evaluates to TRUE; the other block will execute IF AND ONLY IF the associated condition (test) evaluates to FALSE.

Types of Decision Structures JavaScript gives us three distinct types of Decision Structures: ◦ Multiple-Alternative (Select Case) Structure  Contains multiple blocks (called cases), each of which will execute IF AND ONLY IF the program matches ONLY one of multiple condition (test) results. ONLY ONE BLOCK (case) will execute.

Humans as “Decision Makers” Human beings are very good at understanding concepts. We understand multiple types of syntax, too. Additionally, we understand meaning. This allows for some “gray area” in our language.

“Concepts” to “Conditions” Consider the following statements: “It’s cool outside.” “The weather is cool outside.” “It’s somewhat chilly out there!” “The temperature is expected to be around 65°”

“Concepts” to “Conditions” What does “cool” mean? Its meaning is arbitrary … Humans can understand multiple types of syntax and are able to extrapolate meaning from different syntax. However, computers don’t “think” on that level. As programmers, we need to refine human language to a more restrictive language that computers understand. One way to do this is to translate concepts to conditions which can be tested …

Using the Relational Operator The relational (comparison) operator compares two values of THE SAME TYPE (i.e. – Strings are compared to strings, integers are compared to integers, etc.) There are several different types of comparison operators (see next slide) Comparison operators HAVE NO PRECEDENCE among themselves and are evaluated LEFT to RIGHT (however, parentheses can be added to alter precedence)

Available Relational Operators Comparison JavaScript Relational Operator Is equal to == Is not equal to != Is less than < Is less than or equal to <= Is greater than > Is greater than or equal to >=

Translating the Concept Remember, that computers don’t understand arbitrary concepts Instead, we need to define the meaning of the concept for the computer Once we define what “cool” means, we can write our conditional statement

The “If” Conditional A single-alternative (If-Then) structure, allows us to specify an action IF AND ONLY IF a condition tests to TRUE. The parts of the If-Then structure: if (condition is true) { perform this action }

What if the “if” condition is not met? It is a good idea to provide an alternative plan if a condition is not met (it evaluates to FALSE). To do this, we use an “If-Then-Else” structure: if (condition is true) { perform action 1 }else{ perform action 2 }

The Conditional Operator Sometimes, it may be convenient for you to use a shortcut for dual alternative (If-Then- Else) structures. The shortcut is called the conditional operator. Its general form looks like this: Condition ? Action If True : Action If False

The Conditional Operator We can rewrite the following code using a conditional operator: strGreeting = “Hello ”; if(strUserName != null) { strGreeting += strUserName; }else{ strGreeting += “there!”; } Example adapted from JavaScript: The Definitive Guide (Flanagan)

The Conditional Operator The previous code using a conditional operator: strGreeting = “Hello ” + (strUserName != null ? strUserName : “there.”); Example adapted from JavaScript: The Definitive Guide (Flanagan)

What about multiple conditions? Sometimes, we need to consider the possibility that we need to evaluate more than value as a response to user input We can do this using nested branching.

Nested Branching Consider the following statements: ◦ “If the temperature outside is greater than 65°, I’ll wear a short- sleeved shirt.” ◦ “If the temperature outside is less than 65°, I’ll wear a sweater.” ◦ “If the temperature outside is less than 65° and is less than 45°, I’ll need to wear a coat.” These statements present us with one condition to test (the temperature), but more than two (three) possible actions!

Nested Branching We could write the code using a bunch of “if” statements, each independent of the other: However, a much more efficient (and cleaner, code-wise) way is to use a nested structure:

Multiple Conditions Sometimes, it’s necessary to combine multiple conditions to form a single, more complex text. It is a good idea to first establish a table (on paper) mapping the multiple conditions, the possible responses and the program’s reaction to responses.

Boolean Operators Sometimes, conditions can be joined together in the same test using Boolean operators: ◦ Logical AND is represented by && Example: if (A = B && C = D) … ◦ Logical OR is represented by || Example: if(A = B || C = D) … ◦ Logical NOT is represented by ! (bang symbol) Example: if( !(A = B) ) … Boolean Precedence: NOT, followed by AND, followed by OR

More on Boolean Operators From Boolean expressions, we can develop Truth Tables: Cond A Cond. B A && B A || B !(A) TTTTF TFFTF FTFTT FFFFT

Multiple Conditions Cond.QuestionYesNoResponse I Weekend? X- Response 1 First day? X- Response 2 II Weekend? X- Response 3 First day? -X Response 4 III Weekend? -X Response 5 First day? X- Response 6 IV Weekend? -X Response 7 First day? -X Response 8

Multiple Conditions After constructing our conditions table, we could use nested branching to solve the problem: A better idea is to use Boolean operators to clarify our code:

Operator Precedence OrderDescriptionOperator 1 Dot Operator. 2 Parenthesis (Work from inside out) () 3 Instance Operator new 4 Multiplication, Division, Modulus * / % 5 Addition, Subtraction, Concatenation + -

Operator Precedence (continued) OrderDescriptionOperator 6Assignment = += -= *= /= %= 7 Comparison Operators, =, = 8Inequality!= 9 Boolean AND && 10 Boolean OR ||

The Switch Structure Similar to multiple if/else statements, in that ONLY ONE BLOCK OF CODE EXECUTES and executes ONLY ONCE. Useful when the program asks the user to choose among more than two choices. Structure is divided into two parts: ◦ Switch statement – sets up the condition (test) ◦ Multiple cases – values to text against the condition

Parts of a Switch Structure Switch keyword – Tells JavaScript to test against a variable value. Cases – Tells the program what to do based on different types of test results. Breaks (CRITICAL) - Tells the program to “break out” of the ENTIRE structure once a case has been evaluates to TRUE and executes. Default – What to do when there are no more cases to evaluate (all previous cases evaluated to FALSE).

Switch Structure Example Code Example

Boolean Values When testing against Boolean values, you can use shortcuts (True Example): if(myVar == true) … is the same thing as if(myVar) … False Example: if(myVar == false) … is the same thing as if(!(myVar)) …

window.confirm() Method Boolean values are returned by the window.confirm() method. window.confirm() takes input from the user, based on which button they choose (OK=TRUE & CANCEL=FALSE) It looks and feels a lot like window.alert(), except that it has both an OK and a CANCEL button

window.confirm() & Boolean Example Code Example

Questions?

Resources JavaScript: The Definitive Guide by David Flanagan (O’Reilly, 2002) JavaScript Concepts & Techniques: Programming Interactive Web Sites by Tina Spain McDuffie (Franklin, Beedle & Associates, 2003) Extended Prelude to Programming: Concepts and Design by Stewart Venit (Scott/Jones, Inc., 2002)