11 Jun
2009
11 Jun
'09
8:51 a.m.
Hi Niels,
This is cool.
What would be great would to post this on code.xwiki.org as a snippet.
Is that something you could do?
Thanks
-Vincent
On Jun 11, 2009, at 2:33 AM, Niels Mayer wrote:
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 Calculator Formula: *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="3"><input id="Answer" type="text"
style="width:100px;
text-align:right"></td>
<td><input type="button" style="width:30px"
value="="
onclick="EnterEqual()"></td>
</tr>
<tr>
<td><input type="button" style="width:30px"
value="1"
onclick="EnterNumber(this.value)"></td>
<td><input type="button" style="width:30px"
value="2"
onclick="EnterNumber(this.value)"></td>
<td><input type="button" style="width:30px"
value="3"
onclick="EnterNumber(this.value)"></td>
<td><input type="button" style="width:30px"
value="+"
onclick="EnterOperator(this.value)"></td>
</tr>
<tr>
<td><input type="button" style="width:30px"
value="4"
onclick="EnterNumber(this.value)"></td>
<td><input type="button" style="width:30px"
value="5"
onclick="EnterNumber(this.value)"></td>
<td><input type="button" style="width:30px"
value="6"
onclick="EnterNumber(this.value)"></td>
<td><input type="button" style="width:30px"
value="-"
onclick="EnterOperator(this.value)"></td>
</tr>
<tr>
<td><input type="button" style="width:30px"
value="7"
onclick="EnterNumber(this.value)"></td>
<td><input type="button" style="width:30px"
value="8"
onclick="EnterNumber(this.value)"></td>
<td><input type="button" style="width:30px"
value="9"
onclick="EnterNumber(this.value)"></td>
<td><input type="button" style="width:30px"
value="*"
onclick="EnterOperator(this.value)"></td>
</tr>
<tr>
<td><input type="button" style="width:30px"
value="C"
onclick="EnterClear()"></td>
<td><input type="button" style="width:30px"
value="0"
onclick="EnterNumber(this.value)"></td>
<td><input type="button" style="width:30px"
value="."
onclick="EnterNumber(this.value)"></td>
<td><input 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()
{
document.getElementById("Answer").value = "";
document.getElementById("Formula").value = "";
op = false;
eq = false;
}
</script>
*Listing 9-23.* Script for the calculator.
Niels
http://nielsmayer.com
_______________________________________________
users mailing list
users(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/users