《物联网web应用技术》课件 项目四 任务二空气质量调节控制页面_第1页
《物联网web应用技术》课件 项目四 任务二空气质量调节控制页面_第2页
《物联网web应用技术》课件 项目四 任务二空气质量调节控制页面_第3页
《物联网web应用技术》课件 项目四 任务二空气质量调节控制页面_第4页
《物联网web应用技术》课件 项目四 任务二空气质量调节控制页面_第5页
已阅读5页，还剩50页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《Web应用技术》物联网Web应用技术项目四

JavaScript编程任务二

空气质量调节控制页面设计JavaScript使用方法JavaScript基础语法回顾JavaScript输出显示1.如何使用javaScript计算PM2.5平均值？2.如何计算大气污染次数?任务引入任务描述:空气质量调节控制页面设计与程序编写任务教学目标：掌握JS变量的声明掌握JS数据类型的使用掌握JS的判断与循环语句掌握JS函数的定义与调用。任务概要教学内容JavaScript变量JavaScript数据类型JavaScript函数JavaScript常用语句一二三四空气质量调节控制页面设计实训五JavaScript变量知识点一变量可以使用短名称（比如x和y），也可以使用描述性更好的名称（比如age,sum,totalvolume）：变量必须以字母开头变量也能以$和_符号开头（不推荐）变量名称对大小写敏感（y和Y是不同的变量）。变量是用于存储信息的“容器”。

varx=3;

vary=4;

varz=x+y;JavaScript变量JavaScript变量（一）声明（创建）JavaScript变量在JavaScript中创建变量通常称为“声明”变量。varcarname;1.声明变量使用var关键词来声明变量：变量声明之后，该变量是空的（没有值）。Value=undefinedcarname="Volvo";在变量声明时赋值：使用等号型变量赋值：varcarname="Volvo";（一）声明（创建）JavaScript变量varlastname="Doe",age=30,job="carpenter";2.一条语句声明多个变量该语句以var开头，并使用逗号分隔变量即可：varlastname="Doe",age=30,job="carpenter";一条语句中声明的多个变量应分别赋值：声明可横跨多行：：varx,y,z=1;//x，y为undefined，z为1。（一）声明（创建）JavaScript变量varcarname="Volvo";varcarname;3.重新声明JavaScript变量如果重新声明JavaScript变量，该变量的值不会丢失。在以下两条语句执行后，变量carname的值依然是“Volvo”：（一）声明（创建）JavaScript变量y=7;x=y+4;4.JavaScript计算可以通过JavaScript变量来做计算，使用的是=和+这类运算符：JavaScript数据类型知识点二JavaScript使用方法JavaScript数据类型有值类型和引用数据类型。值类型（基本类型）：字符串（String）、数字（Number）、布尔（Boolean）、对空（Null）、未定义（Undefined）、Symbol。引用数据类型：对象（Object）、数组（Array）、函数（Function）。（一）JavaScript拥有动态类型varx;//x为undefinedvarx=5;//现在x为数字varx="John";//现在x为字符串JavaScript拥有动态类型。变量可用作不同的类型：（二）JavaScript数据类型varcarname="VolvoXC60";varcarname='VolvoXC60';1.JavaScript字符串字符串是存储字符（比如“BillGates”）的变量。字符串可以是引号中的任意文本，可以使用单引号或双引号：varanswer="It'salright";varanswer="Heiscalled'Johnny'";varanswer='Heiscalled"Johnny"';可以在字符串中使用引号，只要不匹配包围字符串的引号即可：（二）JavaScript数据类型varx1=34.00;//使用小数点来写varx2=34;//不使用小数点来写2.JavaScript数字JavaScript只有一种数字类型。数字可以带小数点，也可以不带：vary=123e5;//12300000varz=123e-5;//0.00123极大或极小的数字可以通过科学（指数）计数法来书写：（二）JavaScript数据类型varx=true;vary=false;3.JavaScript布尔布尔（逻辑）只能有两个值：true或false。（二）JavaScript数据类型varcars=newArray();cars[0]="Saab";cars[1]="Volvo";cars[2]="BMW";4.JavaScript数组下面的代码创建名为cars的数组：varcars=newArray("Saab","Volvo","BMW");创建数组简略方法：varcars=["Saab","Volvo","BMW"];创建文字数组：（二）JavaScript数据类型varperson={firstname:"John",lastname:"Doe",id:5566};cars[2]="BMW";5.JavaScript对象对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式（name:value）来定义。属性由逗号分隔：varperson={firstname:"John",lastname:"Doe",id:5566};声明可横跨多行：name=person.lastname;name=person["lastname"];对象属性有两种寻址方式：（二）JavaScript数据类型cars=null;person=null;6.Undefined和NullUndefined这个值表示变量不含有值。可以通过将变量的值设置为null来清空变量。（二）JavaScript数据类型varcarname=newString;varx=newNumber;vary=newBoolean;varcars=newArray;varperson=newObject;7.声明变量类型声明新变量时，可以使用关键词“new”来声明其类型：JavaScript变量均为对象。声明一个变量，就创建了一个新的对象。JavaScript函数知识点三JavaScript函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块：<!DOCTYPEhtml><html>

