Javascript程序設(shè)計(jì) 教案- 單元設(shè)計(jì) -張勁波 第6-14章 DOM模型-實(shí)訓(xùn)

PAGEPAGE2課程單元設(shè)計(jì)課程名稱：JavaScript程序設(shè)計(jì)適用專業(yè)：所屬院系：信息工程學(xué)院編制人：制定時(shí)間：年至年第一學(xué)期

《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第6章DOM模型授課班級：20軟件1,2，3課時(shí)：4上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、正確理解DOM樹概念及DOM樹中各個(gè)節(jié)點(diǎn)關(guān)系2、能動(dòng)態(tài)查看和修改頁面中節(jié)點(diǎn)元素1、DOM及DOM技術(shù)簡介2、頁面中的DOM模型框架能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)1、訪問指定節(jié)點(diǎn)的方法2、查看/修改屬性節(jié)點(diǎn)二、案例案例1：DOM技術(shù)應(yīng)用簡單示例案例2：DOM基本方法綜合示例案例2：DOM常用方法綜合示例案例2：網(wǎng)頁中的DOM模型框架示例參考資料Javascript技術(shù)教程二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動(dòng)教學(xué)資源及工具時(shí)間分配導(dǎo)入復(fù)習(xí)浮動(dòng)定位及position定位知識課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授通過動(dòng)態(tài)修改圖片元素的實(shí)例來加深DOM樹的理解及掌握訪問指定節(jié)點(diǎn)的方法和查看/修改屬性節(jié)點(diǎn)的方法課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦80分鐘操練實(shí)現(xiàn)點(diǎn)擊按鈕修改圖片節(jié)點(diǎn)對象及獲取圖片的安裝路徑等屬性值演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦65分鐘總結(jié)DOM樹中節(jié)點(diǎn)間關(guān)系及動(dòng)態(tài)修改或獲取節(jié)點(diǎn)屬性值講解集體參與教材15分鐘作業(yè)布置編寫一個(gè)Web頁面：每0.2秒在瀏覽器窗口的狀態(tài)欄中滾動(dòng)顯示一次當(dāng)前瀏覽器的信息。在輸出內(nèi)容前加一個(gè)輸出次數(shù)的計(jì)數(shù)。這樣每次的顯示效果有所不同。提示：瀏覽器信息可由window對象的子對象navigator獲得，用indow.status設(shè)置狀態(tài)欄的內(nèi)容。講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果完成本講所有示例操作教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第6章DOM模型授課班級：20軟件1,2，3課時(shí)：4上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、正確理解DOM樹不同節(jié)點(diǎn)及其屬性2、使用HTMLDOM設(shè)置頁面風(fēng)格樣式1、DOM模型中的節(jié)點(diǎn)2、非標(biāo)準(zhǔn)的innerHTML屬性3、DOM與CSS能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)1、DOM模型中三種節(jié)點(diǎn)及其屬性2、HTMLDOM設(shè)置頁面風(fēng)格樣式二、案例案例1：元素節(jié)點(diǎn)示例案例2：本文節(jié)點(diǎn)示例案例3：屬性節(jié)點(diǎn)示例案例4：DOM與CSS改變樣式示例參考資料Javascript技術(shù)教程二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動(dòng)教學(xué)資源及工具時(shí)間分配導(dǎo)入復(fù)習(xí)DOM樹結(jié)構(gòu)課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.通過實(shí)例講解元素節(jié)點(diǎn)、文本節(jié)點(diǎn)及屬性節(jié)點(diǎn)的屬性值2.通過HTMLDOM動(dòng)態(tài)修改HTML元素的CSS風(fēng)格樣式課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦80分鐘操練練習(xí)：使用HTMLDOM對象的屬性訪問演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦65分鐘總結(jié)三種節(jié)點(diǎn)不同屬性值HTMLDOM與CSS關(guān)系講解集體參與教材15分鐘作業(yè)布置使用HTMLDOM修改字體顏色，類型及字體大小講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果完成本講所有示例操作教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第7章事件機(jī)制授課班級：20軟件1,2，3課時(shí)：2上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、理解事件的驅(qū)動(dòng)和響應(yīng)2、能捕捉鼠標(biāo)操作事件1、事件機(jī)制簡介2、鼠標(biāo)操作事件能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)JavaScript事件運(yùn)用二、案例案例1：鼠標(biāo)事件案例2：鍵盤事件參考資料Javascript技術(shù)教程二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動(dòng)教學(xué)資源及工具時(shí)間分配導(dǎo)入復(fù)習(xí)DOM節(jié)點(diǎn)的屬性課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.事件的產(chǎn)生2.事件的響應(yīng)3.7種鼠標(biāo)事件課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦20分鐘操練練習(xí)捕捉各種鼠標(biāo)操作事件演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦40分鐘總結(jié)事件機(jī)制一定是包含事件的產(chǎn)生和事件的響應(yīng)7種鼠標(biāo)事件發(fā)生及響應(yīng)機(jī)制講解集體參與教材10分鐘作業(yè)布置屏蔽鼠標(biāo)右鍵講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果學(xué)會(huì)鼠標(biāo)及鍵盤事件的運(yùn)用教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第7章事件機(jī)制授課班級：20軟件1,2，3課時(shí)：2上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)理解并正確響應(yīng)鍵盤操作事件1、鍵盤操作事件2、其他事件能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)JavaScript事件運(yùn)用二、案例案例1：設(shè)置各級菜單的CSS樣式風(fēng)格案例2：為菜單添加伸縮效果參考資料Javascript技術(shù)教程二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動(dòng)教學(xué)資源及工具時(shí)間分配導(dǎo)入復(fù)習(xí)事件機(jī)制及鼠標(biāo)操作事件課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.三種基本的鍵盤操作事件2.頁面加載，表單提交等其他事件課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦20分鐘操練可伸縮的兩級菜單建立HTML框架演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦40分鐘總結(jié)事件機(jī)制一定是包含事件的產(chǎn)生和事件的響應(yīng)3種鍵盤操作事件發(fā)生及一些其他事件的理解和捕捉講解集體參與教材10分鐘作業(yè)布置可伸縮兩級菜單的風(fēng)格樣式設(shè)置及菜單添加伸縮效果講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果完成菜單伸縮效果的設(shè)置教學(xué)后記

