程式語言教學與視覺化工具融入教學之相關研究

對於初學者和教師而言，「學」程式設計和「教」程式設計一直是程式設計 教學上存在的問題(Govender & Grayson, 2008)。根據 Lahtinen、Ala-Mutka 與 Järvinen (2005) 的研究指出，初學者認為學習程式設計很難的主要原因有二：

1. 學習程式設計時需要對抽象概念的知識有正確的理解；

2. 初學者往往缺乏足夠的資源和適性的指導；

因此，造成初學者認為學習程式設計困難的主要原因除了大多為大班制上 課，教師沒辦法注意每一位學習者的學習狀況和符合每一位學習者的學習需求，

再者是因為程式設計的本身學科性質所造成。在程式設計的學習過程中，包含不 容易被程式設計的初學者所察覺的內隱歷程，然而這些內隱歷程卻是學習程式設 計成功的重要關鍵(Kirsner, 1998; Govender & Grayson, 2008)。

研究顯示(Soloway & Spohrer, 1989; Pane & Myers, 1996; Lahtinen, Ala-Mutka,

& Järvinen, 2005)，初學者最容易對抽象資料型態(Abstract data types)、迴圈(Loop structures)、條件式(conditions)、指標(pointers)、遞迴(Recursion)、錯誤處理策略 (Error handling)產生迷思概念。此外，Soloway 與 Spohrer (1989) 指出初學者常 見往往只注意到程式設計的外在架構，且容易忽略架構內所蘊含的意義，或者學 過程式設計，也看得懂程式語言內的語法和語義，卻常常發生無法將所學到的程 式設計知識運用或是寫成一個可以運作的程式。Lahtinen 等人 (2005) 研究中列 出七項程式設計初學者在學習程式設計時感到困難的項目，例如使用程式設計的 發展工具、撰寫網路和電腦、撰寫連結電腦或網路的程式、瞭解程式的架構、學 習程式語言的語法、設計一個程式來解決某特定問題、劃分程序功能和從自己撰 寫的程式中除錯。

Lahtinen 等人 (2005) 認為學習程式語言是困難的，原因有兩個，一個是程 式語言學習需要理解抽象的概念，另一個則是學習者缺乏足夠的資源與苦於無適 合個人化學習的工具或是方式。Bednarik, Moreno, Myller 與 Sutinen (2005) 也提 出學習程式語言是一個困難且複雜的過程，而且需要有適當的教學工具輔助。這 些工具是否能夠幫助學習者學習是一個重要的問題。在過去的研究中顯示程式視 覺化工具提供顯著的成效，特別是針對程式語言初學者的訓練。

Moreno、Myller 與 Bednarik (2005) 認為程式理解，也就是可以了解其他人 所寫的程式的之能力，在程式語言學習領域中是重要且核心的技巧。如同專業開 發人員可以在理解程式的過程中建立的精確的心智模型，程式語言初學者應該藉 由支援與協助完成這項工作。而程式視覺化則是提供給學生與初學者程式執行的 心智模型的多種方式之一。

程式語言初學者通常限制於程式語言表面的知識，他們通常以「逐行」的方 式而不是使用有意義的程式結構來了解程式。初學者的知識傾向於特定情境，若 是要他們充分所應用獲得的知識通常不會成功。初學者或許了解個別敘述式語法 與語意，但是卻不知道如何整合成有效的程式。儘管現今文獻探討多數共同的討 論主題似乎都是以命令式或是物件導向方法為優先。然而不論是採用何種方式，

學習者必須學習基本的程式語言結構，像是迴圈、變數、遞迴與參數傳遞(Soloway

＆ Spohrer, 1989)。Soloway 與 Spohrer (1989) 以及 Pane 與 Myers (1996) 均認 為關於變數初始化、迴圈、判斷式、指標與遞迴等主題都有一些學習上的迷思。

