Embed Size (px)
Citation preview
JavaScript:JavaScript:The Missing The Missing ManualManual
Chapter 3:Chapter 3:Adding Logic & ControlAdding Logic & Control
Author: David S. McFarland | Publisher: O’Reilly Copyright 2010
Making Programs React Making Programs React IntelligentlyIntelligently
A A conditional statementconditional statement is a simple yes is a simple yes or no questionor no question
Examples:Examples: form validation – if the “name” field is form validation – if the “name” field is
empty, do not submit the formempty, do not submit the form evaluating input – if a “large” pizza is evaluating input – if a “large” pizza is
selected, calculate a “large” priceselected, calculate a “large” price
Copyright 2010
Conditional Statement Conditional Statement BasicsBasics
The condition is a comparison between two The condition is a comparison between two valuesvalues
Example:Example:if (score > 100) {if (score > 100) {
alert(”You won!”);alert(”You won!”);}}
Copyright 2010
Conditional Statement Conditional Statement BasicsBasics
Conditional statements are also called “if / Conditional statements are also called “if / then” statementsthen” statements
Syntax:Syntax:if (condition) {if (condition) {
// some action happens here// some action happens here}}
Copyright 2010
interpreter evaluates condition to either “true” or “false”
Conditional Statement Conditional Statement BasicsBasics
Comparison Operators:Comparison Operators:
Copyright 2010
OperatorOperator ExampleExample==== equal toequal to!=!= not equal tonot equal to>> greater thangreater than<< less thanless than
>=>= greater than or equal togreater than or equal to<=<= less than or equal toless than or equal to
Adding a Backup PlanAdding a Backup PlanAn if statement has its own kind off backup An if statement has its own kind off backup
plan, called an plan, called an else clauseelse clause
Copyright 2010
Adding a Backup PlanAdding a Backup PlanSyntax:Syntax:
if (condition) {if (condition) {// some action happens here// some action happens here
} else {} else {// some other action happens here// some other action happens here
}}
Copyright 2010
Adding a Backup PlanAdding a Backup PlanExample:Example:
if (score > 100) {if (score > 100) {alert(”You won!”);alert(”You won!”);
} else {} else {alert(”Keep practicing.”);alert(”Keep practicing.”);
}}
Copyright 2010
Testing More Than One Testing More Than One ConditionCondition
Think of it like a game show.Think of it like a game show. Would you like the prize behind door #1, Would you like the prize behind door #1,
door #2 or door #3?door #2 or door #3? Would you like a small, medium, or large Would you like a small, medium, or large
pizza?pizza?
Copyright 2010
Testing More Than One Testing More Than One ConditionCondition
Example:Example:if (condition) {if (condition) {
// door #1// door #1} else if (condition2) {} else if (condition2) {
// door #2// door #2} else {} else {
// door #3// door #3}}
Copyright 2010
Testing More Than One Testing More Than One ConditionCondition
Example (Example (conditional.htmlconditional.html):):var budget = prompt(“How much money can var budget = prompt(“How much money can ►►you spend?”, “”);you spend?”, “”);if (budget >= 50) {if (budget >= 50) {alert(“Dinner and a movie.”);alert(“Dinner and a movie.”);} else if (budget >= 30) {} else if (budget >= 30) {alert(“Dinner only.”);alert(“Dinner only.”);} else if (budget >= 20) {} else if (budget >= 20) {alert(“Movie only.”);alert(“Movie only.”);} else {} else {alert(“A night at home watching TV.”);alert(“A night at home watching TV.”);}}
Copyright 2010
More Complex More Complex ConditionsConditions
Combine conditions using logical Combine conditions using logical operators:operators:
Copyright 2010
compound conditioncompound condition logical operatorlogical operator
ANDAND &&&&
OROR ||||
More Complex More Complex ConditionsConditions
Example (Example (login.htmllogin.html):):var name = prompt(“What is your user name?”, “”);var name = prompt(“What is your user name?”, “”);var password = prompt(“What is your password?”, “”);var password = prompt(“What is your password?”, “”);if (name == “Gene” && password == “digital”) {if (name == “Gene” && password == “digital”) {
alert(“Welcome to Spacebook!”);alert(“Welcome to Spacebook!”);} else {} else {
alert(“login incorrect”);alert(“login incorrect”);}}
Copyright 2010
Nesting Conditional Nesting Conditional StatementsStatements
A condition within a condition, similar to . . .A condition within a condition, similar to . . . a table within a tablea table within a table a list within a list (dropdown navigation)a list within a list (dropdown navigation)
Copyright 2010
Testing More Than One Testing More Than One ConditionCondition
Syntax (part 1):Syntax (part 1):if (condition1) {if (condition1) {
if (condition2) {if (condition2) {// do thing #1// do thing #1
} else {} else {// do thing #2// do thing #2
}}continued . . .continued . . .
Copyright 2010
Testing More Than One Testing More Than One ConditionCondition
Syntax (part 2):Syntax (part 2):} else {} else {
if (condition2) {if (condition2) {// do thing #3// do thing #3
} else {} else {// do thing #4// do thing #4
}}}}
Copyright 2010
Testing More Than One Testing More Than One ConditionCondition
Example (part 1):Example (part 1):if (size == “small”) {if (size == “small”) {if (toppings == 0) {if (toppings == 0) {alert("Small pizza with 0 toppings.");alert("Small pizza with 0 toppings.");} else {} else {alert("Small pizza with 1 topping.");alert("Small pizza with 1 topping.");}}continued . . .continued . . .
Copyright 2010
Testing More Than One Testing More Than One ConditionCondition
Example (part 2) (Example (part 2) (nested.htmlnested.html):):} else {} else {if (toppings == 0) {if (toppings == 0) {alert("Large pizza with 0 toppings.");alert("Large pizza with 0 toppings.");} else {} else {alert("Large pizza with 1 topping.");alert("Large pizza with 1 topping.");}}}}
Copyright 2010
Testing More Than One Testing More Than One ConditionCondition
Assignment #1 (Assignment #1 (pizza_price_one.htmlpizza_price_one.html):):
Using the previous example . . .Using the previous example . . .1.1. add a third variable called “price”add a third variable called “price”2.2. change the price depending on the conditionchange the price depending on the condition3.3. print the price in the alert messageprint the price in the alert message
Copyright 2010
Testing More Than One Testing More Than One ConditionCondition
Assignment #2 (Assignment #2 (pizza_price_two.htmlpizza_price_two.html):):
Using the previous example . . .Using the previous example . . .1.1. add a third condition to account for “medium”add a third condition to account for “medium”
three primary conditionsthree primary conditions two nested conditions eachtwo nested conditions each
Copyright 2010
Testing More Than One Testing More Than One ConditionCondition
Assignment #3 (Assignment #3 (pizza_price_three.htmlpizza_price_three.html):):
Using the previous example . . .Using the previous example . . .1.1. add a third condition for each “toppings” to account add a third condition for each “toppings” to account
for 0, 1 or 2for 0, 1 or 2 three primary conditionsthree primary conditions three nested conditions eachthree nested conditions each
Copyright 2010
JavaScriptJavaScript blah, blah, blah . . .blah, blah, blah . . .
Copyright 2010
