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

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

概述

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

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

资源链接

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

示例2-增加网页弹窗

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

Don't clike me

示例效果

点击按钮：

资源链接

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

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

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

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

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

示例解析

前端代码

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

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

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

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

资源链接

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

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

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

示例解析

前端设计

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

 	
Press down to change color to red. Release to change to green.
    
Move the mouse over this text to make it bigger.
    
  

示例效果

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

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

资源链接

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

总结

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

资源链接

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

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

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