《物联网web应用技术》课件 项目四 任务三安防报警日志页面

《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(){