微信小程序开发电子教案3.7 教案-实现分段函数.docx

《微信小程序开发电子教案3.7 教案-实现分段函数.docx》由会员分享，可在线阅读，更多相关《微信小程序开发电子教案3.7 教案-实现分段函数.docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、微信小程序开发电子教案3.7 教案-实现分段函数YOUR LOGO原 创 文 档 请 勿 盗 版第3章 小程序视图层任务3.7 实现分段函数课时内容实现分段函数课时4教学目标掌握JavaScript中的条件语句；掌握Math对象中的函数。教学重难点掌握JavaScript中的条件语句；掌握Math对象中的函数。教学设计1.教学思路：讲解JavaScript中的条件语句，介绍if语句，if.else语句，if.else if.else语句以及switch语句；介绍Math对象常用属性和方法，通过小程序实战巩固基础知识。2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容一、任务描述

2、设计一个利用条件结构和数学函数进行计算的小程序。当输入x值时，根据下面的公式计算出y的值。二、导入新知本任务使用了JavaScript中的条件语句和Math对象中的函数。1.JavaScript中的条件语句在JavaScript中可使用以下条件语句：l if语句：当指定条件为true时，使用该语句来执行代码。l if.else语句：当条件为true时执行代码，当条件为false时执行其他代码。l if.else if.else语句：使用该语句来选择多个代码块之一来执行。l switch语句：使用该语句来选择多个代码块之一来执行。（1） if语句。只有当指定条件为true时，该语句才会执行代码。

3、语法为：if(条件) 条件为true时执行的代码（2）if.else语句。在条件为true时执行代码，在条件为false时执行其他代码。语法为：if(条件) 条件为true时执行的代码块 else 条件为false时执行的代码块（3） if.else if.else语句。使用if.else if.else语句选择多个代码块之一来执行。语法为：if(条件1)条件1为true时执行的代码块 else if(条件2)条件1为false而条件2为true时执行的代码块) else条件1和条件2同时为false时执行的代码块（4）switch语句。使用switch语句来选择要执行的多个代码块之一。语法为

4、：switch(表达式）case n1 : 代码块 break;case n2: 代码块 break; .default:默认代码块代码解释：l 计算一次switch表达式。l 把表达式的值与每个case的值进行对比，否则，执行默认代码块。l 如果存在匹配，则执行关联代码。2.JavaScript中的Math对象JavaScript中的所有事物都是对象，对象是拥有属性和方法的数据，属性是与对象相关的值，方法是能够在对象上执行的动作。Math对象用于执行数学任务，它的常用属性和方法如表3.1所示。表3.1 Math对象常用属性和方法属性和方法说明E返回算术常量e,即自然对数的底数(约等于2.71

5、8)PI返回圆周率(约等于3.14159)abs(x)返回数的绝对值ceil(x)对数进行上舍入cos(x)返回角的余弦exp(x)返回以自然常数e为底的指数为x的函数该函数是否x是e的指数，此处为返回e的x次幂？请芦老师确认以自然常数e为底的指数为x的函数floor(x)对数进行下舍入log(x)返回数的自然对数(底为e)max(x,y)返回x和y中的最大值min(x,y)返回x和y中的最小值pow(x,y)返回x的y次幂random( )返回01之间的随机数round(x)把数四舍五入为最接近的整数sin(x)返回角的正弦sqrt(x)返回数为x的算术平方根此处是否为算术平方根？是算术平方

6、根tan(x)返回角的正切valueOf()返回Math对象的原始值三、实现效果根据案例描述可以做出如图3.13所示的效果。当x=-100时，计算出的y=100，如图（a）所示。当x=11.5时，计算出的y=1520.875，如图（b）所示。当x=22.5时，计算出的y=149.4487,如图（c）所示。 （a）x=-2021时 （b）x=8时 （c）x=33时图3.13 条件语句和数学函数案例运行效果四、任务实现1.编写index.wxml文件代码 代码主要包括input组件，并利用该组件绑定了calc函数，并为input组件设置了下边框线和边距的样式。这段话语义不清，请老师修改请芦老师确认

7、代码主要包括input组件，并利用该组件绑定了calc函数，并为input组件设置了下边框线和边距的样式。index.wxml文件：实现分段函数计算y的值为：y2.编写index.wxss文件代码 文件定义了input样式，该样式适用于所有input组件。index.wxss文件见附件；3. 编写index.js文件代码 文件定义了calc函数，该函数根据x的值，利用条件语句和数学函数计算出了y的值，并通过setData函数将计算结果渲染到视图层。index.js文件：/index.jsPage(/自定义函数calccalc:function(event)varx,y;/定义局部变量x和yvarx=event.detail.value;/获取input组件的value值并赋值给xif(x0)/根据x值进行判断，并求出y的值y=Math.abs(x);elseif(x10)y=Math.exp(x)*Math.sin(x);elsey=Math.pow(x,3);this.setData(y:y/将局部变量y赋值给绑定变量y)练习