JavaScript語言教學中DOM綜合性應用案例的教學設計

詹彬，王敏，黃小童

（湖北文理學院計算機工程學院，襄陽441053）

0 引言

JavaScript程序設計是湖北文理學院計算機科學與技術專業的一門必修課程。文檔對象模型DOM（Docu?ment Object Model）是JavaScript教學中一個重要內容。

在教學過程中發現，如果只是簡單地介紹DOM結點操作的基本語法和某個知識點的簡單案例，學生的工程實踐能力不能得到提高。社會需要新工科人才，教學內容應該以解決實際問題為導向，增強學生綜合利用所學知識解決實際問題的能力[1]。因此，在教學計劃中用4個學時講解DOM綜合應用案例。綜合應用案例的設計對教學效果的提高至關重要。本文以簡易打字游戲為例進行講解，以提高學生分析和解決實際問題的能力。

1 教學目的

在綜合應用案例教學之前，學生已經學習了DOM編程的基本語法以及各個知識點的簡單應用案例。通過綜合性應用案例，使學生能夠學以致用。

模擬金山打字通里面的打字游戲，設計一個簡易打字游戲。簡易打字游戲案例涉及的DOM知識點包括DOM結點的獲取、DOM結點的動態增加和刪除、DOM結點樣式的修改及內容的設置，涵蓋了DOM的大部分操作。

2 教學方法

該打字游戲每隔一秒從游戲窗口最下方隨機產生一個英文字母節點，如果用戶鍵入字母與游戲界面中的字母相同，則刪除該字母節點；否則字母節點上升，當超出游戲界面，則字母節點消失[2-3]。通過演示簡易打字游戲的運行過程，讓學生形象地理解案例的功能。

把案例分為六個單元。第一個單元設置字母節點的樣式及內容。第二個單元實現字母節點的移動及添加。第三個單元能夠根據用戶輸入的字母，刪除字母顯示區域中相應的字母節點。第四個單元完成“開始”按鈕代碼的設計。第五個單元完成“暫停”按鈕代碼的設計。第六個單元完成“停止”按鈕代碼的設計。以上六個單元只是完成了簡易打字游戲的基本功能。最后讓學生對功能進行補充完善。

采用階梯式教學法，為每個單元設計從易到難的問題，幫助學生完成任務[4]。為了降低設計的難度，為每個單元提供關鍵問題解決方法及解題思路，一步一步地引導學生完成設計任務，增強學生的學習信心。

采用講練結合的方式進行教學[5]，講解一個單元后，要求學生完成相應的代碼設計。

3 教學過程

首先演示簡易打字游戲的運行效果，在演示的過程中進行功能介紹。游戲界面分為上下兩部分。上半部分是字母顯示區域。下半部分有三個命令按鈕，分別控制游戲的開始、暫停和結束。由于學時有限，在案例講解前，準備好基本的界面。

單元一：設置字母節點樣式和內容。

提出問題：如何讓字母節點產生圓形背景效果？

解決方法：當div對象的邊界半徑屬性值是寬度及高度的一半時，就產生了一個圓形效果。

然后展示字母結點的樣式代碼：

利用createElement方法產生字母節點，并存儲到對象中，利用setAttribute方法設置樣式屬性為round，產生圓形背景效果。

提出問題：如何給節點添加字母？

解決方法：可以使用Math.random()方法產生隨機數，String.fromCharCode()方法可以根據字符的Unicode編碼轉換成字母。

然后讓學生補充下面的代碼：

當學生完成代碼設計后，讓學生分析下面的3個問題：

（1）字母節點的初始高度為什么設置為500px？

（2）字母顯示區域的overflow屬性為什么設置為hidden？

（3）能否用字母圖像代替字母符號？

通過這樣的提問，增加了教師與學生之間的互動，同時讓學生明白為什么這樣編寫代碼。

單元二：定義移動和添加字母方法。

實現字母移動，首先需要獲取顯示區域的字母節點。即可以使用getElementsByClassName("round")獲取所有字母節點，也可以使用getElementsByTagName("div")獲取所有字母節點。這兩種方法獲取的都是字母節點數組，需要用循環語句依次訪問字母節點。

提出兩個問題：

（1）如何獲得字母節點的位置？

（2）如何改變字母節點的位置？

解決方法：通過top屬性能夠獲取字母節點的位置[6]，減少top的值就實現了節點位置的上升。

上升字母結點的解題思路：依次訪問字母顯示區域的每一個字母節點，如果某個字母節點的高度屬性小于0（小于0表示該結點已經不能在顯示區域顯示），則刪除字母節點；否則修改字母元素的高度，讓字母元素的位置上升。

添加新字母對象的解題思路：利用單元一中的代碼創建一個新的字母節點，利用appendChild方法把新的字母節點添加到字母顯示區域。

要求學生分別用for語句與for-in語句完成詳細設計。通過這種階梯式教學方法，最終讓大部分學生完成了任務，提高了學習信心。

最后增加功能，提高學生自主解決問題的能力。思考如何統計錯誤字母個數。在該單元中被刪除的字母節點個數就是錯誤字母個數。

單元三：用戶通過鍵盤按下某個字母后，刪除字母顯示區域相同的字母節點的方法keyPress。

提出問題：如何獲取用戶按下的字母？

解決方法：鍵盤按下事件中e.key能夠獲取用戶按下的字母。

依次訪問字母顯示區域的每一個字母節點，如果字母節點的innerText屬性值等于按鍵字母，則用rem?oveChild方法刪除字母節點。

完成設計任務后，給出思考題：如何統計正確字母的個數？

在單元三中被刪除的字母節點個數就是正確字母個數。

單元四：“開始”按鈕代碼的設計。

由于每隔一秒產生一個字母，需要定義一個定時器timer1，該定時器每隔1秒執行一次移動和添加字母方法。

單元五：“暫停”按鈕代碼的設計。

利用clearInterval方法停止定時器。

單元六：“結束”按鈕代碼的設計。

停止定時器timer1，同時清空字母顯示區中的所有內容。

提出問題：如何清除顯示區中的字母節點？

解決方法：把顯示區結點的innerHTML屬性設置為空字符串。

完成六個單元的任務后，要求學生進行功能完善。在單元一中設置字母節點背景顏色為隨機顏色，把統計的正確字母個數和錯誤字母個數實時地顯示在界面中，修改字母上升的速度[2-3]。由于已經完成了基本功能，大部分學生能夠根據要求，對游戲界面及功能進行改進。

4 教學特點總結

采用提問的方式與學生進行交流，增加了教師與學生之間的互動，提高了學生分析和解決問題的能力。為了降低設計的難度，每個單元提供了關鍵問題的解決方法及解題思路，增強學生學習的信心。為了提高學生的設計能力，給出了思考題，要求學生補充完善綜合應用案例的功能。

5 結語

實踐證明，這種教學設計提高了學生利用DOM分析和解決實際問題的能力，增強了學生的學習信心，為綜合性應用案例的教學設計提供了借鑒。