《物联网web应用技术》课件 项目四 JavaScript编程_第1页
《物联网web应用技术》课件 项目四 JavaScript编程_第2页
《物联网web应用技术》课件 项目四 JavaScript编程_第3页
《物联网web应用技术》课件 项目四 JavaScript编程_第4页
《物联网web应用技术》课件 项目四 JavaScript编程_第5页
已阅读5页，还剩211页未读， 继续免费阅读

下载本文档

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

文档简介

《web应用技术》实践篇

Web网页控制物联网Web应用技术在1995年时，由Netscape公司的BrendanEich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。篇章引入章节任务2022年3月1日黄冈教育谷《Web应用技术》物联网Web应用技术项目四

JavaScript编程任务一

温湿度调节控制页面设计响应式媒体查询响应式图片回顾3.如何更换图片?1如何更新显示内容？2.如何通过弹框确认信息?4.如何弹出提示框?任务引入任务描述:温湿度调节控制页面设计与程序编写任务教学目标：了解JS脚本语言特征；掌握JS文件使用方法；掌握JS的基本语法。任务概要教学内容JavaScript的简介JavaScript使用方法JavaScript语法基础JavaScript输出显示一二三四温湿度调节控制页面设计五JavaScript的简介知识点一也是一种广泛用于客户端Web开发的脚本语言；是一种轻量级的，运行在浏览器中的解释型的编程语；常用来给HTML网页添加动态功能，比如响应用户的各种操作；JavaScript能跨平台、跨浏览器驱动网页与用户交互。JavaScript（简称JS）是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。JavaScriptJavaScriptJavaScript一个完整的JavaScript实现是由以下3个不同部分组成：核心（ECMAScript）JavaScript的核心语法基础，定义JS中的基本语法；文档对象模型（DocumentObjectModel，简称DOM）用于操作网页中各种标签元素；浏览器对象模型（BrowserObjectModel，简称BOM）操作浏览器的各种对象。（一）ECMAScript版本版本：ECMAScript6也称为ECMAScript2015，ECMAScript7也称为ECMAScript2016。年份名称描述1997ECMAScript1第一个版本1998ECMAScript2版本变更1999ECMAScript3添加正则表达式添加try/catch

ECMAScript4没有发布2009ECMAScript5添加“strictmode”，严格模式添加JSON支持2011ECMAScript5.1版本变更2015ECMAScript6添加类和模块2016ECMAScript7增加指数运算符(**)增加Atotype.includesJavaScript使用方法知识点二JavaScript使用方法在HTML文档中引入JavaScript有两种方式：在HTML文档中直接嵌入JavaScript脚本，称为内嵌式；链接外部JavaScript脚本文件，称为外链式。（一）内嵌式在HTML文档中通过<script>标签及其相关属性可以引入JavaScript代码。HTML中的脚本必须位于<script>与</script>标签之间。（一）内嵌式脚本可被放置在HTML页面的<body>和<head>部分中：放在<head>和</head>之间，称为头脚本；放在<body>和</body>之间，称为体脚本。<!DOCTYPEhtml><html>

<head>

<script>

//此处为JavaScript代码

</script>

</head>

<body> ......

<script>

//此处为JavaScript代码

</script>

</body></html>头脚本体脚本（二）外链式当脚本比较复杂或者同一段代码需要被多个网页文件使用时，可以将这些脚本代码放置在一个扩展名为**.js的文件中；通过外链式引入该js文件。<!DOCTYPEhtml><html>

......

<body>

......

<scriptsrc="myScript.js"></script>

</body></html>JavaScript语法知识点三（一）JavaScript语句JavaScript语句是发给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。document.getElementById("demo").innerHTML="你好小爱";输出文本“你好小爱”（一）JavaScript语句-分号（；）分号（;）：分号用于分隔JavaScript语句；通常在每条可执行的语句结尾添加分号；使用分号可在一行中编写多条语句a=1;b=3;c=a+b;a=1;b=3;c=a+b;（一）JavaScript语句-JavaScript代码JavaScript代码是JavaScript语句的序列。浏览器按照编写顺序依次执行每条语句。<script>

