《客戶端腳本語言》教學(xué)案例

教材分析

本節(jié)課內(nèi)容取材于教育科學(xué)出版社《網(wǎng)絡(luò)技術(shù)應(yīng)用（選修）》第五章第二節(jié)《理解動態(tài)HTML》的第一部分。本節(jié)課主要介紹構(gòu)成動態(tài)HTML的三大核心技術(shù)之一：客戶端腳本語言（JavaScript），掌握其基本結(jié)構(gòu)，能夠根據(jù)制作的實際需要調(diào)用JavaScript文件，實現(xiàn)動態(tài)效果。教師可根據(jù)學(xué)生實際情況，有所側(cè)重地選擇講解，并引導(dǎo)學(xué)生有效運用代碼。對代碼具體語句只需“觀其大概”，不必深究。學(xué)生恰當(dāng)?shù)剡x擇和應(yīng)用這些技術(shù)，不僅可以使網(wǎng)站充滿生機和活力，還能讓學(xué)生加深理解和掌握前面所學(xué)的網(wǎng)頁制作知識，提高學(xué)生的網(wǎng)站設(shè)計和動手實踐能力。

學(xué)情分析

本課教學(xué)對象為江蘇省太湖高級中學(xué)高二年級學(xué)生。通過兩個多月的網(wǎng)頁制作學(xué)習(xí)，學(xué)生已經(jīng)比較扎實地掌握了網(wǎng)頁制作基礎(chǔ)知識和操作技能，并具備了設(shè)計制作簡單個人網(wǎng)站的能力。隨著制作經(jīng)驗的積累和對HTML語言的逐步理解，學(xué)生不再僅僅滿足于簡單的靜態(tài)網(wǎng)頁，更希望能制作出人性化的、互動性更強的網(wǎng)頁。

教學(xué)目標(biāo)

知識與技能目標(biāo)：①了解客戶端腳本語言的基本知識。②掌握JavaScript的基本結(jié)構(gòu)及其調(diào)用方法。③能夠用JavaScript優(yōu)化自己的網(wǎng)站。

過程與方法目標(biāo)：先讓學(xué)生通過自主探究實踐獲得感性認識，再經(jīng)過和教師一起梳理知識獲得理性認識，最后由學(xué)生再次實踐，提高其操作能力。

情感態(tài)度與價值觀目標(biāo)：①培養(yǎng)學(xué)生在研究中學(xué)習(xí)，在學(xué)習(xí)中探索的意識。②樹立使用網(wǎng)絡(luò)資源的正確認識，培養(yǎng)網(wǎng)頁道德。

教學(xué)重點、難點

重點：①掌握代碼的基本結(jié)構(gòu)，有效運用現(xiàn)有代碼。②讀懂部分代碼含義，并能按要求修改代碼，使網(wǎng)頁產(chǎn)生預(yù)期的動態(tài)效果。

難點：能根據(jù)需求選擇合適的代碼調(diào)用方式，并修改代碼“為我所用”。

整體思路

本課內(nèi)容形象生動，富有趣味性，因此在講解時我力求突破以往純語言的講授，而采用范例教學(xué)的方法，提供了一些動態(tài)效果代碼，目的是讓學(xué)生更容易理解并接受一些新的概念和思想。事實上互聯(lián)網(wǎng)上有很多JavaScript的源代碼，對大多數(shù)人來說，只要掌握了使用方法，就能給自己的網(wǎng)頁添加各種動態(tài)效果。在做教學(xué)設(shè)計時，為了控制課堂節(jié)奏，引導(dǎo)學(xué)生學(xué)習(xí)，我制作了一個教學(xué)網(wǎng)站和一個練習(xí)網(wǎng)站，并選取了少量JavaScript特效代碼，防止學(xué)生過度好奇，把注意力全放在看有趣的動態(tài)效果上。在教學(xué)中，我首先展示一個精美的網(wǎng)站，主頁上的動態(tài)效果激發(fā)學(xué)生的學(xué)習(xí)興趣，然后讓學(xué)生打開練習(xí)網(wǎng)站，自主探究JavaScript的基本結(jié)構(gòu)和調(diào)用方式。在經(jīng)歷了實踐體驗后幫助學(xué)生梳理相關(guān)理論知識，提升認知度，接著通過兩個挑戰(zhàn)任務(wù)鞏固和提高JavaScript的調(diào)用技巧，在操作中發(fā)現(xiàn)問題、分析問題、解決問題，感受動態(tài)技術(shù)應(yīng)用的樂趣，提高邏輯思維能力和實踐操作能力，增強自主學(xué)習(xí)探究的積極性。最后總結(jié)本課重點，傳遞“正確處理技術(shù)與人的關(guān)系”這一信息，并讓學(xué)有余力的學(xué)生挑戰(zhàn)拓展任務(wù)，進一步探索客戶端腳本語言的奧秘。

