微信小程序開(kāi)發(fā) 教案 3.10 教案-隨機(jī)數(shù)求和

1、第3章 微信小程序概述任務(wù)3.10隨機(jī)數(shù)求和課時(shí)內(nèi)容隨機(jī)數(shù)求和課時(shí)1教學(xué)目標(biāo)掌握J(rèn)avaScript中的Array和Number對(duì)象中的相關(guān)函數(shù)教學(xué)重點(diǎn)JavaScript中的Array和Number對(duì)象中的相關(guān)函數(shù)教學(xué)難點(diǎn)JavaScript中的Array和Number對(duì)象中的相關(guān)函數(shù)教學(xué)設(shè)計(jì).教學(xué)思路：通過(guò)實(shí)訓(xùn)任務(wù)隨機(jī)數(shù)求和的制作來(lái)讓學(xué)生掌握J(rèn)avaScript中的Array和 Number對(duì)象中的相關(guān)函數(shù)。.教學(xué)手段：多媒體+計(jì)算機(jī).教學(xué)資料：教材、多媒體課件教學(xué)內(nèi)容一、任務(wù)描述設(shè)計(jì)一個(gè)小程序，運(yùn)行后產(chǎn)生 組100以?xún)?nèi)的五個(gè)隨機(jī)數(shù)，要求保留2位小數(shù)，顯示出這隨機(jī) 產(chǎn)生五個(gè)數(shù)的和；當(dāng)點(diǎn)擊“

2、求隨機(jī)數(shù)的和”按鈕時(shí)，首先產(chǎn)生一組新的五個(gè)隨機(jī)數(shù)，并計(jì)算顯示出 這組隨機(jī)數(shù)的和。二、導(dǎo)入知識(shí)點(diǎn)本任務(wù)用到了 JavaScript中的Array和Number對(duì)象中的相關(guān)函數(shù)。JavaScript中的對(duì)象包括：字 符串、數(shù)字、數(shù)組、日期，等等。對(duì)象是擁有屬性和方法的數(shù)據(jù)，屬性是靜態(tài)數(shù)據(jù)，方法是能夠在 對(duì)象上執(zhí)行的動(dòng)作，即動(dòng)態(tài)數(shù)據(jù)。l.JavaScript 中的 Array 對(duì)象用于在單個(gè)的變量中存儲(chǔ)多個(gè)值，其常用屬性和方法如表3.6所示。表3.6 Array對(duì)象常用屬性和方法屬性和方法說(shuō)明length設(shè)置或返回?cái)?shù)組中元素的數(shù)目concat()連接兩個(gè)或更多的數(shù)組，并返回結(jié)果join()把數(shù)組的所

3、有元素放入一個(gè)字符串。元素通過(guò)指定的分隔符進(jìn)行分隔POP()刪除并返回?cái)?shù)組的最后一個(gè)元素push()向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度reverse()反向倒序數(shù)組中的元素shift()刪除并返回?cái)?shù)組的第個(gè)元素slice()從某個(gè)已有的數(shù)組返回選定的元素sort()對(duì)數(shù)組的元素進(jìn)行排序splice()刪除元素，并向數(shù)組添加新元素toSource()返回該對(duì)象的源代碼toStringf)把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果toLocaleString()把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組，并返回結(jié)果unshift()向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度valueOf()返回?cái)?shù)組對(duì)象的原始值2J

4、avaScript 中的 Number 對(duì)象該對(duì)象是原始數(shù)值的包裝對(duì)象，其常用屬性和方法如表3.7所示。表3.7 Number對(duì)象常用屬性和方法3.本此任務(wù)使用了以下知識(shí)點(diǎn)：屬性和方法說(shuō)明MAX_VALUE可表示的最大的數(shù)MIN_VALUE可表示的最小的數(shù)NaN非數(shù)字值NEGATIVEJNFINITY負(fù)無(wú)窮大，溢出時(shí)返回該值POSITIVEJNFINITY正無(wú)窮大，溢出時(shí)返回該值toString()把數(shù)字轉(zhuǎn)換為字符串，使用指定的基數(shù)toLocaleString()把數(shù)字轉(zhuǎn)換為字符串，使用本地?cái)?shù)字格式順序toFixed()把數(shù)字轉(zhuǎn)換為字符串，結(jié)果的小數(shù)點(diǎn)后有指定位數(shù)的數(shù)字toExponentia

