New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 11 Case 2 The Math Table

Description

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 11 Case 2 The Math Table

The Math Table Theresa Kaine runs The Math Table, a Web site containing math resourses for homeschooling families and educators. She wants to add an online calculator to the site and has asked for your help in designing a simple prototype. Theresa already has designed the Web page and would like you to write the JavaScript code to make the calculator work. A preview of Theresa’s sample Web page is shown in Figure 11-39.
The calculator is actually a Web table using CSS styles to give it the appearance of a calculator. Each calculator button is a form button and the calculator screen is a textarea element. When a user clicks a calculator button, the number or symbol represented by the button should be appended to the text on the calculator screen.
When the user clicks the equal button( = ), the calculator should evaluate the expression and display the calculated value. When the user clicks the Clear button, the text in the calculator screen should be replaced with an empty text string. Finally, when the user clicks the backspace button(<-), the browser should remove the last character on the calculator screen. To aid you in programming the backspace key, Theresa has provided a function named erase(). You will create all of the other JavaScript functions yourself.

Complete the following:

1. Use your text editor to open the calctxt.htm file from the tutorial.11\case2 folder included with your Data Files. Enter your name and the date in the comment section of the file. Save the file as calculator.htm in the same folder.
2. In your text editor, scroll down to the Web table elements and locate the input elements for the 0 through 9 buttons; the /, *, -, and + buttons; the (and) buttons; and the . button. For each of those 17 buttons, and an onclick attribute to run the statement
calcPress(‘value’)
where value is the number or character displayed on the button.
3. Locate the input element for the Clear button and add an onclick attribute to run the clearWin() function when the button is clicked.
4. Locate the input element for the backspace button (<-) and add an onclick attribute to run the erase() function when the button is clicked.
5. Add an onclick attribute to the equal button (=) to run the calcExpression() function when the button is clicked.
6. Scroll to the top of the file and add the calcPress() function to the embedded script element. The purpose of this function is to append a symbol to the text displayed in the calculator screen. The calcPress() function should include the following:
a. A single parameter named symbol
b. A command that uses the += operator to add the value of the symbol parameter to the value of the calcwindow field within the calculator form
7. Create a function named calcExpression(). The purpose of this function is to append the calculated value to the expression displayed on the calculator screen. The function has no parameters. Add the following commands:
a. Declare a variable named cString that is equal to the text contained in the calcwindow field of the calculator form.
b. Use the eval() method to store the numeric value of cString in a variabe named cValue.
c. Change the text string value of the calcwindw field from the calculator form to
cString = cValue
where cString is the value of the cString variable and cValue is the value of the cValue variable.
8. Create a function named clearWinn(). The purpose of this function is to erase the contents of the calculator screen. The function has no parameters but should have a single command that changes the value of the calcwindow field in the calculator field in the calculator to an empty text string (“”).
9. Save your changes to the files.
10. Open the calculator.htm file in your Web browser. Click the different calculator buttons and verify that you can enter a mathematical expression into the calculator. Click the backspace button (<-) and verify that you can erase the last character from the screen Click the equal button (=) and verify that the calculator adds the calculated numeric value to the expression. Finally, click the Clear button and verify that all of the text is removed from the calculator screen.
11. Submit your completed project to your instructor, in either printed or electronic form, as requested.