《JavaScript移動開發(fā)》正本書教案完整版電子教案課程設(shè)計最全電子教案全套

1、JavaScript初探JavaScript移動開發(fā)課第1單元課程單元教學(xué)設(shè)計 （2020 2021學(xué)年第1學(xué)期）單元名稱： JavaScript初探 所屬系部： 計算機與通信工程學(xué)院 制定人： 鄭麗萍 合作人： 制定時間： 2020.3 *學(xué)院 教務(wù)處 制JavaScript移動開發(fā)課程單元教學(xué)設(shè)計 單元標(biāo)題：JavaScript初探 單元教學(xué)學(xué)時2在整體設(shè)計中的位置第1次授課班級16web班上課時間每周一1,2節(jié)上課地點計算機實驗室教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)素質(zhì)目標(biāo)1.能夠使用多種方案引入JavaScript腳本代碼到HTML文檔中。2.能夠使用常用的輸出語句。3.能夠獲取元素并改變元素內(nèi)容

2、。了解JavaScript簡史和 HYPERLINK /librarys/veda/detail/1579 h 引擎的工作原理。掌握JavaScript的組成、主要特點和相關(guān)應(yīng)用。樹立學(xué)習(xí)信心；培養(yǎng)討論思考的習(xí)慣能力訓(xùn)練任務(wù)任務(wù)：JavaScript初探教學(xué)組織：帶領(lǐng)學(xué)生了解課程任務(wù)講解JavaScript簡史及相關(guān)術(shù)語引入JavaScript腳本代碼到HTML文檔中，使用常用的輸出語句本次課的單詞JavaScript Web function document getElementById innerHTML案例和教學(xué)材料案例：JavaScript初探-文字的切換教學(xué)材料：1.教材名稱：Ja

3、vaScript移動開發(fā)項目教程（微課版）,鄭麗萍, 人民郵電出版社。2.參考教材名稱：JavaScript與jQuery案例教程,鄭麗萍，出版社：高等教育出版社。 3.教學(xué)多媒體課件，項目源文件。多媒體資料：/course/HCIT-12067068284.儀器與設(shè)備：計算機等 單元教學(xué)進度設(shè)計（綱要）步驟教學(xué)內(nèi)容及能力/知識目標(biāo)教師活動學(xué)生活動時間（分鐘）1情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)導(dǎo)入本次課教學(xué)情境學(xué)生了解工作情境22引入任務(wù)：JavaScript初探-文字的切換交代任務(wù) 學(xué)生接受任務(wù)33知識點講解JavaScript初探講解JavaScript簡史及相關(guān)術(shù)語了解JavaScript簡

4、史及相關(guān)術(shù)語10講解JavaScript HYPERLINK /librarys/veda/detail/1579 h 引擎的工作原理了解JavaScript HYPERLINK /librarys/veda/detail/1579 h 引擎的工作原理10講解引入JavaScript腳本代碼到HTML文檔中方法掌握引入JavaScript腳本代碼到HTML文檔中方法 10教師巡視，發(fā)現(xiàn)問題多種引入方案練習(xí)154 實踐JavaScript初探-文字的切換教師演示掌握常用的輸出語句方法10教師巡視，發(fā)現(xiàn)問題常用的輸出語句練習(xí)205評比檢查學(xué)生完成情況抽查學(xué)生完成情況，講解出現(xiàn)的問題演示自己的界面，

5、修改出現(xiàn)的問題56 總結(jié)JavaScript初探重點強調(diào)學(xué)生練習(xí)中出現(xiàn)的問題學(xué)生思考反饋5作業(yè)Javascript的主要特點？課后體會一、情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)二、引入任務(wù) ：JavaScript初探-文字的切換三、知識點講解術(shù)語“ECMAScript”和“JavaScript”指的是同一個東西。但如果把JavaScript看成是“Mozilla或其他組織的ECMAScript實現(xiàn)”，那么ECMAScript就是實現(xiàn)JavaScript所依據(jù)的標(biāo)準(zhǔn)。術(shù)語“ECMAScript”也用來描述語言版本(比如ECMAScript5)。JavaScript解析引擎就是能夠“讀懂”JavaScrip

6、t代碼，并準(zhǔn)確地給出代碼運行結(jié)果的一段程序。比方說，當(dāng)編寫了var a = 1 + 1;這樣一段代碼，JavaScript引擎做的事情就是看懂（解析）你這段代碼，并且將a的值變?yōu)?。JavaScript引擎就是直接解析并將代碼運行結(jié)果輸出的JavaScript的解釋器 JavaScript由三部分組成：核心（ECMAScript） 描述了該語言的語法和基本對象文檔對象模型(DOM，Documnet)描述了處理網(wǎng)頁內(nèi)容的方法和接口瀏覽器對象模型(BOM)描述了與瀏覽器進行交互的方法和接口JavaScript的主要特點JavaScript相關(guān)應(yīng)用選擇 JavaScript 腳本編輯器引入JavaS

7、cript腳本代碼到HTML文檔中方法 Javascript常用的輸出語句：使用window.alert()彈出警告框。使用document.write()方法將內(nèi)容寫到 HTML 文檔中。使用innerHTML寫入到 HTML 元素。使用console.log()寫入到瀏覽器的控制臺。 邊改邊看有2個控制臺，默認控制臺顯示在HBuilder下方，直接輸出了log和錯誤日志。控制臺顯示了代碼行號，點擊后可直接轉(zhuǎn)到該行代碼，如圖所示Chrome調(diào)試效果。邊改邊看是輕量級的界面調(diào)試工具，如圖1-12，最方便最常用。在HBuilder右上角切換開發(fā)模式，可以選邊改邊看方式，切換模式的快捷鍵是Ctrl

