Kleiner JavaScript Kurs
JavaScript Bibliothek JSXGraph
JSXGraph ist eine JavaScript Bibliothek für Mathematisch - Grafische Visualisierungen. Ich verwende hier die Version 1.2.3
Um JSXGraph zu verwenden muss man nur die beiden Dateien jsxgraph.css und jsxgraphcore.js im head ausführen.
Im body wird für den JSXGraph Grafikbereich ein div Bereich der Klasse jxgbox verwendet. Die html Seite könnte so aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/jsxgraph.css" />
<script type="text/javascript" src="js/jsxgraphcore.js"></script>
</head>
<body>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
</script>
</body>
</html> Im Programm (script) gibt man für die "boundingbox" die Koordinaten oben links und unten rechts an (hier -10/10 und 10/-10) und legt fest, ob im Koordinatensystem Achsen angezeigt werden sollen (axis: true)
In diesem Koordinatensystem kann man jetzt Punkte, Linien, Kreise, usw. zeichnen und Funktionen Plotten. Hier ein paar Beispiele:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/jsxgraph.css" />
<script type="text/javascript" src="js/jsxgraphcore.js"></script>
</head>
<body>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
//Punkt
var A = board.create('point', [-3,3]);
var B = board.create('point', [3,-2]);
//Linie
var line = board.create('line', [A,B]);
//Kreis
var circle = board.create('circle', [A,B]);
//Funktion
var func = board.create('functiongraph', [function(x){return Math.sin(x);}]);
</script>
</body>
</html>Das Ergebnis ist dann interaktiv und kann auch sehr gut auf einem Touchscreen (Smartphone, Tablet) verwendet werden. Probier es aus:
Mit der JSXGraph Bibliothek lässt sich auch eine programmierbare Turtlegrafik erstellen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/jsxgraph.css" />
<script type="text/javascript" src="js/jsxgraphcore.js"></script>
<script src="js/math.js" type="text/javascript"></script>
</head>
<body>
<h2>Einfache Turtle Grafik</h2>
<textarea id="inputtext" rows=3 cols=35 wrap="off" style="width:600px;">t.fd(100);</textarea>
<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
Das Turtle - Objekt ist "t"
<pre><code lang="javascript">
* t.forward(len); or t.fd(len);
* t.back(len); or t.bk(len);
* t.right(angle); or t.rt(angle); *)
* t.left(angle); or t.lt(angle); *)
* t.penUp(); or t.pu();
* t.penDown(); or t.pd();
* t.clearScreen(); or t.cs();
* t.clean();
* t.setPos(x,y);
* t.home();
* t.hideTurtle(); or t.ht();
* t.showTurtle(); or t.st();
* t.setPenSize(size); (size: number)
* t.setPenColor(col); (col: colorString, e.g. 'red' or '#ff0000')
* t.setAttribute({key1:value1,key2:value2,...});
* t.pushTurtle()
* t.popTurtle()
* t.lookTo(dir) or t.lookTo([x,y]) (Turtle looks to a coordinate pair. If t2 is another turtle object: t.lookTo(t2.pos))
* t.moveTo([x,y]) (Turtle goes forward to the coordinates pair. The turtles direction is not changed.)
* t.X(), t.Y(): get the position of the turtle t.
Außerdem können Variable (var schritte=50;) und
Schleifen for(var i=0;i<4;i++){diese Befehle werden 4 mal ausgeführt}
</code></pre>
<script type="text/javascript">
var programm=document.getElementById("inputtext");
programm.addEventListener("change", ausfuehren);
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 200, 300, -200]});
var t = board.create('turtle');
function ausfuehren(){
t.cs();
eval(programm.value);
}
</script>
</body>
</html>JSXGraph is released under the LGPL – Lesser GNU General Public License – and the MIT license.