Checking input and ensuring numbers


Slides

Slides Here!

Examples - Checking Whether User Input Is A Number 

Additional Info

In Class Exercises (ICEs)

Part 1: Experimenting with isNaN and parseFloat

  1. Download a this example page: checking_for_numbers.html
  2. I want you to experiment with it, and get a feel for how isNaN, parseFloat, and parseInt works.
  3. Test out the page using a bunch of different inputs:
    1. Open it, and try typing in a number like 10 and see what happens when you click the button
    2. Try typing 0 and -10, too.
    3. Try 10.5, 0.5, and -10.5
    4. Try typing in stuff that's not a number:
      "Bob" (or your name), -Bob, 10..5, ..5, etc.
    5. Try typing in something that start with a number but has extra junk too:
      "2 pizzas" "eat 2 pizzas" "only 1 hour till lunch"
    6. Try leaving the textbox blank and see what happens.
    7. What happens if you put 4-5 empty spaces (using the space bar) into the text box?
  4. At this point stop and reflect on how isNaN works: How would you describe how isNaN works?  What does it think is a number, what does it think isn't a number?
  5. Once you've got a feel for that remove the isNaN check (do this by commenting it out).  Note: you may need to remove several lines in order to accomplish the conceptual task of removing the isNaN.
  6. Test the page again, and see what's different, if anything.  What does that tell you about how parseFloat works?  Be ready to describe what you've found to the rest of the class.
  7. Change the parseFloat to parseInt.
  8. Test the page again, and see what's different, if anything.  What does that tell you about how parseInt works?  Be ready to describe what you've found to the rest of the class.

Part 2: Playing with strings

You will notice that the 'val()' method for this input type returns a string. Review the String references above, and then change your output method to say something about the user-input as a string. Can you correctly print a message when the user enters your name? What about when the user enters a name that is different than yours?

Write some code that will print the correct message regardless of the capitalization the user chose to use. Hints: The string methods documentation may provide some useful methods. Additionally, creating an extra temporary variable may be desireable.

What happens if you change the type of the 'input' element to 'number'?

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.

For this exercise you should detect if the user has typed in something that's not a number.  In that case you should tell the user that they've typed in a non-number (instead of doing anything else).  Make sure to use the 'peeling off errors' pattern that was discussed in the prior lecture.

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).

For this exercise you should detect if the user has typed in something that's not a number.  In that case you should tell the user that they've typed in a non-number (instead of doing anything else).  Make sure to use the 'peeling off errors' pattern that was discussed in the prior lecture.