8、+p。進入邊改邊看后，左邊顯示代碼，右邊顯示瀏覽器。邊改邊看有2個控制臺，默認控制臺顯示在HBuilder下方，直接輸出了log和錯誤日志?？刂婆_顯示了代碼行號，點擊后可直接轉(zhuǎn)到該行代碼，如圖所示。四、任務(wù)實施 document.getElementById(demo)，使用 id 屬性來查找id為demo HTML 元素，然后給它的innerHTML屬性重新的賦值為新的字符串，就有了我們看到的切換文字的效果。 Sample Page! function clickMe()document.getElementById(demo).innerHTML = 開始學(xué)習(xí)JavaScript!; 準(zhǔn)備

9、好了就點擊這里! 作為初學(xué)者，體驗JavaScript的編寫方法與技巧，實現(xiàn)文字切換效果，體驗瀏覽水果名詞簡要信息如圖1-1所示，當(dāng)點擊圖片后，顯示水果名詞詳細信息展示，如圖1-2所示。 五、評比檢查學(xué)生完成情況六、總結(jié)文字切換 作業(yè)實現(xiàn)如下效果： 猜數(shù)游戲頁面JavaScript移動開發(fā)課第2單元課程單元教學(xué)設(shè)計（2020 2021學(xué)年第1學(xué)期）單元名稱： 猜數(shù)游戲頁面 所屬系部： 計算機與通信工程學(xué)院 制定人： 鄭麗萍 合作人： 制定時間： 2020.3 *學(xué)院 教務(wù)處 制JavaScript移動開發(fā)課程單元教學(xué)設(shè)計 單元標(biāo)題：猜數(shù)游戲頁面單元教學(xué)學(xué)時4在整體設(shè)計中的位置第2，3次授課班級

10、21web班上課時間每周一1,2節(jié)上課地點計算機實驗室教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)素質(zhì)目標(biāo)1.能夠聲明變量，轉(zhuǎn)換數(shù)據(jù)類型，實現(xiàn)猜數(shù)游戲頁面；內(nèi)置對象Math2.能夠運用流程控制語句和異常處理語句。掌握語法變量、數(shù)據(jù)類型的轉(zhuǎn)換、Math、掌握函數(shù)的定義和調(diào)用。培養(yǎng)學(xué)生利用網(wǎng)絡(luò)學(xué)習(xí)新知識的能力；培養(yǎng)學(xué)生編寫代碼規(guī)范能力訓(xùn)練任務(wù)任務(wù)：猜數(shù)游戲頁面教學(xué)組織：帶領(lǐng)學(xué)生了解課程任務(wù)講解JavaScript語法變量、數(shù)據(jù)類型數(shù)據(jù)類型的轉(zhuǎn)換；內(nèi)置對象Math的應(yīng)用設(shè)計游戲界面及功能的實現(xiàn)本次課使用的外語單詞div+css Javascript if elseFor for/in while do/whilehei

11、ght width Math Math.floor Math.random Prompt parseInt 案例和教學(xué)材料案例：猜數(shù)游戲頁面教學(xué)材料：1.教材名稱：JavaScript移動開發(fā)項目教程（微課版）,鄭麗萍, 人民郵電出版社。2.參考教材名稱：JavaScript與jQuery案例教程,鄭麗萍，出版社：高等教育出版社。 3.教學(xué)多媒體課件，項目源文件。多媒體資料：/course/HCIT-12067068284.儀器與設(shè)備：計算機等單元教學(xué)進度設(shè)計（綱要）步驟教學(xué)內(nèi)容及能力/知識目標(biāo)教師活動學(xué)生活動時間（分鐘）1情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)導(dǎo)入本次課教學(xué)情境學(xué)生了解工作情境22引入

12、任務(wù)：猜數(shù)字交代任務(wù) 學(xué)生接受任務(wù)33知識點講解內(nèi)置對象Math講解常用的輸入輸出語句； 掌握動態(tài)數(shù)字的輸入；10講解Math.random()及Math.random()應(yīng)用；掌握Math.floor（）及Math.random()實現(xiàn)隨機數(shù)字10講解語法變量、數(shù)據(jù)類型；數(shù)據(jù)類型的轉(zhuǎn)換；掌握parseInt數(shù)據(jù)類型的強制轉(zhuǎn)換； 10教師巡視，發(fā)現(xiàn)問題使用javascript 實現(xiàn)隨機數(shù)字，和動態(tài)輸入及隨機數(shù)字154 子頁面設(shè)計設(shè)計子頁面界面 教師演示掌握if else語句的嵌套使用；Do while實現(xiàn)循環(huán)多次猜測10教師巡視，發(fā)現(xiàn)問題制作子頁面界面，實現(xiàn)；猜數(shù)游戲功能頁面205評比檢查學(xué)生

13、完成情況抽查學(xué)生完成情況，講解出現(xiàn)的問題演示自己的界面，修改出現(xiàn)的問題56 總結(jié)猜數(shù)字頁面；重點強調(diào)學(xué)生練習(xí)中出現(xiàn)的問題學(xué)生思考反饋5作業(yè)Javascript常用的循環(huán)語句？ 課后體會一、情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)二、引入任務(wù) ：猜數(shù)字游戲頁面 三、知識點講解JavaScript 可以通過不同的方式來輸出數(shù)據(jù)：使用innerHTML寫入到 HTML 元素。JavaScript 循環(huán)如果您希望一遍又一遍地運行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的。 不同類型的循環(huán)JavaScript 支持不同類型的循環(huán)：for- 循環(huán)代碼塊一定的次數(shù)for/in- 循環(huán)遍歷對象的屬性while