<head><script>functionmyFunction(){alert("HelloWorld!");}</script>

</head>

<body>

<buttononclick="myFunction()">点我</button>

</body></html>（一）JavaScript函数语法函数就是包裹在花括号中的代码块，前面使用了关键词function：functionfunctionname(){//执行代码}当调用该函数时，会执行函数内的代码。JavaScript对大小写敏感。关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数。（二）调用带参数的函数在调用函数时，可以向其传递值，可以发送多个参数，由逗号（,）分隔：myFunction(argument1,argument2)声明函数时，需把参数作为变量来声明：functionmyFunction(var1,var2){代码}（三）带有返回值的函数函数通过使用return语句，将值返回调用它的地方。在使用return语句时，函数会停止执行，并返回指定的值：functionmyFunction(){varx=5;returnx;}函数调用将被返回值取代：varmyVar=myFunction();（四）JavaScript变量1.局部JavaScript变量在JavaScript函数内部声明的变量（使用var）是局部变量，只能在函数内部访问它。（该变量的作用域是局部的）。可以在不同的函数中使用名称相同的局部变量，只要函数运行完毕，本地变量就会被删除。2.全局JavaScript变量在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。（四）JavaScript变量3.JavaScript变量的生存期JavaScript变量的生命期从被声明的时间开始。局部变量会在函数运行以后被删除，全局变量会在页面关闭后被删除。4.向未声明的JavaScript变量分配值把值赋给尚未声明的变量，该变量将被自动作为window的一个属性。非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。carname="Volvo";JavaScript常用语句知识点四（一）JavaScript条件语句if(condition){当条件为true时执行的代码}1.if...Else条件语句if语句if(condition){代码1当条件为true时执行的代码}else{代码2当条件不为true时执行的代码}If....else语句（一）JavaScript条件语句1.if...Else条件语句if...elseif...elseif(condition1){当条件1为true时执行的代码}elseif(condition2){当条件2为true时执行的代码}else{当条件1和条件2都不为true时执行的代码}（一）JavaScript条件语句2.JavaScriptswitch语句JavaScriptswitch语句switch(n){case1:执行代码块1break;case2:执行代码块2break;default:与case1和case2不同时执行的代码}（一）JavaScript条件语句2.JavaScriptswitch语句default关键词vard=newDate().getDay();switch(d){case6:x="今天是星期六";break;case0:x="今天是星期日";break;default:x="期待周末";}document.getElementById("demo").innerHTML=x;default关键词用来规定匹配不存在时做的事情。（二）JavaScript循环语句1.JavaScriptfor循环For循环for(语句1;语句2;语句3){被执行的代码块}语句1（代码块）开始前执行；语句2定义运行循环（代码块）的条件；语句3在循环（代码块）已被执行之后执行。（二）JavaScript循环语句1.JavaScriptfor循环For/in循环varperson={fname:"John",lname:"Doe",age:25};for(xinperson)//x为属性名{txt=txt+person[x];}JavaScriptfor/in语句循环遍历对象的属性（二）JavaScript循环语句2.JavaScriptwhile循环while循环while(条件){需要执行的代码}while循环会在指定条件为真时循环执行代码块（二）JavaScript循环语句2.JavaScriptwhile循环do/while循环do{需要执行的代码}while(条件);do/while循环是while循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环（二）JavaScript循环语句3.JavaScriptbreak和continue语句break语句用于跳出循环，continue用于跳过循环中的一个迭代。break语句for(i=0;i<10;i++){if(i==3){break;}x=x+"Thenumberis"+i+"<br>";}break在switch语句中用于跳出switch()语句；break在循环中可用于跳出循环。（二）JavaScript循环语句3.JavaScriptbreak和continue语句break语句用于跳出循环，continue用于跳过循环中的一个迭代。continue语句for(i=0;i<=10;i++){if(i==3)continue;x=x+"Thenumberis"+i+"<br>";}continue语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。（二）JavaScript循环语句3.JavaScriptbreak和continue语句JavaScript标签（label）label:

语句可以使用JavaScript标签（label）对JavaScript语句进行标记。相当于定位符，用于跳转到程序的任意位置，标签的格式如下：标签可以是任意的标识符，但不能是保留字，语句部分可以是任意语句。标签通常与break语句和continue语句配合使用，跳出特定的循环。top:for(vari=0;i<3;i++){for(varj=0;j<3;j++){if(i===1&&j===1)

breaktop;console.log('i='+i+',j='+j);}}双重循环区块，break命令后面加上了top标签（注意，top不用加引号），满足条件时，直接跳出双层循环。（二）JavaScript循环语句3.JavaScriptbreak和continue语句JavaScript标签（label）break语句可用于跳出任何JavaScript代码块。cars=["BMW","Volvo","Saab","Ford"];list:{document.write(cars[0]+"<br>");document.write(cars[1]+"<br>");document.write(cars[2]+"<br>");

breaklist;document.write(cars[3]+"<br>");document.write(cars[4]+"<br>");document.write(cars[5]+"<br>");}空气质量调节控制页面设计知识点五（一）设计空气质量调节js源代码1.创建JS源码文件在项目资源管理器中选择刚才新建的项目，依次点击“文件”、“新建”，并选择“js文件”（按下Ctrl+N）。（一）设计空气质量调节js源代码//声明一个函数functionsetVal(){}2.声明空气质量计算函数声明functionsetVal()函数，主要功能是计算PM2.5平均值和计算空气质量超标次数。（一）设计空气质量调节js源代码//JavaScript的五种基本数据类型:number、string、boolean、object和function varpmLevel=16; varpmLevelArr=[64.5,22,58]; varobj={sName:'空气监测',sType:'PM2.5'}; varsNameDom=document.getElementById("sName"); varavgValDom=document.getElementById("avgVal"); varcountDom=document.getElementById("count");3.定义变量获取节点内容声明PM模拟数据、传感器名称、类型、空气质量平均值和污染次数等变量。（一）设计空气质量调节js源代码//JavaScript表达式和运算符 //字符串连接 varsName=obj.sName+""+obj.sType; sNameDom.innerHTML=sName;3.输出传感器名称和类型sName由传感器名称和类型两部分组成。通过字符串连接的方式，连接传感器字符串“空气质量检测”和传感器类型“PM2.5”，通过sName输出传感器名称和类型。。（一）设计空气质量调节js源代码//数值计算:空气质量PM2.5数组的平均值 varavgVal=(pmLevelArr[0]+pmLevelArr[1]+pmLevelArr[2])/3; //toFixed取两位小数 avgValDom.innerHTML=avgVal.toFixed(2);

4.计算PM2.5平均值通过存储于pmLevelArr模拟PM2.5数据[64.5,22,58]，计算PM2.5的平均值，平均值保留2位小数。（一）设计空气质量调节js源代码//循环语句:计算空气质量数组中超过超标的次数vartime=0;for(vari=0;i<pmLevelArr.length;i++){ //判断语句:如果超过50,time+1 if(pmLevelArr[i]>50){ time++; }} countDom.innerHTML=time;

5.计算空气质量超标次数通过存储于pmLevelArr模拟PM2.5数据[64.

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论