|
|
| Line 1: |
Line 1: |
| A point can depend on another geometric object. This dependence can be given by using JavaScript syntax or by using
| |
| GEONExT syntax.
| |
| === GEONExT syntax ===
| |
| Here is an example using GEONExT syntax.
| |
| The point A is draggable. The point B depends on point A: Its y-coordinate is set to 1 and its x-coordinate is set
| |
| to the x-coordinate of A.
| |
| <source lang="javascript">
| |
| var b = JXG.JSXGraph.initBoard('jxgbox1', {originX: 40, originY: 100, unitX: 40, unitY: 40});
| |
| var free = b.createElement('point',[0,0], {name:'A', style:5});
| |
| var dep = b.createElement('point',["X(A)",1], {name:'B', style:8});
| |
| </source>
| |
| <html>
| |
| <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
| |
| <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
| |
| <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
| |
| <div id="jxgbox1" class="jxgbox" style="width:600px; height:200px;"></div>
| |
| <script type="text/javascript">
| |
| var b = JXG.JSXGraph.initBoard('jxgbox1', {originX: 40, originY: 100, unitX: 40, unitY: 40});
| |
| var free = b.createElement('point',[0,0], {name:'A', style:5});
| |
| var dep = b.createElement('point',["X(A)",1], {name:'B', style:8});
| |
| </script>
| |
| </html>
| |
| === JavaScript syntax ===
| |
| Now we do exactly the same with JavaScript syntax.
| |
| <source lang="javascript">
| |
| var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 40, originY: 100, unitX: 40, unitY: 40});
| |
| var free = b2.createElement('point',[0,0], {name:'A', style:5});
| |
| var dep = b2.createElement('point',[function(){ return free.X();}, 1], {name:'B', style:8});
| |
| </source>
| |
| <html>
| |
| <div id="jxgbox2" class="jxgbox" style="width:600px; height:200px;"></div>
| |
| <script type="text/javascript">
| |
| var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 40, originY: 100, unitX: 40, unitY: 40});
| |
| var free = b2.createElement('point',[0,0], {name:'A', style:5});
| |
| var dep = b2.createElement('point',[function(){ return free.X();}, 1], {name:'B', style:8});
| |
| </script>
| |
| </html>
| |
| The JavaScript syntax is much more robust against changes of the construction, but of course it looks more complicated.
| |
| Lets look at it again in detail:
| |
| First we construct a free, draggable point called "free".
| |
| <source lang="javascript">
| |
| var free = b2.createElement('point',[0,0], {name:'A', style:5});
| |
| </source>
| |
| Then we construct the dependend point "dep".
| |
| <source lang="javascript">
| |
| var dep = b2.createElement('point',[function(){ return free.X();}, 1], {name:'B', style:8});
| |
| </source>
| |
| The first coordinate of "dep" is given as an anonymous function:
| |
| <source lang="javascript">
| |
| function(){ return free.X();}
| |
| </source>
| |
| This function returns the x-coordinate of the point "free".
| |
|
| |
|
|
| |
| [[Category:Examples]]
| |
