JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If...

30
JavaScript V Conditional Execution

Transcript of JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If...

Page 1: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

JavaScript V

Conditional Execution

Page 2: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Outline

Conditional statement If-then If-then-else

Nested If Boolean expressions

Page 3: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Program execution

Unconditional execution interpreter executes each line

in sequence

Conditional execution evaluate a test execute code only if test is true we can think of this as one step

not always executed

Need not be a single step might be a chunk of code controlled by the condition call the "body"

program step 1program step 2program step 3program step 4program step 5

condition conditional stepprogram step 2program step 3program step 4

Page 4: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Examples

if due date on book is before today's date charge overdue fee

if day of the week is not sunday or holiday parking meter must be used

if even day of the month and date between Nov 1 and April 1 car will be ticketed and towed

Page 5: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

JavaScript if statement

if (condition) statement or if (condition) { statements }

Exampleif (dateToday > dueDate)

bookOverdue = true; orif (dateToday > dueDate){

bookOverdue = true;calculateFine (dateToday, dueDate);...

}

Page 6: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

If-then-else Conditional execution

evaluate a test execute one piece of code if test is true execute another piece if test is false we can think of this as one step

one part or the other will be executed

If (condition) conditional true step(s)else condition false step(s)program step 2program step 3program step 4

program step 1

Page 7: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Examples

if the title is a new release then charge $3.00 and lending period is 2 days else charge $2.00 and lending period is 5 days

if the answer is correct then add 1 to score else print help message

Page 8: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

JavaScript

if statementif (condition) {

then part} else { else part}

Exampleif (newRelease(title)) {

charge = 3.00;lendingPeriod = 2;

} else {

charge = 2.00;lendingPeriod = 5;

}

Page 9: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

9

Boolean Tests the test that controls an if statement can be any boolean expression (i.e., an

expression that evaluates to either true or false) boolean tests are formed using relational operators because they test the relationships

between values

the boolean test in an if statement determines the code that will be executed if the test is true, then the code inside the subsequent curly braces will execute if the test is false, then the code inside the curly braces following the else will execute note that if the test is false and there is no else case, the program moves on to the

statement directly after the if

NOTE:

== is for comparisons

= is for assignments

Page 10: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

JavaScript

if statementif (condition) {

then part} else { else part}

Exampleif (newRelease(title)) {

charge = 3.00;lendingPeriod = 2;

} else {

charge = 2.00;lendingPeriod = 5;

}

Page 11: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Stylistic issues Where to put brackets

I prefer after conditionif (condition) {

... body ...} else {

... body ...} Some prefer on separate linesif (condition) {

... body ...} else{

... body ...} In some cases, you might put whole statement on one lineif (condition) { ... body ... }

Page 12: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

12

If Statement Examples

an if statement is known as a control statement, since its purpose is to control the execution of other statements

Page 13: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

13

Accessing Text Fields recall that values entered via text boxes/areas are always returned as strings

if (document.getElementById('age').value >= 18) { alert("You are old enough to vote.");}else { alert("Sorry. You are too young to vote.");}

will say that a 2-year old can vote, but a 102-year old can't!

WHY?

age = parseFloat(document.getElementById('age').value);if (age >= 18) { alert("You are old enough to vote.");}else { alert("Sorry. You are too young to vote.");}

will behave as expected

if you wish to treat a value obtained from a text box or text area as a number, you must use the parseFloat function to convert it

Page 14: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Example

ifdemo.html ifdemo2.html (with else) chill.html

Page 15: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Nested If There may be more than two possibilities to be handled Put one if statement inside another

if (temp <= 50){

if (windSpeed <= 3){windChill = temperature;

} else {

windChill = ...calculation here...;}

} else {

... wind chill undefined ...}

Example: chill2.html

Page 16: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Exercise

if (x >= y) {

if (x*10 < 100) {

document.write(“ONE”);

}

else {

document.write(“TWO”);

}

}

else {

document.write(“THREE”);}

if (x >= y) {

if (x*10 < 100) {

document.write(“ONE”);

}

else {

document.write(“TWO”);

}

}

else {

document.write(“THREE”);}

x = 0; y = 5; output ? x = 0; y = -5; output ?x = 9; y = 9; output ?x = 22; y = 21; output ?

Page 17: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Cascading ifs

Easier to read than nested style It is clear that multiple alternatives are

involvedif (condition1) then

{ action1 }else if (condition2) then

{ action2 }else if (condition3) then

{ action3 }etc

Some languages (perl) actually have a special elsif construct

Page 18: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

18

A Cleaner Notation when it is necessary to handle a large number of alternatives, nested if-else

statements can become cumbersome and unwieldy multiple levels of indentation and curly braces cause the code to look cluttered make it

harder to read/understand

example: nested if statements vs. a more readable else-if

Page 19: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

19

Die Roll Example consider a Web page that simulates the roll of a single die

will use an image to display the die will use a button to initiate the die roll

when the user clicks the button, a random die roll is selected and the corresponding image is displayed

Page 20: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

20

Die Roll Pagethe RandomInt function from random.js is used to select the random roll

depending on the roll value, the correct image is displayed

since more than two possibilities, a cascading if-else is needed

Page 21: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

21

Generalizing Code note that each case in the cascading if-else follows the same pattern

if (roll == 1) { document.getElementById('die').src = "http://dave-reed.com/book/Images/die1.gif";}else if (roll == 2) { document.getElementById('die').src = "http://dave-reed.com/book/Images/die2.gif";}else if (roll == 3) { document.getElementById('die').src = "http://dave-reed.com/book/Images/die3.gif";}else if (roll == 4) { document.getElementById('die').src = "http://dave-reed.com/book/Images/die4.gif";}else if (roll == 5) { document.getElementById('die').src = "http://dave-reed.com/book/Images/die5.gif";}else { document.getElementById('die').src = "http://dave-reed.com/book/Images/die6.gif";}

this entire cascading if-else structure could be replaced by the following:

document.getElementById('die').src = "http://dave-reed.com/book/Images/die" + roll + ".gif";

Page 22: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

22

Counters in software applications, if statements are often used to count occurrences of

conditional or user-initiated events e.g., count the number of times dice rolls come up doubles e.g., count the number of times the user guesses a number correctly

any variable that is used to record occurrences of an event is known as a counter initially, the counter is set to zero each time the specified action occurs, the counter is incremented after a given time period, the value stored in the counter will tell you the number of times the

desired event took place

Page 23: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Examples

dice.html Reed style

twodice.html note image list access with counter In-class Exercise: with double counter?

Exercise (on your own): Rewrite wind chill code as cascading ifs

Page 24: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Equality operators

Equal == Not equal != Inequality >, >=, <, <=

These are operators just like +, -, etc. What data type do they return?

i < 5

Page 25: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Decision Making: Equality and Relational Operators

Page 26: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

If Statement Gotcha 1

Type Sensitivity

The result of an inequality depend on data type 100 > 18 "100" < "18"

Page 27: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

If Statement Gotcha 2

Equality vs assignment Equality test (d == 0)

Boolean value Assignment (d = 0)

the assignment statement also has a value whatever the new value is

bad language design! Unexpected behavior

if (done = false) .. do something ..

never executed Worse yet

"", 0 are automatically converted to false if (p = 5)

.. do something .. always executed

Check that if statements only use the equality operator ==

Page 28: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Boolean Operators

&& and

|| or

! not

Page 29: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Boolean expressions

Expressions returning Boolean values can be used as a condition in an if statement

if wind speed above 3 and temperature below 50 calculate wind chill

if (windSpeed > 3 && temperature < 50)

calculate (windSpeed, temperature)

Page 30: JavaScript V Conditional Execution. Outline Conditional statement If-then If-then-else Nested If Boolean expressions.

Other Examples

die1 = RollDie();

die2 = RollDie();

doubles? die1 == die2 total is 7? die1 + die2 == 7 roll is a 1 and 1? (die1 == 1) && (die2 == 1) roll contains a 3? (die1 == 3) || (die2 == 3)

total is 7 or 11? (die1 + die2 == 7) || (die1 + die2) == 11

twodice.html In-class Exercise: with double counter?


Chapter 2 Review. Conditional statements have a IF and a THEN. 2 Hypothesis Conclusion.

Chapter 2 Review. Conditional statements have a IF and a THEN. 2 Hypothesis Conclusion.

1 st Conditional Developed by Ivan Seneviratne. Conditional sentences have at least two clauses: If clauses and Then clauses. Examples: If I go into.

1 st Conditional Developed by Ivan Seneviratne. Conditional sentences have at least two clauses: If clauses and Then clauses. Examples: If I go into.

Conditional Statements | If-then Statements

Conditional Statements | If-then Statements

Conditional Statements. Conditional Statement An “if” … “then” …. (may be true or false) Example: If you eat Doritos, then you will have bad breath.

