JavaScript, Missing Manual, Chapter 3

624 views
577 views

Published on

JavaScript, Missing Manual, Chapter 3

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
624
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript, Missing Manual, Chapter 3

  1. 1. JavaScript: The Missing Manual Chapter 3: Adding Logic & Control Author: David S. McFarland | Publisher: O’Reilly Copyright 2010
  2. 2. Making Programs React Intelligently <ul><li>A conditional statement is a simple yes or no question </li></ul><ul><li>Examples: </li></ul><ul><ul><li>form validation – if the “name” field is empty, do not submit the form </li></ul></ul><ul><ul><li>evaluating input – if a “large” pizza is selected, calculate a “large” price </li></ul></ul>Copyright 2010
  3. 3. Conditional Statement Basics <ul><li>The condition is a comparison between two values </li></ul><ul><li>Example: </li></ul><ul><li>if (score > 100) { </li></ul><ul><li>alert(”You won!”); </li></ul><ul><li>} </li></ul>Copyright 2010
  4. 4. Conditional Statement Basics <ul><li>Conditional statements are also called “if / then” statements </li></ul><ul><li>Syntax: </li></ul><ul><li>if (condition) { </li></ul><ul><li>// some action happens here </li></ul><ul><li>} </li></ul>Copyright 2010 interpreter evaluates condition to either “true” or “false”
  5. 5. Conditional Statement Basics <ul><li>Comparison Operators: </li></ul>Copyright 2010 less than < greater than or equal to >= Example Operator less than or equal to <= greater than > not equal to != equal to ==
  6. 6. Adding a Backup Plan <ul><li>An if statement has its own kind off backup plan, called an else clause </li></ul>Copyright 2010
  7. 7. Adding a Backup Plan <ul><li>Syntax: </li></ul><ul><li>if (condition) { </li></ul><ul><li>// some action happens here </li></ul><ul><li>} else { </li></ul><ul><li>// some other action happens here </li></ul><ul><li>} </li></ul>Copyright 2010
  8. 8. Adding a Backup Plan <ul><li>Example: </li></ul><ul><li>if (score > 100) { </li></ul><ul><li>alert(”You won!”); </li></ul><ul><li>} else { </li></ul><ul><li>alert(”Keep practicing.”); </li></ul><ul><li>} </li></ul>Copyright 2010
  9. 9. Testing More Than One Condition <ul><li>Think of it like a game show. </li></ul><ul><ul><li>Would you like the prize behind door #1, door #2 or door #3? </li></ul></ul><ul><ul><li>Would you like a small, medium, or large pizza? </li></ul></ul>Copyright 2010
  10. 10. Testing More Than One Condition <ul><li>Example: </li></ul><ul><li>if (condition) { </li></ul><ul><li>// door #1 </li></ul><ul><li>} else if (condition2) { </li></ul><ul><li>// door #2 </li></ul><ul><li>} else { </li></ul><ul><li>// door #3 </li></ul><ul><li>} </li></ul>Copyright 2010
  11. 11. Testing More Than One Condition <ul><li>Example ( conditional.html ): </li></ul><ul><li>var budget = prompt(“How much money can ► </li></ul><ul><li>you spend?”, “”); </li></ul><ul><li>if (budget >= 50) { </li></ul><ul><li>alert(“Dinner and a movie.”); </li></ul><ul><li>} else if (budget >= 30) { </li></ul><ul><li>alert(“Dinner only.”); </li></ul><ul><li>} else if (budget >= 20) { </li></ul><ul><li>alert(“Movie only.”); </li></ul><ul><li>} else { </li></ul><ul><li>alert(“A night at home watching TV.”); </li></ul><ul><li>} </li></ul>Copyright 2010
  12. 12. More Complex Conditions <ul><li>Combine conditions using logical operators: </li></ul>Copyright 2010 || OR && AND logical operator compound condition
  13. 13. More Complex Conditions <ul><li>Example ( login.html ): </li></ul><ul><li>var name = prompt(“What is your user name?”, “”); </li></ul><ul><li>var password = prompt(“What is your password?”, “”); </li></ul><ul><li>if (name == “Gene” && password == “digital”) { </li></ul><ul><li>alert(“Welcome to Spacebook!”); </li></ul><ul><li>} else { </li></ul><ul><li>alert(“login incorrect”); </li></ul><ul><li>} </li></ul>Copyright 2010
  14. 14. Nesting Conditional Statements <ul><li>A condition within a condition, similar to . . . </li></ul><ul><ul><li>a table within a table </li></ul></ul><ul><ul><li>a list within a list (dropdown navigation) </li></ul></ul>Copyright 2010
  15. 15. Testing More Than One Condition <ul><li>Syntax (part 1): </li></ul><ul><li>if (condition1) { </li></ul><ul><li>if (condition2) { </li></ul><ul><li>// do thing #1 </li></ul><ul><li>} else { </li></ul><ul><li>// do thing #2 </li></ul><ul><li>} </li></ul><ul><li>continued . . . </li></ul>Copyright 2010
  16. 16. Testing More Than One Condition <ul><li>Syntax (part 2): </li></ul><ul><li>} else { </li></ul><ul><li>if (condition2) { </li></ul><ul><li>// do thing #3 </li></ul><ul><li>} else { </li></ul><ul><li>// do thing #4 </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>Copyright 2010
  17. 17. Testing More Than One Condition <ul><li>Example (part 1): </li></ul><ul><li>if (size == “small”) { </li></ul><ul><li>if (toppings == 0) { </li></ul><ul><li>alert(&quot;Small pizza with 0 toppings.&quot;); </li></ul><ul><li>} else { </li></ul><ul><li>alert(&quot;Small pizza with 1 topping.&quot;); </li></ul><ul><li>} </li></ul><ul><li>continued . . . </li></ul>Copyright 2010
  18. 18. Testing More Than One Condition <ul><li>Example (part 2) ( nested.html ): </li></ul><ul><li>} else { </li></ul><ul><li>if (toppings == 0) { </li></ul><ul><li>alert(&quot;Large pizza with 0 toppings.&quot;); </li></ul><ul><li>} else { </li></ul><ul><li>alert(&quot;Large pizza with 1 topping.&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>Copyright 2010
  19. 19. Testing More Than One Condition <ul><li>Assignment #1 ( pizza_price_one.html ): </li></ul><ul><li>Using the previous example . . . </li></ul><ul><ul><li>add a third variable called “price” </li></ul></ul><ul><ul><li>change the price depending on the condition </li></ul></ul><ul><ul><li>print the price in the alert message </li></ul></ul>Copyright 2010
  20. 20. Testing More Than One Condition <ul><li>Assignment #2 ( pizza_price_two.html ): </li></ul><ul><li>Using the previous example . . . </li></ul><ul><ul><li>add a third condition to account for “medium” </li></ul></ul><ul><ul><ul><li>three primary conditions </li></ul></ul></ul><ul><ul><ul><li>two nested conditions each </li></ul></ul></ul>Copyright 2010
  21. 21. Testing More Than One Condition <ul><li>Assignment #3 ( pizza_price_three.html ): </li></ul><ul><li>Using the previous example . . . </li></ul><ul><ul><li>add a third condition for each “toppings” to account for 0, 1 or 2 </li></ul></ul><ul><ul><ul><li>three primary conditions </li></ul></ul></ul><ul><ul><ul><li>three nested conditions each </li></ul></ul></ul>Copyright 2010
  22. 22. Loops Copyright 2010
  23. 23. Functions Copyright 2010
  24. 24. JavaScript <ul><li>blah, blah, blah . . . </li></ul>Copyright 2010

×