JavaScript語言教學(xué)中DOM綜合性應(yīng)用案例的教學(xué)設(shè)計

詹彬，王敏，黃小童

（湖北文理學(xué)院計算機(jī)工程學(xué)院，襄陽441053）

0 引言

JavaScript程序設(shè)計是湖北文理學(xué)院計算機(jī)科學(xué)與技術(shù)專業(yè)的一門必修課程。文檔對象模型DOM（Docu?ment Object Model）是JavaScript教學(xué)中一個重要內(nèi)容。

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

1 教學(xué)目的

在綜合應(yīng)用案例教學(xué)之前，學(xué)生已經(jīng)學(xué)習(xí)了DOM編程的基本語法以及各個知識點的簡單應(yīng)用案例。通過綜合性應(yīng)用案例，使學(xué)生能夠?qū)W以致用。

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

2 教學(xué)方法

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

把案例分為六個單元。第一個單元設(shè)置字母節(jié)點的樣式及內(nèi)容。第二個單元實現(xiàn)字母節(jié)點的移動及添加。第三個單元能夠根據(jù)用戶輸入的字母，刪除字母顯示區(qū)域中相應(yīng)的字母節(jié)點。第四個單元完成“開始”按鈕代碼的設(shè)計。第五個單元完成“暫?！卑粹o代碼的設(shè)計。第六個單元完成“停止”按鈕代碼的設(shè)計。以上六個單元只是完成了簡易打字游戲的基本功能。最后讓學(xué)生對功能進(jìn)行補(bǔ)充完善。

采用階梯式教學(xué)法，為每個單元設(shè)計從易到難的問題，幫助學(xué)生完成任務(wù)[4]。為了降低設(shè)計的難度，為每個單元提供關(guān)鍵問題解決方法及解題思路，一步一步地引導(dǎo)學(xué)生完成設(shè)計任務(wù)，增強(qiáng)學(xué)生的學(xué)習(xí)信心。

采用講練結(jié)合的方式進(jìn)行教學(xué)[5]，講解一個單元后，要求學(xué)生完成相應(yīng)的代碼設(shè)計。

3 教學(xué)過程

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

單元一：設(shè)置字母節(jié)點樣式和內(nèi)容。

提出問題：如何讓字母節(jié)點產(chǎn)生圓形背景效果？

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

然后展示字母結(jié)點的樣式代碼：

利用createElement方法產(chǎn)生字母節(jié)點，并存儲到對象中，利用setAttribute方法設(shè)置樣式屬性為round，產(chǎn)生圓形背景效果。

提出問題：如何給節(jié)點添加字母？

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

然后讓學(xué)生補(bǔ)充下面的代碼：

當(dāng)學(xué)生完成代碼設(shè)計后，讓學(xué)生分析下面的3個問題：

（1）字母節(jié)點的初始高度為什么設(shè)置為500px？

（2）字母顯示區(qū)域的overflow屬性為什么設(shè)置為hidden？

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

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

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

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

提出兩個問題：

（1）如何獲得字母節(jié)點的位置？

（2）如何改變字母節(jié)點的位置？

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

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

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

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

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

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

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

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

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

完成設(shè)計任務(wù)后，給出思考題：如何統(tǒng)計正確字母的個數(shù)？

在單元三中被刪除的字母節(jié)點個數(shù)就是正確字母個數(shù)。

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

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

單元五：“暫?！卑粹o代碼的設(shè)計。

利用clearInterval方法停止定時器。

單元六：“結(jié)束”按鈕代碼的設(shè)計。

停止定時器timer1，同時清空字母顯示區(qū)中的所有內(nèi)容。

提出問題：如何清除顯示區(qū)中的字母節(jié)點？

解決方法：把顯示區(qū)結(jié)點的innerHTML屬性設(shè)置為空字符串。

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

4 教學(xué)特點總結(jié)

采用提問的方式與學(xué)生進(jìn)行交流，增加了教師與學(xué)生之間的互動，提高了學(xué)生分析和解決問題的能力。為了降低設(shè)計的難度，每個單元提供了關(guān)鍵問題的解決方法及解題思路，增強(qiáng)學(xué)生學(xué)習(xí)的信心。為了提高學(xué)生的設(shè)計能力，給出了思考題，要求學(xué)生補(bǔ)充完善綜合應(yīng)用案例的功能。

5 結(jié)語

實踐證明，這種教學(xué)設(shè)計提高了學(xué)生利用DOM分析和解決實際問題的能力，增強(qiáng)了學(xué)生的學(xué)習(xí)信心，為綜合性應(yīng)用案例的教學(xué)設(shè)計提供了借鑒。