《物联网web应用技术》课件 项目四 任务一温湿度调节控制页面设计_第1页
《物联网web应用技术》课件 项目四 任务一温湿度调节控制页面设计_第2页
《物联网web应用技术》课件 项目四 任务一温湿度调节控制页面设计_第3页
《物联网web应用技术》课件 项目四 任务一温湿度调节控制页面设计_第4页
《物联网web应用技术》课件 项目四 任务一温湿度调节控制页面设计_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

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

文档简介

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

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

温馨提示

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

最新文档

评论

0/150

提交评论