conditional statements © copyright 2014, fred mcclurg all rights reserved
TRANSCRIPT
![Page 1: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/1.jpg)
Conditional Statements
© Copyright 2014, Fred McClurg All Rights Reserved
![Page 2: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/2.jpg)
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
![Page 3: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/3.jpg)
3
What is false?
Examples:Boolean( 0 ); // falseBoolean( -0 ); // falseBoolean( "" ); // (empty string)Boolean( null ); // falseBoolean( ! true ); // false
false.html
![Page 4: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/4.jpg)
4
What is also false?
Examples:var x;Boolean( x ); // (undefined)
Boolean( NaN ); // falseBoolean( 0 / 0 ); // (NaN)Boolean( 4 / "Fred" ); // (NaN)
falseAlso.html
![Page 5: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/5.jpg)
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
![Page 6: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/6.jpg)
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
![Page 7: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/7.jpg)
7
Dialog: confirm()
Description:The confirm() dialog displays “OK” and “Cancel” buttons.
![Page 8: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/8.jpg)
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
![Page 9: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/9.jpg)
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
![Page 10: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/10.jpg)
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;}
![Page 11: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/11.jpg)
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 )
![Page 12: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/12.jpg)
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
![Page 13: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/13.jpg)
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
![Page 14: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/14.jpg)
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
![Page 15: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/15.jpg)
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;}
![Page 16: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/16.jpg)
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
![Page 17: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/17.jpg)
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
![Page 18: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/18.jpg)
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
![Page 19: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/19.jpg)
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;}
![Page 20: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/20.jpg)
20
Dialog: prompt()
Description:The confirm() dialog displays a text box, “OK” and “Cancel” buttons.
![Page 21: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/21.jpg)
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
![Page 22: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/22.jpg)
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)
![Page 23: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/23.jpg)
23
Logical Operator Examples
! true; // false! false; // true
true && true; // truetrue && false; // false
true || true; // truetrue || false; // true
logicOp.html
![Page 24: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/24.jpg)
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
![Page 25: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/25.jpg)
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
![Page 26: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/26.jpg)
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
![Page 27: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/27.jpg)
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
![Page 28: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/28.jpg)
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
![Page 29: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/29.jpg)
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
![Page 30: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/30.jpg)
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
![Page 31: Conditional Statements © Copyright 2014, Fred McClurg All Rights Reserved](https://reader036.vdocuments.site/reader036/viewer/2022062519/5697bfac1a28abf838c9b9f4/html5/thumbnails/31.jpg)
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