Conditionals

49
Conditionals forks in the road Tuesday, September 22, 2009

description

Conditional statements in JavaScript (if, if...else, if...else if...else, and switch).

Transcript of Conditionals

Page 1: Conditionals

Conditionalsforks in the road

Tuesday, September 22, 2009

Page 2: Conditionals

Tuesday, September 22, 2009

Page 3: Conditionals

Tuesday, September 22, 2009

Page 4: Conditionals

Tuesday, September 22, 2009

Page 5: Conditionals

if statementexecute some code only if a statement is true

http://www.w3schools.com/JS/js_if_else.asp

Tuesday, September 22, 2009

Page 6: Conditionals

if

Tuesday, September 22, 2009

Page 7: Conditionals

if (conditional)

Tuesday, September 22, 2009

Page 8: Conditionals

if (conditional) {

Tuesday, September 22, 2009

Page 9: Conditionals

if (conditional) { // statement to be executed

Tuesday, September 22, 2009

Page 10: Conditionals

if (conditional) { // statement to be executed}

Tuesday, September 22, 2009

Page 11: Conditionals

truefalse

Tuesday, September 22, 2009

Page 12: Conditionals

var age = 60;var status = null;

if (age > 62) { status = 'retired';}

status; // null

Tuesday, September 22, 2009

Page 13: Conditionals

var age = 60;var status = null;

if (age > 62) { status = 'retired';}

status; // null

60 > 62 === false

this never executes

so status is never assigned and remains null

Tuesday, September 22, 2009

Page 14: Conditionals

var age = 65;var status = null;

if (age > 62) { status = 'retired';}

status; // "retired"

Tuesday, September 22, 2009

Page 15: Conditionals

var age = 65;var status = null;

if (age > 62) { status = 'retired';}

status; // "retired"

65 > 62 === true

this executes

so status is set to “retired”

Tuesday, September 22, 2009

Page 16: Conditionals

if...else statementexecute some code if statement is true

and some other code if statement is falsehttp://www.w3schools.com/JS/js_if_else.asp

Tuesday, September 22, 2009

Page 17: Conditionals

if (conditional) { // statement if true}

Tuesday, September 22, 2009

Page 18: Conditionals

if (conditional) { // statement if true} else

Tuesday, September 22, 2009

Page 19: Conditionals

if (conditional) { // statement if true} else {

Tuesday, September 22, 2009

Page 20: Conditionals

if (conditional) { // statement if true} else { // statement if false

Tuesday, September 22, 2009

Page 21: Conditionals

if (conditional) { // statement if true} else { // statement if false}

Tuesday, September 22, 2009

Page 22: Conditionals

truefalse

Tuesday, September 22, 2009

Page 23: Conditionals

var age = 60;var status = null;

if (age > 62) { status = 'retired';} else { status = 'not retired';}

status; // "not retired"

Tuesday, September 22, 2009

Page 24: Conditionals

var age = 65;var status = null;

if (age > 62) { status = 'retired';} else { status = 'not retired';}

status; // "retired"

Tuesday, September 22, 2009

Page 25: Conditionals

if...else if...else statementexecute some code if statement is true

and some other code if statement is falsehttp://www.w3schools.com/JS/js_if_else.asp

Tuesday, September 22, 2009

Page 26: Conditionals

if (conditional) { // statement if true} else if (conditional) { // statement if false and else if true} else { // statement if all false}

Tuesday, September 22, 2009

Page 27: Conditionals

if (conditional) { // statement if true} else if (conditional) { // whichever matches first} else if (conditional) { // whichever matches first} else if (conditional) { // whichever matches first} else { // statement if all false}

Tuesday, September 22, 2009

Page 28: Conditionals

var age = 19;var status = null;

if (age >= 62) { status = 'retired';} else if (age > 22 && age < 62) { status = 'working';} else if (age >= 18 && age <= 22) { status = 'college';} else { status = 'no responsibilities';}

status;

Tuesday, September 22, 2009

Page 29: Conditionals

switch statementselect one of many blocks of code to execute

http://www.w3schools.com/JS/js_switch.asp

Tuesday, September 22, 2009

Page 30: Conditionals

switch

Tuesday, September 22, 2009

Page 31: Conditionals

switch (value)

Tuesday, September 22, 2009

Page 32: Conditionals

switch (value) {

Tuesday, September 22, 2009

Page 33: Conditionals

switch (value) { case 1:

Tuesday, September 22, 2009

Page 34: Conditionals

switch (value) { case 1: // some code to execute

Tuesday, September 22, 2009

Page 35: Conditionals

switch (value) { case 1: // some code to execute break;

Tuesday, September 22, 2009

Page 36: Conditionals

switch (value) { case 1: // some code to execute break; case 2: // some code to execute break;

Tuesday, September 22, 2009

Page 37: Conditionals

switch (value) { case 1: // some code to execute break; case 2: // some code to execute break; default: // nothing matched so do this

Tuesday, September 22, 2009

Page 38: Conditionals

switch (value) { case 1: // some code to execute break; case 2: // some code to execute break; default: // nothing matched so do this

similar to else in if...else

Tuesday, September 22, 2009

Page 39: Conditionals

switch (value) { case 1: // some code to execute break; case 2: // some code to execute break; default: // nothing matched so do this}

Tuesday, September 22, 2009

Page 40: Conditionals

var age = 18;

switch (typeof(age)) { case 'number': "I'm a number!"; break; case 'string': "I'm a string!"; break; case 'boolean': "I'm a boolean!"; break; default: "I don't know what I am!";}

// "I'm a number!"Tuesday, September 22, 2009

Page 41: Conditionals

for(action in json) { var selectors = json[action]; switch(action) { case 'replace' : for(selector in selectors) $(selector).html(selectors[selector]); break; case 'append' : for(selector in selectors) $(selector).append(selectors[selector]); break; case 'prepend' : for(selector in selectors) $(selector).prepend(selectors[selector]); break; case 'replaceWith' : for(selector in selectors) $(selector).replaceWith(selectors[selector]); break; case 'insertBefore' : for(selector in selectors) $(selectors[selector]).insertBefore($(selector)); break; case 'sidebar' : Sidebar.add(selectors); break; case 'remove' : $(selectors.join(',')).remove(); break; }}

Tuesday, September 22, 2009

Page 42: Conditionals

Review

Tuesday, September 22, 2009

Page 43: Conditionals

var age = 18;var teens = false;

if (age > 12 && age < 20) { teens = true;}

teens;

Tuesday, September 22, 2009

Page 44: Conditionals

var age = 18;var teens = false;

if (age > 12 && age < 20) { teens = true;}

teens; // true

Tuesday, September 22, 2009

Page 45: Conditionals

var days = ['sunday', 'monday', 'tuesday'];var first = days[0];var week_starts_on_sunday = false;

if (first === 'sunday') { week_starts_on_sunday = true;}

week_starts_on_sunday;

Tuesday, September 22, 2009

Page 46: Conditionals

var days = ['sunday', 'monday', 'tuesday'];var first = days[0];var week_starts_on_sunday = false;

if (first === 'sunday') { week_starts_on_sunday = true;}

week_starts_on_sunday; // true

Tuesday, September 22, 2009

Page 47: Conditionals

var days = ['monday', 'tuesday', 'sunday'];var first = days[0];var week_starts_on_sunday = false;

if (first === 'sunday') { week_starts_on_sunday = true;}

week_starts_on_sunday;

Tuesday, September 22, 2009

Page 48: Conditionals

var days = ['monday', 'tuesday', 'sunday'];var first = days[0];var week_starts_on_sunday = false;

if (first === 'sunday') { week_starts_on_sunday = true;}

week_starts_on_sunday; // false

Tuesday, September 22, 2009

Page 49: Conditionals

Assignmenthttp://teaching.johnnunemaker.com/capp-30550/sessions/conditionals

Tuesday, September 22, 2009