Conditionals: if, if/else, multiway


Slides

Slides Here!

Additional Info

JavaScript conditionals:

In Class Exercises (ICEs)

Part 1: Typing in if, if...else, and multiway if...else

  1. Download a this starter page: Syntax_Review.html
  2. Start by just opening the page in a browser, clicking on the top button, and confirming that you've got all the jQuery stuff, forms stuff, and code to handle the event that 'the button has been clicked' stuff working correctly.
  3. Once you've done that then change the code on the page so that when the user types in a number and clicks the top button you should change the text in the paragraph with ID=outputIf only if the user's input is positive.  If you're looking for a message to use, try this:  "Good choice - most people choose positive numbers, too"
    You should probably remove the alert, just so that it doesn't clutter things up.
  4. After that, fill in code so that when the user clicks on the middle button your page will display one message if the user's number was positive, and another number if the user's number was anything else.
  5. Lastly, fill in code so that when the user clicks on the bottom button you'll display one message if their number is negative, another message if their number is between 1 and 10, a third message if their number is between 10 and 20, and a different message if their number is 20 or higher.
  6. Remember that the main goal here is to review the if and if...else syntax that you learned in BIT 115, and to extend that syntax to the multiway if...else structure. 
    A side-goal is to review how to set up basic event handlers in jQuery (which is why the first button has most of it's code defined, the second one has less code defined, and the last one is left for you to define.  You should use this opportunity to practice writing the event-handling jQuery code from memory, as much as possible. 

Part 2: Figuring out the temperature, based on often crickets chirp

  1. First, examine problem #1 on this page.
  2. Create a page that will solve that problem. 
  3. Go through all the steps that we did in class in order to solve this problem.  Make sure that you've got something to show for each of the following steps:
    1. List the steps
    2. Come up with pseudocode or flowchart (feel free to write this out on paper and just show it to the teacher)
    3. Proofread everything (especially since the math may be a bit tricky - the individual steps are easy, but seems like the sort of word problem that's easy to make a mistake in :)  ).
      (You might not have much to show for this step, and that's ok.  Make sure you that you still do this step, though!)
    4. Code it up
    5. Test it out
  4. Once you've finished this problem you should start work on the next part.

Part 3: Figuring out how often crickets chirp

  1. First, examine problem #1 on this page.
  2. Create a page that will solve the reverse of that problem.  In other words, given the temperature in Fahrenheit, figure out how many times per minute the crick will chirp.  Make sure that the smallest number that the cricket chirps is zero (i.e., the cricket can't chirp a negative number of times per second).  Make sure that the largest number is 60 (i.e., no more than once per second).
  3. Go through all the steps that we did in class in order to solve this problem.  Make sure that you've got something to show for each of the following steps:
    1. List the steps
    2. Come up with pseudocode or flowchart (feel free to write this out on paper and just show it to the teacher)
    3. Proofread everything (especially since the math may be a bit tricky - the individual steps are easy, but seems like the sort of word problem that's easy to make a mistake in :)  ).
      (You might not have much to show for this step, and that's ok.  Make sure you that you still do this step, though!)
    4. Code it up
    5. Test it out
  4. Once you've finished this problem you should start work on the next part.

Part 3: Practice Exercises

Pick from amongst the following problems. Start with any one that you want and try to solve it.  If you get done with that one, then pick another one and work on that, etc, etc.

Part 3-A: Calculating Tip

Create a page that asks the user for the total cost of a meal at a restaurant.  Calculate a 15%, 20%, and 25% tip (or whatever percentages you'd like).  If the cost is below zero instead display an error message telling the user that the restuarant isn't going to pay them to eat there.

Part 3-B: Calculating Library Book Late Fines

Create a page that asks the user how many days late their library book is.  Assume that the late fee is $0.25 per day, and calculate the total late fee.

Remember that the book can't be late a negative number of days (but CAN be zero days late).  Also, if the book is more than 3 weeks overdue then the late fee is replaced with a $25.00 book replacement fee (this is INSTEAD of the $0.25 per day fee, not in addition to it).

Part 3-C: User Feedback

Review the example 'Veggie Feedback' page where the user is allowed to type in one of the following options:

Hint: You check if the user has typed something in using ==, just like you would for numbers.  == checks for an exact match (so "Beet" == "Beet" is true (they're the same), but "Beet" == "beet" is false (the capitalization is different).  )

Now create a similar page that gives users feedback about their favorite day of the week.

Create a webpage that allows the user to type in their favorite day of the week.  For each day provide positive, family-friendly feedback about that day (the user will see the feedback when they click the button). If they type in something provide feedback on that, too.

You'll need to user the Hint above to complete this.