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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26、)方法可以對數組元素進行排序。; 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標簽的前面。JavaScript代碼循環部分修改如下：tmshow =document.getElementById(tmshow);for (var i = 0; i questions.length; i+) tmshow.innerHTML+=i+1+. +questionsi + +questionXzi0+ +questionXzi1 + +questionXzi2 + +questionXzi3 + 答案是+answersi+ JavaScript代碼循環部分也可以采用雙層for循環實現，代碼優化如下：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+ 五、評比檢查學生完成情況六、總結循環的應用 ，試卷展示頁面的實現，倒計時及事件管理JavaScript移動開發課第5單元課程單元教學設計（2021 2022學年第1學期）單元名稱： 倒計時及事件管理 所屬系部： 計算機與通信工程學院 制定人： 鄭麗萍 合作人： 制定時間：

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

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

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

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

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

34、 當前日期和時間new Date(milliseconds) /返回從 1970 年 1 月 1 日至今的毫秒數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)設置日期通過使用針對日期對象的方法，我

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

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

37、執行一次，3 秒后顯示一個彈窗:var t=setTimeout(function()alert(Hello),3000) 實現循環調用需要把setTimeout定時器函數寫在被調用函數里面。如下：function show() alert(Hello)；var myTime = setTimeout(show(),1000);關閉定時器的用法：clearTimeOut(myTime);其中，myTime為setTimeOut()函數返回的定時器對象。動態改變元素樣式style對象代表一個單獨的樣式聲明。可從應用樣式的文檔或元素訪問style對象。使用 style對象屬性的語法：documen

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

39、例如：通過.mui-btn-blue或.mui-btn- primary均可生成藍色按鈕；普通按鈕在button節點上增加.mui-btn類，即可生成默認按鈕；若需要其他顏色的按鈕，則繼續增加對應class即可，比如.mui-btn-blue即可變成藍色按鈕默認藍色綠色黃色紅色紫色若希望無底色、有邊框的按鈕，僅需增加.mui-btn-outlined類即可，代碼如下：默認藍色綠色黃色紅色紫色 MUI - 事件管理及自定義事件1、事件綁定可以使用addEventListener()方法監聽某個特定元素上的事件外， 也可以使用.on()方法實現批量元素的事件綁定。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、事件觸發使用mui.trigger()方法可以動態觸發特定DOM元素上的事件。var btn = document.getElementById(submit);/監聽點擊事件btn.addEventListener(tap,function () console.log(tap event trigger););/觸發submit按鈕的點擊事件mui.trigger(btn,tap);4、手勢事件在開發移動端的應用時，會用到很多的手勢操作，比如滑動、長按等，為了方便開放者快速集成這些手勢，mui內置了常用的手勢事件，目前支持的手勢事件見如下列表

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

43、S方法的基礎上，封裝了自定義事件，通過自定義事件，用戶可以輕松實現多webview間數據傳遞。添加自定義事件監聽操作和標準js事件監聽類似，可直接通過window對象添加，如下：window.addEventListener(customEvent,function(event)mui.toast(ok););6、觸發自定義事件通過mui.fire()方法可觸發目標窗口的自定義事件：參數targetType: WebviewObject需傳值的目標webvieweventType: String自定義事件名稱dataType: JSONjson格式的數據自定義事件完整例子主頁面: 新聞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); ););四、頁面 設計設計 界面及功能實現 動態時鐘的實現。首先添加一個div，用來顯示動態時鐘，設置屬性id，代碼如下： 然后編寫一個樣式表設置div的樣式。#clockwidth:400px; border:5px solid #F00; padding: 15px 10px; background:#0F0;margin: auto;text-align: center; 編寫時鐘顯示的日期對象代碼。function sysTime() var now=new Date(); /獲得當前時間var year=now.getFullYear

46、(); /獲得年份 var month=now.getMonth()+1; /獲得月份var day=now.getDay(); /獲得星期幾，其值介于 0 至 6 之間var date=now.getDate(); / 獲得月份中的天數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) /如果秒數只有1位，補0顯示second=0+second; var time=year+年+month+月+date+日+hour+時+minute+分+second+秒+week;document.getElementById(clock).innerHTML=當前系統時間：+time;window.onload=function()/頁面載入完畢后執行/*設置定時器每隔1秒（1000毫秒），調用函數sysTime()執行，刷新時鐘顯示*/ window.setInterval(sysTime(),1

48、000); 在瀏覽器中查看頁面時，輸出結果如下圖所示。a ) b)圖 動態時鐘效果a)運行時刻的時間顯示 b)運行一段時間和后的效果 考試倒計時的實現。首先添加一個div，用來顯示動態倒計時 ，設置屬性id，代碼如下：然后編寫一個樣式表設置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(); /獲得當前時間，設為考試開始時間var msks = ks.getTime();/換成毫秒數var js=msks+60*60*1000; /考試結束時間的毫秒數function jsover() var syfz=Math.floor(js-new Date().getTime()/ (1000 * 60 ); /計算剩余的分鐘數var sym=Math.floor(js-new Date().getTime()-syfz*1000 * 60 )/ (1000 ); /計算剩余的秒數 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=離考試結束還剩+syfz+分+sym+秒; /div中顯示當前的剩余時間 timeID= setInterval(jsover(),1000);/*設置定時器每隔1秒（1000毫秒），調用函數jsover()執行，

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

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

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

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

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

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

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

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

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

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