WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Decision Making with Control Structures and Statements (non-audio version) © Dr. David

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


Tutorial 4

Decision Making with Control Structures and Statements

Section A - Decision Making


Tutorial 4A Topics

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


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


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


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;


conditional expression

truestatement 2

false

statement 3

statement 1 if flow diagram


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)


Evaluating an “if” statement to true


Evaluating an “if” statement to false


“if” statement with command block


if Statements

• Conditional Expression– Can consist of:

• Comparison operators• Logical operators• Combination of the two

– Must resolve to Boolean value


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


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


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


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;


conditional expression

true

if statement

false

subsequent statement

prior statement

else statement

if-else diagram


if…else statement


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


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


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);}


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;


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.


Greeting program with

nested if statements

Greeting program with

nested if statements


Greeting program with nested if statements – proper formatting


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



eTask 3


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?


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


Examples of case labels


Greeting program with a switch

statement


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



eTask 4


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.


End of eLesson

• Jump to the Beginning of this eLesson

• WDMD 170 Course Schedule

• D2L Courseware Site

Documents

WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Decision Making with Control Structures and Statements (non-audio version) © Dr. David