章節(jié)設(shè)計_第二章JavaScript基礎(chǔ)

1、HTML5 App商業(yè)開發(fā)實戰(zhàn)教程課程教學(xué)章節(jié)設(shè)計第二章：JavaScript基礎(chǔ)授課教師：Web課程組授課班級:學(xué)時：7教學(xué)條件計算機(jī)、局域網(wǎng)環(huán)境教學(xué)素材教材、課件、授課錄像、案例庫、教學(xué)網(wǎng)站等教學(xué)目標(biāo)設(shè)計知識目標(biāo)：（1） 了解JavaScript基本語法：變量，數(shù)據(jù)類型，引入方式等（2） 掌握J(rèn)avaScript的DOM對象的常用方法（3） 掌握使用JavaScript的DOM對象完成頁面元素的讀取和操作（4） 掌握J(rèn)avaScript的函數(shù)及事件（5） 掌握HTML5的Canvas對象，掌握使用JavaScript的代碼完成基本的繪制圖形操作，完成視頻截圖的功能（6） 掌握使用JavaS

2、cript對HTML5頁面的數(shù)據(jù)存儲及應(yīng)用能力目標(biāo)：（1） 掌握使用JavaScript查找，操作HTML元素（2） 熟練使用JavaScript的函數(shù)的定義和調(diào)用，并能解決具體的實際需求（3） 使用JavaScript完成視頻截圖的功能（4） 使用JavaScript完成HTML5頁面數(shù)據(jù)存儲功能教學(xué)內(nèi)容（1） 介紹JavaScript的基本語法及DOM對象（2） 介紹JavaScript的函數(shù)及事件（3） 介紹HTML5的Canvas對象，及通過JavaScript進(jìn)行頁面的圖形繪制（4） 介紹使用JavaScript完成HTML5頁面的數(shù)據(jù)存儲功能重點(diǎn)：（1） 掌握J(rèn)avaScript的

3、基本語法及引入方式（2） 掌握J(rèn)avaScript的DOM對象（3） 掌握J(rèn)avaScript的函數(shù)及事件難點(diǎn)：（1） 掌握J(rèn)avaScript進(jìn)行頁面圖形繪制（2） 使用JavaScript完成HTML5頁面的數(shù)據(jù)存儲功能課后作業(yè)（1）教材上的演示案例（2）通過JavaScript實現(xiàn)推箱子之類的小游戲教學(xué)過程設(shè)計節(jié)2-1：JavaScript入門（學(xué)時數(shù)：3）主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動問題 引入在一個完整的App中間，HTML5負(fù)責(zé)進(jìn)行頁面的設(shè)計，CSS負(fù)責(zé)進(jìn)行頁面的美化，那么JavaScript負(fù)責(zé)做什么呢，前面我們學(xué)習(xí)過JavaScript主要是用來進(jìn)行頁面和用戶之間進(jìn)行

4、交互行為的，那么如何使用JavaScript呢？教師講授引導(dǎo)文法多媒體學(xué)生：思考教師：講解知識講解知識點(diǎn)1： 為什么要使用JavaScript及JavaScript引入方式知識點(diǎn)2： DOM對象在頁面上輸出內(nèi)容知識點(diǎn)3： DOM對象查找頁面上的元素知識點(diǎn)4： DOM對象操作頁面上的元素，包括創(chuàng)建元素，改變元素內(nèi)容，改變元素樣式，添加/刪除元素，對元素進(jìn)行響應(yīng)等等操作啟發(fā)講解討論歸納多媒體課件演示學(xué)生：思考、記錄筆記教師：啟發(fā)示范 操作操作1：通過script標(biāo)簽引入JavaScript代碼，在JavaScript代碼中通過DOM在頁面上輸出內(nèi)容操作2：通過DOM的getElement系列方法獲

5、取頁面元素操作3：通過DOM對象對頁面元素進(jìn)行操作問題引導(dǎo)操作演示分析歸納多媒體系統(tǒng)演示學(xué)生：觀摩思考教師：歸納總結(jié)評估討論（1） 討論JavaScript的變量及數(shù)據(jù)類型的使用方法（2） 討論DOM對象常用的方法對頁面元素的使用教師啟發(fā)討論歸納多媒體學(xué)生：思考，討論教師：啟發(fā)，總結(jié)課堂總結(jié)（1） JavaScript的基本語法，變量，數(shù)據(jù)類型（2） DOM對象獲取頁面元素的方法（3） DOM對象操作頁面元素的情況教師講解多媒體課件演示學(xué)生：整理筆記教師：引導(dǎo)創(chuàng)新教學(xué)過程設(shè)計節(jié)2-2：JavaScript基礎(chǔ)語法（學(xué)時數(shù)：1）主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動問題 引入JavaScrip

6、t的代碼直接編寫在script標(biāo)簽中，不能夠重復(fù)調(diào)用，那如何實現(xiàn)代碼的費(fèi)用呢，通過函數(shù)來實現(xiàn),在元素的事件中來進(jìn)行調(diào)用教師講授引導(dǎo)文法 多媒體學(xué)生：思考教師：講解知識講解知識點(diǎn)1： JavaScript函數(shù)的分類知識點(diǎn)2： JavaScript常用的系統(tǒng)函數(shù)的用法知識點(diǎn)3：JavaScript自定義函數(shù)的實現(xiàn)方式知識點(diǎn)4：JavaScript事件的概念及如何使用事件啟發(fā)講解討論歸納多媒體課件演示學(xué)生：思考、記錄筆記教師：啟發(fā)示范 操作操作1：通過script標(biāo)簽引入JavaScript代碼，在JavaScript代碼中編寫自定義函數(shù)模擬捕魚功能同時為函數(shù)傳遞參數(shù)操作2：在函數(shù)內(nèi)部通過DOM對象

