《客戶端腳本語言》教學案例

教材分析

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

學情分析

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

教學目標

知識與技能目標：①了解客戶端腳本語言的基本知識。②掌握JavaScript的基本結構及其調用方法。③能夠用JavaScript優化自己的網站。

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

情感態度與價值觀目標：①培養學生在研究中學習，在學習中探索的意識。②樹立使用網絡資源的正確認識，培養網頁道德。

教學重點、難點

重點：①掌握代碼的基本結構，有效運用現有代碼。②讀懂部分代碼含義，并能按要求修改代碼，使網頁產生預期的動態效果。

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

整體思路

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

教學過程

1.激趣導入，引出主題

教師展示具有動態效果的網頁，供學生欣賞。

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

設計意圖：教師通過欣賞具有多個動態效果的網頁，激發學生探究其奧秘的渴望，引起學生的學習興趣。

2.小試身手，初識代碼

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

教師指導學生打開stu站點，三個任務邊講邊請學生回答。

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

教師引導：可以根據什么找出這段代碼？

學生反饋：根據對話框上的文字。

②進階任務：分析“對話框”是怎么嵌入到網頁中去的，用了什么標記，分析代碼語法結構。

教師引導：這段代碼在區還是區？

學生反饋：在區。

教師引導：開始標記和結束標記分別是什么？

學生學習JavaScript標記使用的一般形式。

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

學生分析在網頁中嵌入JavaScript的方法，根據自己的實際需求略做修改，添加到outside網頁中。

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

3.知識梳理，夯實基礎

師：剛才網頁上呈現的動態效果都是運用JavaScript客戶端腳本語言編寫的小程序，是一種動態html技術。那么什么是動態html，什么是客戶端腳本語言呢？我們來梳理一下這些專業知識。

教師介紹動態html和客戶端腳本語言。

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

①內部腳本。

師：剛才同學們已經嘗試使用這種內部腳本的方法，給網頁添加了一個對話框。

語法形式為：

②外部腳本。

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

以上一個任務中的對話框腳本代碼為例，學生演示外部腳本的使用方法，教師指導。

學生新建文本文件，將對話框腳本代碼完整地復制進來，保存（新建文本文件.js）。到網頁中調用。預覽時發現出錯。找出出錯原因，去掉頭尾語句，再次保存、預覽、成功。

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

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

4.接受挑戰，實踐體驗

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

挑戰題一：給主頁文件“index.htm”添加一個動態效果（任選）。

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

挑戰題二：給stu站點中的每一個頁面都添加一個圖片跟隨鼠標的效果。

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

學生按要求逐個完成挑戰任務，展示操作結果。

有學生鼠標上跟著的圖片沒顯示，而是出現一個“×”，請同學一起幫忙找找原因。

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

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

結論：可以實現。因為外部腳本共享代碼。學生演示。

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

5.自我檢測，拓展提升

（1）自我檢測

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

（2）課堂小結

師生一起分析總結內部腳本和外部腳本在語法上的區別和各自的優點。內部腳本的語句內容直接編寫在