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