document.getElementById("demo").innerHTML="你好小爱";

document.getElementById("myDIV").innerHTML="见到你很高兴";</script>（一）JavaScript语句-JavaScript代码块JavaScript代码可以分批地组合起来成为代码块。代码块以左花括号开始，以右花括号结束。代码块的作用是一并地执行语句序列。functionmyFunction(){document.getElementById("demo").innerHTML="你好小爱";document.getElementById("myDIV").innerHTML="见到你很高兴";}（一）JavaScript语句-语句标识符JavaScript语句通常以一个

语句标识符

为开始，并执行该语句。语句标识符是保留关键字不能作为变量名使用。语句描述break用于跳出循环。catch语句块，在try语句块执行出错时执行catch语句块。continue跳过循环中的一个迭代。do...while执行一个语句块，在条件语句为true时继续执行该语句块。for在条件语句为true时，可以将代码块执行指定的次数。for...in用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。function定义一个函数if...else用于基于不同的条件来执行不同的动作。return退出函数switch用于基于不同的条件来执行不同的动作。throw抛出（生成）错误。try实现错误处理，与catch一同使用。var声明一个变量。while当条件语句为true时，执行语句块。（一）JavaScript语句-空格JavaScript会忽略多余的空格。可以向脚本添加空格，来提高其可读性。varperson="Hege";varperson="Hege";（二）JavaScript注释JavaScript注释可用于提高代码的可读性，JavaScript不会执行注释。//输出标题：document.getElementById("myH1").innerHTML="欢迎来到我的主页";//输出段落：document.getElementById("myP").innerHTML="这是我的第一个段落。";1.单行注释：单行注释以//开头。（二）JavaScript注释/*下面的这些代码会输出一个标题和一个段落，并将代表主页的开始*/document.getElementById("myH1").innerHTML="欢迎来到我的主页";document.getElementById("myP").innerHTML="这是我的第一个段落。";2.JavaScript多行注释：多行注释以

/*

开始，以

*/

结尾。JavaScript输出显示知识点四JavaScript输出显示JavaScript没有任何打印或者输出的函数。JavaScript可以通过不同的方式来输出数据：使用

window.alert()

弹出警告框。使用

window.confirm()弹出确认框。使用

document.write()

方法将内容写到HTML文档中。使用

innerHTML

写入到HTML元素。使用

console.log()

写入到浏览器的控制台。（一）window.alert()警告框可以弹出警告框来显示数据，用户需要点击确定按钮才能继续进行操作。window.alert("sometext");<script>window.alert(3+8);</script>（二）window.confirm()确认框确认框通常用于验证是否接受用户操作。确认卡弹出时，用户可以点击"确认"或者"取消"来确定用户操作。点击"确认",确认框返回true，如果点击"取消",确认框返回false。window.alert("sometext");（三）操作HTML元素从JavaScript访问某个HTML元素，可以使用document.getElementById(id)方法。使用“id”属性来标识HTML元素；使用innerHTML来获取或插入元素内容。x=document.getElementById("demo");//查找元素x.innerHTML="HelloJavaScript";//改变内容（四）写到HTML文档直接写入HTML输出流document.write("<h1>这是一个标题</h1>");document.write("<p>这是一个段落。</p>");document.write(Date());特别注意：如果在文档已完成加载后执行

document.write，整个HTML页面将被覆盖。（五）写到控制台如果浏览器支持调试，可以使用

console.log()