《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第8章表格與表單授課班級：20軟件1,2，3課時(shí)：4上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)css控制表格樣式和DOM動(dòng)態(tài)控制表格1、學(xué)會(huì)css控制表格樣式2、DOM動(dòng)態(tài)控制表格能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)表格樣式的控制二、案例案例1：CSS及DOM控制表格參考資料Javascript技術(shù)教程二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動(dòng)教學(xué)資源及工具時(shí)間分配導(dǎo)入Css樣式的使用回顧課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.表格的相關(guān)標(biāo)記2.表格顏色的設(shè)置3.表格的邊框課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦60分鐘操練動(dòng)態(tài)的添加表格及修改里面的內(nèi)容，刪除表格等演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦90分鐘總結(jié)CSS控制表格樣式，DOM動(dòng)態(tài)控制表格，實(shí)現(xiàn)表格的增刪改操作。講解集體參與教材10分鐘作業(yè)布置CSS及DOM控制表格講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果完成表格樣式的控制，學(xué)會(huì)DOM動(dòng)態(tài)控制表格教學(xué)后記

《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第8章表格與表單授課班級：20軟件1,2，3課時(shí)：4上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)控制表單以及表單元素的使用1、控制表單2、表單元素的靈活運(yùn)用3.文本框的設(shè)置能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)控制表單以及表單元素的使用二、案例案例1：自動(dòng)提示的文本框參考資料Javascript技術(shù)教程二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動(dòng)教學(xué)資源及工具時(shí)間分配導(dǎo)入表單的制作課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授表單的相關(guān)標(biāo)記及表單元素表單元素的訪問文本框的設(shè)置按鈕等設(shè)置課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦20分鐘操練控制表單及文本框、單選按鈕、復(fù)選按鈕和下拉菜單的設(shè)置演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦30分鐘總結(jié)控制表單及其表單元素的熟練使用講解集體參與教材10分鐘作業(yè)布置自動(dòng)提示的文本框講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果學(xué)會(huì)表單的制作及控制表單教學(xué)后記

《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第9章JavaScript設(shè)計(jì)與優(yōu)化授課班級：20軟件1,2，3課時(shí)：4上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)調(diào)試與優(yōu)化javascript1．常見錯(cuò)誤和異常2.錯(cuò)誤處理3.使用調(diào)試器4.JavaScript優(yōu)化能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)Javascript的調(diào)試與優(yōu)化二、案例案例1：等號與賦值混淆案例2：括號不匹配案例3：訪問不存在的變量參考資料Javascript技術(shù)教程二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動(dòng)教學(xué)資源及工具時(shí)間分配導(dǎo)入除數(shù)為0的情況，典型的計(jì)算問題課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1．常見錯(cuò)誤和異常2.錯(cuò)誤處理3.使用調(diào)試器4.JavaScript優(yōu)化課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦60分鐘操練錯(cuò)誤與異常的查找和處理錯(cuò)誤、異常的調(diào)試與優(yōu)化演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦90分鐘總結(jié)JavaScript的調(diào)試與優(yōu)化，通過熟悉的try……catch等方法。講解集體參與教材10分鐘作業(yè)布置自動(dòng)提示的文本框講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果學(xué)會(huì)JavaScript的優(yōu)化。教學(xué)后記

