由於從事數學教學工作，原本對網頁程式語言就有興趣，前端三大元素HTML、CSS、Javascript也略有涉獵、這幾年積極投入網頁設計的學習，更是發現了現代瀏覽器的威力和前端工具的方便。因此這次鐵人賽的處女作就獻給和數學相關的Javascrpt函式庫，希望藉由這個作品，能啟數學老師們學習頁設計的興趣、希望能替台灣未來的數學教育，提供更多、更好的網路互動教學資源；數學老師們都具有非常好的邏輯感，對於程式設計一定能很快駕輕就熟，只要熟悉各種工具的使用，必能有很好的發揮。當然非數學專業的人，也希望能藉這個作品，了解數學教學媒體設計的邏輯，如果有興趣，也能投入數學教學網頁的製作。

這次主要介紹的函式庫有三款：

1. jsxgraph.js
2. mathjax.js
3. math.js

關於JSXGraph

jsxgraph.js是一套提供動態幾何、函數繪圖、統計圖表及資料視覺化的數學函式庫，它可以在不同的瀏覽器上直接執行，不需要再透過其它的介面。提供函數繪圖、統計圖表和資料視覺化的函式庫非常多，像Chart.js、D3.js、EChart.js…等都提供了功能強大的圖表、資料視覺化和函式繪圖的功能；而JSXGraph特別值得一提的是動態幾何函式庫，這個函式庫以國中的幾何作圖為核心，可以利用平行、 垂直等觀念建構幾何物件的子物件，更可以畫出自由點子物件的軌跡，在數學教學上，提供很好的觀察。

另一款的動態幾何教學軟體為Geogebra，Geogebra是一款免費的教學軟體，功能和JSXGraph類似，本身具備良好的界面，可以透過滑鼠輕易繪製幾何物件，非常直觀，也可以經由介面，對幾何物件的屬性進行設定，對於初學動態幾何教學的老師，非常方便。而其社團也非常龐大，資源非常的充分。

目前台灣大部分的數學老師都是使用Geogebra進行動態數學的教學，本人也使用了許多年。

但是美中不足的是，當我們想設計較複雜的教案，需要設定較多的幾何物件，還有幾何物件陣列混合邏輯判定，Geogebra所提供的編輯框使用非常不方便；或是套用較進階的函式API時，API的說明並不充分。在網路上搜尋了許多的時間，發現了這個jsxgraph.js函式庫，可以彌補Geogebra的缺點。

JSXGraph與Geogebra的優缺點比較

關於MathJax

Html5並沒有提供完整的數學符號，因此專業的科學與數學內容不容易在網頁上呈現 ，為了讓網頁能呈現美觀的數學符號，美國數學學會（American Mathematics Society, AMS）和工業與應用數學學會（Society of Industrial and Applied Mathematics, SIAM）共同合資的Mathjax Consortium支持了MathJax.js的開發計劃，以促進科學與數學的網頁內容，目前財務贊助單位為NumFOCUS Foundation。

MathJax.js目前可在不同的瀏覽器上以模組化的方法，支援Html檔撰寫Latex和MathML語法，並得到美觀的科學與數學內容展現。

關於math.js

math.js除了援援大數字(big numbers)、複數(complex numbers)、分數(fraction numbers)和矩陣(matrices)…等資料型態，以彌補javascript在Number方面資料型態的不足；另外也提供了運算式解析器(expression parser)，可以方便開發命令列應用程式。例如從命令列輸入1.2/(3.3+1.7)，可以輸出結果0.24，甚至更複雜的運算式，我們也將會在適當時機介紹它。

關於開發環境

我將會介紹線上程式編輯環境Replit與Vscode兩個開發環境給大家使用。

Replit是一款線上的程式編輯環境，內建多種程式模板，可以直接看到執行結果，對於寫程式的新手，省去許多設定的工作，但程式完成後，也能快速分享，使用上非常的方便！Replit許多的編輯指令，和Vscode相當類似，可以和Vscode進行少痛接軌，令外，許多的線上程式編輯環境，只能使用系統給予的檔名，而Replit允許自訂檔名，也是這次推薦使用的主要原因。

