Comments:參考:JavaScript

来自GeoGebra Manual
跳转至: 导航搜索

GGB 檔中使用 JavaScript

物件的 OnClick 事件

如果在物件的「程式」頁面中要使用 JavaScript 來控制 GGB 的話,可以使用 ggbApplet 這個關鍵字,然後用下面介紹的各種 JavaScript 指令。

範例: 如果我們在一個物件的 OnClick 事件中輸入以下的程式碼,則當此物件被滑鼠按到時,會自動產生一個數列。

var a = ggbApplet; a.evalCommand('n = 3'); a.evalCommand('s = Sequence[k^2, k, 1, n]');

備註: 在 GeoGebra 內部使用 JavaScript 宣告 ggbApplet 的時候,要使用:

var a = ggbApplet; 不能使用: var a = document.ggbApplet; 否則會產生「document 物件不存在」的錯誤!

網頁中使用 JavaScript

範例: 下面的 HTML 網頁碼會在網頁中產生一個「按鈕」,按下此鈕時,繪圖區會回到初始狀態。

<input type="button" value="重設" onclick="document.applets[0].reset();">

範例: 下面的 HTML 網頁碼會產生兩個「按鈕」,第一個可以隱藏 A 點,第二個可以顯示 A 點。

<input type="button" value="隱藏 A 點" onclick="document.applets[0].setVisible('A', false);"> <input type="button" value="顯示 A 點" onclick="document.applets[0].setVisible('A', true);">

範例: 下面的 HTML 網頁碼會產生一個「按鈕」,按下此鈕時,會畫出 AB 兩點,與通過此兩點的直線。

<applet name="ggbApplet" ... > </applet> ...... <script type="text/javascript"> function drawLineAB() { var applet = document.ggbApplet; applet.evalCommand("A = (1,1)"); applet.evalCommand("B = (3,2)"); applet.evalCommand("s = Line[A, B]"); } </script> ...... <input type="button" value="Do construction" onclick="drawLineAB();">

Note 提示: 請打開下面網頁的原始碼,你就可以看到如過透過 JavaScript 來控制 GGB 的實際例子。
Note 提示: 下面的網頁用來示範「事件處理」的概念。當我們利用作圖工具產生新物件時,網頁中所設定的「新增物件處理器」會檢查你的作圖是否已經完成,然後給你適當的回應。
Note 提示: 下面是一個利用 JavaScript 產生互動效果的例子。網頁開啟後,會隨機畫一條直線,你必須填入正確的「斜率」,如果回答正確,它會再隨機畫另一條直線讓你回答它的斜率。

通用指令

Script24x24.png evalCommand ( 命令字串 )


回傳:若執行成功則傳回 true,若失敗則傳回 false
範例:{{{4}}}
說明:此指令會執行「命令字串」中所指定的 GGB 指令,此與直接在「命令列」中下該指令有相同的效果。從 3.2 版起,我們可以在「命令字串」中加入特殊的換行字串「\n」,這樣一來,我們就可以同時下許多個指令。

Script24x24.png setUndoPoint ( )


回傳:無。
範例:{{{4}}}
說明:此指令可用於設定由 evalCommand() 所產生的動作的回復點。

設定物件屬性