教學(xué)過程

1.激趣導(dǎo)入，引出主題

教師展示具有動態(tài)效果的網(wǎng)頁，供學(xué)生欣賞。

教師提出問題：通過網(wǎng)頁從外到內(nèi)欣賞完無錫大劇院這座精巧而又別致的建筑，同學(xué)們有沒有注意到主頁和另外兩個網(wǎng)頁有什么不同？學(xué)生欣賞、思考、回答。這些動態(tài)效果好像是普通網(wǎng)頁上的“調(diào)味品”，使網(wǎng)頁變得生動、有趣起來，那么，它是怎么制作出來的呢？我們一起來揭開其中的奧秘吧。

設(shè)計意圖：教師通過欣賞具有多個動態(tài)效果的網(wǎng)頁，激發(fā)學(xué)生探究其奧秘的渴望，引起學(xué)生的學(xué)習(xí)興趣。

2.小試身手，初識代碼

師：請同學(xué)們觀看教學(xué)網(wǎng)站“小試身手”欄目。如果你能完成這些任務(wù)，就能找到對話框的奧秘。

教師指導(dǎo)學(xué)生打開stu站點，三個任務(wù)邊講邊請學(xué)生回答。

①基本任務(wù)：瀏覽stu網(wǎng)站的主頁文件“index.htm”， 在html視圖下試著找出其中實現(xiàn)“對話框”動態(tài)效果的代碼。

教師引導(dǎo)：可以根據(jù)什么找出這段代碼？

學(xué)生反饋：根據(jù)對話框上的文字。

②進階任務(wù)：分析“對話框”是怎么嵌入到網(wǎng)頁中去的，用了什么標(biāo)記，分析代碼語法結(jié)構(gòu)。

教師引導(dǎo)：這段代碼在區(qū)還是區(qū)？

學(xué)生反饋：在區(qū)。

教師引導(dǎo)：開始標(biāo)記和結(jié)束標(biāo)記分別是什么？

學(xué)生學(xué)習(xí)JavaScript標(biāo)記使用的一般形式。

③挑戰(zhàn)任務(wù)：給站點中另一個網(wǎng)頁outside.htm也添加一個“對話框”，并讓它說出你想說的話。

學(xué)生分析在網(wǎng)頁中嵌入JavaScript的方法，根據(jù)自己的實際需求略做修改，添加到outside網(wǎng)頁中。

設(shè)計意圖：該任務(wù)是本節(jié)課的必做題，目的在于使學(xué)生從特殊中獲得一般，再從一般遷移到其他的“個別”上來。教師通過引導(dǎo)、啟發(fā)，使學(xué)生積極觀察分析，從而得出結(jié)論，增強學(xué)生解決問題的意識與能力。將任務(wù)分層是為了體現(xiàn)出任務(wù)從易到難的梯度，降低學(xué)生跨越臺階時的難度，從而更容易獲得成功，將一開始激發(fā)出來的興趣保持下去。

3.知識梳理，夯實基礎(chǔ)

師：剛才網(wǎng)頁上呈現(xiàn)的動態(tài)效果都是運用JavaScript客戶端腳本語言編寫的小程序，是一種動態(tài)html技術(shù)。那么什么是動態(tài)html，什么是客戶端腳本語言呢？我們來梳理一下這些專業(yè)知識。

教師介紹動態(tài)html和客戶端腳本語言。

師：目前我們還不用掌握代碼的編寫技術(shù)，因為互聯(lián)網(wǎng)上有很多免費的JavaScript源代碼，我們可以將它“移花接木”，運用到自己的網(wǎng)頁上。而如果硬生生地把“花”直接綁到“樹木”上，估計成活率不高。所以我們需要掌握一些使用技巧。嵌入HTML文檔中的JavaScript代碼有兩種常見形式。

①內(nèi)部腳本。

師：剛才同學(xué)們已經(jīng)嘗試使用這種內(nèi)部腳本的方法，給網(wǎng)頁添加了一個對話框。