14、- 當(dāng)指定的條件為 true 時循環(huán)指定的代碼塊do/while- 同樣當(dāng)指定的條件為 true 時循環(huán)指定的代碼塊類型轉(zhuǎn)換parseInt (String) 將字符串轉(zhuǎn)換為整型數(shù)字 如: parseInt (“86”)將字符串“86”轉(zhuǎn)換為整型值86parseFloat(String) 將字符串轉(zhuǎn)換為浮點型數(shù)字 如: parseInt (“34.45”)將字符串“34.45”轉(zhuǎn)換為浮點值34.4 JavaScriptMath（算數(shù)）對象Math（算數(shù)）對象的作用是：執(zhí)行常見的算數(shù)任務(wù)。 HYPERLINK /try/try.php?filename=tryjsref_round h roun

15、d()如何使用 round()。 HYPERLINK /try/try.php?filename=tryjsref_random h random()如何使用 random() 來返回 0 到 1 之間的隨機數(shù)。下面的例子使用了 Math 對象的 floor() 方法和 random() 來返回一個介于 0 和 11 之間的隨機數(shù)：document.write(Math.floor(Math.random()*11);四、任務(wù)實現(xiàn) 功能實現(xiàn) var num = Math.floor(Math.random()*100+1); /產(chǎn)生1100之間的隨機整數(shù)do var guess =parseI

16、nt(prompt(下面進行猜數(shù)游戲n請輸入1-100之間的整數(shù)：,); if (guess =num)alert(_ ,恭喜你，猜對了，幸運數(shù)字是：+num);break; else if(guess num) alert(_ ,你猜的數(shù)字大了); go_on =confirm(是否繼續(xù)游戲？); else alert(_ ,你猜的數(shù)字小了); go_on =confirm(是否繼續(xù)游戲？); while(go_on);alert(謝謝參與游戲！);五、評比檢查學(xué)生完成情況六、總結(jié)循環(huán)的應(yīng)用 ，猜數(shù)字頁面的實現(xiàn)，試卷展示頁面JavaScript移動開發(fā)課第4單元課程單元教學(xué)設(shè)計（2020 2

17、021學(xué)年第2學(xué)期）單元名稱： 試卷展示頁面 所屬系部： 計算機與通信工程學(xué)院 制定人： 鄭麗萍 合作人： 制定時間： 2020.3 淮安信息職業(yè)技術(shù)學(xué)院 教務(wù)處 制JavaScript移動開發(fā)課程單元教學(xué)設(shè)計 單元標(biāo)題：試卷展示頁面單元教學(xué)學(xué)時2在整體設(shè)計中的位置第4次授課班級16web班上課時間每周一1,2節(jié)上課地點計算機實驗室教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)素質(zhì)目標(biāo)1.能夠能夠?qū)崿F(xiàn)數(shù)組的新建，數(shù)組元素的插入、刪除、替換，數(shù)組的合并。理解JavaScript數(shù)組的動態(tài)性。2.能夠?qū)崿F(xiàn)數(shù)組的輸出及二維數(shù)組的遍歷。掌握Array對象常用方法和屬性的訪問，了解復(fù)合數(shù)據(jù)類型json培養(yǎng)學(xué)生利用網(wǎng)絡(luò)學(xué)習(xí)新知

18、識的能力；培養(yǎng)學(xué)生編寫代碼規(guī)范能力訓(xùn)練任務(wù)任務(wù)：試卷展示頁面教學(xué)組織：帶領(lǐng)學(xué)生了解課程任務(wù)講解JavaScript二維數(shù)組的應(yīng)用，復(fù)合類型json的應(yīng)用設(shè)計試卷展示界面及功能的實現(xiàn)本次課使用的外語單詞div+css JavaScript if elseFor for/in while do/whileheight width ArrayMath Math.floor Math.random Prompt parseInt 案例和教學(xué)材料案例：試卷展示頁面教學(xué)材料：1.教材名稱：JavaScript移動開發(fā)項目教程（微課版）,鄭麗萍, 人民郵電出版社。2.參考教材名稱：JavaScript與jQ

19、uery案例教程,鄭麗萍，出版社：高等教育出版社。 3.教學(xué)多媒體課件，項目源文件。多媒體資料：/course/HCIT-12067068284.儀器與設(shè)備：計算機等單元教學(xué)進度設(shè)計（綱要）步驟教學(xué)內(nèi)容及能力/知識目標(biāo)教師活動學(xué)生活動時間（分鐘）1情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)導(dǎo)入本次課教學(xué)情境學(xué)生了解工作情境22引入任務(wù)：猜數(shù)字交代任務(wù) 學(xué)生接受任務(wù)33知識點講解內(nèi)置對象Math講解常用的數(shù)組對象；了解提供數(shù)組模型、存儲大量有序的數(shù)據(jù)的Array對象。掌握數(shù)組的新建，理解JavaScript數(shù)組的動態(tài)性。10講解數(shù)組元素的插入、刪除、替換，數(shù)組的合并的相關(guān)應(yīng)用；掌握數(shù)組元素的插入、刪除、替換，

20、數(shù)組的合并。10講解實現(xiàn)數(shù)組的輸出及二維數(shù)組的遍歷；掌握實現(xiàn)數(shù)組的輸出及二維數(shù)組的遍歷； 10教師巡視，發(fā)現(xiàn)問題使用數(shù)組的輸出及二維數(shù)組的遍歷實現(xiàn)試卷展示154 子頁面設(shè)計設(shè)計子頁面界面 教師演示掌握使用數(shù)組的輸出及二維數(shù)組的遍歷實現(xiàn)試卷展示10教師巡視，發(fā)現(xiàn)問題制作子頁面界面，實現(xiàn)試卷展示頁面205評比檢查學(xué)生完成情況抽查學(xué)生完成情況，講解出現(xiàn)的問題演示自己的界面，修改出現(xiàn)的問題56 總結(jié)猜數(shù)字頁面；重點強調(diào)學(xué)生練習(xí)中出現(xiàn)的問題學(xué)生思考反饋5作業(yè)Javascript常用的循環(huán)語句？ 課后體會一、情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)二、引入任務(wù) ：試卷展示頁面 三、知識點講解JavaScript 可以

