JavaScript程序設計教案

課程名稱：JavaScript程序設計

適用專業：計算機應用

所屬院系：信息工程學院

編制人：_________________________________

制定時間:

UavaScript程序設計》教案設計

一'教案頭

本單元標題：第1章JavaScript概述

授課班級：16計應課時：4上課地點：教1

能力目標知識目標

1.理解Javascript的起源1.Javascript的起源

2.能安裝代碼編輯器EditPlus或2.瀏覽器之爭

教學目標者DreamViewer軟件3.JavaScript的編輯環境

3.掌握編輯器的基本用法4.JavaScript的實現與小體驗

4.掌握編輯器EditPlus或者

DreamViewer軟件的基本用法

一'能力訓練任務

編寫第一個JavaScript網頁

能力訓練任務

及案例二、案例

案例1：定時打開窗口

案例2：日期選擇器

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入Javascript的起源課件、視頻聽講教材10分鐘

網絡資源

多媒體

講授1.瀏覽器之間的沖突課件演示聽講教材40分鐘

2.標準的制定模擬演練實際操作網絡資源

3.Javascript的實現多媒體

ECMAscript>DOM、BOM）電腦

4.編輯器EditPlus或

DreamViewer的安裝

5編輯器EditPlus或

DreamViewer的基本功

能

6編輯實現第一個js程序

“HelloWorld”

操練1.器EditPlus或演示實際操作教材70分鐘

DreamViewer的安裝網絡資源

2.使用EditPlus實現第一個多媒體

js程序“Helloworld”電腦

總結1、vascript概況講解集體參與教材20分鐘

2、實現js程序的流程

作業布置1、給網站首頁加上自動問候講解集體參與網絡資源20分鐘

的功能。網頁將可以在不多媒體

同的時段向訪問者顯示不電腦

同的問候語，例如在上午

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.完成個人網站中“歡迎光

臨”標語的顯示

1、完成第一個JavaScript網頁編寫

2、完成定時打開窗口操作

學習成果3、完成日期選擇器操作

教學后記

JavaScript程序設計》教案設計

一'教案頭

本單元標題：第2章JavaScript基礎

授課班級：16計應課時：2上課地點：教1

能力目標知識目標

教學目標1、變量的聲明及賦值1、語法

2、變量

一、能力訓練任務

1、JavaScript語法學習

能力訓練任務2、變量命名規則

及案例二、案例

案例1：變量定義實例

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入Javascript的實現課件演示聽講教材10分鐘

網絡資源

多媒體

講授1.Javascript基本語法要求課件演示聽講教材20分鐘

2.變量的聲明及賦值模擬演練實際操作網絡資源

多媒體

電腦

操練引入一個小例子實現對字符演小實際操作教材30分鐘

串、數值等變量的賦值操作講解網絡資源

任務驅動多媒體

電腦

總結變量聲明及賦值的方法講解集體參與教材10分鐘

作業布置找出javascript變量聲明及講解集體參與網絡資源10分鐘

賦值方法與Java語言中的區多媒體

別電腦

學會JavaScript基本語法

懂得變量的聲明及賦值

學習成果

教學后記

JavaScript程序設計》教案設計

一'教案頭

本單元標題：第2章JavaScript基礎

授課班級：16計應課時：2上課地點：教1

能力目標知識目標

1、能正確理解各種數據類型并使用1、數據類型

教學目標相應的數據類型2、關鍵字和保留字

2、對關鍵字和保留字能正確理解并

使用

一、能力訓練任務

正確使用各種數據類型

二、案例

能力訓練任務

及案例案例1：連接字符串

案例2：字符串字母大小寫傳換

案例3：獲取字符串長度示例

案例4：數值運算示例

案例5：布爾型轉換字符串

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入復習變量的聲明及賦值課件演示聽講教材10分鐘

網絡資源

多媒體

講授1.6種主要數據類型介紹，并課件演示聽講教材20分鐘

通過小例子加深學生對數據類模擬演練實際操作網絡資源

型的理解任務驅動多媒體

2.關鍵字和保留字的注意事電腦

項

操練引入一個小例子分別使用6種演小實際操作教材30分鐘

重要的數據類型講解網絡資源

多媒體

電腦

總結6種數據類型數據使用的注意講解集體參與教材10分鐘

，邪項

