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

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

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

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 實(shí)踐JavaScript初探-文字的切換教師演示掌握常用的輸出語句方法10教師巡視，發(fā)現(xiàn)問題常用的輸出語句練習(xí)205評(píng)比檢查學(xué)生完成情況抽查學(xué)生完成情況，講解出現(xiàn)的問題演示自己的界面，

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

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

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

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

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

10、21web班上課時(shí)間每周一1,2節(jié)上課地點(diǎn)計(jì)算機(jī)實(shí)驗(yàn)室教學(xué)目標(biāo)能力目標(biāo)知識(shí)目標(biāo)素質(zhì)目標(biāo)1.能夠聲明變量，轉(zhuǎn)換數(shù)據(jù)類型，實(shí)現(xiàn)猜數(shù)游戲頁面；內(nèi)置對(duì)象Math2.能夠運(yùn)用流程控制語句和異常處理語句。掌握語法變量、數(shù)據(jù)類型的轉(zhuǎn)換、Math、掌握函數(shù)的定義和調(diào)用。培養(yǎng)學(xué)生利用網(wǎng)絡(luò)學(xué)習(xí)新知識(shí)的能力；培養(yǎng)學(xué)生編寫代碼規(guī)范能力訓(xùn)練任務(wù)任務(wù)：猜數(shù)游戲頁面教學(xué)組織：帶領(lǐng)學(xué)生了解課程任務(wù)講解JavaScript語法變量、數(shù)據(jù)類型數(shù)據(jù)類型的轉(zhuǎn)換；內(nèi)置對(duì)象Math的應(yīng)用設(shè)計(jì)游戲界面及功能的實(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移動(dòng)開發(fā)項(xiàng)目教程（微課版）,鄭麗萍, 人民郵電出版社。2.參考教材名稱：JavaScript與jQuery案例教程,鄭麗萍，出版社：高等教育出版社。 3.教學(xué)多媒體課件，項(xiàng)目源文件。多媒體資料：/course/HCIT-12067068284.儀器與設(shè)備：計(jì)算機(jī)等單元教學(xué)進(jìn)度設(shè)計(jì)（綱要）步驟教學(xué)內(nèi)容及能力/知識(shí)目標(biāo)教師活動(dòng)學(xué)生活動(dòng)時(shí)間（分鐘）1情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)導(dǎo)入本次課教學(xué)情境學(xué)生了解工作情境22引入

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

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

14、- 當(dāng)指定的條件為 true 時(shí)循環(huán)指定的代碼塊do/while- 同樣當(dāng)指定的條件為 true 時(shí)循環(huán)指定的代碼塊類型轉(zhuǎn)換parseInt (String) 將字符串轉(zhuǎn)換為整型數(shù)字 如: parseInt (“86”)將字符串“86”轉(zhuǎn)換為整型值86parseFloat(String) 將字符串轉(zhuǎn)換為浮點(diǎn)型數(shù)字 如: parseInt (“34.45”)將字符串“34.45”轉(zhuǎn)換為浮點(diǎn)值34.4 JavaScriptMath（算數(shù)）對(duì)象Math（算數(shù)）對(duì)象的作用是：執(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 之間的隨機(jī)數(shù)。下面的例子使用了 Math 對(duì)象的 floor() 方法和 random() 來返回一個(gè)介于 0 和 11 之間的隨機(jī)數(shù)：document.write(Math.floor(Math.random()*11);四、任務(wù)實(shí)現(xiàn) 功能實(shí)現(xiàn) var num = Math.floor(Math.random()*100+1); /產(chǎn)生1100之間的隨機(jī)整數(shù)do var guess =parseI

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

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

18、識(shí)的能力；培養(yǎng)學(xué)生編寫代碼規(guī)范能力訓(xùn)練任務(wù)任務(wù)：試卷展示頁面教學(xué)組織：帶領(lǐng)學(xué)生了解課程任務(wù)講解JavaScript二維數(shù)組的應(yīng)用，復(fù)合類型json的應(yīng)用設(shè)計(jì)試卷展示界面及功能的實(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移動(dòng)開發(fā)項(xiàng)目教程（微課版）,鄭麗萍, 人民郵電出版社。2.參考教材名稱：JavaScript與jQ

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

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

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

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

23、=a1.slice (1,3) 結(jié)果s為b,csplice()插入、刪除或者替換一個(gè)數(shù)組元素a1.splice(1,2)結(jié)果a1為asort()對(duì)數(shù)組進(jìn)行排序操作（默認(rèn)按字母升序）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)隊(duì)伍;submenus2= 負(fù)責(zé)人,隊(duì)伍結(jié)構(gòu),任課教師,教學(xué)管理,合作辦學(xué);以

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

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

26、)方法可以對(duì)數(shù)組元素進(jìn)行排序。; 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)實(shí)現(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+ 五、評(píng)比檢查學(xué)生完成情況六、總結(jié)循環(huán)的應(yīng)用 ，試卷展示頁面的實(shí)現(xiàn)，倒計(jì)時(shí)及事件管理JavaScript移動(dòng)開發(fā)課第5單元課程單元教學(xué)設(shè)計(jì)（2021 2022學(xué)年第1學(xué)期）單元名稱： 倒計(jì)時(shí)及事件管理 所屬系部： 計(jì)算機(jī)與通信工程學(xué)院 制定人： 鄭麗萍 合作人： 制定時(shí)間：

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

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

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

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

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

34、 當(dāng)前日期和時(shí)間new Date(milliseconds) /返回從 1970 年 1 月 1 日至今的毫秒數(shù)new Date(dateString)new Date(year, month, day, hours, minutes, seconds, milliseconds) 實(shí)例化一個(gè)日期的一些例子：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è)置日期通過使用針對(duì)日期對(duì)象的方法，我

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

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

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

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

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