Vscode是一款由微軟開發且跨平台的免費原始碼編輯器，功能強大，對一些程式語言，具有智慧編輯(IntelliSense)的功能，加上許多的輔助外掛，是目前使用人數最多的編輯器。

關於本系列文章

因為大部分的數學教師並不熟悉網頁程式的撰寫，因此本列系文章除了介紹jsxgraph.js、mathjax.js和math.js三個套件外，也會花不少的篇幅說明網頁前端的三大支架：Html、Css和Javascript的基本語法。尤其是Css的部分，雖然網路上有相當多設計精美UI的Css碼，但如果要能納為己用，仍要做適當的修改，因此必須對Css有相當充分的理解。

本系列文章除了希望能幫助數學教師或是未來想成為數學教育工作者的人製作互動式的數學教學網頁，也希望能對已經熟悉網頁前端工具的工程師，了解數學網頁教學資源設計的原理，期待更多人投入這個領域，為台灣的數學教育盡份力量。

目前各單元內容篇幅規劃如下：

1. JSXGraph入門(約8~10篇) 介紹繪圖區域的基本設定和點、線、圓等基本幾何物件，並利用這些基本物件，配合平行與垂直等古典幾何作圖方式，還有平移、旋轉和縮放的平面轉換，建構新的物件並進而得到其軌跡。也會介紹JSXGraph本身提供的核取方塊(checkbox)、滑桿(slider)、按扭(button)、輸入框(input)及標簽(label)等元件。
2. MathJax入門與設定(約2~4篇) Mathjax基本與進階設定說明，並介紹簡單的Latex語法及線上Latex編輯器(online Latex editor)，建議先透過圖形化的數學方程式編輯器製作數學符號，再過渡到使用指令形式輸入，加快Latex語法的學習。
3. math.js簡易操作(約1~2篇) 運算式解析器的使用。
4. HTML與DOM操作入門(約2~3篇) Html(Hypertext Markup Language)的基本概念說明，介紹常用一些標籤及輸入元件(radio button、checkbox、input…等)，標籤內不同屬性(Attribute)的意義與功能及dataset的應用。
5. CSS快速入門(約4~6篇) Css的基本概念，包含Css選擇器，inline、block和inline-block的差異，flex排版功能、position定位，box model…等觀念。
6. Javascript常用語法與Dom操作(約2~4篇) 除了Javascript資料型態與函式的說明，著重在Dom(Document Object Model)的操作與事件監聽處理的應用。
7. 範例製作(3~5個) 將利用上述所學習的技術，實作數學媒體範例，讓讀者親身體驗這些技術，實現從做中學的概念，從這些例子，也更能印證不同的技術的使用方式，更能立即看到呈現的結果。

文章並不會依上述順序呈現，而是以範例為核心，先完全使用JSXGraph的幾何物件設定和其操作介面進行範例設計，而後再利用Html的輸入元件搭配Css，建構更美觀和方便的操作介面，反覆疊加需要的JSXGraph、Dom兩方的元件和Css功能，讓學習的技術不斷向外擴展。

歡迎指教

因為本人從事數學教育工作，並非專業的網頁設計從業人員，因此若有歧誤，還請見諒，也歡迎指正；另外數學界在動態幾何媒體設計有專精和建樹的老師也是大有人在，我在這邊只是班門弄斧。我更願意成為這兩個領域的橋梁，借這個比賽和iT邦幫忙的園地，形成更多的交流。也希望大家不吝在下方留言，無論是您個人的見解或疑問，都非常歡迎，我也會盡可能的回覆。

每日小結

數學是令許多人害怕的科目，如果能夠有好的教學媒體幫助學習者，會令台灣的數學教育更上層樓。然而，每個教學媒體的製作，都耗費基層數學教師非常多的心神，更遑論每天都還有許多的課程和進度要面對。而台灣重視升學的氛圍中，更是少有數學教師可以撥空來學習更新的網頁知識與技術，因此忝為一個數學教育工作者，願盡一己之力，灌溉這一塊小園地。