|
|
| Line 41: |
Line 41: |
|
| |
|
|
| |
|
| == How to Create this Construction ==
| | kHsO5c <a href="http://vxlxfmddnrtf.com/">vxlxfmddnrtf</a>, [url=http://cllybjtczvxu.com/]cllybjtczvxu[/url], [link=http://ewivmgtmljiz.com/]ewivmgtmljiz[/link], http://yjnulzdzdwcz.com/ |
| | |
| === HTML Part ===
| |
| '''Adding a text input field somewhere on the page together with a button'''
| |
| | |
| <source lang="xml">
| |
| <input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)">
| |
| <input type="button" value="set" onClick="doIt()">
| |
| </source>
| |
| | |
| === JavaScript Part ===
| |
| '''Setting up the board'''
| |
| <source lang="javascript">
| |
| board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 40, unitY: 20});
| |
| // Axes | |
| b1axisx = board.createElement('axis', [[1,0], [0,0]], {});
| |
| b1axisy = board.createElement('axis', [[0,1], [0,0]], {});
| |
| </source>
| |
| | |
| '''Create a JavaScript Function f(x) From the Text Field'''
| |
| <source lang="javascript">
| |
| eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
| |
| </source> | |
| | |
| '''Use f(x) for defining the Graph'''
| |
| <source lang="javascript">
| |
| graph = board.createElement('curve', ["x", function(x){ return f(x); }, "x", -10, 10],{curveType:'plot'});
| |
| </source>
| |
| | |
| '''Define Further Elements'''
| |
| <source lang="javascript">
| |
| //glider on the curve
| |
| p1 = board.createElement('glider', [0,0,graph], {style:6, name:'P'});
| |
| //define the derivative of f | |
| g = board.algebra.D(f);
| |
| //a point on the tangent | |
| // variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()
| |
| p2 = board.createElement('point', [function() { return p1.X()+1;}, function() {return p1.Y()+board.algebra.D(graph.Y)(p1.X());}], {style:1, name:''});
| |
| //the tangent
| |
| l1 = board.createElement('line', [p1,p2],{});
| |
| //a third point fpr the slope triangle
| |
| p3 = board.createElement('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});
| |
| //the slope triangle | |
| pol = board.createElement('polygon', [p1,p2,p3], {});
| |
| //a text for displaying slope's value
| |
| // variable x coordinate variable y coordinate variable value
| |
| t = board.createElement('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(board.round(p2.Y()-p3.Y(),2));}],{color:ff0000});
| |
| </source>
| |
| | |
| '''Define JavaScript Function doIt() for Reacting on User Input'''
| |
| <source lang="javascript">
| |
| function doIt(){
| |
| //redefine function f according to the current text field value
| |
| eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
| |
| //change the Y attribute of the graph to the new function
| |
| graph.Y = function(x){ return f(x); };
| |
| //update the graph
| |
| graph.updateCurve();
| |
| //update the whole board
| |
| board.update();
| |
| }
| |
| </source>
| |
|
| |
|
| == Remarks == | | == Remarks == |
| The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript. | | The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by aononymous functions of JavaScript. |
| [[Category:Examples]] | | [[Category:Examples]] |
