Practical exercise four.
Simple addition
By Kaustubh Dongre
Q1. Modify this web page by placing the screen elements (buttons and textboxes) into a table.

Note the following function description and the use of the global function parseInt which converts strings of numeric characters to numbers.
When the user enters anything into a text box on the screen it is in the form of alphanumeric characters (numerals not numbers) and hence cannot be used for calculations until numerals are converted into numbers by the following built in function called parseInt. Notice javascript is case sensitive and the middle "I" in parseInt must be a capital.

function addIt() {
var value1 =  parseInt(document.adder.inputA.value)
var value2 = parseInt(document.adder.inputB.value)
var Total = value1 + value2
document.adder.output.value =  Total
}
Q2. Use the internet to find examples of javascript calculators and find a fully working
"on screen" / web calculator.

Try "webdeveloper.com".

a) Download and save a javascript calculator and embed it into your answer page. Instructions for doing this can be found on most javascript download pages. Again you copy and paste the script into the HTML inside the <language = Javascript> HTML tag.

Examine its javascripts. Most calculators will use the "eval() " function to do the calculation.

b) Research the eval() function in the textbook/s.   What does the "eval()" function do ( explain how it works or what it does in general).

Write your answer on the web page you are using for your answers.
 

Q2 a)

b) The eval(codestring) function:

   
The top-level function, eval, evaluates and/or executes a string of JavaScript code that is contained in the codestring argument. First, eval determines if the argument is a valid string and then parses the string looking for JavaScript code. If there are    JavaScript statements in the code, they will be executed and eval will return the value of the last statement (if there is a value). If there is a JavaScript expression, it will be evaluated and its value will be returned. The codestring argument is optional. However, if there is no argument, the eval returns the word, "undefined" showing that there is no value. - DevGuru.2005.Function: eval.http://www.devguru.com/Technologies/ecmascript/QuickRef/eval.html.22/03/2008

The eval function is widely used in math sequences for example:

Code:
a) eval("fred=999; wilma=777; document.write(fred + wilma);");                                                           b) eval("" + "")

Output:
a) 1776                                                                                                                                                b) Undefined

 

 
 Q1.
 
 
 
 



Q3.  Examine the HTML code used to create the table below.
 
Table item
Hello











Table item

 What do the tags <td>Hello </td> do?

The html tag TD defines a data cell in a table. Therefore <td>HELLO</td> means that is this cell there is data and its value is HELLO. The closing tag is used to tell the computer that there is no more data in this cell. <td> </td> is used in all tables as they are defining cells. Every table created will have some data and therefore will need the <td></td> tags. In cells with no value the <td></td> tags are used to define the fact that there are cells in the table. Just because they have no value doesn't mean they aren't there.


HTML for a Table:-
<table border="1" cols="4" width="100%">
<tbody>
<tr>
<td>Table item</td>
<td><br>
</td>
<td>Hello
</td>
<td><br>
</td>
</tr>
<tr>
<td><br>
</td>
<td><br>
</td>
<td><br>
</td>
<td><br>
</td>
</tr>
<tr>
<td><br>
</td>
<td><br>
</td>
<td><br>
</td>
<td><br>
</td>
</tr>
<tr>
<td><br>
</td>
<td><br>
</td>
<td><br>
</td>
<td>Table item</td>
</tr>
</tbody>
</table>