Jonathan --
See http://nielsmayer.com/xwiki/bin/view/Sandbox/Calc and
http://nielsmayer.com/xwiki/bin/view/Sandbox/Calc?viewer=code (
http://nielsmayer.com/xwiki/bin/download/Sandbox/Calc/Sandbox.Calc.xar )
The above took about 1 minute to do, basically cutting and pasting the code
as-is from the article below into a new document, adding one line at the
beginning to get it to include the Javascript I pasted into
XWiki.JavaScriptExtension[0] in the object editor and that's it). Let me
know if you want help getting this example running on
http://jonathanmayer.info (you're going to need to see me do the
JavaScriptExtension trick at least once )... from there, you can add new
functions or whatever to learn about javascript programming on the web.
http://www.maconstateit.net/Tutorials/JSDHTML/JSDHTML09/jsdhtml09-05.htm
A Simple Calculator
Use of buttons to create a simple JavaScript calculator is demonstrated
below. The Calculator button opens the calculator in a ModelessDialog
window that remains on top while providing access to the underlying Web
page. The layout below shows the same calculator with a Formula textbox
that is normally hidden but is revealed here to show the calculations that
take place behind the scenes.
JavaScript CalculatorFormula: *Figure 9-34.* A simple
JavaScript calculator.
The XHTML code and button event handlers are shown below. The calculator is
formatted inside a table to control its layout.
table border=7
tr
td colspan=4 style=font-family:comic sans ms; text-align:center;
color:white; background-color:gray; font-size:9pt
JavaScript Calculator
/td
/tr
tr
td colspan=3input id=Answer type=text style=width:100px;
text-align:right/td
tdinput type=button style=width:30px value==
onclick=EnterEqual()/td
/tr
tr
tdinput type=button style=width:30px value=1
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=2
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=3
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=+
onclick=EnterOperator(this.value)/td
/tr
tr
tdinput type=button style=width:30px value=4
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=5
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=6
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=-
onclick=EnterOperator(this.value)/td
/tr
tr
tdinput type=button style=width:30px value=7
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=8
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=9
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=*
onclick=EnterOperator(this.value)/td
/tr
tr
tdinput type=button style=width:30px value=C
onclick=EnterClear()/td
tdinput type=button style=width:30px value=0
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=.
onclick=EnterNumber(this.value)/td
tdinput type=button style=width:30px value=/
onclick=EnterOperator(this.value)/td
/tr
/table
input id=Formula type=hidden/
*Listing 9-22.* Code to format and style the calculator.
Notice the final input id=Formula type=hidden/ field. The
type=hidden attribute creates a standard textbox that is hidden from view.
In the example above, this control is given the attribute type=text in
order to make it visible so you can see the formulas being created by the
button clicks.
Four functions are called by the buttons. All of the number keys call
function EnterNumber(), passing the number value of the button; the
arithmetic operator keys call function EnterOperator(), passing the operator
symbol; the = key calls function EnterEqual(); and the C key calls
function EnterClear().
script type=text/javascript
var op = false;
var eq = false;
function EnterNumber(Number)
{
if (op == false) {
document.getElementById(Formula).value += Number;
document.getElementById(Answer).value += Number; }
else {
document.getElementById(Answer).value = Number;
op = false;
if (eq == true) {
document.getElementById(Formula).value = Number;
eq = false; }
else {
document.getElementById(Formula).value += Number;
}
}
}
function EnterOperator(Operator)
{
if (document.getElementById(Formula).value != ) {
document.getElementById(Answer).value =
eval(document.getElementById(Formula).value);
document.getElementById(Formula).value =
eval(document.getElementById(Formula).value) + Operator;
op = true;
eq = false;
}
}
function EnterEqual()
{
if (document.getElementById(Formula).value != ) {
document.getElementById(Answer).value =
eval(document.getElementById(Formula).value);
document.getElementById(Formula).value =
eval(document.getElementById(Formula).value);
op = true;
eq = true;
}
}
function EnterClear()
{