21、通過不同的方式來輸出數(shù)據(jù)：使用innerHTML寫入到 HTML 元素。JavaScript 循環(huán)如果您希望一遍又一遍地運行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的。 不同類型的循環(huán)JavaScript 支持不同類型的循環(huán)：for- 循環(huán)代碼塊一定的次數(shù)for/in- 循環(huán)遍歷對象的屬性while- 當(dāng)指定的條件為 true 時循環(huán)指定的代碼塊do/while- 同樣當(dāng)指定的條件為 true 時循環(huán)指定的代碼塊表 數(shù)組的常用方法方法名稱意義示例toString()把數(shù)組轉(zhuǎn)換成一個字符串var s=a1.toString() 結(jié)果s為a,b,cjoin(分隔符)把數(shù)組轉(zhuǎn)換成一個用符

22、號連接的字符串var s=a1.join(+) 結(jié)果s為a+b+cshift()將數(shù)組頭部的第一個元素移出var s=a1.shift() 結(jié)果s為aunshift()在數(shù)組的頭部插入一個元素a1.unshift(m,n) 結(jié)果a1中為m,n,a,b,cpop()從數(shù)組尾部刪除一個元素，返回移除的項var s=a1.pop() 結(jié)果s為cpush()把一個元素添加到數(shù)組的尾部，返回修改后數(shù)組的長度var s=a1.push(m,n)結(jié)果a1為a,b,c,m,n同時s為5concat()合并數(shù)組a1.concat(a2) 結(jié)果a1為數(shù)組a,b,c,y,x,zslice()返回數(shù)組的部分var s

23、=a1.slice (1,3) 結(jié)果s為b,csplice()插入、刪除或者替換一個數(shù)組元素a1.splice(1,2)結(jié)果a1為asort()對數(shù)組進行排序操作（默認按字母升序）a2.sort()結(jié)果為 x,y,zreverse()將數(shù)組反向排序a2. reverse()結(jié)果為z,y, x二維數(shù)組二維數(shù)組的定義是在一維數(shù)組基礎(chǔ)上定義的，即當(dāng)一維數(shù)組的元素又都是一維數(shù)組是，就形成了二維數(shù)組，例如：var submenus =new Array();submenus0= ;submenus1= 建設(shè)目標(biāo),建設(shè)建設(shè),培養(yǎng)隊伍;submenus2= 負責(zé)人,隊伍結(jié)構(gòu),任課教師,教學(xué)管理,合作辦學(xué);以

24、上的代碼也可以表示下列等價代碼：var submenus =new Array(new Array(),new Array(建設(shè)目標(biāo),建設(shè)建設(shè),培養(yǎng)隊伍),new Array(負責(zé)人,隊伍結(jié)構(gòu),任課教師,教學(xué)管理,合作辦學(xué));以上代碼還可以這樣寫：var submenus = ,建設(shè)目標(biāo),建設(shè)建設(shè),培養(yǎng)隊伍, 負責(zé)人,隊伍結(jié)構(gòu),任課教師,教學(xué)管理,合作辦學(xué);通過數(shù)組名和下標(biāo)訪問數(shù)組元素。二維數(shù)組的元素必須使用數(shù)組名和兩個下標(biāo)來訪問，第一個為行下標(biāo)，第二個為列下標(biāo)。格式為：二維數(shù)組名行下標(biāo)列下標(biāo) 數(shù)組元素的下標(biāo)不能出界，否則會顯示“undefined”（空值）。二維數(shù)組的數(shù)據(jù)訪問，頁面效果如圖

25、所示。代碼如下：四、任務(wù)實現(xiàn) 功能實現(xiàn) var questions = new Array(); /定義問題數(shù)組，用以存儲題目var questionXz = new Array(); /定義選項數(shù)組，用以存儲題目選項 var answers = new Array(); /定義答案數(shù)組，用以存儲題目答案questions0 = 下列選項中( )可以用來檢索下拉列表框中被選項目的索引號。;questionXz0=A. selectedlndex,B. options,C. length,D. size; answers0=A; /問題的答案questions1 = 在JavaScript中(

26、)方法可以對數(shù)組元素進行排序。; questionXz1=A. add(),B. join(),C. sort(),D. length(); answers1 = C for (var i = 0; i questionXz.length; i+) document.write(questionsi+);document.write(questionXzi0 + );document.write(questionXzi1 + );document.write(questionXzi2 + );document.write(questionXzi3 + ); document.write(答案是

27、+answersi+ ); 案例拓展：增加布局如：放在script標(biāo)簽的前面。JavaScript代碼循環(huán)部分修改如下：tmshow =document.getElementById(tmshow);for (var i = 0; i questions.length; i+) tmshow.innerHTML+=i+1+. +questionsi + +questionXzi0+ +questionXzi1 + +questionXzi2 + +questionXzi3 + 答案是+answersi+ JavaScript代碼循環(huán)部分也可以采用雙層for循環(huán)實現(xiàn)，代碼優(yōu)化如下：for(var

28、 i=0;iquestionXz.length;i+)tmshow.innerHTML+=i+1+.+questionsi+;for(var j=0;jquestionXzi.length;j+) tmshow.innerHTML+=questionXzij+;tmshow.innerHTML+=答案是+answersi+ 五、評比檢查學(xué)生完成情況六、總結(jié)循環(huán)的應(yīng)用 ，試卷展示頁面的實現(xiàn)，倒計時及事件管理JavaScript移動開發(fā)課第5單元課程單元教學(xué)設(shè)計（2021 2022學(xué)年第1學(xué)期）單元名稱： 倒計時及事件管理 所屬系部： 計算機與通信工程學(xué)院 制定人： 鄭麗萍 合作人： 制定時間：

29、2021.3 淮安信息職業(yè)技術(shù)學(xué)院 教務(wù)處 制JavaScript移動開發(fā)課程單元教學(xué)設(shè)計 單元標(biāo)題：倒計時及事件管理單元教學(xué)學(xué)時2在整體設(shè)計中的位置第5次授課班級16web班上課時間每周一1,2節(jié)上課地點計算機實驗室教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)素質(zhì)目標(biāo)1.能夠運用DATE常用的方法2.能夠?qū)崿F(xiàn)日期的顯示；倒計時的實現(xiàn)。掌握內(nèi)置對象DATE的常用方法；掌握MUI的事件綁定、事件取消、事件觸發(fā)、手勢事件培養(yǎng)學(xué)生思考問題、分析問題和解決問題的能力。能力訓(xùn)練任務(wù)任務(wù)：運行的時鐘的顯示；節(jié)日倒計時的實現(xiàn) 教學(xué)組織：帶領(lǐng)學(xué)生了解課程任務(wù)講解內(nèi)置對象DATE的常用方法 實現(xiàn)日期的顯示；倒計時的實現(xiàn)。實現(xiàn)MUI

