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 > [email protected] > http://lists.xwiki.org/mailman/listinfo/users _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
