JavaScript程序設(shè)計(jì)教案

JavaScript程序設(shè)計(jì)教案課程名稱：JavaScript程序設(shè)計(jì)適用專業(yè)：計(jì)算機(jī)應(yīng)用所屬院系：信息工程學(xué)院編制人：制定時間：

《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第1章 JavaScript概述授課班級：16計(jì)應(yīng)課時：4上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1.理解Javascript的起源2.能安裝代碼編輯器EditPlus或者DreamViewer軟件3.掌握編輯器的基本用法4.掌握編輯器EditPlus或者DreamViewer軟件的基本用法1.Javascript的起源2.瀏覽器之爭3.JavaScript的編輯環(huán)境4.JavaScript的實(shí)現(xiàn)與小體驗(yàn)?zāi)芰τ?xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)編寫第一個JavaScript網(wǎng)頁二、案例案例1：定時打開窗口案例2：日期選擇器參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入Javascript的起源課件、視頻聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.瀏覽器之間的沖突2.標(biāo)準(zhǔn)的制定3.Javascript的實(shí)現(xiàn)ECMAscript、DOM、BOM）4.編輯器EditPlus或DreamViewer的安裝5編輯器EditPlus或DreamViewer的基本功能6編輯實(shí)現(xiàn)第一個js程序“HelloWorld”課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦40分鐘操練器EditPlus或DreamViewer的安裝使用EditPlus實(shí)現(xiàn)第一個js程序“Helloworld”演示實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦70分鐘總結(jié)vascript概況實(shí)現(xiàn)js程序的流程講解集體參與教材20分鐘作業(yè)布置給網(wǎng)站首頁加上自動問候的功能。網(wǎng)頁將可以在不同的時段向訪問者顯示不同的問候語，例如在上午8:00—9:00就向用戶顯示“早上好”，如果在下午則顯示“下午好”。我們將定義的時間段對應(yīng)得問候語列在下面：0:00—06:00你不會是熬通宵吧，別太辛苦哦！06:00—08:00早上好08:00—11:00上午好11:00—13:00午飯吃過了嗎13:00—17:00 下午好17:00—24:00晚上好2.完成個人網(wǎng)站中“歡迎光臨”標(biāo)語的顯示講解集體參與網(wǎng)絡(luò)資源多媒體電腦20分鐘學(xué)習(xí)成果完成第一個JavaScript網(wǎng)頁編寫2、完成定時打開窗口操作3、完成日期選擇器操作教學(xué)后記

《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第2章JavaScript基礎(chǔ)授課班級：16計(jì)應(yīng)課時：2上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、變量的聲明及賦值1、語法2、變量能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)1、JavaScript語法學(xué)習(xí)2、變量命名規(guī)則二、案例案例1：變量定義實(shí)例參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入Javascript的實(shí)現(xiàn)課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.Javascript基本語法要求2.變量的聲明及賦值課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦20分鐘操練引入一個小例子實(shí)現(xiàn)對字符串、數(shù)值等變量的賦值操作演示講解任務(wù)驅(qū)動實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦30分鐘總結(jié)變量聲明及賦值的方法講解集體參與教材10分鐘作業(yè)布置找出javascript變量聲明及賦值方法與Java語言中的區(qū)別講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果學(xué)會JavaScript基本語法懂得變量的聲明及賦值教學(xué)后記