5、l()把對(duì)象的值轉(zhuǎn)換為指數(shù)計(jì)數(shù)法toPrecision()把數(shù)字格式化為指定的長(zhǎng)度valueOf()返回一個(gè)Number對(duì)象的基本數(shù)字值(1) JavaScript代碼中使用語(yǔ)句var r=(Math.random()*100).toFixed*1產(chǎn)生一個(gè)隨機(jī)數(shù)后乘1,并使 用函數(shù)toFixed將產(chǎn)生的隨機(jī)數(shù)保留小數(shù)點(diǎn)后2位。(2) JavaScript代碼中Array對(duì)象函數(shù)的使用方法，并能產(chǎn)生5個(gè)隨機(jī)數(shù)。(3) JavaScript代碼中的Number對(duì)象函數(shù)的使用方法。三,實(shí)現(xiàn)效果根據(jù)任務(wù)描述可以做出如圖3.16所示的效果。初始界面如圖(a)所示，點(diǎn)擊“產(chǎn)生新的隨機(jī) 數(shù)”按鈕后，將產(chǎn)生一

6、列新的隨機(jī)數(shù)，并對(duì)這些隨機(jī)數(shù)進(jìn)行求和，如圖(b)和圖(c)所示。WeCharr10595% 10231023Webcin1023WebcinWebcin Q五個(gè)隨機(jī)數(shù)求和隨機(jī)產(chǎn)生的五個(gè)數(shù)分別為： 99.8245.624.0721.341.51五個(gè)隨機(jī)數(shù)的和為：192.33999999999997五個(gè)隨機(jī)數(shù)求和隨機(jī)產(chǎn)生的五個(gè)數(shù)分別為：27.1379.1867.971023WebcinWebcin Q五個(gè)隨機(jī)數(shù)求和隨機(jī)產(chǎn)生的五個(gè)數(shù)分別為： 99.8245.624.0721.341.51五個(gè)隨機(jī)數(shù)的和為：192.33999999999997五個(gè)隨機(jī)數(shù)求和隨機(jī)產(chǎn)生的五個(gè)數(shù)分別為：27.1379.186

7、7.9781.6253.47五個(gè)隨機(jī)數(shù)的和為：309.37五個(gè)隨機(jī)數(shù)求和隨機(jī)產(chǎn)生的五個(gè)數(shù)分別為：14.5139.4879.5719.5611.13五個(gè)隨機(jī)數(shù)的和為：164.25(a)初始界面(b)新的隨機(jī)數(shù)列I(c)新的隨機(jī)數(shù)列II四任務(wù)實(shí)現(xiàn).編寫(xiě)index.wxml文件代碼代碼主要通過(guò)列表渲染的方法將邏輯層產(chǎn)生的隨機(jī)數(shù)列表示在屏幕上，并顯示隨機(jī)數(shù)列的和, 最下面添加一個(gè)按鈕，用于綁定產(chǎn)生新的隨機(jī)數(shù)的事函數(shù)。.編寫(xiě)index.wxss文件代碼.編寫(xiě)index.js文件代碼代碼中主要包含了全局變里和全局函數(shù)的定義，并在Page函數(shù)中定義了 0nLoad函數(shù)和newRand函 數(shù)。(1)全局變重的

8、定義。首先義1個(gè)全局?jǐn)?shù)組變重rand和1個(gè)全局普通變重sum/and用來(lái)存儲(chǔ)產(chǎn) 生的隨機(jī)數(shù)列，sum用來(lái)存儲(chǔ)隨機(jī)數(shù)列的和。(2)全局函數(shù)的定義。定義createRand。函數(shù)用于產(chǎn)生隨機(jī)數(shù)列并求和，該函數(shù)首先利用for循環(huán)產(chǎn) 生6個(gè)隨機(jī)數(shù)并將這些數(shù)據(jù)添加到數(shù)組中。Math.random。函數(shù)用于產(chǎn)生01之間的隨機(jī)數(shù)， Math.random()*100能夠產(chǎn)生0100之間的隨機(jī)數(shù)，toFixed函數(shù)用于實(shí)現(xiàn)將產(chǎn)生的隨機(jī)數(shù)保留小數(shù) 點(diǎn)后2位，乘1的目的是將產(chǎn)生的隨機(jī)數(shù)字符串轉(zhuǎn)換為數(shù)值類(lèi)型。rand.push(r)用于將產(chǎn)生的隨機(jī)數(shù)r添加到rand數(shù)組中。console.log(sum)函數(shù)用于在

9、控制臺(tái)顯示sum數(shù)據(jù)，這種方法對(duì)程序調(diào)試很有幫助。(5)在onLoad()和newRand。方法中調(diào)用createRand。方法產(chǎn)生隨機(jī)數(shù)列并求和，然后通過(guò) this. setData。方法將結(jié)果渲染到視圖層。練習(xí)課時(shí)內(nèi)容遞歸求和計(jì)算器課時(shí)1教學(xué)目標(biāo)掌握J(rèn)avaScript中的邏輯運(yùn)算符 掌握button組件的使用方法教學(xué)重點(diǎn)JavaScript中的邏輯運(yùn)算符 button組件的使用方法教學(xué)難點(diǎn)button組件的使用方法教學(xué)設(shè)計(jì).教學(xué)思路：通過(guò)實(shí)訓(xùn)任務(wù)成績(jī)計(jì)算器的制作來(lái)讓學(xué)生掌握J(rèn)avaScript中的邏輯運(yùn)算符 與button組件的使用方法.教學(xué)手段：多媒體+計(jì)算機(jī).教學(xué)資料：教材、多媒體課

