Assignment 3 (Due: April 4 2008 11:59pm)
Assignment 3
(Due: April 4
th
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:
1We type two numbers into two text fields at the top.
2We push the desired basic operation (+, -, *, / ).
3We push the “=” button.
4The 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 .
1Download 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.
2We 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).
3Our 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.
4For the first row of the table we need two data cells and two text fields within each data cell.
5For 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”)
6For 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>
7Now, 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
Row 1 , Column 1
NAME attribute
input1
VALUE attribute
0
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
Row 3, Column 1
Input2
add
subtract
multiply
0
+
-
*
Row 3, Column 2
Row 4, Column 1
divide
N/A
/
=
Row 4, Column 2
Row 5, The only column
clear
output
c
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.
8Now save and view calculator.html using a web browser. Do not go any further until you can view the calculator.
9Now, add the following event handler attributes to form elements:
Form Element Event Handler
Row 2, Column 1 ONCLICK
Value
Calling JavaScript function setOperator with parameter “name”
Row 2 , Column 2
Row 3 , Column 1
ONCLICK
ONCLICK
Calling JavaScript function setOperator with parameter “name”
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:
1How many JavaScript functions have been defined in calculator.html? How about in pizza.html?
2What is the syntax for writing you own function? (Describe it very generally.)
3Explain 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?
4Very 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.)
5Why 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?)
6Note 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:
1calculator.html : The html calculator you designed.
2memo : 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!