30、的事件綁定、事件取消、事件觸發(fā)、手勢事件本次課使用的外語單詞 div+css JavaScript DATE getFullYeargetMonth()getDate() getHours( ) getSeconds( ); setTimeout；getTime 案例和教學(xué)材料案例：倒計時及事件管理教學(xué)材料：1. 教材名稱：JavaScript移動開發(fā)項目教程（微課版）,鄭麗萍, 人民郵電出版社。2.參考教材名稱：JavaScript與jQuery案例教程,鄭麗萍，出版社：高等教育出版社。 3.教學(xué)多媒體課件，項目源文件。多媒體資料：/course/HCIT-12067068284.儀器與設(shè)備

31、：計算機等單元教學(xué)進度設(shè)計（綱要）步驟教學(xué)內(nèi)容及能力/知識目標(biāo)教師活動學(xué)生活動時間（分鐘）1情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)導(dǎo)入本次課教學(xué)情境學(xué)生了解工作情境22引入任務(wù)：日期顯示及倒計時交代任務(wù) 學(xué)生接受任務(wù)33知識點講解日期顯示及倒計時講解內(nèi)置對象DATE的常用方法掌握getFullYear()，getMonth()，getDate() getHours()， getSeconds( )，10講解時鐘 的設(shè)定掌握樣式的設(shè)定，10講解JavaScript 實現(xiàn)實現(xiàn)正在運行的時鐘的顯示節(jié)日倒計時的實現(xiàn)。掌握javascript中定時器setTimeout；getTime()換成毫秒數(shù)計算差值實現(xiàn)效

32、果 10教師巡視，發(fā)現(xiàn)問題界面樣式的設(shè)定setTimeout和getTime()的使用154 時鐘頁面設(shè)計設(shè)計時鐘頁面教師演示掌握MUI的事件綁定、事件取消、事件觸發(fā)、手勢事件10教師巡視，發(fā)現(xiàn)問題制作頁面效果205評比檢查學(xué)生完成情況抽查學(xué)生完成情況，講解出現(xiàn)的問題演示自己的界面，修改出現(xiàn)的問題56 總結(jié)日期顯示及倒計時重點強調(diào)學(xué)生練習(xí)中出現(xiàn)的問題學(xué)生思考反饋5作業(yè)點擊按鈕展示試卷及考試倒計時課后體會一、情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)二、引入任務(wù) ：試卷動態(tài)展示界面的設(shè)計 三、知識點講解date對象的使用實現(xiàn)正在運行的時鐘的顯示；節(jié)日倒計時的實現(xiàn)內(nèi)置對象DATE內(nèi)置對象DATE的常用方法get

33、FullYear()getMonth()getDate() getHours( ) getSeconds( ); 定時器setTimeout；getTime()換成毫秒數(shù)計算差值;使用 getFullYear() 獲取年份。getTime() 返回從 1970 年 1 月 1 日至今的毫秒數(shù)。如何使用 setFullYear() 設(shè)置具體的日期。如何使用 getDay() 和數(shù)組來顯示星期，而不僅僅是數(shù)字。創(chuàng)建日期Date 對象用于處理日期和時間?？梢酝ㄟ^ new 關(guān)鍵詞來定義 Date 對象。以下代碼定義了名為 myDate 的 Date 對象：有四種方式初始化日期:new Date() /

34、 當(dāng)前日期和時間new Date(milliseconds) /返回從 1970 年 1 月 1 日至今的毫秒數(shù)new Date(dateString)new Date(year, month, day, hours, minutes, seconds, milliseconds) 實例化一個日期的一些例子：var today = new Date()var d1 = new Date(October 13, 1975 11:13:00)var d2 = new Date(79,5,24)var d3 = new Date(79,5,24,11,33,0)設(shè)置日期通過使用針對日期對象的方法，我

35、們可以很容易地對日期進行操作。在下面的例子中，我們?yōu)槿掌趯ο笤O(shè)置了一個特定的日期 (2010 年 1 月 14 日)：var myDate=new Date();myDate.setFullYear(2010,0,14);在下面的例子中，我們將日期對象設(shè)置為 5 天后的日期：var myDate=new Date();myDate.setDate(myDate.getDate()+5);注意:如果增加天數(shù)會改變月份或者年份，那么日期對象會自動完成這種轉(zhuǎn)換。 定時器函數(shù)JavaScript定時器有以下兩個方法：setInterval() ：按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。方法會

