JSX Trigonometrische Funktionen
Aus Wiki1
Zeile 1: | Zeile 1: | ||
Mit Hilfe des Programmpakets JSXGraph (siehe http://jsxgraph.uni-bayreuth.de/wp/) können komplexe, interaktive Grafiken nur mit Hilfe von JavaScript in Webseiten integriert werden. Hier ein Beispiel zur Darstellung der Trigonometrischen Funktionen (der rote Punkt kann mit der Maus bewegt werden!): | Mit Hilfe des Programmpakets JSXGraph (siehe http://jsxgraph.uni-bayreuth.de/wp/) können komplexe, interaktive Grafiken nur mit Hilfe von JavaScript in Webseiten integriert werden. Hier ein Beispiel zur Darstellung der Trigonometrischen Funktionen (der rote Punkt kann mit der Maus bewegt werden!): | ||
- | <jsxgraph width=" | + | <html> |
- | + | <p> | |
+ | <textarea cols=60 rows=4 id="eingabe">function r(t) {return 0.2*t; }; | ||
+ | </textarea><br /> | ||
+ | <input type="button" value="plot" onClick="plot()"> | ||
+ | <input type="button" value="clear all" onClick="clearAll()"> | ||
+ | </p> | ||
+ | </html> | ||
+ | <jsxgraph width="500" height="500"> | ||
+ | board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]}); | ||
+ | a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'}); | ||
+ | b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'}); | ||
+ | function plot(){ | ||
+ | eval(document.getElementById("eingabe").value); | ||
+ | graph = board.createElement('curve', [ | ||
+ | r, [0,0], | ||
+ | function(){return a.Value();}, | ||
+ | function(){return b.Value();} | ||
+ | ], | ||
+ | {curveType:'polar',strokeColor:'red', strokeWidth:2} | ||
+ | ); | ||
+ | board.update(); | ||
+ | } | ||
- | + | function clearAll() { | |
- | + | JXG.JSXGraph.freeBoard(board); | |
- | + | board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]}); | |
+ | a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'}); | ||
+ | b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'}); | ||
} | } | ||
- | + | plot(); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</jsxgraph> | </jsxgraph> | ||
+ | |||
+ | ===The JavaScript code=== | ||
+ | <code javascript> | ||
+ | board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]}); | ||
+ | a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'}); | ||
+ | b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'}); | ||
+ | function plot(){ | ||
+ | eval(document.getElementById("eingabe").value); | ||
+ | graph = board.createElement('curve', [ | ||
+ | r, [0,0], | ||
+ | function(){return a.Value();}, | ||
+ | function(){return b.Value();} | ||
+ | ], | ||
+ | {curveType:'polar',strokeColor:'red', strokeWidth:2} | ||
+ | ); | ||
+ | board.update(); | ||
+ | } | ||
+ | |||
+ | function clearAll() { | ||
+ | JXG.JSXGraph.freeBoard(board); | ||
+ | board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]}); | ||
+ | a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'}); | ||
+ | b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'}); | ||
+ | } | ||
+ | |||
+ | plot(); | ||
+ | </code> | ||
[[Kategorie:Bilder]] | [[Kategorie:Bilder]] | ||
[[Kategorie:Wissen]] | [[Kategorie:Wissen]] |
Version vom 19:55, 23. Nov. 2013
Mit Hilfe des Programmpakets JSXGraph (siehe http://jsxgraph.uni-bayreuth.de/wp/) können komplexe, interaktive Grafiken nur mit Hilfe von JavaScript in Webseiten integriert werden. Hier ein Beispiel zur Darstellung der Trigonometrischen Funktionen (der rote Punkt kann mit der Maus bewegt werden!):
<html>
<textarea cols=60 rows=4 id="eingabe">function r(t) {return 0.2*t; };
</textarea>
<input type="button" value="plot" onClick="plot()">
<input type="button" value="clear all" onClick="clearAll()">
</html>
The JavaScript code
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});
function plot(){
eval(document.getElementById("eingabe").value); graph = board.createElement('curve', [ r, [0,0], function(){return a.Value();}, function(){return b.Value();} ], {curveType:'polar',strokeColor:'red', strokeWidth:2} ); board.update();
}
function clearAll() {
JXG.JSXGraph.freeBoard(board); board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]}); a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'}); b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});
}
plot();