函數 版本 說明
void deleteObject(String objName) 2.7 Deletes the object with the given name.
void setValue(String objName, double value) 3.2 Sets the double value of the object with the given name. Note: if the specified object is boolean, use a value of 1 to set it to true and any other value to set it to false. For any other object type, nothing is done.
void setCoords(String objName, double x, double y) 3.0 Sets the coordinates of the object with the given name. Note: if the specified object is not a point or a vector, nothing is done.
void setColor(物件名, 紅, 綠, 藍) 2.7 設定物件的顏色,紅綠藍 (RGB) 的顏色值為 0 ~ 255
例如:document.ggbApplet.setColor("lineAB", 255, 0, 0)
void setVisible(String objName, boolean visible) 2.7 Shows or hides the object with the given name in the graphics window.
void setLabelVisible(String objName, boolean visible) 3.0 Shows or hides the label of the object with the given name in the graphics window.
void setLabelStyle(String objName, int style) 3.0 Sets the label style of the object with the given name in the graphics window. Possible label styles are NAME = 0, NAME_VALUE = 1, VALUE = 2 and (from GeoGebra 3.2) CAPTION = 3
void setFixed(String objName, boolean flag) 3.0 Sets the fixed state of the object with the given name. Note: fixed objects cannot be changed.
void setTrace(String objName, boolean flag) 3.0 Turns the trace of the object with the given name on or off.
boolean renameObject(String oldObjName, String newObjName) 3.2 Renames oldObjName to newObjName. Returns whether the rename was successful
void setLayer(String objName, int layer) 3.2 Sets the layer of the object
void setLayerVisible(int layer, boolean visible) 3.2 Shows or hides the all objects in the given layer
void setLineStyle(物件名, 樣式編號) 3.2 設定線條樣式:0 - 實線,1 - 長虛線,2 - 短虛線,3 - 點虛線,4 - 長點虛線。
void setLineThickness(物件名, 厚度) 3.2 設定物件(線、圓等)的厚度,值從 1 ~ 13
void setPointStyle(String objName, int style) 3.2 Sets the style of points (-1 default, 0 filled circle, 1 circle, 2 cross, 3 plus, 4 filled diamond, 5 unfilled diamond, 6 triangle (north), 7 triangle (south), 8 triangle (east), 9 triangle (west))
void setPointSize(String objName, int size) 3.2 Sets the size of a point (from 1 to 9)
void setFilling(String objName, double filling) 3.2 Sets the filling of an object (from 0 to 1)
String getPNGBase64(double exportScale, boolean transparent, double DPI) 4.0 Returns Graphics View 1 as a base64-encoded String
eg var str = ggbApplet.getPNGBase64(1, true, 72);
boolean writePNGtoFile(String filename, double exportScale, boolean transparent, double DPI) 4.0 Exports Graphics View 1 to a .PNG file (signed applets only)
eg var success = ggbApplet.writePNGtoFile("c:\\test.png", 1, false, 300);
boolean isIndependent(String objName) 4.0 checks if objName is independent
boolean isMoveable(String objName) 4.0 checks if objName is is moveable
String getBase64() 4.0 Gets the current construction as a base64-encoded .ggb file
void setBase64(String) 4.0 Sets the current construction from a base64-encoded .ggb file

設定動態效果

函數 版本 說明
setAnimating 3.2 格式:setAnimating( 物件名, 啟動動畫? )
備註: 設定物件要不要啟動動畫效果。
範例: setAnimating("A", true)
注意 注意: 光使用此函數並不能使物件產生動畫效果,必須搭配 startAnimation() 才行!
setAnimationSpeed 3.2 格式:setAnimationSpeed(物件名, 速度)
備註: 設定物件的動畫速度。
startAnimation 3.2 格式:startAnimation()
備註: 正式啟動動畫功能。注意:只有用過 setAnimating() 設定過的物件才會動喔!
void stopAnimation() 3.2 Stops animation for all objects with the animating flag set, see setAnimating()
boolean isAnimationRunning() 3.2 Returns whether automatic animation is currently running.

取得物件屬性

Script24x24.png getXcoord ( 物件名稱 )


回傳:物件的 x 座標。若物件不是點或向量,則傳回 0。
範例:{{{4}}}

Script24x24.png getYcoord ( 物件名稱 )


回傳:物件的 y 座標。若物件不是點或向量,則傳回 0。
範例:{{{4}}}

Script24x24.png getValue ( 物件名稱 )


回傳:物件的數值、長度、面積等。若物件為「真假值」,則 true 傳回 1,false 傳回 0。
範例:{{{4}}}

Method Signature Since Description
String getColor(String objName) 2.7 Returns the color of the object with the given name as a hex string, e.g. "#FF0000" for red. Note that the hex string always starts with # and contains no lower case letters.
boolean getVisible(String objName) 3.2 Returns true or false depending on whether the object is visible in the Graphics View. Returns false if the object does not exist.
boolean getVisible(String objName, int view) 4.2 Returns true or false depending on whether the object is visible in Graphics View 'view' (1 or 2). Returns false if the object does not exist.
String getValueString(String objName) 2.7 Returns the value of the object with the given name as a string.
String getDefinitionString(String objName) 2.7 Returns the definition of the object with the given name as a string.
String getCommandString(String objName) 2.7 Returns the command of the object with the given name as a string.
String getObjectType(String objName) 2.7 Returns the type of the given object as a string (like "point", "line", "circle", etc.).
boolean exists(String objName) 2.7 Returns whether an object with the given name exists in the construction.
boolean isDefined(String objName) 2.7 Returns whether the given object's value is valid at the moment.
String [] getAllObjectNames()
Deprecated since 3.0
2.7 Returns an array with all object names in the construction. Note: using arrays in JavaScript causes problems with some browsers. Use getObjectNumber() and getObjectName() instead.
int getObjectNumber() 3.0 Returns the number of objects in the construction.
String getObjectName(int i) 3.0 Returns the name of the n-th object of the construction.
String getLayer(String objName) 3.2 Returns the layer of the object.
int getLineStyle(String objName) 3.2 Gets the line style for the object (0 to 4)
int getLineThickness(String objName) 3.2 Gets the thickness of the line (1 to 13)
int getPointStyle(String objName) 3.2 Gets the style of points (-1 default, 0 filled circle, 1 circle, 2 cross, 3 plus, 4 filled diamond, 5 unfilled diamond, 6 triangle (north), 7 triangle (south), 8 triangle (east), 9 triangle (west))
int getPointSize(String objName) 3.2 Gets the size of a point (from 1 to 9)
double getFilling(String objName) 3.2 Gets the filling of an object (from 0 to 1)