40、例（單個(gè)元素事件綁定）：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()方法可以動(dòng)態(tài)觸發(fā)特定DOM元素上的事件。var btn = document.getElementById(submit);/監(jiān)聽點(diǎn)擊事件btn.addEventListener(tap,function () console.log(tap event trigger););/觸發(fā)submit按鈕的點(diǎn)擊事件mui.trigger(btn,tap);4、手勢(shì)事件在開發(fā)移動(dòng)端的應(yīng)用時(shí)，會(huì)用到很多的手勢(shì)操作，比如滑動(dòng)、長(zhǎng)按等，為了方便開放者快速集成這些手勢(shì)，mui內(nèi)置了常用的手勢(shì)事件，目前支持的手勢(shì)事件見如下列表

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

43、S方法的基礎(chǔ)上，封裝了自定義事件，通過自定義事件，用戶可以輕松實(shí)現(xiàn)多webview間數(shù)據(jù)傳遞。添加自定義事件監(jiān)聽操作和標(biāo)準(zhǔn)js事件監(jiān)聽類似，可直接通過window對(duì)象添加，如下：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è)計(jì)設(shè)計(jì) 界面及功能實(shí)現(xiàn) 動(dòng)態(tài)時(shí)鐘的實(shí)現(xiàn)。首先添加一個(gè)div，用來顯示動(dòng)態(tài)時(shí)鐘，設(shè)置屬性id，代碼如下： 然后編寫一個(gè)樣式表設(shè)置div的樣式。#clockwidth:400px; border:5px solid #F00; padding: 15px 10px; background:#0F0;margin: auto;text-align: center; 編寫時(shí)鐘顯示的日期對(duì)象代碼。function sysTime() var now=new Date(); /獲得當(dāng)前時(shí)間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(); /獲得小時(shí)、分鐘、秒 var minute=now.getMinutes();var second=now.getSeconds();var week_Array=new Array(星期日,星期一,星期二,星期三,星期四,星期五,星期六);var week=week_Arrayday;if(minute10)

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

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

49、 Date(); /獲得當(dāng)前時(shí)間，設(shè)為考試開始時(shí)間var msks = ks.getTime();/換成毫秒數(shù)var js=msks+60*60*1000; /考試結(jié)束時(shí)間的毫秒數(shù)function jsover() var syfz=Math.floor(js-new Date().getTime()/ (1000 * 60 ); /計(jì)算剩余的分鐘數(shù)var sym=Math.floor(js-new Date().getTime()-syfz*1000 * 60 )/ (1000 ); /計(jì)算剩余的秒數(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();/時(shí)間到自動(dòng)提交試卷。清除定時(shí)器 time.innerHTML=; clearInterval(timeID); elsetime.innerHTML=離考試結(jié)束還剩+syfz+分+sym+秒; /div中顯示當(dāng)前的剩余時(shí)間 timeID= setInterval(jsover(),1000);/*設(shè)置定時(shí)器每隔1秒（1000毫秒），調(diào)用函數(shù)jsover()執(zhí)行，

51、刷新顯示*/ 在瀏覽器中查看頁面時(shí)，輸出結(jié)果如下圖所示。圖 距離結(jié)束時(shí)間較長(zhǎng)時(shí)效果圖 距離結(jié)束時(shí)間較短時(shí)效果圖 臨近結(jié)束時(shí)間時(shí)效果 移動(dòng)版效果如下： 圖 初始效果 圖 點(diǎn)擊按鈕后的效果 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);/計(jì)算剩余分鐘數(shù)var sym=Math.floor(js-new D

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

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

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

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

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

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

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

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

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