Transcript CSCI N341: Client-Side Web Programming Copyright ©2004

Using Decision Structures
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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 ...
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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.
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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.
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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.
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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.
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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.
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
“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°”
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
“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 …
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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)
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
Available Relational Operators
Comparison
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
JavaScript Relational Operator
==
!=
<
<=
>
>=
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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
}
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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
}
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
The Conditional Operator
• Sometimes, it may be convenient for you
to use a shortcut for dual alternative (IfThen-Else) structures.
• The shortcut is called the conditional
operator. Its general form looks like this:
Condition
?
Action If
True
:
Action If
False
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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)
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
The Conditional Operator
• The previous code using a conditional
operator:
strGreeting = “Hello ” +
(strUserName != null ?
strUserName : “there.”);
Example adapted from JavaScript: The Definitive Guide (Flanagan)
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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.
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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!
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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:
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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.
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
More on Boolean Operators
• From Boolean expressions, we can
develop Truth Tables:
Cond A
Cond. B
A && B
A || B
!(A)
T
T
F
F
T
F
T
F
T
F
F
F
T
T
T
F
F
F
T
T
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
Multiple Conditions
Cond.
Question
Yes No
Response
I
Weekend?
First day?
X
X
-
II
Weekend?
First day?
Weekend?
X
-
- Response 3
X Response 4
X Response 5
First day?
Weekend?
First day?
X
-
- Response 6
X Response 7
X Response 8
III
IV
Response 1
Response 2
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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:
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
Operator Precedence
Order
Description
1
Dot Operator
2
Parenthesis (Work from inside
out)
3
Instance Operator
4
Multiplication, Division, Modulus
5
Addition, Subtraction,
Concatenation
Operator
.
()
new
* / %
+ -
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
Operator Precedence (continued)
Order
Description
Operator
6
Assignment
= += -=
*= /= %=
7
Comparison Operators
<, >, <=, >=
8
Inequality
9
Boolean AND
&&
Boolean OR
||
10
!=
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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).
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
Switch Structure Example
Code Example
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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)) …
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
window.confirm() &
Boolean Example
Code Example
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
Questions?
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science
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)
CSCI N341: Client-Side Web Programming
Copyright ©2004  Department of Computer & Information Science