Javascript程序設計 教案-單元設計 張勁波 第1-5章 JavaScript概述-CSS進階

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

《JavaScript程序設計》教案設計一、教案頭本單元標題：第1章 JavaScript概述授課班級：20軟件1,2，3課時：4上課地點：實訓5教學目標能力目標知識目標1.理解Javascript的起源2.能安裝代碼編輯器EditPlus或者DreamViewer軟件3.掌握編輯器的基本用法4.掌握編輯器EditPlus或者DreamViewer軟件的基本用法1.Javascript的起源2.瀏覽器之爭3.JavaScript的編輯環(huán)境4.JavaScript的實現(xiàn)與小體驗能力訓練任務及案例一、能力訓練任務編寫第一個JavaScript網(wǎng)頁二、案例案例1：定時打開窗口案例2：日期選擇器參考資料Javascript技術教程二、（單元）教學設計教學環(huán)節(jié)教學內(nèi)容教學方法及手段學生活動教學資源及工具時間分配導入Javascript的起源課件、視頻聽講教材網(wǎng)絡資源多媒體10分鐘講授1.瀏覽器之間的沖突2.標準的制定3.Javascript的實現(xiàn)ECMAscript、DOM、BOM）4.編輯器EditPlus或DreamViewer的安裝5編輯器EditPlus或DreamViewer的基本功能6編輯實現(xiàn)第一個js程序“HelloWorld”課件演示模擬演練聽講實際操作教材網(wǎng)絡資源多媒體電腦60分鐘操練器EditPlus或DreamViewer的安裝使用EditPlus實現(xiàn)第一個js程序“Helloworld”演示實際操作教材網(wǎng)絡資源多媒體電腦70分鐘總結vascript概況實現(xiàn)js程序的流程講解集體參與教材20分鐘作業(yè)布置給網(wǎng)站首頁加上自動問候的功能。網(wǎng)頁將可以在不同的時段向訪問者顯示不同的問候語，例如在上午8:00—9:00就向用戶顯示“早上好”，如果在下午則顯示“下午好”。我們將定義的時間段對應得問候語列在下面：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)站中“歡迎光臨”標語的顯示講解集體參與網(wǎng)絡資源多媒體電腦20分鐘學習成果完成第一個JavaScript網(wǎng)頁編寫2、完成定時打開窗口操作3、完成日期選擇器操作教學后記

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

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