綜合以上各位學者的研究和討論，歸納出程式設計初學者在初學程式設計時 可能會遭遇的程式設計迷思概念和程式學習過程中的困難之處，因此如何選擇適 當的視覺化工具和教學設計以促進學習者的學習成效和學習態度是值得探討與 研究的。此外，上述所提的程式設計教學意義和程式設計初學者的學習問題等要 點，皆是本研究設計程式設計概念教學的考量。因此，本研究針對基本的程式語 言結構，for 迴圈，採用 Java 程式語言，教學活動針對學習上的迷思設計與安排，

讓學習者搭配輔助工具進行程式語言學習。

關於視覺化工具融入程式語言教學之相關研究，分為：(1)視覺化工具的定義 與種類以及視覺化融入教學之相關研究;(2) Jeliot 3 視覺化工具融入教學之相關研 究，兩點來描述。

壹、視覺化工具的定義與種類以及視覺化融入教學之相關研究

這個部分兩個部分來描述：(1)視覺化工具的定義與種類；(2)視覺化融入教學 之相關研究.。

一、視覺化工具的定義與種類

關於視覺化工具的定義與種類，在Myller (2004) 的研究中提到 Price、

Baecker 與 Small (1993) 認為視覺化工具是包含所有使用視覺化功能，圖形、動 畫或是其他科技等，可以幫助或是教導軟體工程(設計與除錯)的程序之工具。視 覺化工具設計是針對人基互動，目的是可以讓學習者更容易理解、學習與更有效 地使用電腦軟體。Myller (2004) 延伸 Price 等人 (1993) 的研究，將視覺化工具 (軟體視覺化)分為兩個次領域：演算法視覺化(algorithm visualization)與程式視覺 化(program visualization)。

演算法(algorithm)是程式中的抽象化概念或是程式的部份，因此演算法視覺 化(或動畫)是以視覺化方式呈現軟體一部分的高階特性(Price et al., 1993)，這類視 覺化的內容通常與任何程式的來源碼(source code)都無關。而程式視覺化是著重程 式的實際內容，像是程式碼與資料，因此程式視覺化必須定義程式圖像化展現的 對應與轉換(Roman & Cox, 1993)。

Java程式語言教學領域中之視覺化工具，研究者將其定義為兩種，第一種是 用來呈現程式之靜態結構，像是 BlueJ；第二種則是用視覺化方式呈現程式執行 時動態之歷程與變化，像是 Jeliot 3。以下分兩種不同工具: BlueJ 與 Jeliot 3 進 行探討。

BlueJ

相較於一般程序式程式語言教學，物件導向程式語言教學更為困難，

其主要原因如下：

1. 所使用開發環境並非物件導向 2. 所使用開發環境過於複雜

3. 所使用開發環境只注重使用者介面(user interface)開發

基於上述原因，BlueJ 應孕而生。BlueJ 用來呈現程式之靜態結構之視覺 化工具，是針對初學者所設計，也提供教學者在教授程式語言物件導向概念 時的一個輔助工具(Kolling, Quig, Patterson & Rosenberg, 2003)。BlueJ 之操作 介面如圖2-3 所示

圖2-3： BlueJ 視覺化工具之操作介面 1

BlueJ 提供一個可以直接呼叫物件方法的機制，如圖 2-4 所示。BlueJ 讓 教學者著重在「物件」觀念的教授，把其他的程式語言觀念像是 GUIs 或是 applets 可以「延後」在適當教學時機再作適當介紹。Bergin (2000) 認為採用 BlueJ 相當於使用一個教學模式叫做”Fill in the Blanks”，因為所有程式碼在龐 大的專案中只是一小部分，學習者必須一開始就習慣閱讀並修改部分的程式 碼。

Kölling 與 Rosenberg (2001) 的研究提出如何使用 BlueJ 進行程式語言 教學，並針對使用BlueJ 在進行物件導向程式語言教學，提出八大指引：

1. 物件觀念優先(Object first)

