ESP32-Web-Server编程- JS 基础5

ESP32-Web-Server编程- JS 基础5

概述

JS 编程内容颇多,我们提供一些简单的示例,先玩再学,边玩边学。

示例1-演示通过 JS 进行温度转换

资源链接

对应示例的 code 链接 (点击直达代码仓库)

示例2-增加网页弹窗

演示在网页上通过 window.alert()弹出一个弹窗。

<p><button onclick="trige_waring()">Don't clike me</button></p>
<script>
  function trige_waring() {
    var a = "Oh, This is a waring";
    window.alert(a);
  }
</script>

示例效果

点击按钮:

资源链接

对应示例的 code 链接 (点击直达代码仓库)

示例3- 使用 console.log() 在控制台输出 debug 信息。

console.log() 方法用于在控制台输出信息。

该方法对于开发过程进行测试很有帮助。

提示: 在测试该方法的过程中,控制台需要可见 (浏览器按下 F12 打开控制台)。

示例解析

前端代码

在前端代码的 js 脚本中,调用 console.log 方法。当运行到该函数时,将在控制台中输出对应的 log 提示。

<script>
  var count = 0;
  function trige_waring() {
    var myObj = { name : "LaoWang", say : "Ohh, you click me" };
    console.log(myObj);
    console.log("click_count=", count);
    count = count + 1;
  }
</script>

F12按下后,每次点击按钮,控制台出现 console 提示:

全局变量 click 记录按下的次数。并打印固定的 Json 对象:

使用 console 需要打开浏览器控制台,可以通过 F12 快捷键打开控制台程序。

资源链接

对应示例的 code 链接 (点击直达代码仓库)

示例4-通过鼠标的事件机制演示 JS event 机制

演示通过鼠标的事件机制,在网页上显示不同的效果。

示例解析

前端设计

前端代码建立了两断 text 文字,并设置了鼠标按下-mouseDown()、鼠标抬起-mouseUp(),鼠标在文字上-mouseOver()、鼠标离开文字-mouseOut() 四个事件。

<body>
 	<p id="text1" onmousedown="mouseDown()" onmouseup="mouseUp()">Press down to change color to red. Release to change to green.</p>
    <p id="text2" onmouseover="mouseOver()" onmouseout="mouseOut()">Move the mouse over this text to make it bigger.</p>
    <script>
      function mouseDown() {
        document.getElementById("text1").style.color = "red";
      }
      function mouseUp() {
        document.getElementById("text1").style.color = "green";
      }
      function mouseOver() {
        document.getElementById("text2").style.fontSize = "20px";
      }
      function mouseOut() {
        document.getElementById("text2").style.fontSize = "16px";
      }
    </script>
  </body>
示例效果

移动鼠标在不同的文字上,可以看到不同的效果:

主要是演示鼠标事件的使用方法。在网页端可以设计鼠标按下-mouseDown()、鼠标抬起-mouseUp(),鼠标在文字上-mouseOver()、鼠标离开文字-mouseOut() 四个事件。

资源链接

对应示例的 code 链接 (点击直达代码仓库)

总结

1)本节主要是演示一些典型的 JS 编程的用法。在 ESP32 Web Server 编程中,JS 部分负责很多动态、解释性的内容,是需要重点了解的内容,我们将在后面逐渐学习更多有趣的应用。

资源链接

1)ESP32-Web-Server ESP-IDF系列博客介绍

2)下一篇:ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO

(码字不易感谢点赞或收藏)

相关推荐
熊的猫28 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
EasyCVR40 分钟前
萤石设备视频接入平台EasyCVR多品牌摄像机视频平台海康ehome平台(ISUP)接入EasyCVR不在线如何排查?
运维·服务器·网络·人工智能·ffmpeg·音视频
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
徐嵌1 小时前
STM32项目---畜牧定位器
c语言·stm32·单片机·物联网·iot
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
Acrelhuang2 小时前
安科瑞5G基站直流叠光监控系统-安科瑞黄安南
大数据·数据库·数据仓库·物联网
jjyangyou2 小时前
物联网核心安全系列——物联网安全需求
物联网·算法·安全·嵌入式·产品经理·硬件·产品设计
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana