1. Using Decision Structures

2. Goals Understand why we use decision-making structures in programming
Understand how to create If/Else structures
Understand how to test multiple conditions
Understand how to use Boolean operators
Understand how to create switch structures

3. Computers as “Decision Makers”
Modern computers seem to “think”.
Early computers, however, did not have such an ability.
Early programs used sequential logic. That is, Step A happened before Step B. Step B happened before Step C, etc.
Sequential programs are easy to write, but lack flexibility.
One of the ways we can simulate a computer’s ability to think is to program using decision structures ...

4. Computing Structures
In modern programming, 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 (Iterative) Structures – those structures where instructions repeat until the program meets a given condition (test).
Decision (Selection) Structures – Today’s unit.

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

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

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

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

9. “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°”

10. “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 …

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

12. 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
>=

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

14. The “If” Conditional if (condition is true) { perform this action }
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 }

15. 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 }

16. Making Case-Insensitive Comparisons
We can use a special method of the String object called the String.toUpperCase() method to make case-insensitive comparisons.
Using String.toUpperCase() will see the values “YES”, “Yes”, “yes”, “yEs”, etc. as the same thing.

17. Example of String.toUpperCase()
if(strAns.toUpperCase() == “YES”) { //Code for YES answer }else{ //Code for NO answer }//end if

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

19. 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!

20. 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:
Still, the best solution is to use an if-else if structure:

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

22. 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:

23. Multiple Conditions I II III IV Response 1 Response 2 Response 3
Question
Yes No
Response I
Weekend? X -
Response 1
First day? II
Response 2
III
Response 3 IV
Response 4

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

25. More on Boolean Operators
From Boolean expressions, we can develop Truth Tables:
Cond A
Cond. B
A && B
A || B
!(A) T F

26. 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) …
if(!(myVar)) …

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

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

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

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

31. Operator Precedence (continued)
Order
Description
Operator 6
Assignment
= += -= *= /= %= 7
Comparison Operators
<, >, <=, >= 8
Inequality != 9
Boolean AND
&& 10
Boolean OR ||

32. Questions?

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