方法在浏览器中显示JavaScript值。浏览器中使用F12来启用调试模式，在调试窗口中点击“Console”（控制台）菜单。<script>a=4;b=7;c=a+b;console.log(c);</script>温湿度调节控制页面实训知识点五（一）设计温湿度调节JS源代码1.创建JS源码文件在项目资源管理器中选择刚才新建的项目，依次点击“文件”、“新建”，并选择“js文件”（按下Ctrl+N）。（一）设计温湿度调节JS源代码varnormalVal=document.getElementById("normalVal");//获取节点（行末注释）varupdateVal=document.getElementById("updateVal");//获取节点//获取节点内容console.log("原阈值="+normalVal.innerHTML);//修改节点内容updateVal.innerHTML="30";2.定义变量获取节点内容定义normalVal、updateVal这两个变量，获取当前设置的最大阈值，显示在控制台，并设置更新阈值。（一）设计温湿度调节JS源代码console.log("%c文档已修改!","color:grey");("文档已修改!");console.warn("文档已修改!");console.error("文档已修改!");3.通过console控制台输出信息通过控制台以不同方式输出“文档已修改！”信息。（一）设计温湿度调节JS源代码//确认文档信息varresult=confirm("是否确认文档背景色?");//获取点击结果if(result){ alert("已确认!");}else{ alert("未确认!");}4.确认文档信息弹出“确认文档背景颜色”信息窗口，获取确认结果并显示。（二）添加温湿度控制页面内容<body><divclass="container"><spanclass="title">温湿度调节</span><divclass="content"><imgid="cimg"src="../img/wenshidu.png"/><ul><li>当前温度:<strong>26</strong>℃</li> <li>当前湿度:<strong>80</strong>%</li> <li>当前设置的最大阈值:<strongid="normalVal">50</strong>℃</li> <li>更新后的最大阈值:<strongid="updateVal"></strong>℃</li> <li> <buttononclick="alert('点击事件!');">点击</button> <buttononclick="changeImg();">更换图片</button> </li></ul></div></div><script>//JavaScript函数 functionchangeImg(){ varimg=document.getElementsByTagName("img"); img[0].src="../img/wendu.png"; alert("图片更换成功!"); }</script><!--外部JavaScript--><scripttype="text/javascript"src="../js/script.js"></script></body>修改浮动标题内容为“温湿度调节”；修改content中内容修改无序列表中内容：添加列表项。插入js代码，定义changeImg()函数：设置更滑图片的路径；出现“图片更换成功”弹窗；调用外部JavaScript代码：添加外部js代码调用路径；1.在body中添加温湿度控制页面内容（三）添加空气质量监测页面内容3.运行效果（三）添加空气质量监测页面内容3.运行效果如何更新显示内容？如何通过弹框确认信息？思考问题本任务学习了JavaScript基础知识。包括如下内容：1.JavaScript使用方法；2.JavaScript基础语法；3.JavaScript输出显示；任务小结1.

个人介绍HTML页面.

页面标题:xxx自我介绍

页面内容：

在个人介绍页面中加入警告弹框和确认框功能。作业谢谢！THANKS!黄冈教育谷2022年3月1日《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.5,22,58]与空气质量标准值50进行比较，；高于标准值则记录超标次数；通过count输出“大气污染次数”。（二）添加空气质量页面内容<body><divclass="container"><spanclass="title">空气质量调节</span><divclass="content"><imgid="cimg"src="../img/kongqizhiliang.png"/><ul> <li>传感器:<strongid="sName"></strong></li> <li>当前PM2.5平均值:<strongid="avgVal"></strong>μg/m³</li> <li>大气污染次数:<strongid="count"></strong></li></ul></div></div><!--外部JavaScript--><scripttype="text/javascript"src="../js/script.js"></script></body>浮动标题内容为“空气质量调节”；content中内容图片的路径和名称无序列表中内容：添加以下列表项：调用外部JavaScript代码：1.在body中添加空气质量监测页面内容（三）添加空气质量监测页面内容3.运行效果如何使用javaScript计算PM2.5平均值？如何计算大气污染次数?思考问题本任务学习了JavaScript语法知识。包括如下内容：1.JS常量；2.JS数据类型；3.JS基本语句、函数。任务小结1.

个人介绍HTML页面.

