Conditional Statements

© Copyright 2014, Fred McClurg All Rights Reserved

2

JavaScript Booleans

What is a Boolean?

A Boolean value equates to either true or false.

Examples:true; // equates to truefalse; // equates to falseTRUE; // error (incorrect case)True; // error (incorrect capitalization)

4 == 4; // true (equality)4 == "4"; // true (equality)4 === 4; // true (identity)4 === "4"; // false (not identity) booleans.html

3

What is false?

Examples:Boolean( 0 ); // falseBoolean( -0 ); // falseBoolean( "" ); // (empty string)Boolean( null ); // falseBoolean( ! true ); // false

false.html

4

What is also false?

Examples:var x;Boolean( x ); // (undefined)

Boolean( NaN ); // falseBoolean( 0 / 0 ); // (NaN)Boolean( 4 / "Fred" ); // (NaN)

falseAlso.html

5

What is true?

Examples:1; // true-1; // true3 < 4; // true4 <= 4; // true3 != 4; // true (not equality)"4" !== 4; // true (not identity)!(3 > 4); // true

true.html

6

What is also true?

Examples:Boolean( ! false ); // trueBoolean( "this is a string" );Boolean( 1 / 0 ); // (Infinity)Boolean( -1 / 0 ); // (-Infinity)Boolean( Infinity ); // trueBoolean( -Infinity ); // true

trueAlso.html

7

Dialog: confirm()

Description:The confirm() dialog displays “OK” and “Cancel” buttons.

8

Dialog: confirm()

Description:

The confirm() dialog returns a true if the user presses “OK” or false if the user presses “Cancel”.

// open confirm dialogvar answer = window.confirm( "OK for true.\n" + "Cancel for false.");

console.log( answer );confirm.html

9

“if” Statement Flow Chart

Description:The “if” statement has one branch. If the condition is true, the block of code is executed. If the condition is false, the block is skipped.

IF

Code Block

truefalse

“if”branch

“else”branch

10

What is an “if” statement?

Description:A statement that allows you to conditionally execute a block of code. If the condition is true, the code block is executed.