語法形式為：

②外部腳本。

師：先將JavaScript語句獨立存儲成以.js為擴展名的文件（怎么把代碼保存成js文件？用什么軟件？），再利用（在使用這句調(diào)用語句是應(yīng)注意什么？把*改成js文件主名。）

以上一個任務(wù)中的對話框腳本代碼為例，學(xué)生演示外部腳本的使用方法，教師指導(dǎo)。

學(xué)生新建文本文件，將對話框腳本代碼完整地復(fù)制進來，保存（新建文本文件.js）。到網(wǎng)頁中調(diào)用。預(yù)覽時發(fā)現(xiàn)出錯。找出出錯原因，去掉頭尾語句，再次保存、預(yù)覽、成功。

結(jié)論：js文件中只需保存腳本具體代碼，不能有頭尾標(biāo)記語句。

設(shè)計意圖：經(jīng)過簡單的實踐再來了解理論知識，能提高學(xué)生的接受度，符合認知規(guī)律。在本環(huán)節(jié)中，教師首先說明剛才網(wǎng)頁上呈現(xiàn)的動態(tài)效果就是由JavaScript客戶端腳本語言實現(xiàn)的，是一種動態(tài)html技術(shù)。然后介紹動態(tài)html和客戶端腳本語言的相關(guān)知識，以及在HTML文檔中嵌入JavaScript代碼的兩種常見形式，并指出內(nèi)部腳本的形式已經(jīng)在上一環(huán)節(jié)中實踐成功了。最后請學(xué)生來演示外部腳本的使用方法。通過學(xué)生的演示來發(fā)現(xiàn)操作過程中可能會出現(xiàn)的問題，分析問題，從而解決問題，幫助學(xué)生進一步理解外部腳本的使用方法。

4.接受挑戰(zhàn)，實踐體驗

師：同學(xué)們了解了內(nèi)部腳本和外部腳本這兩種使用方式，那么什么情況下用內(nèi)部腳本合適，什么情況下用外部腳本更方便呢？請同學(xué)們帶著問題進入下面的挑戰(zhàn)環(huán)節(jié)，希望同學(xué)們能在完成挑戰(zhàn)任務(wù)的過程中總結(jié)出外部腳本和內(nèi)部腳本在使用上各自的優(yōu)點，敢接受挑戰(zhàn)嗎？

挑戰(zhàn)題一：給主頁文件“index.htm”添加一個動態(tài)效果（任選）。

教師提供三種動態(tài)效果代碼供選擇，難度有高有低，學(xué)生量力而行，任選其中一個。同桌的兩個同學(xué)可以相互討論，相互幫助。

挑戰(zhàn)題二：給stu站點中的每一個頁面都添加一個圖片跟隨鼠標(biāo)的效果。

操作前先思考一下，使用哪一種調(diào)用腳本的方式更方便。

學(xué)生按要求逐個完成挑戰(zhàn)任務(wù)，展示操作結(jié)果。

有學(xué)生鼠標(biāo)上跟著的圖片沒顯示，而是出現(xiàn)一個“×”，請同學(xué)一起幫忙找找原因。

結(jié)論：代碼中圖片的名稱沒有正確修改。

設(shè)疑：能不能很快換一張圖片呢？為什么？

結(jié)論：可以實現(xiàn)。因為外部腳本共享代碼。學(xué)生演示。

設(shè)計意圖：第一個挑戰(zhàn)題是對內(nèi)部腳本的鞏固練習(xí)，考慮到學(xué)生的個體差異，分了三種難度，可以使不同層次的學(xué)生都獲得成功的體驗。第二個挑戰(zhàn)題是對外部腳本的操作練習(xí)，在操作過程中師生共同分析出現(xiàn)的問題，培養(yǎng)耐心、細心的學(xué)習(xí)態(tài)度。通過設(shè)疑，引起學(xué)生思考，讓學(xué)生在操作過程中總結(jié)出不同調(diào)用方法的適用情況。

5.自我檢測，拓展提升

（1）自我檢測

請學(xué)生完成自我檢測中的五個選擇題，鞏固客戶端腳本語言基本知識。

（2）課堂小結(jié)

師生一起分析總結(jié)內(nèi)部腳本和外部腳本在語法上的區(qū)別和各自的優(yōu)點。內(nèi)部腳本的語句內(nèi)容直接編寫在