36、不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。setInterval()函數(shù)用法如下：setInterval() (調(diào)用函數(shù),周期性執(zhí)行或調(diào)用code之間的時間間隔)，function hello() alert(hello); 重復(fù)執(zhí)行某個方法： var t1= window.setInterval(hello(),3000); 去掉定時器的方法 window.clearInterval(t1); setTimeout() ：在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。 setTimeOut()函數(shù)用法如：setTimeOut(調(diào)用函數(shù),在執(zhí)行代碼前需等待的毫秒數(shù)。)只

37、執(zhí)行一次，3 秒后顯示一個彈窗:var t=setTimeout(function()alert(Hello),3000) 實現(xiàn)循環(huán)調(diào)用需要把setTimeout定時器函數(shù)寫在被調(diào)用函數(shù)里面。如下：function show() alert(Hello)；var myTime = setTimeout(show(),1000);關(guān)閉定時器的用法：clearTimeOut(myTime);其中，myTime為setTimeOut()函數(shù)返回的定時器對象。動態(tài)改變元素樣式style對象代表一個單獨的樣式聲明?？蓮膽?yīng)用樣式的文檔或元素訪問style對象。使用 style對象屬性的語法：documen

38、t.getElementById(id).perty=值設(shè)置一個已有元素的style屬性如下：document.getElementById(myH1).style.color = red; /改變元素內(nèi)字體的顏色為紅色 按鈕mui默認按鈕為灰色，另外還提供了藍色（blue）、綠色(green)、黃色(yellow)、紅色(red)、紫色(purple)五種色系 的按鈕，五種色系對應(yīng)五種場景，分別為primary、success、warning、danger、royal；使用.mui-btn類即可生成一個 默認按鈕，繼續(xù)添加.mui-btn-顏色值或.mui-btn-場景可生成對應(yīng)色系的按鈕，

39、例如：通過.mui-btn-blue或.mui-btn- primary均可生成藍色按鈕；普通按鈕在button節(jié)點上增加.mui-btn類，即可生成默認按鈕；若需要其他顏色的按鈕，則繼續(xù)增加對應(yīng)class即可，比如.mui-btn-blue即可變成藍色按鈕默認藍色綠色黃色紅色紫色若希望無底色、有邊框的按鈕，僅需增加.mui-btn-outlined類即可，代碼如下：默認藍色綠色黃色紅色紫色 MUI - 事件管理及自定義事件1、事件綁定可以使用addEventListener()方法監(jiān)聽某個特定元素上的事件外， 也可以使用.on()方法實現(xiàn)批量元素的事件綁定。addEventListener示

40、例（單個元素事件綁定）：mui.plusReady(function() document.getElementById(but1).addEventListener(tap,function()alert(1); ););on()示例，適用于批量元素綁定。演示代碼： 小明 小花 小萌 mui.plusReady(function() mui(#list1).on(tap, li, function() var thisHtml = this.innerHTML; alert(thisHtml); ););2、事件取消使用on()方法綁定事件后，若希望取消綁定，則可以使用off()方法。mui

41、(#list1).off(tap, li);3、事件觸發(fā)使用mui.trigger()方法可以動態(tài)觸發(fā)特定DOM元素上的事件。var btn = document.getElementById(submit);/監(jiān)聽點擊事件btn.addEventListener(tap,function () console.log(tap event trigger););/觸發(fā)submit按鈕的點擊事件mui.trigger(btn,tap);4、手勢事件在開發(fā)移動端的應(yīng)用時，會用到很多的手勢操作，比如滑動、長按等，為了方便開放者快速集成這些手勢，mui內(nèi)置了常用的手勢事件，目前支持的手勢事件見如下列表

42、：點擊 tap 單擊屏幕doubletap 雙擊屏幕長按 longtap 長按屏幕hold 按住屏幕release 離開屏幕滑動 swipeleft 向左滑動swiperight 向右滑動swipeup 向上滑動swipedown 向下滑動拖動 dragstart 開始拖動drag 拖動中dragend 拖動結(jié)束5、自定義事件在App開發(fā)中，經(jīng)常會遇到頁面間傳值的需求，比如從新聞列表頁進入詳情頁，需要將新聞id傳遞過去； Html5Plus規(guī)范設(shè)計了evalJS方法來解決該問題； 但evalJS方法僅接收字符串參數(shù)，涉及多個參數(shù)時，需要開發(fā)人員手動拼字符串； 為簡化開發(fā)，mui框架在evalJ

43、S方法的基礎(chǔ)上，封裝了自定義事件，通過自定義事件，用戶可以輕松實現(xiàn)多webview間數(shù)據(jù)傳遞。添加自定義事件監(jiān)聽操作和標(biāo)準(zhǔn)js事件監(jiān)聽類似，可直接通過window對象添加，如下：window.addEventListener(customEvent,function(event)mui.toast(ok););6、觸發(fā)自定義事件通過mui.fire()方法可觸發(fā)目標(biāo)窗口的自定義事件：參數(shù)targetType: WebviewObject需傳值的目標(biāo)webvieweventType: String自定義事件名稱dataType: JSONjson格式的數(shù)據(jù)自定義事件完整例子主頁面: 新聞1 新聞

44、2 新聞3 mui.init();mui.plusReady(function() var detailPage = mui.preload(url:sub.html,id:sub.html); mui(#list1).on(tap, li, function(e) mui.fire(detailPage,newsId,id:this.getAttribute(id); mui.openWindow(id:sub.html); ););子頁面mui.plusReady(function() window.addEventListener(newsId,function(event) conso

45、le.log(event.detail.id); ););四、頁面 設(shè)計設(shè)計 界面及功能實現(xiàn) 動態(tài)時鐘的實現(xiàn)。首先添加一個div，用來顯示動態(tài)時鐘，設(shè)置屬性id，代碼如下： 然后編寫一個樣式表設(shè)置div的樣式。#clockwidth:400px; border:5px solid #F00; padding: 15px 10px; background:#0F0;margin: auto;text-align: center; 編寫時鐘顯示的日期對象代碼。function sysTime() var now=new Date(); /獲得當(dāng)前時間var year=now.getFullYear

46、(); /獲得年份 var month=now.getMonth()+1; /獲得月份var day=now.getDay(); /獲得星期幾，其值介于 0 至 6 之間var date=now.getDate(); / 獲得月份中的天數(shù)var hour=now.getHours(); /獲得小時、分鐘、秒 var minute=now.getMinutes();var second=now.getSeconds();var week_Array=new Array(星期日,星期一,星期二,星期三,星期四,星期五,星期六);var week=week_Arrayday;if(minute10)

47、 /如果分鐘只有1位，補0顯示minute=0+minute; if(second10) /如果秒數(shù)只有1位，補0顯示second=0+second; var time=year+年+month+月+date+日+hour+時+minute+分+second+秒+week;document.getElementById(clock).innerHTML=當(dāng)前系統(tǒng)時間：+time;window.onload=function()/頁面載入完畢后執(zhí)行/*設(shè)置定時器每隔1秒（1000毫秒），調(diào)用函數(shù)sysTime()執(zhí)行，刷新時鐘顯示*/ window.setInterval(sysTime(),1

48、000); 在瀏覽器中查看頁面時，輸出結(jié)果如下圖所示。a ) b)圖 動態(tài)時鐘效果a)運行時刻的時間顯示 b)運行一段時間和后的效果 考試倒計時的實現(xiàn)。首先添加一個div，用來顯示動態(tài)倒計時 ，設(shè)置屬性id，代碼如下：然后編寫一個樣式表設(shè)置div的樣式。#timeheight: 100px;background: url(img/jz3.gif) no-repeat ;padding: 20px 126px;color: #0000FF;font-size: 28px;編寫時鐘顯示的日期對象代碼。var time=document.getElementById(time);var ks=new

