Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript, Missing Manual, Chapter 3

749 views

Published on

JavaScript, Missing Manual, Chapter 3

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

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

×