《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第10章 Ajax基礎(chǔ)授課班級：20軟件1,2，3課時(shí)：4上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1．了解和掌握Ajax的主要特點(diǎn)。2．熟悉Ajax的程序開發(fā)環(huán)境，掌握Ajax語言的上機(jī)步驟。3．熟練掌握源程序的建立、編輯、編譯、保存和運(yùn)行的基本方法。4．會(huì)編寫簡單的Ajax應(yīng)用程序。1．認(rèn)識CSS，熟悉CSS的語法結(jié)構(gòu)。2．掌握CSS語言中3種基本引用方式、樣式表定義及使用。3．掌握不同引用方式下，樣式表的引用規(guī)則。4．熟練掌握內(nèi)聯(lián)式、嵌入式和鏈接式。能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)1．熟悉Visualstudio的啟動(dòng)和退出以及Visualstudio的編輯、編譯、連接和運(yùn)行命令。2．了解Visualstudio開發(fā)環(huán)境的配置。二、案例案例1：認(rèn)識Visualstudio的菜單欄、工具欄，工具箱，解決資源方案管理器，代碼編輯窗口。參考資料Javascript技術(shù)教程二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動(dòng)教學(xué)資源及工具時(shí)間分配導(dǎo)入Visualstudio開發(fā)環(huán)境與配置課件、視頻聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1．熟悉各種樣式表定義形式。2．各種屬性的使用功能。3．各類引用樣式表規(guī)則。課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦60分鐘操練熟練使用Visualstudio2008演示實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦90分鐘總結(jié)Javascript概況講解集體參與教材10分鐘作業(yè)布置設(shè)計(jì)一個(gè)內(nèi)聯(lián)式樣式表引用方式的例題SetStyle.html設(shè)計(jì)一個(gè)嵌入式樣式表的使用例題SetStyle_in.html講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果教學(xué)后記

《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第11章 jQuery基礎(chǔ)授課班級：20軟件1,2，3課時(shí)：6上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1.jQuery概述2.jQuery的“$”3.jQuery與CSS34.使用選擇器5.管理選擇結(jié)果6.采用jQuery鏈選擇器 功能函數(shù)前綴解決window.onload函數(shù)的沖突創(chuàng)建DOM元素自定義添加“$”解決“$”的沖突能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)XMLHttpRequest的使用二、案例案例1：設(shè)計(jì)一個(gè)用戶注冊實(shí)例例參考資料Javascript技術(shù)教程二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動(dòng)教學(xué)資源及工具時(shí)間分配導(dǎo)入CSS基礎(chǔ)課件、視頻聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授jQuery概述jQuery的“$”jQuery與CSS3使用選擇器管理選擇結(jié)果采用jQuery鏈課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦110分鐘操練屬性選擇器$(“a[href=10-9.html]”).addClass(“myClass”);包含選擇器$(“l(fā)i:has(a)”)位置選擇器$(“p:first-child”)過濾選擇器$(“input[name=cbx]:checked”)實(shí)現(xiàn)反向過濾$(“input:not(:radio)”)演示實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦130分鐘總結(jié)主流的JavaScript框架YUIDojomooToolsPrototypejQueryMore..講解集體參與教材10分鐘作業(yè)布置1.jQuery下載當(dāng)前版本1.7.2官方網(wǎng)站下載：/2.jQuery安裝在頁面頭部head中，添加js<scripttype="text/javascript"src="./script/jquery.js"></script>3MyEclipse中可以實(shí)現(xiàn)jQuery的智能提示講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果完成jQuery的下載教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第12章 jQuery控制頁面授課班級：20軟件1,2，3課時(shí)：4上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)通過標(biāo)記屬性，元素的樣式，頁面的元素，jQuery處理事件完成jQuery控制標(biāo)記屬性元素樣式頁面的元素JQuery處理事件能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)比window.onload更快一些的載入二、案例案例1：制作雙色表格案例2：巧妙的偽裝鏈接參考資料Javascript技術(shù)教程二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動(dòng)教學(xué)資源及工具時(shí)間分配導(dǎo)入JQuery基礎(chǔ)課件、視頻聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.標(biāo)記屬性2.元素樣式3.頁面的元素4.JQuery處理事件課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦20分鐘操練使用編輯器EditPlus制作雙色表格演示實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦130分鐘總結(jié)標(biāo)記屬性元素樣式頁面的元素JQuery處理事件講解集體參與教材10分鐘作業(yè)布置安全郵件列表講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果教學(xué)后記

《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第13章 用jQuery制作動(dòng)畫與特效授課班級：20軟件1,2，3課時(shí)：4上課地點(diǎn)：實(shí)訓(xùn)5教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1.顯示與隱藏元素2.元素顯隱的漸入漸出效果3.幻燈片效果顯示與隱藏元素元