繪圖區指令

函數 版本 說明
void setMode( int 工具編號 ) 2.7 設定繪圖區要使用的工具
請參閱:工具編號applet 參數中的「showToolBar」、「customToolBar」參數
void openFile(String strURL) 2.7 Opens a construction from a  file (given as absolute or relative URL string)
void reset() 2.7 Reloads the initial construction (given in filename parameter) of this applet.
void refreshViews() 2.7 Refreshs all views. Note: this clears all traces in the graphics window.
void setOnTheFlyPointCreationActive(boolean flag)
3.2 Turns on the fly creation of points in graphics view on (true) or off (false). Note: this is useful if you don't want tools to have the side effect of creating points. For example, when this flag is set to false, the tool "line through two points" will not create points on the fly when you click on the background of the graphics view.
void hideCursorWhenDragging(boolean flag)
3.2 Hides (true) or shows (false) the mouse cursor (pointer) when dragging an object to change the construction.
void setRepaintingActive(boolean flag)
2.7 Turns the repainting of this applet on (true) or off (false). Note: use this method for efficient repainting when you invoke several methods.
void setErrorDialogsActive(boolean flag) 3.0 Turns showing of error dialogs on (true) or off (false). Note: this is especially useful together with evalCommand().
void setCoordSystem(double xmin, double xmax, double ymin, double ymax) 3.0 Sets the Cartesian coordinate system of the graphics window.
void setAxesVisible(boolean xAxis, boolean yAxis) 3.0 Shows or hides the x- and y-axis of the coordinate system in the graphics window.
void setGridVisible(boolean flag) 3.0 Shows or hides the coordinate grid in the graphics window.

由 Applet 下達 JavaScript 指令

下表的指令讓我們可以從 Applet 中的物件所產生的「事件」,下達一般的 JavaScript 指令。 當使用這些指令時,請記得一定要在<applet>標籤的最後面加入 MAYSCRIPT 這個屬性才行。例如:

  • <applet name="ggbApplet" code="geogebra.GeoGebraApplet" codebase="." archive="geogebra.jar" width="500" height="250" MAYSCRIPT>

反過來說,如果我們只是要使用 document.ggbApplet 的物件方法去操控 Applet 中的物件時,這個 MAYSCRIPT 屬性就不需要設定了。

For example, these methods can be used to:

函數 版本 說明
void registerAddListener(String JSFunctionName) 3.0 Registers a JavaScript function as an add listener for the applet's construction. Whenever a new object is created in the GeoGebraApplet's construction, the JavaScript function JSFunctionName is called using the name of the newly created object as its single argument.

Example: First, register a listening JavaScript function:

ggbApplet.registerAddListener("myAddListenerFunction");

When an object "A" is created, the GeoGebra Applet will call the Javascript function

myAddListenerFunction("A");
void unregisterAddListener(String objName) 3.0 Removes a previously registered add listener, see registerAddListener()
void registerRemoveListener(String JSFunctionName) 3.0 Registers a JavaScript function as a remove listener for the applet's construction. Whenever an object is deleted from the GeoGebraApplet's construction, the JavaScript function JSFunctionName is called using the name of the deleted object as its single argument. Note: when a construction is cleared, remove is not called for every single object, see registerClearListener().

Example: First, register a listening JavaScript function:

ggbApplet.registerRemoveListener("myRemoveListenerFunction");

When the object "A" is deleted, the GeoGebra Applet will call the Javascript function

