Javascript程序設(shè)計(jì) 教案-單元設(shè)計(jì) 張勁波 第1-5章 JavaScript概述-CSS進(jìn)階

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

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

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

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