作業布置設置個人網站中對不同數據的講解集體參與網絡資源10分鐘

使用實現不同顯示項目多媒體

電腦

1、能夠正確使用各種數據類型

2、正確完成所有案例

學習成果

教學后記

JavaScript程序設計》教案設計

一'教案頭

本單元標題：第2章JavaScript基礎

授課班級：16計應課時：2上課地點：教1

能力目標知識目標

教學目標1、能正確理解并使用條件邏輯控制1、條件語句

語句

一、能力訓練任務

學會各種條件語句來進行流程上的判斷

能力訓練任務

及案例二、案例

案例1：if語句示例

案例2：switch語句示例

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入復習變量的數據類型課件演示聽講教材10分鐘

網絡資源

多媒體

講授根據時間顯示不同問候語的例課件演示聽講教材20分鐘

子講解：模擬演練實際操作網絡資源

1.ifelse條件邏輯控制語句多媒體

2.switchcase邏輯控制語句電腦

操練用一個根據不同條件執行不同演小實際操作教材30分鐘

操作的實例讓同學加深對這2講解網絡資源

種條件語句的理解多媒體

電腦

總結Ifelse語句和switchcase講解集體參與教材10分鐘

的相同和不同點

作業布置實現根據價格高低來判斷是否講解集體參與網絡資源10分鐘

奢侈品的程序實現多媒體

電腦

懂得利用各種條件語句來進行流程上的判斷

學習成果

教學后記

UavaScript程序設計》教案設計

一'教案頭

本單元標題：第2章JavaScript基礎

授課班級：16計應課時：2上課地點：教1

能力目標知識目標

教學目標1、能正確理解并使用循環邏輯控制1、循環語句

語句

一'能力訓練任務

各種循環語句的運用

能力訓練任務

及案例二、案例

案例1：break語句示例

案例2：continue語句示例

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入復習條件語句課件演示聽講教材10分鐘

網絡資源

多媒體

講授實例：利用循環計算從1累加課件演示聽講教材20分鐘

到100?通過實例的講解來解模擬演練實際操作網絡資源

釋循環語句使用的規則多媒體

電腦

操練實現：在網頁中顯不做演小實際操作教材30分鐘

1,000,000次加操作所耗費的講解網絡資源

時間多媒體

電腦

總結循環語句的循環起始、條件及講解集體參與教材10分鐘

自加表達式的注意事項

作業布置計算從出生到現在的天數講解集體參與網絡資源10分鐘

多媒體

電腦

正確使用循環語句

學習成果

教學后記

UavaScript程序設計》教案設計

一'教案頭

本單元標題：第2章JavaScript基礎

授課班級：16計應課時：2上課地點：教1

能力目標知識目標

教學目標1、能正確理解并使用函數，理解對1、函數、對象和BOM基礎

象和BOM基礎

一、能力訓練任務

正確使用函數來實現功能

二、案例

能力訓練任務

及案例案例1：JavaScript函數調用示例

案例2：argument示例

案例3：date對象示例

案例4：date對象示例

案例5：confirm對話框演示示例

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入復習循環語句課件演示聽講教材10分鐘

網絡資源

多媒體

講授1.實例：對兩個數進行加減乘課件演示聽講教材20分鐘

除四則運算。通過事例的講解模擬演練實際操作網絡資源

加深學生對函數的理解多媒體

2.Date對象的介紹及BOM中電腦

常用的對象介紹

操練實現：使用有參函數的調用實演小實際操作教材30分鐘

現對兩數的四則運算講解網絡資源

多媒體

電腦

總結無參及有參函數使用的注意事講解集體參與教材10分鐘

項

作業布置通過函數實現計算在網頁中顯講解集體參與網絡資源10分鐘

示做1,000,000次加操作所耗多媒體

費的時間電腦

正確使用函數來實現功能

學習成果

教學后記

UavaScript程序設計》教案設計

一'教案頭

本單元標題：第3章Javascript開發

授課班級：16計應課時：2上課地點：教1

能力目標知識目標

教學目標1、能正確使用alert()函數及瀏覽1、調試js程序的工具及手段

器的開發人員工具來對程序進行調

試。

一、能力訓練任務

能力訓練任務學會進行單步運行、單步跳過及怎樣添加監視點

及案例

二、案例

