<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR"
content="Mozilla/4.77C-CCK-MCD {C-UDP; EBM-APPLE} (Macintosh; U; PPC) [Netscape]">
<title>Sum Maker</title>
<style type="text/css">
.style1 {
text-align: center;
}
.style2 {
font-family: "Times New Roman", Times, serif;
}
.style3 {
font-size: small;
}
.style4 {
font-size: large;
}
.style5 {
font-size: small;
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body alink="#33ff33" bgcolor="#ffffff" link="#3300cc" text="#330066"
vlink="#330066">
<center><font color="#421cff"><font size="+3">Practical exercise four.</font></font>
<br>
<font color="#421cff"><font size="+3">Simple addition<br>
</font><span class="style4">By Kaustubh Dongre</span></font></center>
<font size="+2">Q1. Modify this web page by placing the screen elements
(buttons
and textboxes) into a table.</font>
<p><font size="+2">Note the following function description and the use
of
the global function parseInt which converts strings of numeric
characters to numbers.<br>
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.<br>
</font>
</p>
<p><font face="Courier New,Courier"><font color="#0c0cff"><font
size="+1">function
addIt() {</font></font></font>
<br>
<font face="Courier New,Courier"><font color="#0c0cff"><font size="+1">var
value1 = parseInt(document.adder.inputA.value)</font></font></font>
<br>
<font face="Courier New,Courier"><font color="#0c0cff"><font size="+1">var
value2 = parseInt(document.adder.inputB.value)</font></font></font>
<br>
<font face="Courier New,Courier"><font color="#0c0cff"><font size="+1">var
Total = value1 + value2</font></font></font>
<br>
<font face="Courier New,Courier"><font color="#0c0cff"><font size="+1">document.adder.output.value
= Total</font></font></font>
<br>
<font face="Courier New,Courier"><font size="+1">}</font></font>
<br>
<font size="+2">Q2. Use the internet to find examples of javascript
calculators
and find a fully working <br>
"on screen" / web calculator.</font>
</p>
<p><font size="+2">Try "webdeveloper.com".</font>
</p>
<p><font size="+2">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.</font>
</p>
<p><font size="+2">Examine its javascripts. Most calculators will use
the
"eval() " function to do the calculation.</font>
</p>
<p><font size="+2">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).</font>
</p>
<p><font size="+2">Write your answer on the web page you are using for
your
answers.</font>
<br>
</p>
<p class="style3"><strong>Q2 a)</strong><FORM name="Keypad" action="">
<TABLE>
<B>
<TABLE border=0 width=50 height=60 cellpadding=1 cellspacing=5 align="center" bgcolor="#808080">
<TR>
<TD colspan=3 align=middle>
<input name="ReadOut" type="Text" size=24 value="0" width=100%>
</TD>
<TD class="style1">
<input name="btnClear" type="Button" value=" C " onclick="Clear()">
</TD>
<TD class="style1"><input name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()">
</TD>
</TR>
<TR>
<TD class="style1">
<input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)">
</TD>
<TD class="style1">
<input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)">
</TD>
<TD class="style1">
<input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)">
</TD>
<TD class="style1">
<input name="btnNeg" type="Button" value=" +/- " onclick="Neg()">
</TD>
<TD class="style1">
<input name="btnPercent" type="Button" value=" % " onclick="Percent()">
</TD>
</TR>
<TR>
<TD class="style1">
<input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)">
</TD>
<TD class="style1">
<input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)">
</TD>
<TD class="style1">
<input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)">
</TD>
<TD align=middle><input name="btnPlus" type="Button" value=" + " onclick="Operation('+')">
</TD>
<TD align=middle><input name="btnMinus" type="Button" value=" - " onclick="Operation('-')">
</TD>
</TR>
<TR>
<TD class="style1">
<input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)">
</TD>
<TD class="style1">
<input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)">
</TD>
<TD class="style1">
<input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)">
</TD>
<TD align=middle><input name="btnMultiply" type="Button" value=" * " onclick="Operation('*')">
</TD>
<TD align=middle><input name="btnDivide" type="Button" value=" / " onclick="Operation('/')">
</TD>
</TR>
<TR>
<TD style="height: 34px" class="style1">
<input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)">
</TD>
<TD style="height: 34px" class="style1">
<input name="btnDecimal" type="Button" value=" . " onclick="Decimal()">
</TD>
<TD colspan=2 style="height: 34px">
</TD>
<TD style="height: 34px" class="style1">
<input name="btnEquals" type="Button" value=" = " onclick="Operation('=')">
</TD>
</TR>
</TABLE>
</B>
</FORM>
</CENTER>
<font face="Verdana, Arial, Helvetica" size=2>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
// End -->
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
}
// -->
</script><strong><span class="style3">b)</span></strong> <span class="style5">The eval(codestring)
function:<br>
<br>
</span>
<font face="arial, helvitica" size="2" class="style3"><span class="style2">The top-level
function, <b>eval</b>, evaluates and/or executes a string of JavaScript code
that is contained in the <b><em>codestring</em></b> argument. First, <b>eval</b>
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 <b>eval</b> 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 <b><em>codestring</em></b>
argument is optional. However, if there is no argument, the <b>eval</b> returns
the word, "undefined" showing that there is no value. - DevGuru.2005.Function: eval.<a href="http://www.devguru.com/Technologies/ecmascript/QuickRef/eval.html">http://www.devguru.com/Technologies/ecmascript/QuickRef/eval.html</a>.22/03/2008<br>
<br>
The eval function is widely used in math sequences for example:<span class="CODE"><br>
<br>
Code:<br>
a)
eval("fred=999; wilma=777; document.write(fred + wilma);");
b) eval("" + "") <br>
<br>
Output:<br>
a)
1776
b) Undefined</span></span><br>
</font></p>
<p> </p>
<form name="adder" style="height: 197px"> <br>
<strong><span class="style3">Q1.<br>
</span></strong>
<table style="width: 11%; background-color: #808080;" align="center">
<tr>
<td class="style1" style="width: 107px">
<input name="inputA" value="0" size="5" type="text" style="width: 66px"></td>
<td> </td>
</tr>
<tr>
<td class="style1" style="width: 107px">
<input name="inputB" value="0" size="5" type="text" style="width: 66px"></td>
<td> </td>
</tr>
<tr>
<td class="style1" style="width: 107px"> </td>
<td>
<input value="Add"
onclick="addIt()" name="button" type="button" style="width: 52px"></td>
</tr>
<tr>
<td class="style1" style="width: 107px">
<input name="output" size="6" type="text" style="width: 90px"></td>
<td> </td>
</tr>
</table>
<p> <br>
<br>
</p>
<p style="height: 820px"><big><big>Q3.</big></big> <big><big>Examine the HTML code
used to create the table below.</big></big> <br>
<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>
<br>
<big><big>What do the tags <td>Hello </td> do?<br>
<br>
<span class="style2">The html tag TD defines a <em>data cell</em> 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.</span><br>
<br>
<br>
HTML for a Table:-<br>
</big></big><table border="1" cols="4" width="100%"><br>
<tbody><br>
<tr><br>
<td>Table item</td><br>
<td><br><br>
</td><br>
<td>Hello<br>
</td><br>
<td><br><br>
</td><br>
</tr><br>
<tr><br>
<td><br><br>
</td><br>
<td><br><br>
</td><br>
<td><br><br>
</td><br>
<td><br><br>
</td><br>
</tr><br>
<tr><br>
<td><br><br>
</td><br>
<td><br><br>
</td><br>
<td><br><br>
</td><br>
<td><br><br>
</td><br>
</tr><br>
<tr><br>
<td><br><br>
</td><br>
<td><br><br>
</td><br>
<td><br><br>
</td><br>
<td>Table item</td><br>
</tr><br>
</tbody><br>
</table><br>
</p>
</form>
</body>
</html>