<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JavaScript calculator demo</title>
<!-- Changed by: Jim Mahoney, 11-Apr-2006 -->
<script type="text/javascript" src="calculator.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
color: #333000;
background-color: #ececec;
}
.over {
color: blue;
background-color: #ececec;
}
.warning {
color: red;
background-color: #ececec;
}
input {
color: #000000;
background-color: #fcfcfc;
}
img.w3c {
border: 0;
width: 88px;
height: 31px;
}
</style>
</head>
<body>
<h1>JavaScript Calculator Demo</h1>
<!-- ========== start form ============= -->
<form method="get" action="" id="calculator" onSubmit="return calculate()">
<table cellpadding="10">
<tr>
<td>
<input type="text" name="x" size="8" />
</td>
<td>
<select name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="?">?</option>
</select>
</td>
<td>
<input type="text" name="y" size="8" />
</td>
<td>
=
</td>
<td>
<div id="answer">________</div> <!-- === The result is put here. === -->
</td>
</tr>
<tr>
<td colspan="5">
<input type="submit" value="calculate" /><br/>
<input type="button" value="reset everything" onClick="reset_all()" />
</td>
</tr>
</table>
<hr>
<h2>Action examples</h2>
Other ways to invoke the calculator include
<ul>
<li><input type="button" value="clicking things" onClick="calculate()" /></li>
<li> mousing over <a class="over" onMouseOver="calculate()">things</a>.</li>
</ul>
</form>
<!-- ========== end form ============= -->
<hr>
<h2>Debug messages</h2>
<pre id="message"></pre> <!-- === Messages are put here. === -->
<a href="javascript:clear_messages()">clear messages</a>
<hr>
<h2>Details</h2>
<ul>
<li>the <a href="calculator.html_html">HTML source</a></li>
<li>the <a href="calculator.js_html">JavaScript source</a></li>
<li>For reminders about JavaScript syntax see for example
<a href="http://research.nihonsoft.org/javascript/ClientReferenceJS13/index.html">http://research.nihonsoft.org/javascript/ClientReferenceJS13/index.html</a>.</li>
<li>And check out these FireFox tools for working with JavaScript
<ul>
<li>JavaScript Console
(for example, put in a typo and reload)</li>
<li>DOM Inspector
(for example, look at the HTML Form as a JavaScript Object</li>
<li>JavaScript Debugger (also called "Venkman")
(powerful but a bit complicated)</li>
</ul>
</li>
<li>I've put in links to the W3C HTML and CSS validator -
I encourage you folks to do the same for your projects.
</li>
</ul>
<hr>
<div align="right">
<small>
This page is open source.<br>
Jim Mahoney (mahoney@marlboro.edu)<br>
Marlboro College<br>
April 11 2006
</small>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img class="w3c" src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" ></a>
</p>
<p><a href="http://jigsaw.w3.org/css-validator/check?uri=referer">
<img class="w3c" src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!"></a>
</p>
</div>
</body>
</html>
syntax highlighted by Code2HTML, v. 0.93pm6