《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第2章JavaScript基礎(chǔ)授課班級：16計(jì)應(yīng)課時：2上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、能正確理解各種數(shù)據(jù)類型并使用相應(yīng)的數(shù)據(jù)類型2、對關(guān)鍵字和保留字能正確理解并使用1、數(shù)據(jù)類型2、關(guān)鍵字和保留字能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)正確使用各種數(shù)據(jù)類型二、案例案例1：連接字符串案例2：字符串字母大小寫傳換案例3：獲取字符串長度示例案例4：數(shù)值運(yùn)算示例案例5：布爾型轉(zhuǎn)換字符串參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入復(fù)習(xí)變量的聲明及賦值課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.6種主要數(shù)據(jù)類型介紹，并通過小例子加深學(xué)生對數(shù)據(jù)類型的理解2.關(guān)鍵字和保留字的注意事項(xiàng)課件演示模擬演練任務(wù)驅(qū)動聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦20分鐘操練引入一個小例子分別使用6種重要的數(shù)據(jù)類型演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦30分鐘總結(jié)6種數(shù)據(jù)類型數(shù)據(jù)使用的注意事項(xiàng)講解集體參與教材10分鐘作業(yè)布置設(shè)置個人網(wǎng)站中對不同數(shù)據(jù)的使用實(shí)現(xiàn)不同顯示項(xiàng)目講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果1、能夠正確使用各種數(shù)據(jù)類型2、正確完成所有案例教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第2章JavaScript基礎(chǔ)授課班級：16計(jì)應(yīng)課時：2上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、能正確理解并使用條件邏輯控制語句1、條件語句能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)學(xué)會各種條件語句來進(jìn)行流程上的判斷二、案例案例1：if語句示例案例2：switch語句示例參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入復(fù)習(xí)變量的數(shù)據(jù)類型課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授根據(jù)時間顯示不同問候語的例子講解：1.ifelse條件邏輯控制語句2.switchcase邏輯控制語句課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦20分鐘操練用一個根據(jù)不同條件執(zhí)行不同操作的實(shí)例讓同學(xué)加深對這2種條件語句的理解演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦30分鐘總結(jié)Ifelse語句和switchcase的相同和不同點(diǎn)講解集體參與教材10分鐘作業(yè)布置實(shí)現(xiàn)根據(jù)價格高低來判斷是否奢侈品的程序?qū)崿F(xiàn)講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果懂得利用各種條件語句來進(jìn)行流程上的判斷教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第2章JavaScript基礎(chǔ)授課班級：16計(jì)應(yīng)課時：2上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、能正確理解并使用循環(huán)邏輯控制語句1、循環(huán)語句能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)各種循環(huán)語句的運(yùn)用二、案例案例1：break語句示例案例2：continue語句示例參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入復(fù)習(xí)條件語句課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授實(shí)例：利用循環(huán)計(jì)算從1累加到100。通過實(shí)例的講解來解釋循環(huán)語句使用的規(guī)則課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦20分鐘操練實(shí)現(xiàn)：在網(wǎng)頁中顯示做1,000,000次加操作所耗費(fèi)的時間演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦30分鐘總結(jié)循環(huán)語句的循環(huán)起始、條件及自加表達(dá)式的注意事項(xiàng)講解集體參與教材10分鐘作業(yè)布置計(jì)算從出生到現(xiàn)在的天數(shù)講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果正確使用循環(huán)語句教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第2章JavaScript基礎(chǔ)授課班級：16計(jì)應(yīng)課時：2上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、能正確理解并使用函數(shù)，理解對象和BOM基礎(chǔ)1、函數(shù)、對象和BOM基礎(chǔ)能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)正確使用函數(shù)來實(shí)現(xiàn)功能二、案例案例1：JavaScript函數(shù)調(diào)用示例案例2：argument示例案例3：date對象示例案例4：date對象示例案例5：confirm對話框演示示例參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入復(fù)習(xí)循環(huán)語句課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.實(shí)例：對兩個數(shù)進(jìn)行加減乘除四則運(yùn)算。通過事例的講解加深學(xué)生對函數(shù)的理解2.Date對象的介紹及BOM中常用的對象介紹課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦20分鐘操練實(shí)現(xiàn)：使用有參函數(shù)的調(diào)用實(shí)現(xiàn)對兩數(shù)的四則運(yùn)算演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦30分鐘總結(jié)無參及有參函數(shù)使用的注意事項(xiàng)講解集體參與教材10分鐘作業(yè)布置通過函數(shù)實(shí)現(xiàn)計(jì)算在網(wǎng)頁中顯示做1,000,000次加操作所耗費(fèi)的時間講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果正確使用函數(shù)來實(shí)現(xiàn)功能教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第3章Javascript開發(fā)授課班級：16計(jì)應(yīng)課時：2上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、能正確使用alert()函數(shù)及瀏覽器的開發(fā)人員工具來對程序進(jìn)行調(diào)試。1、調(diào)試js程序的工具及手段能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)學(xué)會進(jìn)行單步運(yùn)行、單步跳過及怎樣添加監(jiān)視點(diǎn)二、案例案例1：九九乘法表參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入復(fù)習(xí)javascript基本語法課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授實(shí)例：打印九九乘法表。通過對實(shí)例的調(diào)試講解，讓學(xué)生掌握使用alert()函數(shù)及瀏覽器的開發(fā)人員工具調(diào)試程序課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦20分鐘操練實(shí)現(xiàn)：調(diào)試打印菱形程序演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦30分鐘總結(jié)使用瀏覽器的開發(fā)人員工具單步調(diào)試需要注意的事項(xiàng)講解集體參與教材10分鐘作業(yè)布置用JavaScript計(jì)算借貸支出講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果學(xué)會進(jìn)行單步運(yùn)行、單步跳過及怎樣添加監(jiān)視點(diǎn)教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第4章CSS基礎(chǔ)授課班級：16計(jì)應(yīng)課時：4上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、能正確使用三種方式來實(shí)現(xiàn)控制頁面方法2、掌握三種CSS選擇器的使用1、CSS的概念2、CSS控制頁面的方法3、CSS選擇器能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)正確使用三種方式來實(shí)現(xiàn)控制頁面方法三種CSS選擇器的使用二、案例案例1：行內(nèi)樣式表簡單實(shí)用示例案例2：嵌入式樣式表應(yīng)用示例案例3：導(dǎo)入式樣式表應(yīng)用示例參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入復(fù)習(xí)js調(diào)試程序方法課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.分別使用三種方法實(shí)現(xiàn)控制頁面種文字及圖片的風(fēng)格樣式2.對網(wǎng)頁中不同標(biāo)簽分別使用標(biāo)記選擇器，類別選擇器及ID選擇器來控制頁面不同元素的風(fēng)格樣式課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦80分鐘操練對一個頁面中不同的元素實(shí)現(xiàn)不同的風(fēng)格樣式演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦40分鐘總結(jié)三種選擇器的不同適應(yīng)環(huán)境講解集體參與教材15分鐘作業(yè)布置對個人網(wǎng)站實(shí)現(xiàn)不同的風(fēng)格樣式設(shè)計(jì)講解集體參與網(wǎng)絡(luò)資源多媒體電腦15分鐘學(xué)習(xí)成果正確使用三種方式來實(shí)現(xiàn)控制頁面方法懂得三種CSS選擇器的使用教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第4章CSS基礎(chǔ)授課班級：16計(jì)應(yīng)課時：4上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、能對文字設(shè)置各種效果2、能對圖片設(shè)置雙邊框及圖文混排效果3、能對頁面背景進(jìn)行設(shè)置1、CSS設(shè)置文字效果2、CSS設(shè)置圖片效果3、CSS設(shè)置頁面背景能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)掌握各種CSS文字效果的設(shè)置及頁面背景的設(shè)置二、案例案例1：段落樣式首行縮進(jìn)案例2：字體間隔應(yīng)用示例案例3：首字放大應(yīng)用示例案例4：圖文混排簡單示例案例5：背景顏色、圖片設(shè)置示例參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入復(fù)習(xí)三種CSS選擇器課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1、對給定的一段文字設(shè)置首字放大，字體字號等效果。2、四張圖片實(shí)現(xiàn)雙邊框效果。課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦80分鐘操練設(shè)置頁面的背景為一張具有雙邊框效果的圖片演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦40分鐘總結(jié)文字效果的屬性，圖片及圖文混排的不同屬性設(shè)置講解集體參與教材15分鐘作業(yè)布置對個人網(wǎng)站種的文字圖片及段落實(shí)現(xiàn)不同的風(fēng)格樣式設(shè)計(jì)講解集體參與網(wǎng)絡(luò)資源多媒體電腦15分鐘學(xué)習(xí)成果學(xué)會頁面背景的設(shè)置及各種文字樣式的設(shè)計(jì)教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第5章CSS進(jìn)階授課班級：16計(jì)應(yīng)課時：4上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、能使用DIV與SPAN標(biāo)記布局頁面2、盒模型布局頁面1、塊級元素和行內(nèi)級元素2、DIV與SPAN標(biāo)記布局頁面3、盒模型能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)學(xué)會DIV與SPAN標(biāo)記布局頁面及盒模型布局二、案例案例1：DIV標(biāo)記示例案例2：<div>與<span>元素樣式對比案例3：盒子模型結(jié)構(gòu)示例案例4：邊框示例案例5：padding使用示例案例6：margin示例參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入復(fù)習(xí)CSS基礎(chǔ)內(nèi)容課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.通過盒子模型結(jié)構(gòu)示例講解塊級和行內(nèi)級元素的區(qū)別及適應(yīng)范圍。2.講解盒模型種padding,margin,border的區(qū)別。課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦80分鐘操練圖文層疊示例的實(shí)現(xiàn)演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦45分鐘總結(jié)DIV及SPAN標(biāo)記布局頁面及盒模型概念在頁面布局中的優(yōu)勢講解集體參與教材15分鐘作業(yè)布置設(shè)計(jì)一個頁面，使訪問者用鼠標(biāo)指向頁面上的不同文字時，鼠標(biāo)的形狀會有所不同。講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果1、懂得div的運(yùn)用2、完成border、padding、margin屬性示例操作教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第5章CSS進(jìn)階授課班級：16計(jì)應(yīng)課時：4上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、能使用三種CSS浮動定位2、能使用簡單的position定位布局頁面1、CSS浮動定位2、CSSposition定位能力訓(xùn)練任務(wù)及案例一、能力訓(xùn)練任務(wù)CSS布局定位二、案例案例1：浮動定位示例案例2：position定位示例參考資料精通JavaScript+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入復(fù)習(xí)盒模型課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授1.通過一個圖文混排的實(shí)例講解浮動定位float屬性的三個值。2.通過position定位示例講解position定位的使用課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦80分鐘操練歌曲編輯列表實(shí)例的實(shí)現(xiàn)演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦45分鐘總結(jié)浮動定位在圖文混排中的使用及position定位在布局頁面中的使用講解集體參與教材15分鐘作業(yè)布置水平菜單示例講解集體參與網(wǎng)絡(luò)資源多媒體電腦10分鐘學(xué)習(xí)成果完成Position定位即float定位示例操作教學(xué)后記《JavaScript程序設(shè)計(jì)》教案設(shè)計(jì)一、教案頭本單元標(biāo)題：第6章DOM模型授課班級：16計(jì)應(yīng)課時：4上課地點(diǎn)：教1教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、正確理解DOM樹概念及DOM樹中各個節(jié)點(diǎn)關(guān)系2、能動態(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+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(dǎo)入復(fù)習(xí)浮動定位及position定位知識課件演示聽講教材網(wǎng)絡(luò)資源多媒體10分鐘講授通過動態(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ò)資源多媒體電腦45分鐘總結(jié)DOM樹中節(jié)點(diǎn)間關(guān)系及動態(tài)修改或獲取節(jié)點(diǎn)屬性值講解集體參與教材15分鐘作業(yè)布置編寫一個Web頁面：每0.2秒在瀏覽器窗口的狀態(tài)欄中滾動顯示一次當(dāng)前瀏覽器的信息。在輸出內(nèi)容前加一個輸出次數(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模型授課班級：16計(jì)應(yīng)課時：4上課地點(diǎn)：教1教學(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+jQuery100%動態(tài)網(wǎng)頁設(shè)計(jì)密碼二、（單元）教學(xué)設(shè)計(jì)教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)方法及手段學(xué)生活動教學(xué)資源及工具時間分配導(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動態(tài)修改HTML元素的CSS風(fēng)格樣式課件演示模擬演練聽講實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦80分鐘操練練習(xí)：使用HTMLDOM對象的屬性訪問演示講解實(shí)際操作教材網(wǎng)絡(luò)資源多媒體電腦45分鐘總結(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ī)制授課班級：16計(jì)應(yīng)課