Assignment 3

(Due: April 4th 2008 11:59pm)

In this assignment we are going to build a calculator using HTML form elements and JavaScript. You don’t need to write a JavaScript function; I have provided you the JavaScript functions. You only need to know how to call these functions in context of event handlers of form-elements.(For more information refer to lecture slides on Forms or chapter 5 of the textbook.)

We are going to use HTML form-elements to build a graphical interface for the calculator and use event handler attributes to call appropriate JavaScript functions to process the user input data and return the result.

Let’s see some snapshots of the finished work:

This is how it works:

Performing an operation on two operands:

1-We type two numbers into two text fields at the top.

2-We push the desired basic operation (+, -, *, / ).

3-We push the “=” button.

4-The result of the operation should appear on the bottom text field.

Ex: dividing 1000 by 12.5.

To clear the text fields you can push the “c” button (c stands for clear).

Part 1.

Hint: Start this homework by reviewing the pizza.html practice we did in class. You can download it from homepage under resources section .

1-Download calculator.html from the homepage of the course and see the source of it. As you can see there is a piece of JavaScript within <SCRIPT> tag and <SCRIPT> tag itself is within <HEAD tag.

2-We need to use a number of form elements, thus we need to specify some area where we have the form elements. So, we need to add <FORM> and </FORM> tags within the body of the HTML and the name of this form should be exactly “calculator” (using NAME attribute of the FORM element).

3-Our calculator has a number of cells. This suggests to have a table within our <Form> tag and to have the appropriate form-elements inside data cells (<TD</TD>) of the table.

4-For the first row of the table we need two data cells and two text fields within each data cell.

5-For the second, third and fourth rows we need to have two data cells and two buttons within each data cell. The second button (second column) of fourth row should be a reset button. (form element of type “reset”)

6-For the last row we need to have a single data cell with a text field within it. The data cell should span for two columns. Here is the syntax for spanning a data cell for n columns:

<TD COLSPAN=”n”> ….. </TD>

7-Now, we need to have a name and value for each of the form elements using NAME and VALUE attributes as follows:

<INPUT TYPE= "…." NAME="…." VALUE="…."

Note that the name of a form-element is used to able us to refer to that form-element inside JavaScript functions. So the NAME and VALUE for each form-element should be EXACTLY as specified in the following table:

Form element / NAME attribute / VALUE attribute
Row 1 , Column 1 / input1 / 0
Row 1, Column 2 / Input2 / 0
Row 2, Column 1 / add / +
Row 2, Column 2 / subtract / -
Row 3, Column 1 / multiply / *
Row 3, Column 2 / divide / /
Row 4, Column 1 / N/A / =
Row 4, Column 2 / clear / c
Row 5, The only column / output / N/A

Note: The “=” button doesn’t need to have a name and the text field in the last row does not need any value.

8-Now save and view calculator.html using a web browser. Do not go any further until you can view the calculator.

9-Now, add the following event handler attributes to form elements:

Form Element / Event Handler / Value
Row 2, Column 1 / ONCLICK / Calling JavaScript function setOperator with parameter “name”
Row 2 , Column 2 / ONCLICK / Calling JavaScript function setOperator with parameter “name”
Row 3 , Column 1 / ONCLICK / Calling JavaScript function setOperator with parameter “name”
Row 3 , Column 2 / ONCLICK / Calling JavaScript function setOperator with parameter “name”
Row 4 , Column 1 / ONCLICK / Calling JavaScript function “calculate” with no parameter.

Note: See the Forms lecture slides for more explanation on event handler attributes, calling a JavaScript function and calling a JavaScript function as a value of an event handler attribute of some form-element.

Although not required, you can use attributes such as BGCOLOR in TR tag (<TR BGCOLOR=”color”>) to have a design which looks more like a real world calculator. Also you use the “SIZE” attribute to adjust the size of a text field.

Before submitting calculator.html test it to make sure it will perform all the four basic arithmetic operations and also the clear button works well.

Part 2: Looking into JavaScript code

Write the answers to questions of part2 in a file called memo with appropriate extension.

Look at the JavaScript codes within <SCRIPT> and </SCRIPT> in your calculator.html and pizza.html, then answer the following questions:

1-How many JavaScript functions have been defined in calculator.html? How about in pizza.html?

2-What is the syntax for writing you own function? (Describe it very generally.)

3-Explain from you high school mathematical background, what is a variable? We have a similar concept in computer science. A variable in Computer Science is a named placeholder for data. In JavaScript we define a variable with the following syntax:

var variable_name = initial_value;

where var is a JavaScript keyword, variable_name is the name we give to this variable and initial_value is the intial value we assign to this variable (That is later we may change the value stored in this variable, but at the beginning this is the value stored in this variable). Example:

var x = 10; or var word = “hello”;

How many variables have we defined in calculator.html? How about in pizza.html?

4-Very roughly, how do you interpret terms like input1.value or input2.value in JavaScript code of calculator.html? (Hint: Try to find where within body of this HTML document, order1 and order2 have been used.)

5-Why in step 2 and 7 of part 1, I insisted that the names and the values for form-elements should exactly be as specified? (For example why the name of the first text field exactly should be input1 not INPUT1 or tupni1?)

6-Note in JavaScript function “calculate” of calculator.html couple of statements like this:

if( some variable == some value)

do something;

Try to interpret the meaning of this statement (Hint: “if” exactly has the same meaning in JavaScript language as in English. Also “==” is a test for equality. We had something similar to this in XSL, namely <xsl:if match = “some test”> do something </xsl:if>).

Deliveries:

1-calculator.html : The html calculator you designed.

2-memo : Text file containing the answers to questions of part 2.

Note: Send me the two files as attachments in one email. The title of email should be CS105:HW3:Your Last Name:Your First Name.

A 5% penalty will be applied to each day of late submission.

Good Luck!