Using Control Structures
GoalsUnderstand the three basic forms of control
structuresUnderstand how to create and manage
conditionalsUnderstand how to change program
execution flow based on conditionalsBring it! (Practice with conditionals)
Programming and Control StructuresAll programming languages support
Control StructuresEssentially, 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: SequentialSequential 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: BranchingBranching 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: LoopingLooping 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…
Understanding ConditionalsIn a later presentation, we will look at
branching and looping in detail, but for now, let’s flesh out the toolset of the conditional
A conditional is a Boolean expresssion that can be used to control program execution.
(And btw, a Boolean expression is one that can be evaluated as True or False)
As it turns out, you already know quite a bit about conditionals!
“Concepts” to “Conditions”
Consider the following statements:◦ “It’s raining.”◦ “Your shirt is blue.”◦ “There are no more records in the file.”◦ “The user clicked ‘YES’”
All of these statements are Boolean expressions – we could figure out if each is a True or False statement
On the other hand, an expression such as “x + 3” isn’t a Boolean. Even if you told me what x was, ‘x + 3’ doesn’t result in a True or False.
Programmers construct conditionals to act as Guards in front of a section of code… if the conditional is TRUE, the guard let’s you pass into a section of code. If the conditional is FALSE, the guard blocks you from entering.
The Conditional as SentrySo… consider the following conditional:
If (x > 3){Do a bunch of fun stuff; Including more fun stuff; and even more fun stuff; and yati, yati, yati!!!}Else{Poke yourself in the eye with a sharp stick}
The conditional (x>3) stands guard in front of the fun lines of code. If the expression turns out to be True (ie, x IS greater than 3), the sentry (ie, soldier) lets you pass into the fun code. This sentry analogy is so compelling that the variable in a conditional is referred to as the “sentinel” value.
If the conditional is False, the sentinel blocks you from entering the fun code and yikes, you gotta get that stick….
Given how important the conditional is, it’s worth understanding in detail the power it offers a programmer.
Using the Relational OperatorThe 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 >=
Multiple ConditionsSometimes, 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 OperatorsSometimes, 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)
T T T T FT F F T FF T F T TF F F F T
Multiple ConditionsCond. Question Ye
sNo Response
I Weekend? X - Response 1First day? X - Response 2
II Weekend? X - Response 3First day? - X Response 4
III Weekend? - X Response 5First day? X - Response 6
IV Weekend? - X Response 7First day? - X Response 8
Operator PrecedenceOrde
r Description Operator
1 Dot Operator .
2 Parenthesis (Work from inside out) ()
3 Instance Operator new
4 Multiplication, Division, Modulus * / %
5 Addition, Subtraction, Concatenation + -
Operator Precedence (continued)
Order Description Operator
6 Assignment = += -=*= /= %=
7 Comparison Operators <, >, <=, >=
8 Inequality !=
9 Boolean AND &&
10 Boolean OR ||
Boolean ValuesWhen 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() MethodBoolean 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?
ResourcesJavaScript: 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)