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

WDMD 170 – UW Stevens Point 2 Tutorial 4 Decision Making with Control Structures and Statements Section A - Decision Making

WDMD 170 – UW Stevens Point 3 Tutorial 4A Topics Section A - Decision Making –if statements –if…else statements –nested if statements –switch statements

WDMD 170 – UW Stevens Point 4 Previewing the CartoonQuiz.html file Follow the directions on p. 172 of Gosselin Here is the file: CartoonQuiz.htmlCartoonQuiz.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.)

WDMD 170 – UW Stevens Point 5 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

WDMD 170 – UW Stevens Point 6 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;

WDMD 170 – UW Stevens Point 7 conditional expression true statement 2 false statement 3 statement 1 if flow diagram

WDMD 170 – UW Stevens Point 8 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)

WDMD 170 – UW Stevens Point 9 Evaluating an “if” statement to true

WDMD 170 – UW Stevens Point 10 Evaluating an “if” statement to false

WDMD 170 – UW Stevens Point 11 “if” statement with command block

WDMD 170 – UW Stevens Point 12 if Statements Conditional Expression –Can consist of: Comparison operators Logical operators Combination of the two –Must resolve to Boolean value

WDMD 170 – UW Stevens Point 13 Comparison and logical operators with the if statement (p. 176) (source file)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

WDMD 170 – UW Stevens Point 14 Valid JS Expressions Stated 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))

WDMD 170 – UW Stevens Point 15 Refer to the instructions on pages (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

WDMD 170 – UW Stevens Point 16 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;

WDMD 170 – UW Stevens Point 17 conditional expression true if statement false subsequent statement prior statement else statement if-else diagram

WDMD 170 – UW Stevens Point 18 if…else statement

WDMD 170 – UW Stevens Point 19 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.

WDMD 170 – UW Stevens Point 21 Nested if and if…else Statements Nested statements –Statements contained within other statements (note how indentation makes the usage much clearer) Syntax if (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.

WDMD 170 – UW Stevens Point 24 Greeting program with nested if statements

WDMD 170 – UW Stevens Point 25 Greeting program with nested if statements – proper formatting

WDMD 170 – UW Stevens Point 26 Refer to the instructions on page (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

WDMD 170 – UW Stevens Point 27 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?

WDMD 170 – UW Stevens Point 28 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

WDMD 170 – UW Stevens Point 29 Examples of case labels

WDMD 170 – UW Stevens Point 30 Greeting program with a switch statement

WDMD 170 – UW Stevens Point 31 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

WDMD 170 – UW Stevens Point 32 Assignment Complete exercises #3,4,6-9,12 on pages (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.

WDMD 170 – UW Stevens Point 33 End of eLesson Jump to the Beginning of this eLesson WDMD 170 Course Schedule D2L Courseware Site