WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Decision Making with Control...

1WDMD 170 – UW Stevens Point

WDMD 170 Internet Languages

eLesson: Decision Making with Control Structures and Statements

(non-audio version)

© Dr. David C. Gibbs2003-04

2WDMD 170 – UW Stevens Point

Tutorial 4

Decision Making with Control Structures and Statements

Section A - Decision Making

3WDMD 170 – UW Stevens Point

Tutorial 4A Topics

• Section A - Decision Making– if statements– if…else statements– nested if statements– switch statements

4WDMD 170 – UW Stevens Point

Previewing the CartoonQuiz.html file

• Follow the directions on p. 172 of Gosselin

• Here is the file: CartoonQuiz.html• View the source code, taking note

of the for and if statements.(This file is also in your student files

in the Tutorial04 folder.)

5WDMD 170 – UW Stevens Point

Decision Making• Process of determining the order in

which statements execute in a program– the “flow of control”

• Decision-Making Structures– Special type of JavaScript statements used

for making decisions• Single alternative: if• Double alternative: if-else• Multiple alternatives: extended (or nested) if-

else, switch

6WDMD 170 – UW Stevens Point

if Statements

• Single-alternative “if”• Used to execute specific programming

code if the evaluation of a conditional expression returns a value of true– “Do this or don’t do this”

• Syntax (3 primary parts)statement1;if (conditional_expression)

statement2;statement3;

7WDMD 170 – UW Stevens Point

conditional expression

truestatement 2

false

statement 3

statement 1 if flow diagram

8WDMD 170 – UW Stevens Point

if Statements (2)

• Operation– If the conditional expression is true, the

statements are executed– Control then continues to subsequent

code

• “Command block”– Multiple statements contained within a

set of braces (require curly braces)

9WDMD 170 – UW Stevens Point

Evaluating an “if” statement to true

10WDMD 170 – UW Stevens Point

Evaluating an “if” statement to false

11WDMD 170 – UW Stevens Point

“if” statement with command block

12WDMD 170 – UW Stevens Point

if Statements

• Conditional Expression– Can consist of:

• Comparison operators• Logical operators• Combination of the two

– Must resolve to Boolean value

13WDMD 170 – UW Stevens Point

Comparison and logical operators with the if statement (p. 176) (source file)

var exampleVar1 = 5;if (exampleVar1 != 3) // not equal document.writeln("This line prints.");

if (exampleVar1 > 3) // greater than document.writeln("This line prints.");

if (exampleVar1 < 3) // less than document.writeln("This line does not print.");

if (exampleVar1 >= 3) // greater than or equal document.writeln("This line prints.");

if (exampleVar1 <= 3) // less than or equal document.writeln("This line does not print.");

var exampleVar2 = false;if (exampleVar1 > 3 && exampleVar2 == true) // logical and document.writeln("This line does not print.");

if (exampleVar1 == 5 || exampleVar2 == true) // logical or document.writeln("This line prints.");

if (!exampleVar2) // logical 'not' document.writeln("This line prints.");

Example 1

Example 2

Example 3

Example 4

Example 5

Example 6

Example 7

Example 8

14WDMD 170 – UW Stevens Point

Valid JS ExpressionsStated Expression

Valid JavaScript Expression

x < y <= z ((x < y) && (y <= z))

x, y, and z are greater than 0

((x > 0) && (y > 0) && (z > 0))

x is equal to neither y nor z

((x != y) && (x != z))

x is equal to y and z

((x = = y) && (x = = z))

15WDMD 170 – UW Stevens Point

Refer to the instructions on pages 177-181 (Gosselin). [Note that you are going to create a simplified version of the CartoonQuiz you previewed earlier.

• Create the file CartoonQuiz1.htm and save it in your Tutorial04 folder.

• Preview and Test your .htm file.

eTask 1

16WDMD 170 – UW Stevens Point

if…else Statements

• Used to execute one set of code if the evaluation of a conditional expression returns a value of true, otherwise executes another set of code– “Do this or do something else”

• Syntax priorStatement;if (conditional_expression)

if statement;else

statement;subsequentStatement;

17WDMD 170 – UW Stevens Point

conditional expression

true

if statement

false

subsequent statement

prior statement

else statement

if-else diagram

18WDMD 170 – UW Stevens Point

if…else statement

19WDMD 170 – UW Stevens Point

Refer to the instructions on page 183 (Gosselin). [You will make use of the if-else statement.]

• Create the file CartoonQuiz2.htm and save it in your Tutorial04 folder.

• Preview the .htm file.

eTask 2

WDMD 170 – UW Stevens Point

Nested and Extended if statements

(Accepted definitions from computer science – slightly different than Gosselin’s usage)

nested if: a selection statement used within another selection statement.

extended if: nested selection where additional if..else statements are used in the else option.

21WDMD 170 – UW Stevens Point

Nested if and if…else Statements

• Nested statements– Statements contained within other

statements (note how indentation makes the usage much clearer)

• Syntaxif (conditional_expression) {

statement(s);if (conditional_expression)

{ statement(s);

}} else {

statement(s);}

WDMD 170 – UW Stevens Point

extended if Statements

An extended if statement is an if statement where the else clause is itself another if statement.

if (expression1) statement1;else if (expression2) statement2; else if (expression3) statement3; else statement4;

WDMD 170 – UW Stevens Point

extended if Statements, cont’d.

The extended if statement is often formatted as follows:if (expression1) statement1;else if (expression2) statement2;else if (expression3) statement3;else statement4;

Notice how easy it is to read.

“Default” behavior results from omitting an expression from the final else clause.

24WDMD 170 – UW Stevens Point

Greeting program with

nested if statements

Greeting program with

nested if statements

25WDMD 170 – UW Stevens Point

Greeting program with nested if statements – proper formatting

26WDMD 170 – UW Stevens Point

Refer to the instructions on page 186 -7 (Gosselin). [You will make use of extended if-else statements.]

• Create the file CartoonQuiz3.htm and save it in your Tutorial04 folder.

• Preview the .htm file.

eTask 3

27WDMD 170 – UW Stevens Point

switch Statements• Controls program flow by executing a specific

set of statements, depending on the value of an expression

• Syntax switch (expression) {case label1:statement(s);break;case label2:statement(s);break;default:statement(s);}

Note that there is no break statement following the last case label – the default label. WHY?

28WDMD 170 – UW Stevens Point

switch Statements cont’d.

• Case labels– Identify specific code segments– Can use a variety of data types as case labels

• Break statement– Used to exit switch statements

• Default label– Contains statements that execute when the

condition expression doesn’t match any of the case labels

29WDMD 170 – UW Stevens Point

Examples of case labels

30WDMD 170 – UW Stevens Point

Greeting program with a switch

statement

31WDMD 170 – UW Stevens Point

Refer to the instructions on page 192 (Gosselin). [You will make use of the switch statement.]

• Create the file CartoonQuiz4.htm and save it in your Tutorial04 folder.

• Preview the .htm file.

eTask 4

32WDMD 170 – UW Stevens Point

Assignment

• Complete exercises #3,4,6-9,12 on pages 196-7 (Gosselin, Tutorial 04A).

• Post your solutions to your Tutorial04 folder CISSRV3 server.

• Provide a link to exercise 12 in a post to your eReview discussion group.

• Describe any difficulties and ask any questions you might have in completing exercise 12.

• You may also post any questions (and the exercise file) to the eReview group – for discussion purposes.

33WDMD 170 – UW Stevens Point

End of eLesson

• Jump to the Beginning of this eLesson

• WDMD 170 Course Schedule

• D2L Courseware Site