2. 不要從無到有，要有範例程式碼 3. 程式碼閱讀

4. 使用”龐大”專案，而不是程式碼片段。

5. 不要從主程式開始教學

6. 不要使用"Hello World"的老掉牙範例 7. 呈現程式的結構

8. 教學使用者介面的單元要注意教材設計

圖2-4： BlueJ 視覺化工具之操作介面 2

Kolling、Quig、Patterson 與 Rosenberg (2003) 研究提到在學習物件導 向概念之前，仍必須要克服學習者學習基礎語法的問題；此外，學習物件導 向概念學習，並無助於學習者對條件控制、迴圈、邏輯思考的精進，這仍需 要有其他課程來幫助學習者熟悉這些主題。最後研究指出，學習者從 BlueJ 視覺化工具要轉換到其他程式語言之開發環境，會有潛在適應的問題，通常 需要再安排教學課程。由於 BlueJ 視覺化工具較適用於物件導向之教學單 元，不適用於本研究之教學單元，本研究採用下一小段所介紹之Jeliot 3 視覺 化工具。

Jeliot 3

Pirolli 與 Anderson (1985) 認為當學習者面對學習抽象的程式語言概 念往往無法在腦海中產生具體的影像，這個問題很容易造成學習者的學習障 礙。對學習者而言，在 Java 程式語言的教學過程中，教學者所敘述的程式 邏輯的過程，只能透過講解與教材圖像的進行輔助教學，而學習者僅能靠課 堂上短暫的圖像講解以及學習者的想像能力來理解程式邏輯的運作過程，這 種方式的學習很容易造成學習者在複習時的困難。

Jeliot 3 是一個程式視覺化工具目的在於自動化動畫呈現Java程式 (Kannusmaki, Moreno, Myller & Sutinen, 2004)。 Myller (2004) 提出一些程式 視覺化工具的需求是從教學者的觀點出發，而其它的是從利用程式的使用者 為觀點的需求。 Jeliot 3具備下列幾點特性：

1. 可以達到使用者的學習目標 2. 能夠是一般用途的系統

3. 可以讓使用者輸入資料到演算法或程式。

4. 能夠展現順暢的動畫 5. 擁有網站支援。

6. 需要發佈到其它論壇之中 7. 能夠產生互動

8. 對映到現有的教學和學習資源

Jeliot 3 視覺化工具是使用 Java 程式語言開發，以動畫方式呈現程式運 作，並使用動畫，以流暢地移動圖形物件來視覺化資料結構與程式執行歷程 的一個免費工具。此工具提供自動化動畫顯示功能，也就是說使用者輸入一 般的程式碼，Jeliot 3 會自動產生並播放動畫(Lattu, Tarhio & Meisalo, 2000)。

教學者可以在任何時間停止動畫播放並進行解說。Jeliot 3 視覺化工具目前缺 乏對逐步執行動畫進行倒帶(Rewind)至上一步驟的能力。它也不包含顯示出 程式結構(例如：方法(Method)或變數(Variable)呼叫)允許可以向後跳躍或向 前跳躍進行程式視覺化呈現，目前只有英文版介面，並無多國語言版本。

Jeliot 3 視覺化工具目的是在程式語言導論課程中，幫助程式語言初學者 與電腦科學學生學習。此工具以程式碼產生動畫來呈現Java 物件導向程式的 運作。Jeliot 3 已經支援並可以用動畫呈現多數 Java 程式語言功能，從單純的 指派、方法呼叫到物件記憶體配置(Moreno, Myller, Sutinen & Ben-Ari, 2004)。

Jeliot 3 操作介面如圖 2-5 所示，操作介面之左下角，有編輯(Edit)、編 譯(Compile)、逐步(Step)、播放(Play)、暫停(Pause)與倒帶(Rewind)等功能鍵。

操作介面右下角則是主控台(Console)用來顯示程式執行結果。

操作介面右下角則是主控台(Console)用來顯示程式執行結果。