案例1：九九乘法表

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'(單元)教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入復習javascript基本語法課件演示聽講教材10分鐘

網絡資源

多媒體

講授實例：打印九九乘法表。通過課件演示聽講教材20分鐘

對實例的調試講解，讓學生掌模擬演練實際操作網絡資源

握使用alert()函數及瀏覽器多媒體

的開發人員工具調試程序電腦

操練實現：調試打印菱形程序演小實際操作教材30分鐘

講解網絡資源

多媒體

電腦

總結使用瀏覽器的開發人員工具單講解集體參與教材10分鐘

步調試需要注意的事項

作業布置用JavaScript計算借貸支出講解集體參與網絡資源10分鐘

多媒體

電腦

學會進行單步運行、單步跳過及怎樣添加監視點

學習成果

教學后記

UavaScript程序設計》教案設計

一'教案頭

本單元標題：第4章CSS基礎

授課班級：16計應課時：4上課地點：教1

能力目標知識目標

教學目標1、能正確使用三種方式來實現控制1、CSS的概念

頁面方法2、CSS控制頁面的方法

2、掌握三種CSS選擇器的使用3、CSS選擇器

一、能力訓練任務

正確使用三種方式來實現控制頁面方法

能力訓練任務三種CSS選擇器的使用

及案例二、案例

案例1:行內樣式表簡單實用示例

案例2：嵌入式樣式表應用示例

案例3：導入式樣式表應用示例

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入復習js調試程序方法課件演示聽講教材10分鐘

網絡資源

多媒體

講授1.分別使用三種方法實現控制課件演示聽講教材80分鐘

頁面種文字及圖片的風格樣式模擬演練實際操作網絡資源

2.對網頁中不同標簽分別使用多媒體

標記選擇器，類別選擇器及ID電腦

選擇器來控制頁面不同元素的

風格樣式

操練對一個頁面中不同的元素實現演小實際操作教材40分鐘

不同的風格樣式講解網絡資源

多媒體

電腦

總結三種選擇器的不同適應環境講解集體參與教材15分鐘

作業布置對個人網站實現不同的風格樣講解集體參與網絡資源15分鐘

式設計多媒體

電腦

正確使用三種方式來實現控制頁面方法

懂得三種CSS選擇器的使用

學習成果

教學后記

UavaScript程序設計》教案設計

一'教案頭

本單元標題：第4章CSS基礎

授課班級：16計應課時：4上課地點：教1

能力目標知識目標

1、能對文字設置各種效果1、CSS設置文字效果

教學目標2、能對圖片設置雙邊框及圖文混排2、CSS設置圖片效果

效果3、CSS設置頁面背景

3、能對頁面背景進行設置

一、能力訓練任務

掌握各種CSS文字效果的設置及頁面背景的設置

二、案例

能力訓練任務

及案例案例1：段落樣式首行縮進

案例2：字體間隔應用示例

案例3：首字放大應用示例

案例4：圖文混排簡單示例

案例5：背景顏色、圖片設置示例

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入復習三種CSS選擇器課件演示聽講教材10分鐘

網絡資源

多媒體

講授1、對給定的一段文字設置首字課件演示聽講教材80分鐘

放大，字體字號等效果。模擬演練實際操作網絡資源

2、四張圖片實現雙邊框效果。多媒體

電腦

操練設置頁面的背景為一張具有雙演小實際操作教材40分鐘

邊框效果的圖片講解網絡資源

多媒體

電腦

總結文字效果的屬性，圖片及圖文講解集體參與教材15分鐘

混排的不同屬性設置

作業布置對個人網站種的文字圖片及段講解集體參與網絡資源15分鐘

落實現不同的風格樣式設計多媒體

電腦

學會頁面背景的設置及各種文字樣式的設計

學習成果

教學后記

UavaScript程序設計》教案設計

一'教案頭

本單元標題：第5章CSS進階

授課班級：16計應課時：4上課地點：教1

能力目標知識目標

教學目標1、能使用DIV與SPAN標記布局頁1、塊級元素和行內級元素

面2、DIV與SPAN標記布局頁面

2、盒模型布局頁面3、盒模型

一、能力訓練任務

學會DIV與SPAN標記布局頁面及盒模型布局

二、案例

能力訓練任務案例1：DIV標記示例

及案例案例2：＜div＞與＜span＞元素樣式對比

