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
(码字不易感谢点赞或收藏)