Mini-Lab 2: Working with Numbers


In this mini-lab you will experiment with expressions that include JavaScript numbers and strings and write a simple calculator function.

If your code isn't working as expected, try opening up Firefox's error console to check for (potentially) helpful error messages. If you get stuck, don't hesitate to ask the instructor or a teaching assistant for help.

Experimenting (some more) with Numbers and Strings:

  1. Copy the Working with Numbers web page to your COMP 105 workspace. Just as with Mini-Lab 1, you can do this in either of two ways:
  2. View the page source. For the most part, you should see that this Mini-Lab web page is a subset of the Mini-Lab 1: Getting Started web page. The runShortExperiment function repeats the short exercises from Mini-Lab 1, and adds several new exercises involving more complicated expressions.
  3. Review Mini-Lab 1 Exercises 4-7 (recommended if you don't do this Mini-Lab immediately after Mini-Lab 1)

    1. Exercises from Mini-Lab 1:
    2. (Simplified) What does the first alert statement in runShortExperiment do? (This is the only statement that is not commented-out.)
    3. Uncomment the second alert statement. (There will still be a comment to the right of the statement, at the end of the line.) What will the function will do now? Update the comment with what you expect the result to be, then test it.
    4. Now comment out both of the first two statements.
    5. In the first two statements, you displayed a string and a number. The next five statements illustrate what the the + operator does when used with numbers, strings, or a combination of both. Again, document your expected results in the comments at the end of line, then test that your expectations were correct.
  4. Building output with a mixture of strings and numbers is frequently very useful. Uncomment the first two statements that include "Expected Results" in the output. Are the Expected Results what you actually expect? Run the experiment. If any actual results are not what you expected, make sure you understand the output and then update the Expected Results. When you are done, comment out the statements.
  5. The final set of statements in this function will allow you to experiment what happens when addition and multiplication operations are combined in the same statement. Starting with just the first two statements, think about what you think the output will be, edit the Expected Results (e.g., change ??? to 42, or whatever you think the output will be), uncomment the statements, and run the experiment.

    What about the third statement in the block? Do you expect its behavior to be the same as the first statement or the second statement, or neither? Test it. Then go on and do the same for the final two statements in the function.


In this exercise you will add a simple calculator to your page. Your calculator will prompt the user for two numbers and then display the sum, the product, the difference, and the quotient of those two numbers. A sample session might look like the following:

    [prompt] Please enter the first number. [user enters] 3
    [prompt] Please enter the second number. [user enters] 4

    3 + 4 = 7
    3 - 4 = -1
    3 * 4 = 12
    3 / 4 = .75
  1. Add a new button to the page called "Calculator". Choose an appropriate name for the function that will be called when the user clicks on this button.
  2. Write the function definition for the function associated with your new button. A good software development practice is to start by writing the smallest amount of code that you could test, test it, then continuing by adding very small, incremental changes and testing all along the way. So, for your first step, just write a function that contains a single alert message (which could say anthing), and then test that your function is getting called when you click on your Calculator button.
  3. The next smallest step you could make would be to prompt the user for a number, store it in a variable, and then repeat it back to the user with an alert message. Look back at your Mad Libs web page, if you've forgotten how to do this. When you have the first number working, add the prompt for the second number.
  4. Next, perform one calculation (addition, for example) and output your result.

    Note: The values returned by the prompt function are strings, not numbers. What is the result if you try to use the + operator on those values?

    Tip: Before you can perform arithmetic on string values they must be converted to numbers using the built-in parseFloat function. For example, if the variable firstNum contains the string "3", the following command will convert it to the number 3:

        firstNum = parseFloat(firstNum);
  5. Once you have the logic for one calculation working correctly, you can extend it to all four basic arithmetic operations (sum, difference, product, and quotient) and improve the format of your output so that it shows the input values as well as the results, as in the example above.
    Tip: There are several possible ways to complete this exercise. One possibility would be to create four variables to store the the sum, the product, the difference, and the quotient. You can then use the "+" operator to build the output string. For example, the first output statement might look something like the following: [Click on the alert call above to see an explanation. Click on it again to make the explanation disappear.]

Publish to your web site:

  1. Make sure that you have updated the "Author:" and "With assistance from:" comments at the top of your source file.
  2. Edit the main COMP 105 web page you created in the first lab and add a link to your new Working with Numbers page. (This should be your second link in what will become a set of links to COMP 105 assignments.)

    If you worked in a team, each member of your group should do this, so each of you has a link to the new mini-lab page.

  3. Upload both your modified COMP 105 web page and your page for this Mini-Lab to the server (remember that its host name for uploading is Test that the link to the Mini-Lab works on the server by clicking on it from your home page.