JSX Trigonometrische Funktionen

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
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!):
-
<html>
+
<jsxgraph box="jxgbox1" width="700" height="300">
-
<p>
+
board1 = JXG.JSXGraph.initBoard('jxgbox1', {axis:true, boundingbox: [-6, 3, 8, -3]});
-
  <textarea cols=60 rows=4 id="eingabe">function r(t) {return 0.2*t; };
+
board1.suspendUpdate();
-
</textarea><br />
+
board1.create('functiongraph', [function(t){ return Math.sin(t); },-10, 10],{strokeColor: "#cccccc"});
-
  <input type="button" value="plot" onClick="plot()">
+
var s = board1.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'S',snapWidth:1});
-
  <input type="button" value="clear all" onClick="clearAll()">
+
board1.create('functiongraph', [
-
</p>
+
function(t) {
-
</html>
+
var val = 0, i, sv = s.Value()+1;
-
<jsxgraph width="500" height="500">
+
for(i = 0; i < sv; i++) {
-
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
+
  val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / JXG.Math.factorial(2*i+1);
-
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'});
+
return val;
-
function plot(){
+
},
-
  eval(document.getElementById("eingabe").value);
+
-10, 10], {strokeColor: "#bb0000"});
-
  graph = board.createElement('curve', [
+
board1.unsuspendUpdate();
-
            r, [0,0],
+
</jsxgraph>
-
            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>
 
-
 
-
===The JavaScript code===
 
<code javascript>
<code javascript>
-
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
+
board1 = JXG.JSXGraph.initBoard('jxgbox1', {axis:true, boundingbox: [-6, 3, 8, -3]});
-
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
+
board1.suspendUpdate();
-
b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});
+
board1.create('functiongraph', [function(t){ return Math.sin(t); },-10, 10],{strokeColor: "#cccccc"});
-
function plot(){
+
var s = board1.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'S',snapWidth:1});
-
  eval(document.getElementById("eingabe").value);
+
board1.create('functiongraph', [
-
  graph = board.createElement('curve', [
+
  function(t) {
-
            r, [0,0],
+
    var val = 0, i, sv = s.Value()+1;
-
            function(){return a.Value();},
+
    for(i = 0; i < sv; i++) {
-
            function(){return b.Value();}
+
      val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / JXG.Math.factorial(2*i+1);
-
            ],  
+
    }
-
            {curveType:'polar',strokeColor:'red', strokeWidth:2}
+
    return val;
-
          );
+
  }, -10, 10], {strokeColor: "#bb0000"});
-
  board.update();
+
board1.unsuspendUpdate();
-
}
+
</code>
-
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();
+
== Power Series for Cosine ==
-
</code>
+
<jsxgraph box="jxgbox2" width="700" height="300">
 +
board2 = JXG.JSXGraph.initBoard('jxgbox2', {axis:true, boundingbox: [-6, 3, 8, -3]});
 +
board2.suspendUpdate();
 +
board2.create('functiongraph', [function(t){ return Math.cos(t); }, -10, 10],{strokeColor: "#cccccc"});
 +
var s2 = board2.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'T',snapWidth:1});
 +
board2.create('functiongraph', [
 +
function(t) {
 +
var val = 0, i, sv = s2.Value()+1;
 +
for(i = 0; i < sv; i++) {
 +
  val = val + Math.pow(-1, i) * Math.pow(t, 2 * i) / JXG.Math.factorial(2*i);
 +
}
 +
return val;
 +
},
 +
-10, 10],{strokeColor: "#009900"});
 +
board2.unsuspendUpdate();
 +
</jsxgraph>
[[Kategorie:Bilder]]
[[Kategorie:Bilder]]
[[Kategorie:Wissen]]
[[Kategorie:Wissen]]

Version vom 19:56, 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!):

board1 = JXG.JSXGraph.initBoard('jxgbox1', {axis:true, boundingbox: [-6, 3, 8, -3]}); board1.suspendUpdate(); board1.create('functiongraph', [function(t){ return Math.sin(t); },-10, 10],{strokeColor: "#cccccc"}); var s = board1.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'S',snapWidth:1}); board1.create('functiongraph', [ 

 function(t) {
   var val = 0, i, sv = s.Value()+1;
   for(i = 0; i < sv; i++) {
     val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / JXG.Math.factorial(2*i+1);
   }
   return val;
 }, -10, 10], {strokeColor: "#bb0000"});

board1.unsuspendUpdate();


Power Series for Cosine

Von „https://technikundkultur.de/wiki1/index.php5?title=JSX_Trigonometrische_Funktionen“
Persönliche Werkzeuge