JSXGraph: Unterschied zwischen den Versionen

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche
K (- Kurzinfo Software)
 
(29 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
<div style="float:right">
 +
<jsxgraph width="250" height="200" box="box">
 +
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 2, 2, -1.5], keepaspectratio:true});
 +
 +
brd.suspendUpdate();
 +
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
 +
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
 +
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});
 +
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});
 +
for(i=0;i<=2;i++) {
 +
    pol.borders[i].setProperty('strokeColor:#009256');
 +
}
 +
 +
pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});
 +
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});
 +
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});
 +
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
 +
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
 +
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
 +
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});
 +
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
 +
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
 +
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
 +
 +
mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});
 +
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});
 +
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});
 +
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
 +
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
 +
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
 +
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});
 +
 +
i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});
 +
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});
 +
c[0].setProperty('visible:false');
 +
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});
 +
 +
euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});
 +
brd.unsuspendUpdate();
 +
 +
</jsxgraph>
 +
</div>
 +
 
==Dynamische Mathematik mit JSXGraph==
 
==Dynamische Mathematik mit JSXGraph==
Seit Anfang 2008 wird am Lehrstuhl für Mathematik und ihre Didaktik der Universität Bayreuth die Dynamische-Mathematik-Software ''[http://jsxgraph.uni-bayreuth.de/wp/ JSXGraph]'' entwickelt. Der innovativste Unterschied zu anderen Geometrie-/Mathematik-Programmen mit vergleichbarer Funktionalität ist erst auf den zweiten Blick zu sehen: JSXGraph ist weder ein eigenständiges Windows-Programm noch ein Java-Applet, sondern JSXGraph ist vollständig in JavaScript programmiert! Was ist JavaScript? JavaScript ist eine lange Zeit belächelte, interpretierte Programmiersprache, die schon seit 1996 von praktisch allen Web-Browsern unterstützt wird. Jedoch erst durch das sogenannte Web 2.0 wurde die tatsächliche Leistungsfähigkeit von JavaScript erkannt und die in den Browsern eingebauten Interpreter optimiert. Mittlerweile kommt kaum mehr ein Web-Auftritt ohne JavaScript aus und die Browser versuchen sich in der Ausführungsgeschwindigkeit gegenseitig zu übertrumpfen. Zum Zeichnen im Web-Browser verwendet JSXGraph zwei Vektorgrafik-Formate: Im Internet-Explorer wird die Sprache [http://de.wikipedia.org/wiki/Vector_Markup_Language VML] verwendet, in allen anderen Browsern die Sprache [http://de.wikipedia.org/wiki/Scalable_Vector_Graphics SVG].
+
Seit Anfang 2008 wird am Lehrstuhl für Mathematik und ihre Didaktik der Universität Bayreuth die Dynamische-Mathematik-Software ''[http://jsxgraph.uni-bayreuth.de/wp/ JSXGraph]'' entwickelt. Der innovativste Unterschied zu anderen Geometrie-/Mathematik-Programmen mit vergleichbarer Funktionalität ist erst auf den zweiten Blick zu sehen: JSXGraph ist weder ein eigenständiges Windows-Programm noch ein Java-Applet, sondern JSXGraph ist vollständig in [[JavaScript]] programmiert!  
 +
 
 +
Was ist JavaScript? JavaScript ist eine lange Zeit belächelte, interpretierte Programmiersprache, die schon seit 1996 von praktisch allen [[Web-Browser]]n unterstützt wird. Jedoch erst durch das sogenannte [[Web 2.0]] wurde die tatsächliche Leistungsfähigkeit von JavaScript erkannt und die in den Browsern eingebauten Interpreter optimiert. Mittlerweile kommt kaum mehr ein Web-Auftritt ohne JavaScript aus und die Browser versuchen sich in der Ausführungsgeschwindigkeit gegenseitig zu übertrumpfen. Zum Zeichnen im Web-Browser verwendet JSXGraph zwei Vektorgrafik-Formate: Im [[Internet Explorer]] wird die Sprache [http://de.wikipedia.org/wiki/Vector_Markup_Language VML] verwendet, in allen anderen Browsern die Sprache [http://de.wikipedia.org/wiki/Scalable_Vector_Graphics SVG].
  
 
Das Resultat ist, dass zum Betrachten einer JSXGraph-Konstruktion im Web-Browser '''keinerlei''' Plugin mehr benötigt wird. Die allseits bekannte Angst, ob im Computerraum wirklich auch das richtige Java-Plugin auf jedem Computer installiert ist, gehört damit der Vergangenheit an. Wenn der Web-Server so konfiguriert ist, dass die Inhalte komprimiert ausgeliefert werden (was in jedem Fall anzuraten ist), benötigt JSXGraph gerade einmal 80 kByte zur Übertragung.  
 
Das Resultat ist, dass zum Betrachten einer JSXGraph-Konstruktion im Web-Browser '''keinerlei''' Plugin mehr benötigt wird. Die allseits bekannte Angst, ob im Computerraum wirklich auch das richtige Java-Plugin auf jedem Computer installiert ist, gehört damit der Vergangenheit an. Wenn der Web-Server so konfiguriert ist, dass die Inhalte komprimiert ausgeliefert werden (was in jedem Fall anzuraten ist), benötigt JSXGraph gerade einmal 80 kByte zur Übertragung.  
  
Heutzutage wird Dynamische Mathematik zumeist mit Java-Applets realisiert, z.B. mit dem ausgezeichneten [http://www.geogebra.org GeoGebra]. Die Frage ist jedoch, ob auf den Computern der Zukunft Java-Applets überhaupt noch lauffähig sein werden. Der Trend scheint im Moment zu immer kleineren Computern zu gehen, die nicht mehr ausschließlich mit Intel-kompatible Prozessoren laufen und Windows als Betriebssystem besitzen, man denke nur an das iPhone von Apple und das ChromeOS von Google. Auf diese Situation sollten wir Dynamische-Mathematik-Enthusiasten vorbereitet sein. JSXGraph zeigt, dass Alternativen vorhanden sind, Konstruktionen werden auf dem iPhone (ab SDK 2.1) angezeigt (Interaktion ist momentan leider noch nicht möglich). Eine weitere Alternative zu Java ist Flash, in Frankreich wird damit von einer Lehrer-Organisation das hervorragende [http://tracenpoche.sesamath.net/ Tracenpoche] entwickelt. Leider beschränken sich die Entwickler in der Verbreitung auf Frankreich.
+
Heutzutage wird Dynamische Mathematik zumeist mit Java-Applets realisiert, z.B. mit dem ausgezeichneten [[GeoGebra]]. Die Frage ist jedoch, ob auf den Computern der Zukunft Java-Applets überhaupt noch lauffähig sein werden. Der Trend scheint im Moment zu immer kleineren Computern zu gehen, die nicht mehr ausschließlich mit Intel-kompatible Prozessoren laufen und [[Windows]] als Betriebssystem besitzen, man denke nur an das iPhone von Apple und das ChromeOS von Google. Auf diese Situation sollten wir Dynamische-Mathematik-Enthusiasten vorbereitet sein. JSXGraph zeigt, dass Alternativen vorhanden sind, Konstruktionen werden auf dem iPhone (ab SDK 2.1) angezeigt (Interaktion ist momentan leider noch nicht möglich).  
 +
 
 +
Eine weitere Alternative zu [[Java]] ist [[Flash]], in Frankreich wird damit von einer Lehrer-Organisation das hervorragende [http://tracenpoche.sesamath.net/ Tracenpoche] entwickelt. Leider beschränken sich die Entwickler in der Verbreitung auf Frankreich.
  
 
===Die Programmbibliothek JSXGraph===
 
===Die Programmbibliothek JSXGraph===
JSXGraph richtet sich nicht direkt an "Endanwender", es ist nicht gedacht als interaktives Konstruktionsprogramm wie [http://geonext.de GEONExT] oder [http://www.geogebra.org GeoGebra]. Das bedeutet, es gibt noch keine Programmoberfläche, auf der durch Mausklicks eine Konstruktion erstellt werden kann. JSXGraph ist eher dazu gedacht:
+
 
 +
JSXGraph richtet sich nicht direkt an "Endanwender", es ist nicht gedacht als interaktives Konstruktionsprogramm wie [http://geonext.de GEONExT] oder [[GeoGebra]]. Das bedeutet, es gibt noch keine Programmoberfläche, auf der durch Mausklicks eine Konstruktion erstellt werden kann. JSXGraph ist eher dazu gedacht:
 
* Bereits existierende [http://geonext.de GEONExT] anzuzeigen, siehe [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Displaying_GEONExT_constructions dieses Beispiel],
 
* Bereits existierende [http://geonext.de GEONExT] anzuzeigen, siehe [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Displaying_GEONExT_constructions dieses Beispiel],
* [http://i2geo.net Intergeo]-Konstruktionen anzuzeigen, siehe [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Displaying_Intergeo_constructions dieses Beispiel]. Intergeo ist ein EU-Projekt, in dem sich die führenden europäischen Anbieter von (freier oder kommerzieller) Geometrie-Software zusammmengeschlossen haben, um den gegenseitigen Austausch geometrischer Konstruktionen zu ermöglichen,
+
* [http://i2geo.net Intergeo]-Konstruktionen anzuzeigen, siehe [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Displaying_Intergeo_constructions dieses Beispiel]. Intergeo ist ein EU-Projekt, in dem sich die führenden europäischen Anbieter von (freier oder kommerzieller) [[Geometrie-Software]] zusammmengeschlossen haben, um den gegenseitigen Austausch geometrischer Konstruktionen zu ermöglichen,
 
* Spezial-Anwendungen durch Experten zu programmieren, siehe [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Showcases das JSXGraph-Wiki] mit einer Reihe von Beispielen.
 
* Spezial-Anwendungen durch Experten zu programmieren, siehe [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Showcases das JSXGraph-Wiki] mit einer Reihe von Beispielen.
Aber natürlich steht es jedem frei, JSXGraph mit einer Oberfläche zu versehen. Denn JSXGraph ist Open-Source-Software, die Quellfiles liegen bei Sourceforge und können jederzeit heruntergeladen werden. Wenn Sie Unterstützung brauchen, wenden Sie sich bitte gerne an uns.
+
Aber natürlich steht es jedem frei, JSXGraph mit einer Oberfläche zu versehen. Denn JSXGraph ist [[Open Source|Open-Source-Software]], die Quellfiles liegen bei Sourceforge und können jederzeit heruntergeladen werden. Wenn Sie Unterstützung brauchen, wenden Sie sich bitte gerne an uns.
  
 
===Der Funktionsumfang===
 
===Der Funktionsumfang===
Wie im [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Showcases JSXGraph-Wiki] zu erleben ist, hat JSXGraph mittlerweile einen enormen Funktionsumfang. Hier ist ein Auszug der Möglichketen:
+
Wie im [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Showcases JSXGraph-Wiki] zu erleben ist, hat JSXGraph mittlerweile einen enormen Funktionsumfang. Hier ist ein Auszug der Möglichkeiten:
 
* [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Geometry Geometrie]
 
* [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Geometry Geometrie]
 
* [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Turtle_Graphics Turtle-Grafik]
 
* [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Turtle_Graphics Turtle-Grafik]
Zeile 23: Zeile 71:
  
  
Es gibt JSXGraph-Plugins für MediaWiki, Wordpress und moodle, die eine leichte Integration von JSXGraph in diese System ermöglichen. JSXGraph ist kompatibel zu ASCIIMathML, d.h. es können LaTeX-artige mathematische Symbole verwendet werden, siehe dazu die Diskussion im [http://moodle.org/mod/forum/discuss.php?d=136075 Moodle-Forum] (als Gast anmelden). Der finnische Lehrer Mauno Korpelainen verwaltet eine aktuelle Version von ASCIIMathML, die kompatible zu JavaScript und moodle ist.  
+
Es gibt JSXGraph-Plugins für [[MediaWiki]], [[WordPress]] und [[moodle]], die eine leichte Integration von JSXGraph in diese System ermöglichen. JSXGraph ist kompatibel zu ASCIIMathML, d.h. es können [[LaTeX]]-artige mathematische Symbole verwendet werden, siehe dazu die Diskussion im [http://moodle.org/mod/forum/discuss.php?d=136075 Moodle-Forum] (als Gast anmelden). Der finnische Lehrer Mauno Korpelainen verwaltet eine aktuelle Version von ASCIIMathML, die kompatible zu JavaScript und moodle ist.  
  
 
Es folgen noch ein paar Beispiele als Appetitanreger.
 
Es folgen noch ein paar Beispiele als Appetitanreger.
Zeile 97: Zeile 145:
 
  var board = JXG.JSXGraph.initBoard('box3', {originX: 300, originY: 300, unitX: 50, unitY: 50});
 
  var board = JXG.JSXGraph.initBoard('box3', {originX: 300, originY: 300, unitX: 50, unitY: 50});
 
  board.suspendUpdate();
 
  board.suspendUpdate();
  var S = board.createElement('slider', [[-5,-6],[5,-6],[0,0.95,1]], {name:'S'});
+
  var S = board.createElement('slider', [[-5,-6],[5,-6],[0,0.89,1]], {name:'S'});
  var hue = board.createElement('slider', [[-5,-7],[5,-7],[0,8,36]], {name:'color'});
+
  var hue = board.createElement('slider', [[-5,-7],[5,-7],[0,15,36]], {name:'color'});
 
  var points = new Array();
 
  var points = new Array();
 
  points[0] = board.createElement('point',[5, 5], {name:' '});
 
  points[0] = board.createElement('point',[5, 5], {name:' '});
Zeile 125: Zeile 173:
 
           {style:3, name:"",withLabel:false,visible:false});
 
           {style:3, name:"",withLabel:false,visible:false});
 
   }
 
   }
   col =  function(){return JXG.hsv2rgb(hue.Value()*n,0.7,0.9);};
+
   col =  function(){return JXG.hsv2rgb(hue.Value()*n,0.5,0.9);};
 
   board.createElement('polygon',pt, {fillColor:col});
 
   board.createElement('polygon',pt, {fillColor:col});
 
   if(n>0)
 
   if(n>0)
Zeile 133: Zeile 181:
 
  board.unsuspendUpdate();
 
  board.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
 +
 +
Sourcecode dazu:
 +
<source lang="javascript">
 +
<jsxgraph width="800" height="700" box="box3">
 +
var board = JXG.JSXGraph.initBoard('box3', {originX: 300, originY: 300, unitX: 50, unitY: 50});
 +
board.suspendUpdate();
 +
var S = board.createElement('slider', [[-5,-6],[5,-6],[0,0.89,1]], {name:'S'});
 +
var hue = board.createElement('slider', [[-5,-7],[5,-7],[0,15,36]], {name:'color'});
 +
var points = new Array();
 +
points[0] = board.createElement('point',[5, 5], {name:' '});
 +
points[1] = board.createElement('point',[-5, 5], {name:' '});
 +
points[2] = board.createElement('point',[-5, -5], {name:' '});
 +
points[3] = board.createElement('point',[5, -5], {name:' '});
 +
 +
function quadrangle(pt, n) {
 +
  var col;
 +
  var arr = new Array();
 +
  for(var i = 0; i < 4; i++) {
 +
  arr[i] = board.createElement('point',
 +
        [function(t) {
 +
            return function () {var x = pt[t].X();
 +
                                var x1 = pt[(t+1)%4].X();
 +
                                var s = S.Value();
 +
                                return x+(x1-x)*s;
 +
                        }}(i),
 +
          function(t) {
 +
            return function () {var y = pt[t].Y();
 +
                                var y1 = pt[(t+1)%4].Y();
 +
                                var s = S.Value();
 +
                                return y+(y1-y)*s;
 +
                        }}(i)
 +
          ],
 +
          {style:3, name:"",withLabel:false,visible:false});
 +
  }
 +
  col =  function(){return JXG.hsv2rgb(hue.Value()*n,0.5,0.9);};
 +
  board.createElement('polygon',pt, {fillColor:col});
 +
  if(n>0)
 +
    quadrangle(arr, --n);
 +
}
 +
quadrangle(points,30);
 +
board.unsuspendUpdate();
 +
</jsxgraph>
 +
</source>
 +
 
===Turtle-Grafik===
 
===Turtle-Grafik===
 
====Eingabe-Fenster====
 
====Eingabe-Fenster====
<shtml hash="d4c438dd5a80ff1669948cc555ed1687"><html key="turtle1"><form><textarea id="inputtext" rows=5 cols=35 wrap="off" style="width:600px;">turtle.fd(100);</textarea><br /><input type="button" value="run" onClick="run()"><input type="button" value="clear" onClick="clearturtle()"><input type="button" value="clear log" onClick="clearlog()"></form></shtml>
+
<shtml hash="d4c438dd5a80ff1669948cc555ed1687"><html key="turtle1"><form><textarea id="inputtext" rows=5 cols=35 wrap="off" style="width:600px;">t.fd(100);</textarea><br /><input type="button" value="run" onClick="run()"><input type="button" value="clear" onClick="clearturtle()"><input type="button" value="clear log" onClick="clearlog()"></form></shtml>
  
 
[http://jsxgraph.uni-bayreuth.de/wiki/index.php/List_of_available_commands Hier ist eine Liste der verfügbaren Turtle-Befehle].
 
[http://jsxgraph.uni-bayreuth.de/wiki/index.php/List_of_available_commands Hier ist eine Liste der verfügbaren Turtle-Befehle].
 +
 +
Ein etwas komplizierteres Beispiel ist
 +
<source lang="javascript">
 +
for (var i=0;i<100;i++){
 +
t.forward(i*3);
 +
t.left(71);
 +
}
 +
</source>
 +
 +
Man kann dieses Beispiel mit ''copy and paste'' oben eingeben und man erhält eine neue '''Spur''' der Turtle.
  
 
====Ausgabe-Fenster====
 
====Ausgabe-Fenster====
<jsxgraph box="box4" width=600px" height="600">
+
<jsxgraph box="box4" width=600" height="600">
 
var brd4 = JXG.JSXGraph.initBoard('box4', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
var brd4 = JXG.JSXGraph.initBoard('box4', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
var turtle = brd4.createElement('turtle');
 
var turtle = brd4.createElement('turtle');
 
function run() {
 
function run() {
 
   brd4.suspendUpdate();
 
   brd4.suspendUpdate();
   var code = document.getElementById('inputtext2').value;
+
   var code = document.getElementById('inputtext').value;
 
   if (code=='') { return; }
 
   if (code=='') { return; }
   alert(code);
+
   eval(code.replace(/t\./g,'turtle.'));
  eval(code);
+
  //document.getElementById('logwindow').innerHTML += code+'\n';
+
 
   brd4.unsuspendUpdate();
 
   brd4.unsuspendUpdate();
 
}
 
}
Zeile 161: Zeile 261:
 
</jsxgraph>
 
</jsxgraph>
  
====Log-Fenster====
+
==Update 26.1.2010==
<shtml keyname="turtle2" hash="20d03126129828ccd9d885112a99c80a"><html><pre id="logwindow" class="javascript javascript" style="font-family:monospace;"></pre></html></shtml>
+
Ab Version 0.80 läuft JSXGraph auch auf dem iPhone und Android-basierten multi-touch Geräten. Zur Demonstration siehe die Beispiele [http://www.youtube.com/watch?v=athhV7oBHBE Euler-Gerade] und [http://www.youtube.com/watch?v=FDxQ4Id5Dj0 Bezier-Kurven] auf YouTube.
  
==Verweise==
+
== Linkliste ==
 
* [http://jsxgraph.uni-bayreuth.de/wp/ JSXGraph-Homepage an der Universität Bayreuth]
 
* [http://jsxgraph.uni-bayreuth.de/wp/ JSXGraph-Homepage an der Universität Bayreuth]
* [http://jsxgraph.uni-bayreuth.de/wiki/examples JSXGraph-Beispiele]
+
* [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples JSXGraph-Beispiele]
 
* [http://i2geo.net Intergeo-Homepage]
 
* [http://i2geo.net Intergeo-Homepage]
 
* [http://geonext.de GEONExT]
 
* [http://geonext.de GEONExT]
 +
 +
 +
[[Kategorie:Dynamische Geometriesysteme]]
 +
[[Kategorie:Software für Mathematik]]

Aktuelle Version vom 23. April 2018, 12:49 Uhr

Inhaltsverzeichnis

Dynamische Mathematik mit JSXGraph

Seit Anfang 2008 wird am Lehrstuhl für Mathematik und ihre Didaktik der Universität Bayreuth die Dynamische-Mathematik-Software JSXGraph entwickelt. Der innovativste Unterschied zu anderen Geometrie-/Mathematik-Programmen mit vergleichbarer Funktionalität ist erst auf den zweiten Blick zu sehen: JSXGraph ist weder ein eigenständiges Windows-Programm noch ein Java-Applet, sondern JSXGraph ist vollständig in JavaScript programmiert!

Was ist JavaScript? JavaScript ist eine lange Zeit belächelte, interpretierte Programmiersprache, die schon seit 1996 von praktisch allen Web-Browsern unterstützt wird. Jedoch erst durch das sogenannte Web 2.0 wurde die tatsächliche Leistungsfähigkeit von JavaScript erkannt und die in den Browsern eingebauten Interpreter optimiert. Mittlerweile kommt kaum mehr ein Web-Auftritt ohne JavaScript aus und die Browser versuchen sich in der Ausführungsgeschwindigkeit gegenseitig zu übertrumpfen. Zum Zeichnen im Web-Browser verwendet JSXGraph zwei Vektorgrafik-Formate: Im Internet Explorer wird die Sprache VML verwendet, in allen anderen Browsern die Sprache SVG.

Das Resultat ist, dass zum Betrachten einer JSXGraph-Konstruktion im Web-Browser keinerlei Plugin mehr benötigt wird. Die allseits bekannte Angst, ob im Computerraum wirklich auch das richtige Java-Plugin auf jedem Computer installiert ist, gehört damit der Vergangenheit an. Wenn der Web-Server so konfiguriert ist, dass die Inhalte komprimiert ausgeliefert werden (was in jedem Fall anzuraten ist), benötigt JSXGraph gerade einmal 80 kByte zur Übertragung.

Heutzutage wird Dynamische Mathematik zumeist mit Java-Applets realisiert, z.B. mit dem ausgezeichneten GeoGebra. Die Frage ist jedoch, ob auf den Computern der Zukunft Java-Applets überhaupt noch lauffähig sein werden. Der Trend scheint im Moment zu immer kleineren Computern zu gehen, die nicht mehr ausschließlich mit Intel-kompatible Prozessoren laufen und Windows als Betriebssystem besitzen, man denke nur an das iPhone von Apple und das ChromeOS von Google. Auf diese Situation sollten wir Dynamische-Mathematik-Enthusiasten vorbereitet sein. JSXGraph zeigt, dass Alternativen vorhanden sind, Konstruktionen werden auf dem iPhone (ab SDK 2.1) angezeigt (Interaktion ist momentan leider noch nicht möglich).

Eine weitere Alternative zu Java ist Flash, in Frankreich wird damit von einer Lehrer-Organisation das hervorragende Tracenpoche entwickelt. Leider beschränken sich die Entwickler in der Verbreitung auf Frankreich.

Die Programmbibliothek JSXGraph

JSXGraph richtet sich nicht direkt an "Endanwender", es ist nicht gedacht als interaktives Konstruktionsprogramm wie GEONExT oder GeoGebra. Das bedeutet, es gibt noch keine Programmoberfläche, auf der durch Mausklicks eine Konstruktion erstellt werden kann. JSXGraph ist eher dazu gedacht:

  • Bereits existierende GEONExT anzuzeigen, siehe dieses Beispiel,
  • Intergeo-Konstruktionen anzuzeigen, siehe dieses Beispiel. Intergeo ist ein EU-Projekt, in dem sich die führenden europäischen Anbieter von (freier oder kommerzieller) Geometrie-Software zusammmengeschlossen haben, um den gegenseitigen Austausch geometrischer Konstruktionen zu ermöglichen,
  • Spezial-Anwendungen durch Experten zu programmieren, siehe das JSXGraph-Wiki mit einer Reihe von Beispielen.

Aber natürlich steht es jedem frei, JSXGraph mit einer Oberfläche zu versehen. Denn JSXGraph ist Open-Source-Software, die Quellfiles liegen bei Sourceforge und können jederzeit heruntergeladen werden. Wenn Sie Unterstützung brauchen, wenden Sie sich bitte gerne an uns.

Der Funktionsumfang

Wie im JSXGraph-Wiki zu erleben ist, hat JSXGraph mittlerweile einen enormen Funktionsumfang. Hier ist ein Auszug der Möglichkeiten:


Es gibt JSXGraph-Plugins für MediaWiki, WordPress und moodle, die eine leichte Integration von JSXGraph in diese System ermöglichen. JSXGraph ist kompatibel zu ASCIIMathML, d.h. es können LaTeX-artige mathematische Symbole verwendet werden, siehe dazu die Diskussion im Moodle-Forum (als Gast anmelden). Der finnische Lehrer Mauno Korpelainen verwaltet eine aktuelle Version von ASCIIMathML, die kompatible zu JavaScript und moodle ist.

Es folgen noch ein paar Beispiele als Appetitanreger.

Herzliche Grüße, Alfred Wassermann

Beispiele

Geometrie

Analysis

Sonstiges

Sourcecode dazu:

<jsxgraph width="800" height="700" box="box3"> 			
 var board = JXG.JSXGraph.initBoard('box3', {originX: 300, originY: 300, unitX: 50, unitY: 50});
 board.suspendUpdate();
 var S = board.createElement('slider', [[-5,-6],[5,-6],[0,0.89,1]], {name:'S'});
 var hue = board.createElement('slider', [[-5,-7],[5,-7],[0,15,36]], {name:'color'});
 var points = new Array();
 points[0] = board.createElement('point',[5, 5], {name:' '});	
 points[1] = board.createElement('point',[-5, 5], {name:' '});	
 points[2] = board.createElement('point',[-5, -5], {name:' '});	
 points[3] = board.createElement('point',[5, -5], {name:' '});	
 
 function quadrangle(pt, n) {
  var col;
  var arr = new Array();
  for(var i = 0; i < 4; i++) {
   arr[i] = board.createElement('point', 
         [function(t) {
            return function () {var x = pt[t].X(); 
                                var x1 = pt[(t+1)%4].X(); 
                                var s = S.Value();
                                return x+(x1-x)*s;
                         }}(i), 
          function(t) {
            return function () {var y = pt[t].Y(); 
                                var y1 = pt[(t+1)%4].Y(); 
                                var s = S.Value();
                                return y+(y1-y)*s;
                         }}(i)
          ], 
          {style:3, name:"",withLabel:false,visible:false});
  }
  col =  function(){return JXG.hsv2rgb(hue.Value()*n,0.5,0.9);};
  board.createElement('polygon',pt, {fillColor:col});
  if(n>0)
    quadrangle(arr, --n);
 }
 quadrangle(points,30);
 board.unsuspendUpdate();
</jsxgraph>

Turtle-Grafik

Eingabe-Fenster

<shtml hash="d4c438dd5a80ff1669948cc555ed1687"><html key="turtle1"><form><textarea id="inputtext" rows=5 cols=35 wrap="off" style="width:600px;">t.fd(100);</textarea>
<input type="button" value="run" onClick="run()"><input type="button" value="clear" onClick="clearturtle()"><input type="button" value="clear log" onClick="clearlog()"></form></shtml>

Hier ist eine Liste der verfügbaren Turtle-Befehle.

Ein etwas komplizierteres Beispiel ist

for (var i=0;i<100;i++){
 t.forward(i*3);
 t.left(71);
}

Man kann dieses Beispiel mit copy and paste oben eingeben und man erhält eine neue Spur der Turtle.

Ausgabe-Fenster

Update 26.1.2010

Ab Version 0.80 läuft JSXGraph auch auf dem iPhone und Android-basierten multi-touch Geräten. Zur Demonstration siehe die Beispiele Euler-Gerade und Bezier-Kurven auf YouTube.

Linkliste