| Bitte beachten Sie: Diese Version des GeoGebra Wikis steht nur noch als Archiv zur Verfügung und kann nicht mehr verändert werden. Falls Sie Ihre GeoGebra Konstruktionen mit anderen Benutzern teilen wollen, können Sie hierfür unser Projekt GeoGebraTube verwenden. Sie sind auch eingeladen, uns bei der Verbesserung unseres neuen Wiki zu helfen. Falls Sie Fragen oder Vorschläge haben, können Sie uns mit einer E-Mail a webmaster@geogebra.org erreichen. |
JavaScript-Steuerung
Die offizielle Kurzdokumentation zu JavaScript mit GeoGebra ist hier zu finden: geogebra_applet_javascript.html. Im Folgenden sind genauere Erklärungen dazu samt Beispielen zu finden.
Inhaltsverzeichnis |
Beispiel-Lösungen
JavaScript-Lösungen ... eine Sammlung von Code-Schnipseln, mit denen man das Applet von der HTML-Seite aus steuern kann bzw. Informationen herausholen kann.
Erklärung grundlegender Funktionen
Französische Beispielseite
Die Beispielseite wird demnächst übersetzt!
Alle Aktionen werden durch den Druck auf einen Formularknopf (<input type="button" ...) ausgelöst. Der eigentliche Befehl ist innerhalb der Anführungsstriche bei onclick"..." zu finden. Natürlich können die Befehle auch anders eingesetzt werden.
Das sich der Befehl auf das GeoGebra-Applet auswirken soll, wird hier durch applets[0] festgelegt. So wird das erste Applet angesprochen. Mit applets[1] das zweite, usw.
Alternativ kann man dem Applet auch einen Namen geben und statt applets[0] diesen Namen verwenden:
<applet name = "ggbApplet" code="geogebra.GeoGebraApplet" ...
Hier muss also document.ggbApplet ... verwendet werden.
Verstecken und Zeigen eines Objekts
Code:
<input type="button" value="Zeige T1" onClick="document.applets[0].setVisible('T1', true);" >
Erklärung:
setVisible('T1', true) setzt die Sichtbarkeit des Objektes T1 auf wahr (true). Entsprechend funktioniert das Verstecken eines Objektes: man setzt die Sichtbarkeit auf falsch (false).
Ein Objekt einfärben
Code:
<input type="button" value="Färbe A rot" onClick="document.applets[0].setColor('A',255,0,0);">
Erklärung:
Hier wird per Klick der Befehl setColor('A',255,0,0) ausgeführt. Das Objekt A wird umgefärbt. Die Farbe durch drei Werte beschrieben: den Rot-, den Grün- und den Blauanteil. Jeder Farbanteil kann zwischen 0% und 100% variieren - dazu werden Zahlen von 0 bis 255 angegeben.
Hier ist der Rot-Wert 255 und die anderen sind 0, also wird A rot eingefärbt. (0,0,0) ergibt Schwarz und (255,255,255) ergibt Weiß.
Löschen eines Objektes
Code:
<input type="button" value="Lösche A" onClick="document.applets[0].deleteObject('A');">
Erklärung:
Durch deleteObject('A') wird das Objekt A gelöscht. Achtung: Dadurch werden auch alle abhängigen Objekt mitgelöscht.
Eine Konstruktion ausführen
Code für den Knopf:
<input type="button" value="Construire" onClick="myLittelConstruction();">
Erklärung:
Hier wird nicht ein Befehl direkt ausgeführt, sondern eine Funktion myLittelConstruction() aufgerufen, der im Head-Bereich der HTML-Seite fesgelegt oder auch in einer externen JavaScript-Datei abgelegt werden muss. Der Code würde dann etwas so aussehen:
Code für die Funktion:
<script type="text/javascript">
function myLittelConstruction()
{
var applet = document.ggbApplet;
applet.evalCommand("M = (1,1)");
applet.evalCommand("N = (3,2)");
applet.evalCommand("d = Gerade[M, N]");
}
</script>
Erklärung:
Die ersten drei Zeilen dienen der Definition der Funktion.
Um sich Schreibarbeit zu sparen wird durch den Befehl var applet = document.ggbApplet eine Abkürzung für das Applet festgelegt. Man muss statt document.ggbApplet nur noch applet schreiben.
evalCommand ist der Befehl, der der Eingabe in der Eingabezeile entspricht. Die Eingabe muss in Anführungstrichen stehen und natürlich korrekt formuliert sein. Zu beachten ist auch, das die richtige Sprache verwendet wird. Die Sprache des Applets kann übrigens mit dem Applet-Parameter language gesetzt werden (z.B. <param name="language" value="de">, siehe geogebra_applet_param.html).
Winkel ansprechen
Es geht darum, wie man Unicode Zeichen in JavaScript verwenden kann. Ein Winkel hat vielleicht den Namen "α" (griechischer Kleinbuchstabe Alpha). Die Frage ist nun: wie gibt man dieses Sonderzeichen in JavaScript ein?
Die Antwort ist sehr einfach: als Unicode Literal. Zuerst braucht man den vierstelligen Hexadezimal-Unicode für α, dieser ist
03b1
- Diesen bekommt man unter Windows z.B. mit dem Systemprogramm "Zeichentabelle" bzw. "charmap"
Das entsprechende Unicode-Literal lautet dann:
\u03b1
und steht für den Buchstaben α.
Ein Beispiel: mit der JavaScript Methode
setVisible ('\u03b1', false);
blendet man den Winkel α aus. Ein Button, der das macht könnte so definiert werden:
<form>
<input type="button" value="& alpha; ausblenden" onclick="document.applets[0].setVisible ('\u03b1', false);">
</form>
In diesem Beispiel sieht man auch, dass man zur Beschriftung des Buttons die übliche HTML Schreibweise
& alpha;
verwenden muss. Sobald JavaScript ins Spiel kommt, also hier die Methode setVisible(), braucht man das Unicode-Literal.
Vorhandene Methoden
Hier eine Auflistung der verwendbaren Befehle (Hinweis: die offizielle Liste dieser Methoden finden Sie unter geogebra_applet_javascript.html):
Methoden um einzelne Ojekte zu veränden
void deleteObject(String objName)
|
Löscht das Objekt, mit dem angegebenen Namen. |
void setColor(String objName, int red, int green, int blue)
|
Legt die Farbe des, mit dem Namen angegeben, Objektes durch die RGB-Werte fest. |
void setVisible(String objName, boolean visible)
|
Zeigt oder versteckt das angegebene Objekt. |
void evalCommand(String cmdString)
|
Führt den angegeben Text aus, als ob es in GeoGebra's Eingabe-Feld eingegeben worden wäre. Achtung: Nutzen Sie die Methode setLanguage(), um sicher zu sein, das die lokalen Befehle verstanden werden (wie Gerade, Punkt, ...)
|
Methoden, um Informationen über einzelne Objekte zu bekommen
double getXcoord(String objName)
|
Gibt die kartesische X-Koordinate des angegebenen Objektes als Kommazahl aus. Hinweis: Es wird 0 zurückgegeben, wenn das Objekt nicht ein Punkt oder ein Vektor ist, |
double getYcoord(String objName)
|
Gibt die kartesische Y-Koordinate des angegebenen Objektes als Kommazahl aus. Hinweis: Es wird 0 zurückgegeben, wenn das Objekt nicht ein Punkt oder ein Vektor ist, |
double getValue(String objName)
|
Gibt den Wert des angegebenen Objektes (Länge einer Strecke, Fäche eines Vieleckes, usw. ...) als Kommazahl aus. Hinweis: Es wird 0 zurückgegeben, wenn das Objekt keine Wert hat. |
String getValueString(String objName)
|
Liefert den Wert des Objektes aus als Text. |
String getDefinitionString(String objName)
|
Liefert die Definition als Text, mit dem ein Objekt festgelegt wurde.
Returns the definition of the object with the given name as a string. |
String getCommandString(String objName)
|
Liefert den Text-Befehl zu dem angegebenen Objekt. |
Methods to change the whole construction or user interface
void openFile(String strURL)
|
Opens a construction from a file (given as absolute or relative URL string) |
void reset()
|
Reloads the initial construction (given in filename parameter) of this applet. |
void refreshViews()
|
Refreshs all views. Note: this clears all traces in the geometry window. |
void setRepaintingActive(boolean flag)
|
Turns the repainting of this applet on (true) or off (false). Note: use this method for efficient repainting when you invoke several methods (see example 3 above). |
Methods to use GeoGebra's XML format
With these commands you can change everything in a construction (see GeoGebra's XML format).
void evalXML(String xmlString)
|
Evaluates the given XML string and changes the current construction. Note: the construction is NOT cleared before evaluating the XML string. |
void setXML(String xmlString)
|
Evaluates the given XML string and changes the current construction. Note: the construction is cleared before evaluating the XML string. This method could be used to load constructions. |
String getXML()
|
Returns the current construction in GeoGebra's XML format. This method could be used to save constructions. |
siehe auch
- Animationen mit JavaScript - eine laufende Uhr durch Zeitsteuerung über JavaScript
- Steuerung von GeoGebra mit JavaScript - eine html-Beispielseiteein Beispiel zum gleichzeitigen Einblenden von Text und GeoGebra-Objekten (Simulation eines Tafelanschriebs) mit JavaScript zeigen die dynamischen Arbeitsblätter Grundkonstruktionen
- JavaScript-Lösungen
- Turtlegrafik - Turtlegrafik mit Hilfe von geogebra und JavaScript