Conditional Statements. Conditional Statement An “if” … “then” …. (may be true or false) Example: If you eat Doritos, then you will have bad breath.

Conditional Statements. Conditionals Definition A conditional is an if-then statement. Symbolic p q read If p, then q or p implies q Diagram p q.

Conditional Statements. Conditionals Definition A conditional is an if-then statement. Symbolic p q read If p, then q or p implies q Diagram p q.

Topics Control Flow Structure – Conditional Jump – Unconditional Jump Control Flow Structures – IF-THEN – IF-THEN-ELSE – CASE Branches with Compound Conditions.

Topics Control Flow Structure – Conditional Jump – Unconditional Jump Control Flow Structures – IF-THEN – IF-THEN-ELSE – CASE Branches with Compound Conditions.

Conditional Processing If … then … else While … do; Repeat … until.

Conditional Processing If … then … else While … do; Repeat … until.

Conditional Processing in EG - SAS · IF..THEN..ELSE CONDITIONAL PROCESSING IN ENTERPRISE GUIDE _____ Judy Orr Lawrence –SAS Training ... IF THEN Condition can be ... Conditional

Conditional Processing in EG - SAS · IF..THEN..ELSE CONDITIONAL PROCESSING IN ENTERPRISE GUIDE _____ Judy Orr Lawrence –SAS Training ... IF THEN Condition can be ... Conditional

2.1 Conditional Statements Conditional Statement – a logical statement with two parts. P, the “if part”, hypothesis Q, the “then part”, conclusion If.

2.1 Conditional Statements Conditional Statement – a logical statement with two parts. P, the “if part”, hypothesis Q, the “then part”, conclusion If.

2.2/2.4: Conditional Statements - mrsesposito · Statement Definition Example Conditional A statement that can be written in the form “if p, then q” If an animal is a cat, then

2.2/2.4: Conditional Statements - mrsesposito · Statement Definition Example Conditional A statement that can be written in the form “if p, then q” If an animal is a cat, then

Conditional Statement A statement that can be written in If-Then form If-Then Statement Statement written in the form If p, then q. Hypothesis.

Conditional Statement A statement that can be written in If-Then form If-Then Statement Statement written in the form If p, then q. Hypothesis.

Vocabulary conditional statement if-then statement hypothesis conclusion related conditionals converse inverse contrapositive logically equivalent.

Vocabulary conditional statement if-then statement hypothesis conclusion related conditionals converse inverse contrapositive logically equivalent.

2.3 Conditional Statements - scott.k12.ky.us · If-Then Statements A conditional statement is a statement that can be written in if-then form. Example: If an animal has hair, then

2.3 Conditional Statements - scott.k12.ky.us · If-Then Statements A conditional statement is a statement that can be written in if-then form. Example: If an animal has hair, then

switch negate Contrapositive: switch and negate€¦ · 2.5 Converse, Inverse, and Contrapositive Conditional #1: If I live in Allegany, then I live in New York. Conditional #2: If

switch negate Contrapositive: switch and negate€¦ · 2.5 Converse, Inverse, and Contrapositive Conditional #1: If I live in Allegany, then I live in New York. Conditional #2: If

Conditional branching (if-then-else statements)tuttle.merc.iastate.edu/ee285/topics/if_then_else.pdf · EE 285 If-then-else 1 Conditional branching (if-then-else statements) It’s

Conditional branching (if-then-else statements)tuttle.merc.iastate.edu/ee285/topics/if_then_else.pdf · EE 285 If-then-else 1 Conditional branching (if-then-else statements) It’s

Lesson 2-1 Conditional Statements. Conditional Statement Defn. A conditional statement is a statement that can be written as an if- then statement. That.

Lesson 2-1 Conditional Statements. Conditional Statement Defn. A conditional statement is a statement that can be written as an if- then statement. That.

If conditional.

If conditional.

Conditional Statements Conditional - Conditionals are formed by joining two statements with the words if and then: If p, then q. The if-statement is the.

Conditional Statements Conditional - Conditionals are formed by joining two statements with the words if and then: If p, then q. The if-statement is the.

If Conditional

If Conditional

Parallel and Perpendicular Lines...Parallel and Perpendicular Lines 143 Conditional Statements Identify the hypothesis and conclusion of each conditional. If 6. If E is on AC , then

Parallel and Perpendicular Lines...Parallel and Perpendicular Lines 143 Conditional Statements Identify the hypothesis and conclusion of each conditional. If 6. If E is on AC , then