49、 Date(); /獲得當(dāng)前時間，設(shè)為考試開始時間var msks = ks.getTime();/換成毫秒數(shù)var js=msks+60*60*1000; /考試結(jié)束時間的毫秒數(shù)function jsover() var syfz=Math.floor(js-new Date().getTime()/ (1000 * 60 ); /計算剩余的分鐘數(shù)var sym=Math.floor(js-new Date().getTime()-syfz*1000 * 60 )/ (1000 ); /計算剩余的秒數(shù) if(syfz5) time.style.background=url(img/jz1.g

50、if) no-repeat;/更換為緊張的圖片背景 if(syfz3) time.style.background=url(img/jz2.gif) no-repeat;/更換為緊張流汗的圖片背景if(syfz0) /Grade();/時間到自動提交試卷。清除定時器 time.innerHTML=; clearInterval(timeID); elsetime.innerHTML=離考試結(jié)束還剩+syfz+分+sym+秒; /div中顯示當(dāng)前的剩余時間 timeID= setInterval(jsover(),1000);/*設(shè)置定時器每隔1秒（1000毫秒），調(diào)用函數(shù)jsover()執(zhí)行，

51、刷新顯示*/ 在瀏覽器中查看頁面時，輸出結(jié)果如下圖所示。圖 距離結(jié)束時間較長時效果圖 距離結(jié)束時間較短時效果圖 臨近結(jié)束時間時效果 移動版效果如下： 圖 初始效果 圖 點擊按鈕后的效果 var time=document.getElementById(time);var ks=new Date();var msks=ks.getTime();var js=msks+60*2*1000;function jsover()var syfz=Math.floor(js-new Date().getTime()/(1000*60);/計算剩余分鐘數(shù)var sym=Math.floor(js-new D

52、ate().getTime()-syfz*1000*60)/(1000);/計算剩余的秒數(shù)if(syfz0)Grade(); elsetime.innerHTML=離考試結(jié)束還剩+syfz+分+sym+秒; mui.plusReady(function() mui(#bt).on(tap, function() jsover(); ););五、評比檢查學(xué)生完成情況六、總結(jié)日期對象的應(yīng)用，MUI的事件綁定、事件取消、事件觸發(fā)、手勢事件用戶登陸及密碼修改JavaScript及移動開發(fā)課第6單元課程單元教學(xué)設(shè)計（2021 2022學(xué)年第1學(xué)期）單元名稱：用戶登陸及密碼修改界面設(shè)計所屬系部： 計算機與

53、通信工程學(xué)院 制定人： 鄭麗萍 合作人： 制定時間： 2018.3 淮安信息職業(yè)技術(shù)學(xué)院 教務(wù)處 制JavaScript移動開發(fā)課程單元教學(xué)設(shè)計 單元標(biāo)題：用戶登陸及密碼修改界面設(shè)計單元教學(xué)學(xué)時2在整體設(shè)計中的位置第6次授課班級16web班上課時間每周一1,2節(jié)上課地點計算機實驗室教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)素質(zhì)目標(biāo)1.能夠設(shè)計用戶登陸及密碼修改界面。2.能使用JavaScript實現(xiàn)對話框形式布局，居中效果；鞏固學(xué)習(xí)HTML和CSS的使用方法，掌握JavaScript元素樣式的訪問培養(yǎng)學(xué)生項目開發(fā)的能力；培養(yǎng)學(xué)生色彩搭配能力能力訓(xùn)練任務(wù)任務(wù)：用戶登陸及密碼修改界面的設(shè)計教學(xué)組織：帶領(lǐng)學(xué)生了解課程

54、任務(wù)講解JavaScript訪問元素的樣式，MUI框架布局頁面設(shè)計用戶登陸及密碼修改界面本次課使用的外語單詞css3 div+css JavaScript document getElementByIdmenu style displaymargin position background background-repeat 案例和教學(xué)材料案例：用戶登陸及密碼修改界面的設(shè)計教學(xué)材料：1. 教材名稱：JavaScript移動開發(fā)項目教程（微課版）,鄭麗萍, 人民郵電出版社。2.參考教材名稱：JavaScript與jQuery案例教程,鄭麗萍，出版社：高等教育出版社。 3.教學(xué)多媒體課件，項目源文

55、件。多媒體資料：/course/HCIT-12067068284.儀器與設(shè)備：計算機等單元教學(xué)進度設(shè)計（綱要）步驟教學(xué)內(nèi)容及能力/知識目標(biāo)教師活動學(xué)生活動時間（分鐘）1情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)導(dǎo)入本次課教學(xué)情境學(xué)生了解工作情境22引入任務(wù)：用戶登陸及密碼修改界面的設(shè)計交代任務(wù) 學(xué)生接受任務(wù)33知識點講解用戶登陸及密碼修改界面的設(shè)計講解界面結(jié)構(gòu)分析掌握界面結(jié)構(gòu)的主要組成部分，標(biāo)題背景色的設(shè)定10講解樣式的設(shè)定掌握樣式的設(shè)定，10講解JavaScript 實現(xiàn)功能掌握JavaScript訪問元素的樣式 10教師巡視，發(fā)現(xiàn)問題標(biāo)題背景色的設(shè)定，使用JavaScript獲取視口尺寸154 界面設(shè)計

56、設(shè)計界面教師演示掌握用戶登陸及密碼修改界面的設(shè)計制作的步驟和方法10教師巡視，發(fā)現(xiàn)問題制作用戶登陸及密碼修改界面，制作遮罩效果205評比檢查學(xué)生完成情況抽查學(xué)生完成情況，講解出現(xiàn)的問題演示自己的界面，修改出現(xiàn)的問題56 總結(jié)用戶登陸及密碼修改界面的設(shè)計重點強調(diào)學(xué)生練習(xí)中出現(xiàn)的問題學(xué)生思考反饋5作業(yè)JavaScript如何改變元素的樣式？課后體會一、情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)二、引入任務(wù) ：用戶登陸及密碼修改界面的設(shè)計三、知識點講解頁面設(shè)計的代碼設(shè)計如下： 用 戶 登 錄 用戶帳號：*用戶密碼：* 請選擇用戶類別：學(xué) 生 教 師 密碼修改的效果，增加元素如：用戶密碼修改舊 密 碼 ：新 密 碼

57、 ：確認密碼：確 認 使用javascript訪問元素的樣式document.getElementById(menu).style.color = green; repass.styledisplay = block; mui.init(); 登錄 賬號 !- 密碼 !- 學(xué)生 教師 !-自動登錄- 登錄注冊賬號 | 忘記密碼 !- 確認 取消 - 五、評比檢查學(xué)生完成情況 六、總結(jié)用戶登陸及密碼修改界面設(shè)計 用戶登陸及密碼修改JavaScript移動開發(fā)課第7單元課程單元教學(xué)設(shè)計（2021 2022學(xué)年第1學(xué)期）單元名稱：用戶登陸及密碼修改的驗證所屬系部： 計算機與通信工程學(xué)院 制定人： 鄭

58、麗萍 合作人： 制定時間： 2021.3 淮安信息職業(yè)技術(shù)學(xué)院 教務(wù)處 制JavaScript移動開發(fā)課程單元教學(xué)設(shè)計 單元標(biāo)題：用戶登陸及密碼修改簡單驗證單元教學(xué)學(xué)時2在整體設(shè)計中的位置第7次授課班級16web班上課時間每周一1,2節(jié)上課地點計算機實驗室教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)素質(zhì)目標(biāo)1.能夠?qū)崿F(xiàn)用戶登陸及密碼修改表單的簡單驗證 。掌握字符串對象的常用屬性和方法 培養(yǎng)學(xué)生思考問題、分析問題和解決問題的能力。能力訓(xùn)練任務(wù)任務(wù)：用戶登陸及密碼修改界面的簡單驗證教學(xué)組織：帶領(lǐng)學(xué)生了解課程任務(wù)講解javascript字符串對象的應(yīng)用，實現(xiàn)表單的簡單驗證設(shè)計實現(xiàn)用戶登陸及密碼修改的簡單驗證本次課使用的