7、獲取頁面元素同時對參數(shù)進(jìn)行判斷獲取捕魚的不同積分操作3：在按鈕的點(diǎn)擊事件中調(diào)用自定義函數(shù)實現(xiàn)捕魚功能問題引導(dǎo)操作演示分析歸納多媒體系統(tǒng)演示學(xué)生：觀摩思考教師：歸納總結(jié)評估討論（1）討論JavaScript函數(shù)的定義及使用事件進(jìn)行調(diào)用的語法（2）討論使用JavaScript自定義函數(shù)實現(xiàn)模擬捕魚功能的步驟教師啟發(fā)討論歸納多媒體學(xué)生：思考，討論教師：啟發(fā)，總結(jié)課堂總結(jié)（1） JavaScript常用的系統(tǒng)函數(shù)（2） JavaScript自定義函數(shù)的語法及調(diào)用教師講解多媒體課件演示學(xué)生：整理筆記教師：引導(dǎo)創(chuàng)新教學(xué)過程設(shè)計節(jié)2-3： HTML5繪制圖形 （學(xué)時數(shù)：1）主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師

8、生活動問題 引入HTML頁面上有很多圖形圖表，例如2D柱狀圖，餅圖以及游戲界面的圖形等，在HTML5中間提供有Canvas畫板對象，通過JavaScript就可以實現(xiàn)繪制圖形了教師講授引導(dǎo)文法 多媒體學(xué)生：思考教師：講解知識講解知識點(diǎn)1： HTML5提供的Canvas標(biāo)簽的作用知識點(diǎn)2： JavaScript中g(shù)etContext()的語法及作用知識點(diǎn)3：通過JavaScript的getContext()方法返回的對象調(diào)用drawImage()實現(xiàn)視頻截圖的功能啟發(fā)講解討論歸納多媒體課件演示學(xué)生：思考、記錄筆記教師：啟發(fā)示范 操作操作1：在HTML5頁面上增加Canvas標(biāo)簽對象操作2：通過s

9、cript標(biāo)簽引入JavaScript代碼，在script標(biāo)簽內(nèi)部增加自定義函數(shù)，通過getContext()方法返回畫筆對象，同時通過畫筆對象的drawImage0方法實現(xiàn)視頻的截圖功能操作3：在截圖按鈕的點(diǎn)擊事件中調(diào)用自定義函數(shù)實現(xiàn)視頻的截圖功能問題引導(dǎo)操作演示分析歸納多媒體系統(tǒng)演示學(xué)生：觀摩思考教師：歸納總結(jié)評估討論（1） 討論Canvas表前對象的屬性（2） 討論如何通過JavaScript操作Canvas對象（3） 討論使用getContext()方法返回的畫筆對象常用的繪制圖形的方法有哪些教師啟發(fā)討論歸納多媒體學(xué)生：思考教師：引導(dǎo)課堂總結(jié)（1） Canvas標(biāo)簽的使用及使用場合（2

10、） JavaScript操作Canvas標(biāo)簽的方法（3） getContext()返回的對象常用的繪制圖形的方法教師講解多媒體課件演示學(xué)生：整理筆記教師：引導(dǎo)創(chuàng)新教學(xué)過程設(shè)計節(jié)2-4： HTML5數(shù)據(jù)存儲 （學(xué)時數(shù)：2）主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動問題 引入在頁面的客戶端進(jìn)行數(shù)據(jù)存儲是很App開發(fā)或者Web開發(fā)都是非常重要的一個功能，以往都是通過cookie來實現(xiàn)，但是使用cookie實現(xiàn)有數(shù)據(jù)大小限制，安全性問題及會帶來網(wǎng)絡(luò)負(fù)擔(dān)的缺點(diǎn)，所以在HTML5中提供有WebStorage的方式來進(jìn)行數(shù)據(jù)的存儲功能教師講授引導(dǎo)文法 多媒體學(xué)生：思考教師：講解知識講解知識點(diǎn)1：HTML5 W

11、ebStorage的API知識點(diǎn)2：使用sessionStorage實現(xiàn)保存并讀取臨時數(shù)據(jù)知識點(diǎn)3： 使用localStorage實現(xiàn)讀取并保存登錄的用戶名和密碼知識點(diǎn)4：使用localStorage進(jìn)行本地存儲，同時實現(xiàn)保存，清空數(shù)據(jù)記錄啟發(fā)講解討論歸納多媒體課件演示學(xué)生：思考、記錄筆記教師：啟發(fā),講解，演示示范 操作操作1：演示通過sessionStorage實現(xiàn)保存病毒去臨時數(shù)據(jù)操作2：演示使用localStorage實現(xiàn)讀取并保存登錄的用戶名和密碼操作3：演示使用localStorage實現(xiàn)保存，清空數(shù)據(jù)記錄操作4：演示使用localStorage進(jìn)行本地存儲問題引導(dǎo)操作演示分析歸納多媒體系統(tǒng)演示學(xué)生：觀摩思考教師：歸納總結(jié)實戰(zhàn) 訓(xùn)練完成演示案例動手實踐做中學(xué)多媒體真實系統(tǒng)環(huán)境學(xué)生：實踐操作教師：巡視檢查評估討論（1） 討論HTML5提供的WebStorage的AP及使用場合（2） 討論sessionStorage，localStorage的進(jìn)行數(shù)據(jù)保存的實現(xiàn)及特點(diǎn)（3） 展示學(xué)生的討論結(jié)果（4） 考核學(xué)生結(jié)果教師啟發(fā)討論歸納分?jǐn)?shù)激勵多媒體學(xué)生