案例3：盒子模型結構示例

案例4：邊框示例

案例5：padding使用示例

案例6：margin示例

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入復習CSS基礎內容課件演示聽講教材10分鐘

網絡資源

多媒體

講授1.通過盒子模型結構示例講解課件演示聽講教材80分鐘

塊級和行內級元素的區別及適模擬演練實際操作網絡資源

應范圍。多媒體

2.講解盒模型種電腦

padding,margin,border的區

別。

操練圖文層疊示例的實現演小實際操作教材45分鐘

講解網絡資源

多媒體

電腦

總結DIV及SPAN標記布局頁面及盒講解集體參與教材15分鐘

模型概念在頁面布局中的優勢

作業布置設計一個頁面，使訪問者用鼠講解集體參與網絡資源10分鐘

標指向頁面上的不同文字時，多媒體

鼠標的形狀會有所不同。電腦

1、懂得div的運用

2、完成border、padding、margin屬性示例操作

學習成果

教學后記

UavaScript程序設計》教案設計

一'教案頭

本單元標題：第5章CSS進階

授課班級：16計應課時：4上課地點：教1

能力目標知識目標

教學目標1、能使用三種CSS浮動定位1、CSS浮動定位

2、能使用簡單的position定位布2^CSSposition定位

局頁面

一、能力訓練任務

CSS布局定位

能力訓練任務

及案例二、案例

案例1:浮動定位示例

案例2：position定位示例

精通JavaScript+jQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入復習盒模型課件演示聽講教材10分鐘

網絡資源

多媒體

講授1.通過一個圖文混排的實例講課件演示聽講教材80分鐘

解浮動定位float屬性的三個模擬演練實際操作網絡資源

值。多媒體

2.通過position定位示例講電腦

解position定位的使用

操練歌曲編輯列表實例的實現演示實際操作教材45分鐘

講解網絡資源

多媒體

電腦

總結浮動定位在圖文混排中的使用講解集體參與教材15分鐘

及position定位在布局頁面

中的使用

作業布置水平菜單示例講解集體參與網絡資源10分鐘

多媒體

電腦

完成Position定位即float定位示例操作

學習成果

教學后記

UavaScript程序設計》教案設計

一'教案頭

本單元標題：第6章DOM模型

授課班級：16計應課時：4上課地點：教1

能力目標知識目標

1、正確理解DOM樹概念及DOM樹中1、D0M及D0M技術簡介

教學目標各個節點關系2、頁面中的D0M模型框架

2^能動態查看和修改頁面中節點元

素

一、能力訓練任務

1、訪問指定節點的方法

2、查看/修改屬性節點

能力訓練任務

及案例二、案例

案例1：DOM技術應用簡單示例

案例2：DOM基本方法綜合示例

案例2：DOM常用方法綜合示例

案例2：網頁中的DOM模型框架示例

精通JavaScript+JQuery100%動態網頁設計密碼

參考資料

二'（單元）教學設計

教學方法教學資源時間

教學環節教學內容學生活動

及手段及工具分配

導入復習浮動定位及position定課件演示聽講教材10分鐘

位知識網絡資源

多媒體

講授通過動態修改圖片元素的實例課件演示聽講教材80分鐘

來加深D0M樹的理解及掌握訪模擬演練實際操作網絡資源

問指定節點的方法和查看/修多媒體

改屬性節點的方法電腦

操練實現點擊按鈕修改圖片節點對演小實際操作教材45分鐘

象及獲取圖片的安裝路徑等屬講解網絡資源

性值多媒體

電腦

總結DOM樹中節點間關系及動態修講解集體參與教材15分鐘

改或獲取節點屬性值

作業布置編寫一個Web頁面：每0.2秒講解集體參與網絡資源10分鐘

在瀏覽器窗口的狀態欄中滾動多媒體

顯示一次當前瀏覽器的信息。電腦

在輸出內容前加一個輸出次數

的計數。這樣每次的顯示效果

有所不同。

提示：瀏覽器信息可由window

對象的子對象navigator獲

得，用indow.status設置狀態

欄的內容。

完成本講所有示例操作

學習成果

教學后記

UavaScript程序設計》教案設計

一'教案頭

本單元標題：第6章DOM模型

授課班級：16計應課時：4上課地點：教1

能力目標知識目標

1