59、外語單詞css3 div+css JavaScript document getElementByIdmenu style displaymargin position background background-repeat 案例和教學(xué)材料案例：用戶登陸及密碼修改界面的簡單驗證教學(xué)材料：1. 教材名稱：JavaScript移動開發(fā)項目教程（微課版）,鄭麗萍, 人民郵電出版社。2.參考教材名稱：JavaScript與jQuery案例教程,鄭麗萍，出版社：高等教育出版社。 3.教學(xué)多媒體課件，項目源文件。多媒體資料：/course/HCIT-12067068284.儀器與設(shè)備：計算機等單元教學(xué)進

60、度設(shè)計（綱要）步驟教學(xué)內(nèi)容及能力/知識目標(biāo)教師活動學(xué)生活動時間（分鐘）1情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)導(dǎo)入本次課教學(xué)情境學(xué)生了解工作情境22引入任務(wù)：用戶登陸及密碼修改界面的簡單驗證交代任務(wù) 學(xué)生接受任務(wù)33知識點講解用戶登陸及密碼修改界面的簡單驗證講解字符串對象的常用屬性 掌握字符串對象的常用屬性10講解字符串對象的常用方法掌握字符串對象的常用方法10講解JavaScript實現(xiàn)功能掌握表單的簡單驗證 10教師巡視，發(fā)現(xiàn)問題實現(xiàn)表單的簡單驗證154 表單驗證用戶登陸及密碼修改界面的簡單驗證教師演示掌握用戶登陸及密碼修改界面的簡單驗證的步驟和方法10教師巡視，發(fā)現(xiàn)問題用戶登陸及密碼修改界面的簡單