Syntax:if ( condition ) { // true // code statement;}

11

Conditional Statement: if

// open confirm dialogvar answer = window.confirm( "OK for true.\n" + "Cancel for false.");

if ( answer == true ) { console.log( "You pressed OK" );} confirmIf.html

Would this also work?

if ( answer )

12

One Line “if” Statement

Discussion:

The “if” condition does not require the curly braces “{}” if there is only a single statement in the code block.

Example:

var isLogin = true;

if ( isLogin ) console.log( "Success" );

ifOneLine.html

13

Discussion:

The “if” condition does not require the curly braces “{}” when there is only one statement in the code block, however best practices or a style guideline may encourage its use.

Example:

var username = "admin";

if ( username == "admin" ) console.log( "Access granted" );

Single Statement “if” Condition

ifNoCurly.html

14

“if else” Statement Flow Chart

Description:The “if” statement has one branch. If the condition is true, the block of code is executed. If the condition is false, the block is skipped.

IF

Code Block

truefalse

Code Block

“if”branch

“else”branch

15

What is an “else” statement?

Description:A statement that provides a fall back branch in case the “if” statement is false.

Syntax:if ( condition ) { // true // code statement;}else { // if ( ! condition ) // code statement;}

16

Conditional Statements: if & else

// open confirm dialogvar answer = window.confirm( "OK for true.\nCancel for false.");

if ( answer == true ) { console.log( "You pressed OK" );}else { // if ( answer == false ) console.log( "You pressed Cancel" );}

confirmElse.html

17

Code Block

true

Nested “else” Flow Chart

Description:In order to handle more than two branches, an “if” statement can be nested inside of an “else” statement.

IF

Code Block

truefalse

“if”branch

“else”branch

IF

Code Block

truefalse

“if”branch

“else”branch

IF

Code Block

false

“if”branch

“else”branch

trueIF

false

“if”branch

“else”branch

18

“else if” Flow Chart

Description:In order to handle more than two branches, an “if” statement can be nested inside of an “else” statement.

IF

Code Block

“if”true

“if”branch

ELSEIF

Code Block

“else if”true

“if”false

“else if”branch

ELSE

Code Block

“else if”false

“else”branch

Code Block

ELSEIF

“else if”true

“else if”branch“else if”

false

when “if”and all“else if”

branchesare false

19

What is an “else if” statement?

Description:A statement that provides multiple branching in an “if” statement.

Syntax:if ( condition ) { // true // code statement;}else if ( condition ) { // true // code statement;}else { // if all conditions false // code statement;}

20

Dialog: prompt()

Description:The confirm() dialog displays a text box, “OK” and “Cancel” buttons.

21

Statements: if, else if, & else

// open text prompt dialogvar answer = window.prompt("Enter YES or NO");

if ( answer == "YES" ) { console.log( "You entered YES" );}else if ( answer == "NO" ) { console.log( "You entered NO" );}else { console.log( "Didn't follow directions!" );} promptElseIf.html

22

Logical Operators Defined

&& (aka Logical “AND”) Defined:

“AND” is true only if both operands are true

|| (aka Logical “OR”) Defined:

“OR” is true only if at least one operand is true

! (aka Logical “NOT”) Defined:

“NOT” is true only if operand is false (invert Boolean)

23

Logical Operator Examples

! true; // false! false; // true

true && true; // truetrue && false; // false

true || true; // truetrue || false; // true

logicOp.html

24

Logical Operator Precedence

Discussion:What happens when multiple logical operators are used together?

Examples:// && is higher precedence// and evaluated firsttrue || true && false; // truetrue || ( true && false ); // truetrue || ( false ); // truetrue; logicOpMulti.html

25

Logical Equivalence

Discussion:

It is often useful to know what the equivalence of a logical “OR” and a logical “AND”.

Examples:// ! highest precedence!( true || false ); // false(! true ) && (! false ); // false

!( true && false ); // true(! true ) || (! false ); // true

logicEquiv.html

26

var value = 4;

if ( value >= 1 ) { // min range if ( value <= 10 ) { // max range console.log( "Between 1 & 10" ); }}else { console.log( "Out of range" );}

Nesting “if” Statements

nestedIf.html

27

var value = 4;

if ( ( value >= 1 ) && // min range ( value <= 10 ) ) { // max console.log( "Between 1 and 10" );}else { console.log( "Out of range" );}

Conditional: “if” and “&&”

ifAnd.html

28

Conditional: “if” and “||”

// open text prompt dialogvar answer = window.prompt("Type YES or NO");

if ( ( answer == "yes" ) || // lowercase ( answer == "YES" ) ) { // uppercase console.log( "You typed YES" );}else if ( ( answer == "no" ) || // lowercase ( answer == "NO" ) ) { // uppercase console.log( "You typed NO" );}else { console.log( "Didn't follow directions!" );} ifOr.html

29

“if” and Regular Expressions

// open text prompt dialogvar answer = window.prompt("Type YES or NO");

var regexYes = /^y$|yes/i; // "y" or "yes"var regexNo = /^n$|no/i; // "n" or "no"

if ( regexYes.test( answer ) ) { console.log( "You typed YES" );}else if ( regexNo.test( answer ) ) { console.log( "You typed NO" );}else { console.log( "Didn't follow directions!" );}

ifRegExp.html

30

Conditional Statement: “switch”

var answer = window.prompt("Type YES or NO");

switch ( answer ) { case 'YES' : console.log( "You typed \"YES\"" ); break; // exit case case 'NO' : console.log( "You typed \"NO\"" ); break; // exit case default : // else no other matches console.log( "You rebel!" ); break; // exit case} switch.html

31

Switch with Fall-Through

var answer = window.prompt("Type YES or NO");

switch ( answer ) { case 'yes' : // no break (fall-thru) case 'YES' : console.log( "You typed \"YES\"" ); break; // exit case case 'no' : // no break (fall-thru) case 'NO' : console.log( "You typed \"NO\"" ); break; // exit case default : // else no other matches console.log( "You rebel!" ); break; // exit case} switchFallThru.html