页面标题:xxx自我介绍

页面内容：

在个人介绍页面中加入一个模块统计用户每周登录次数。作业谢谢！THANKS!黄冈教育谷2022年3月1日《Web应用技术》物联网Web应用技术项目四

JavaScript编程任务三

安防报警日志页面设计JavaScript常量JavaScript数据类型回顾JavaScript基本语句、函数1.如何获取屏幕分辨率？2.如何使用Cookie存储用户信息?任务引入3.如何使用本地存储空间存信息？4.如何使用计时事件?任务描述:安防报警日志页面设计与程序编写任务教学目标：掌握JS对象的使用掌握JS基本内置对象的使用掌握JS的计时事件掌握JSCookie的使用。任务概要教学内容JavaScript对象JavaScript基本内置对象JavaScript计时事件JavaScript基本存储机制一二三四安防报警日志页面设计五JavaScript对象知识点一JavaScript对象一辆汽车是一个对象。车有它的属性和方法，属性：重量颜色。。。方法：启动停止。。。JavaScript对象是拥有属性和方法的数据。对象是一个变量，但对象可以包含多个值（多个变量）

。JavaScript对象是变量的容器。JavaScript对象JavaScript对象varcar={type:"Fiat",model:500,color:"white"};（一）对象定义使用字符来定义和创建JavaScript对象。定义JavaScript对象可以跨越多行，空格跟换行不是必须的。varperson={firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"};varperson={firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"};{name1:value1,name2:value2,...nameN:valueN}1.使用对象字面量来定义对象（一）对象定义使用Object构造函数创建一个对象包装器。创建JavaScript对象实例。varmyFather=newperson("John","Doe",50,"blue");varmyMother=newperson("Sally","Rally",48,"green");functionperson(firstname,lastname,age,eyecolor){ this.firstname=firstname; this.lastname=lastname; this.age=age;this.eyecolor=eyecolor;}2.使用Object定义对象（二）对象属性JavaScript对象是变量的容器。通常也认为“JavaScript对象是键值对的容器”。键值对写法为：键值对在JavaScript对象通常称为对象属性。JavaScript对象是属性变量的容器。name:value（键与值以冒号分割）（二）对象属性访问对象属性方式：方式一：方法二：person.lastName;person["lastName"];（三）对象方法1.创建对象方法对象的方法定义一个函数，并作为对象的属性存储。该实例访问了person对象的fullName()方法:name=person.fullName();（三）对象方法1.创建对象方法创建对象方法：可在构造函数内部定义对象methodName:function(){//代码}functionperson(firstname,lastname,age,eyecolor){。。。functionchangeName(name){this.lastname=name;}}（三）对象方法2.访问对象方法访问对象方法：访问对象属性objectName.methodName()；objectName.methodName；//返回函数的定义JavaScript基本内置对象知识点二JavaScript基本内置对象Array对象、Boolean对象、Date对象、Math对象、Number对象、String对象、RegExp对象。JavaScript常用的内置对象（一）Math对象Math对象的作用是执行常见的算术任务。Math对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。Math对象属性：（二）Math对象Math对象方法：（二）Date对象Date对象是用来处理日期和时间的。可以通过new的方式来创建一个新的Date对象，创建格式如下：有四种方式初始化日期：vardate=newDate();//通过new的方式创建一个日期对象；newDate();newDate(value);newDate(dateString);newDate(year,monthIndex[,day[,hours[,minutes[,seconds[,milliseconds]]]]]);上面的参数大多数都是可选的，在不指定的情况下，默认参数是0。vartoday=newDate()vard1=newDate("October13,197511:13:00")vard2=newDate(79,5,24)vard3=newDate(79,5,24,11,33,0)（二）Date对象date.getFullYear();

//从Date对象（也就是这里的date）中返回年份。date.getMonth();//从Date对象中返回月份。注意：这里的月份是返回0到11的数字，0对应一月，1对应二月，所以在使用的时候记得要加一。date.getDate();//从Date对象返回一个月中的某一天。date.getDay();//从Date对象返回一个星期中的某一天。注意，这里返回的也是从0开始的数字，0对应的是星期天，1对应的是星期一，6对应的是星期六。date.getHours();//返回Date对象的小时（0~23）date.getMinutes();//返回Date对象的分钟（0~59）date.getSeconds();//返回Date对象的秒数（0~59）date.getTime();//返回1970年1月1日到Date对象所设时间的毫秒数。有四种方式初始化日期：（三）Array数组对象数组对象的作用是：使用单独的变量名来存储一系列的值。跟Date对象一样，Array也是用new的方式来创建一个新的对象，创建格式如下：创建一个数组，有三种方法：常规方法、简洁方法、数组字面量方式。下面的代码定义了一个名为myCars的数组对象：：vararr=newArray();

//通过new的方式创建一个数组对象；varmyCars=newArray();myCars[0]="Saab";myCars[1]="Volvo";myCars[2]="BMW";varmyCars=newArray("Saab","Volvo","BMW");varmyCars=["Saab","Volvo","BMW"];常规方式简洁方法数组字面量（三）Array数组对象arr.concat(ArrayX...)//连接两个或多个数组，ArraX可以是数组或具体的值，每一项用逗号隔开。arr.join();//用于返回一个包含数组中所有元素的一个字符串，默认用逗号作为分隔符。arr.push();//像数组末尾添加一个或多个元素，并返回新数组的长度。arr.reverse();//颠倒数组中元素的顺序。直接调用这个方法只后函数就已经颠倒顺序了，直接console.log(arr)就可以直接输出排序好的数组了。arr.sort();//用于对数组进行排序。如果调用时没有参数，将按字母顺序对数组中的元素进行排序。arr.toString();//把数组转化为字符串，并返回结果，返回的字符串默认用逗号隔开。arr.valueOf();//返回数组对象的原始值，也就是返回整个数组。数组中常用的方法：（四）字符串对象String对象用于处理已有的字符块。一个字符串用于存储一系列字符，一个字符串可以使用单引号或双引号。字符串的属性跟数组很像，通常把字符串看成数组的样式。varcarname="VolvoXC60";varcarname='VolvoXC60';（四）字符串对象str.indexOf();//用于返回指定内容在原字符串中的位置，如果没有，则返回-1。str.trim();//去除字符串前后的空白。str.concat();//用于拼接字符串，跟加号的效果一样。str.substring(start,end);//从start位置开始，截取到end为止，end取不到。str.substr(start,length);//从start位置开始，截取length长度个字符串。str.replace();//替换字符串的某个元素，并返回替换后的字符串。str.split();//把字符串分割成数组的形式返回。直接console.log(arr)可以直接输出排序好的数组。字符串对象常用的方法：JavaScript计时事件知识点三JavaScript计时事件一个设定的时间间隔之后来执行代码称之为计时事件。JavaScritp计时事件有两个关键方法：setInterval()-间隔指定的毫秒数不停地执行指定的代码。setTimeout()-在指定的毫秒数后执行指定代码。注意:setInterval()和setTimeout()是HTMLDOMWindow对象的两个方法。（一）setInterval()方法setInterval()间隔指定的毫秒数不停地执行指定的代码：window.setInterval("javascriptfunction",milliseconds);setInterval()第一个参数是函数（function）；setInterval()第二个参数间隔的毫秒数。（一）setInterval()方法1.setInterval()使用每三秒弹出“hello”示例：setInterval(function(){alert("Hello")},3000);2.停止setInterval()执行clearInterval()方法用于停止setInterval()方法执行的函数代码。要使用clearInterval()方法，在创建计时方法时必须使用全局变量.varmyVar=setInterval(function(){myTimer()},1000);。。。window.clearInterval(myVar)；（三）setTimeout()方法setInterval()间隔指定的毫秒数执行指定的代码：myVar=window.setTimeout("javascriptfunction",milliseconds);setTimeout()第一个参数是函数（function）；setTimeout()第二个参数间隔的毫秒数。（三）setTimeout()方法1.setTimeout()使用等待三秒弹出“hello”示例：setTimeout(function(){alert("Hello")},3000);2.停止setTimeout()执行clearTimeout()方法用于停止执行setTimeout()方法的函数代码。要使用clearInterval()方法，在创建计时方法时必须使用全局变量.myVar=setTimeout("javascriptfunction",milliseconds);。。。clearTimeout(myVar);JavaScript基本存储机制知识点四（一）JavaScriptCookieCookie用于存储web页面的用户信息。当用户访问web页面时，名字可以记录在cookie中。在用户下一次访问该页面时，可以在cookie中读取用户访问记录。JavaScript

CookieCookie以名/值对形式存储：username=JohnDoe（一）JavaScriptCookie1.创建CookieJavaScript可以使用document.cookie属性来创建、读取、及删除

cookie。JavaScript中，创建cookie如下所示：document.cookie="username=JohnDoe";默认cookie在浏览器关闭时删除cookie，可以使用expires添加一个过期时间，及删除cookie时间（以UTC或GMT时间）。document.cookie="username=JohnDoe;expires=Thu,18Dec204312:00:00GMT";使用path参数告诉浏览器cookie的路径。document.cookie="username=JohnDoe;expires=Thu,18Dec204312:00:00GMT;path=/"（一）JavaScriptCookie2.操作Cookie读取Cookie。document.cookie将以字符串的方式返回所有的cookie，类型格式：cookie1=value;cookie2=value;cookie3=value;varx=document.cookie;修改Cookie。修改cookie类似于创建cookie，旧的cookie将被覆盖。document.cookie="username=JohnSmith;expires=Thu,18Dec204312:00:00GMT;path=/";删除Cookie。只需要设置expires参数为以前的时间即可。document.cookie="username=;expires=Thu,01Jan197000:00:00GMT";注意，当删除时不必指定

cookie的值。（一）JavaScriptCookie3.设置cookie值的函数创建一个函数用于存储访问者的名字functionsetCookie(cname,cvalue,exdays){vard=newDate();d.setTime(d.getTime()+(exdays*24*60*60*1000));varexpires="expires="+d.toGMTString();document.cookie=cname+"="+cvalue+";"+expires;}（一）JavaScriptCookie4.获取cookie值的函数创建一个函数用于返回指定cookie的值functiongetCookie(cname){varname=cname+"=";varca=document.cookie.split(';');for(vari=0;i<ca.length;i++){varc=ca[i].trim();if(c.indexOf(name)==0)returnc.substring(name.length,c.length);}return"";}（一）JavaScriptCookie5.检测cookie值的函数创建一个检测cookie是否创建的函数functioncheckCookie(){varusername=getCookie("username");if(username!=""){alert("Welcomeagain"+username);}else{username=prompt("Pleaseenteryourname:","");if(username!=""&&username!=null){setCookie("username",username,365);}}}（二）JavaScript存储对象Web存储API提供了sessionStorage（会话存储）和localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。localStorage用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。sessionStorage用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。JavaScript

存储对象（二）JavaScript存储对象1.存储对象属性存储对象属性属性描述length返回存储对象中包含多少条数据。存储对象方法方法描述key(n)返回存储对象中第n个键的名称getItem(keyname)返回指定键的值setItem(keyname,value)添加键和值，如果对应的值存在，则更新该键对应的值。removeItem(keyname)移除键clear()清除存储对象中所有的键（一）JavaScriptCookie2.localStorage存储数据保存数据。创建一个本地存储的key/value对，key="lastname"value="Smith"。localStorage.setItem("key","value");localStorage.setItem("lastname","Smith");读取数据。varlastname=localStorage.getItem("key");删除数据。localStorage.removeItem("key");（一）JavaScriptCookie3.sessionStorage存储数据保存数据。创建一个本地临时存储的key/value对。sessionStorage.setItem("key","value");读取数据。sessionStorage.removeItem("key");删除数据。localStorage.removeItem("key");删除所有数据。sessionStorage.clear();安防报警日志页面实训知识点五（一）设计安防报警日志js源代码1.创建JS源码文件在项目资源管理器中选择刚才新建的项目，依次点击“文件”、“新建”，并选择“js文件”（按下Ctrl+N）。（一）设计安防报警日志js源代码//JavaScript内置对象:Window//onload:文档加载完毕调用window.onload=function(){ console.log("文档加载完毕!");。。。。。。。}2.添加window.onload事件绑定事件处理函数添加window.onload()在当HTML页面完全载入后（包括图片、css文件等）执行脚本代码。（一）设计安防报警日志js源代码 //onresize:浏览器视窗大小变化时调用 window.onresize=function(){ console.log("当前窗口发生变化!"); getScreen(); }3.添加window.onresize事件添加window.onresize代码当浏览器视窗发生变化是调用getScreen()函数，获取窗口的尺寸。将window.onresize=function()添加到window.onload事件函数中。（一）设计安防报警日志js源代码 //JavaScript内置对象:Math //Math.random():获取[0,1]之间的随机数 varrandom=Math.random(); varrandomDom=document.getElementById("rState"); //toFixed(x):获取x位小数 randomDom.innerText=random.toFixed(0);4.通过随机数函数产生随机报警状态值（一）设计安防报警日志js源代码 //读取lTime varnum,num2; if(localStorage.getItem("lTime")){ num=localStorage.getItem("lTime") }else{ num=0; }5.读取lTime值使用localStorage.getItem("lTime")，从localStorage中读取时间lTime。（一）设计安防报警日志js源代码 varstr=document.cookie.split(";"); console.log("%cdocument.cookie="+document.cookie,"color:red"); console.log("%cstr="+str,"color:red"); if(document.cookie.indexOf("cTime")>-1){。。。 } }else{ num2=0; }6.读取cookie内cTime值读取cookie。cookie需在服务器环境下使用，可通过HBuilderX建立微型服务器。（一）设计安防报警日志js源代码 //存入lTime,默认永久存在 localStorage.setItem("lTime",num); num2=num2.toString(); //存入cookie,默认在浏览器关闭时删除 document.cookie="cTime="+num2;7.使用setInterval()每秒存储一次lTime和cTilme把lTime存入localStorage（永久保存），把cTime存入cookie（浏览器关闭时删除）（一）设计安防报警日志js源代码 //setTimeout:隔一段时间，执行某个函数（仅一次） setTimeout(function(){ console.log("延时的信息窗口:当前警报未开启"); },5000);8.使用setTimeout()定时输出控制板提示信息使用setTimeout()5秒后控制板输出“延时的信息窗口:当前警报未开启”（一）设计安防报警日志js源代码varclearlTime=document.querySelector("#clearLTime");clearlTime.addEventListener("click",function(){ localStorage.setItem("lTime",""); alert("lTime清除成功!"); window.location.reload(); })9.分别在两段p标签上添加清除缓存的事件方法监听clearLTime标签点击鼠标事件，清除lTime；监听clearCTime标签点击鼠标事件，清除cTime。varclearCookie=document.querySelector("#clearCTime");clearCookie.addEventListener("click",function(){ document.cookie="cTimeState=;expires=Thu,01Jan197000:00:00GMT"; alert("cookie清除成功!"); window.location.reload(); })（二）添加安防报警日志页面内容<body><divclass="container"><spanclass="title">安防报警日志</span><divclass="content"><imgid="cimg"src="../img/anfang.png"/><ul><li>屏幕显示分辨率:<strongid="cScreen"></strong></li><li>报警状态（随机）:<strongid="rState"></strong></li>

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

温馨提示

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

最新文档

评论

0/150

提交评论