myRemoveListenerFunction("A");
void unregisterRemoveListener(String objName) 3.0 Removes a previously registered remove listener, see registerRemoveListener()
void registerUpdateListener(String JSFunctionName) 3.0 Registers a JavaScript function as a update listener for the applet's construction. Whenever any object is updated in the GeoGebraApplet's construction, the JavaScript function JSFunctionNameis called using the name of the updated object as its single argument. Note: when you only want to listen for the updates of a single object use registerObjectUpdateListener() instead.

Example: First, register a listening JavaScript function:

ggbApplet.registerUpdateListener("myUpdateListenerFunction");

When the object "A" is updated, the GeoGebra Applet will call the Javascript function

myUpdateListenerFunction("A");
void unregisterUpdateListener(String objName) 3.0 Removes a previously registered update listener, see registerUpdateListener()
void registerObjectUpdateListener(物件名, 函數名) 3.0 設定當某物件的屬性有所變更時的處理程序。例如:如果設定
  • document.ggbApplet.registerObjectUpdateListener("A", "updateCoords")

則當物件 A 有所變更時,便會執行 updateCoords("A") 這個程序。

void unregisterObjectUpdateListener(String objName) 3.0 Removes a previously registered object update listener of the object with the given name, see registerObjectUpdateListener()
void registerRenameListener(String JSFunctionName) 3.0 Registers a JavaScript function as a rename listener for the applet's construction. Whenever an object is renamed in the GeoGebraApplet's construction, the JavaScript function JSFunctionName is called using the old name and the new name of the renamed object as its two arguments.

Example: First, register a listening JavaScript function:

ggbApplet.registerRenameListener("myRenameListenerFunction");

When an object "A" is renamed to "B", the GeoGebra Applet will call the Javascript function

myRenameListenerFunction("A", "B");
void unregisterRenameListener(String objName) 3.0 Removes a previously registered rename listener, see registerRenameListener()
void registerClearListener(String JSFunctionName) 3.0 Registers a JavaScript function as a clear listener for the applet's construction. Whenever the construction in the GeoGebraApplet is cleared (i.e. all objects are removed), the JavaScript function JSFunctionName is called using no arguments. Note: all update listeners are unregistered when a construction is cleared. See registerUpdateListener() and registerRemoveListener().

Example: First, register a listening JavaScript function:

ggbApplet.registerClearListener("myClearListenerFunction");

When the construction is cleared (i.e. after reseting a construction or opening a new construction file), the GeoGebra Applet will call the Javascript function

myClearListenerFunction();
void unregisterClearListener(String JSFunctionName) 3.0 Removes a previously registered clear listener, see registerClearListener()

GeoGebra 的 XML 碼

GeoGebra 檔案 (*.ggb, *.ggt) 內部是以 XML 的格式儲存的,利用下列的指令可以讓我們任意更改 GGB 檔內部的物件屬性。因此,如果上面所提到的所有指令都不能符合你的需求的話,這時就可以考慮利用下列的指令,但前提是你必須有點了解 XML 格式才行。

Script24x24.png evalXML ( XML 字串 )


回傳:無
範例:{{{4}}}
說明:解析「XML 字串」,並產生或變更相對應的物件。注意:此指令不會清除已有的物件。

Script24x24.png setXML ( XML 字串 )


回傳:無
範例:{{{4}}}
說明:解析「XML 字串」,並產生產生新的構圖。注意:此指令會清除已有的物件。

Script24x24.png getXML ( )


回傳:整個構圖案本的 XML 字串
範例:{{{4}}}
說明:此指令可用來儲存現有的構圖。

Script24x24.png getXML ( 物件名稱 )


回傳:該物件的 <ELEMENT> 標籤
範例:{{{4}}}

Script24x24.png getAlgorithmXML ( 物件名稱 )


回傳:若為自變物件,則傳回「空字串」。若為應變物件,則傳回其演算法與相關輸出物件之 XML。
範例:{{{4}}}

Miscellaneous

Method Signature Since Description
String evalMathPiper(String string) 3.2 Passes the string to MathPiper and returns the result as a String.

Removed in GeoGebra 4.0 and will replaced with evalGeoGebraCAS() in GeoGebra 4.2

String getIPAddress() 3.2 Returns the IP address of the local computer as a String eg "192.168.0.4"
String getHostname() 3.2 Returns the hostname of the local computer as a String
void debug(String string) 3.2 Prints the string to the Java Console
© 2021 International GeoGebra Institute