10、件教學(xué)內(nèi)容一、任務(wù)描述設(shè)計(jì)一個(gè)計(jì)算學(xué)生平均成績(jī)的小程序。當(dāng)輸入學(xué)生信息和各門(mén)功課成績(jī)并提交后，能夠顯示學(xué) 生的信息及平均成績(jī)。二、導(dǎo)入知識(shí)點(diǎn)本任務(wù)涉及JavaScript中的邏輯運(yùn)算符和button組件的使用方法。1. JavaScript中的邏輯運(yùn)算符用于測(cè)定變量或值之間的邏輯關(guān)系，其中x=6, y=7,如表3.2解釋了邏輯運(yùn)算符的含義。表3.2 JavaScript中的邏輯運(yùn)算符運(yùn)算符描述例子&and(xvlO&yl)為 falseIIor(x=6|y=6)為 true!*not(x=y)為 false.button按鈕組件該組件常用屬性如表3.3所示。表3.3 button組件常用屬性屬

11、性size type和form-type的合法值如表3.4所示。屬性類(lèi)型默認(rèn)值必填說(shuō)明sizestringdefault否按鈕的大小typestringdefault否按鈕的樣式類(lèi)型plainbooleanFALSE否按鈕是否鏤空，背景色透明disabledbooleanFALSE否是否禁用loadingbooleanFALSE否名稱(chēng)前是否帶loading圖標(biāo)form-typestring否用于form組件，點(diǎn)擊分別會(huì)觸發(fā)form 組件的submit/reset事件表3.4屬性size、type和form-type的合法值屬性合法值說(shuō)明sizedefault默認(rèn)大小mini小尺寸typepri

12、mary綠色default白色warn紅色form-typesubmit提交表單reset重置表單三,實(shí)現(xiàn)效果根據(jù)本次任務(wù)的描述，可做出如圖3.14所示的效果。初始界面如圖（a）初始界面所示，當(dāng)輸入 姓名時(shí)，屏幕下面顯示中文的輸入鍵盤(pán)，如圖（b）輸入信息時(shí)的界面所示，當(dāng)輸入成績(jī)時(shí)，屏幕下 面顯示數(shù)字鍵盤(pán)；輸入完成后點(diǎn)擊“提交”按鈕，在按鈕下方將顯示學(xué)生姓名及成績(jī)，如圖（c）提交后的界面所示。在輸入過(guò)程中，如果某項(xiàng)內(nèi)容為空，點(diǎn)擊“提交”按鈕后屏幕沒(méi)有反應(yīng)。w*Chrr11:12Weixin成績(jī)計(jì)算器姓名:WeCh-tv11:14V.e xi n96% mi*成績(jī)計(jì)算器姓名:語(yǔ)文或旗:數(shù)學(xué)成綾:

13、WeChatr121496%Weixin Q成績(jī)計(jì)算器提交姓名：邦偉語(yǔ)文成績(jī)：89數(shù)學(xué)成績(jī)：w*Chrr11:12Weixin成績(jī)計(jì)算器姓名:WeCh-tv11:14V.e xi n96% mi*成績(jī)計(jì)算器姓名:語(yǔ)文或旗:數(shù)學(xué)成綾: WeChatr121496%Weixin Q成績(jī)計(jì)算器提交姓名：邦偉語(yǔ)文成績(jī)：89數(shù)學(xué)成績(jī)：96數(shù)學(xué)成績(jī)：92平均分：92.33333333333333語(yǔ)文成績(jī)數(shù)學(xué)成績(jī)數(shù)學(xué)成績(jī)平均分:數(shù)學(xué)成殘:平均分:(a)初始界面(b)輸入信息時(shí)的界面(c)提交后的界面圖3.14(a)初始界面四,任務(wù)實(shí)現(xiàn)(1)編寫(xiě)index.wxml文件代碼。代碼中主要包含用于輸入學(xué)生姓名和成績(jī)的input輸入框；(2)編寫(xiě)index.wxss文件代碼。該文件中定義了 index.wxml文件中使用的各種樣式，包括：page、 placeholder input、 button content 和.content-item。(3)編寫(xiě)index.wxss文件代碼。該文件中定義了 index.wxml文件中使用的各種樣式，包括：page、 box titile placeholderinput button、content 和.conte