ESP32-Web-Server编程- JS 基础 4
ESP32-Web-Server编程- JS 基础 4
概述
HTML 内联事件处理器，你永远不应该使用 HTML 事件处理器属性——因为那些已经过时了，使用它们是不好的做法。
在前端编程中，除了将期望发生的事件写为 JS 文件外，还可以使用一些组件自带的事件处理器。
比如可以使用 button 组件的 onclick 内联属性，实现在网页上点击按钮，切换 LED 灯图标的转变。
但是 HTML 和你的 JavaScript （内联属性）混在一起不是一个好主意，因为它使得整个文件变得难以阅读。
<p><button onclick="document.getElementById('text').style.color='red'">Red Text</button>
</p>
建议使用独立的函数来控制元素属性，这样容易增加函数的可复用性，并保持 HTML 和 JS 相对独立：
<p><button onclick="bgChange()">Change Background</button></p><script>function bgChange() {const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;document.body.style.backgroundColor = randomHex();}</script>
需求及功能解析
本节主要演示 JavaScript （内联属性）的用法，以及通过建立独立的函数来完成同样的功能。读者可以对比两种处理方法。
示例解析
前端设计
前端代码建立了五个 button，点击不同的 button 可以实现对应的文本颜色的切换。前四个 button 使用 onclick 内联属性。最后一个 button，通过函数 bgChange() 来完成相同的功能。
<body><h1>Change text style</h1><p id="text">This text will change style.</p><p><button onclick="document.getElementById('text').style.color='red'">Red Text</button></p><p><button onclick="document.getElementById('text').style.color='blue'">Blue Text</button></p><p><button onclick="document.getElementById('text').style.display='none'">Hide Text</button></p><p><button onclick="document.getElementById('text').style.display='block'">Show Text</button></p><p><button onclick="bgChange()">Change Background</button></p><script>function bgChange() {const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;document.body.style.backgroundColor = randomHex();}</script><p><img id="imageLamp" src="light_on.png">
</p>
<p><button onclick="document.getElementById('imageLamp').src='light_on.png'">Turn on the light</button>
</p>
<p><button onclick="document.getElementById('imageLamp').src='light_off.png'">Turn off the light</button>
</p>
示例效果
点击不同的按钮可以切换网页的显示效果：
总结
1）本节主要是演示在前端设计中，通过 HTML 内联事件处理器或者 JavaScript 函数实现对应事件的处理。
2）在前端开发中，应尽可能使用 JavaScript 函数，而不是 内联事件处理器，后者在大型项目中维护不方便，容易因为维护问题。
资源链接
1）ESP32-Web-Server ESP-IDF系列博客介绍
2）对应示例的 code 链接 （点击直达代码仓库）
3）下一篇：ESP32-Web-Server编程- JS 基础5
(码字不易感谢点赞或收藏)
相关文章：
ESP32-Web-Server编程- JS 基础 4
ESP32-Web-Server编程- JS 基础 4 概述 HTML 内联事件处理器，你永远不应该使用 HTML 事件处理器属性——因为那些已经过时了，使用它们是不好的做法。 在前端编程中，除了将期望发生的事件写为 JS 文件外，还可以使用一些组件自带…...
JAVA的反射机制
什么是反射机制 Java反射机制是指在运行时动态地获取类的信息并操作类的成员（属性、方法、构造方法等）的能力。通过反射，我们可以解析出类的完整信息，包括构造函数、成员变量、继承关系等。以下是一个使用反射机制创建对象、调用…...
Couchdb 权限绕过漏洞复现（CVE-2017-12635）
Couchdb 权限绕过漏洞复现（CVE-2017-12635） 开启环境给了三个端口号，不知道哪个是正常的，最后试出来52226端口正常。 登录URL：http://192.168.91.129:52226/_utils/# 来到了登录页面 用postman发送PUT…...
GZ031 应用软件系统开发赛题第2套
2023年全国职业院校技能大赛 应用软件系统开发赛项（高职组） 赛题第2套 工位号： 2023年4月 竞赛说明 一、项目背景 党的二十大报告指出，要加快建设制造强国、数字中国，推动制造业高端化、智能化、…...
lack——主页前后端开发优化（精华：java多线程实现数据插入）
lack——主页前后端开发优化 前端开发主页 最容易的方式：list列表<template><van-cardv-for"user in props.userList":desc"user.profile":title"${user.username} (${user.planetCode})":thumb"user.avatarUrl"…...
Anaconda深度学习环境配置命令参考
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Anaconda深度学习环境配置 Anaconda 管理1. 检查 Anaconda 版本2. 获取版本号3. 列出所有的虚拟环境4. 查看环境管理的全部命令帮助5. conda升级6. conda升级后释放空间 Anac…...
【iOS】知乎日报
文章目录 前言一、首页1.网络的异步请求2.避免同一网络请求执行多次3.下拉刷新与上拉加载的实现下拉刷新上拉加载 二、网页1.webView的实现2.webView的滑动加载3.网页与首页内容的同步更新 三、评论区Masonory实现行高自适应 四、收藏中心通过FMDB实现数据持久化1.创建或打开数…...
python实现自动刷平台学时
背景 前一阵子有个朋友让我帮给小忙，因为他每学期都要看视频刷学时，一门平均需要刷500分钟，一学期有3-4门需要刷的。 如果是手动刷的话，比较麻烦，能否帮他做成自动化的。搞成功的话请我吃饭。为了这顿饭，咱…...
Vue3-pnpm包管理器创建项目
一些优势：比同类工具快2倍左右、节省磁盘空间 官网：pnpm - 速度快、节省磁盘空间的软件包管理器 | pnpm中文文档 | pnpm中文网 npm升级到yarn再升级到pnpm（速度更快） 安装方式：npm install -g pnpm 创建项目&#…...
Centos上安装Docker和DockerCompose
安装Docker Docker可以运行在MAC，Windows，CtenOS,UBUNTU等操作系统上。目前主流的版本有Docker CE和Docker EE，CE是免费的开源Docker版本，适用于开发人员和小型团队，EE是适用于企业的容器化解决方案。它基于Docker CE…...
视频文件+EasyDarwin做摄像机模拟器模拟RTSP流很方便，还能做成系统服务，方法与流程
之前我看到过一家人工智能做算法的企业，用EasyDarwinFFMPEG做了一个摄像机的模拟器，方法大概是： 用ffmpeg读取mp4等类型的视频文件（当然ffmpeg啥都能读取），再以RTSP协议的形式推送给EasyDarwin；…...
修改Linux系统的网络参数
修改Linux系统的网络参数 接收缓冲区是用来存储从网络接口接收到的数据的一块内存区域。通过增大接收缓冲区的大小，可以提高网络传输的性能，特别是在处理大量数据或高负载情况下。 sudo sysctl -w net.core.rmem_max2097152 sudo sysctl -w net.core.r…...
virtualList 封装使用 虚拟列表 列表优化
虚拟列表 列表优化 virtualList 组件封装 virtualList 组件封装 本虚拟列表 要求一次性加载完所有数据 不适合分页 新建一个select.vue 组件页面 <template><div> <el-select transfer"true" :popper-append-to-body"true"popper-class…...
HCIP-九、路由控制
九、路由控制 实验拓扑实验需求及解法1.企业生产网运行 OSPF，完成以下需求：2.数据中心运行 ISIS3.路由引入4.路由策略5.策略路由6.ISP 过滤私网路由 实验拓扑 实验需求及解法 1.企业生产网运行 OSPF，完成以下需求： 1.1 OSPF 进程…...
Vue3水印（Watermark）
APIs 参数说明类型默认值必传width水印的宽度，默认值为 content 自身的宽度numberundefinedfalseheight水印的高度，默认值为 content 自身的高度numberundefinedfalserotate水印绘制时，旋转的角度，单位 number-22falsezIndex追加…...
redis的性能管理、主从复制和哨兵模式
一、redis的性能管理 redis的数据时缓存在内存中的 查看系统内存情况 info memory used_memory:853688 redis中数据占用的内存 used_memory_rss:10522624 redis向操作系统申请的内存 used_memory_peak:853688 redis使用内存的峰值 系统巡检：硬件巡检、数据库 n…...
排序算法:归并排序、快速排序、堆排序
归并排序 要将一个数组排序，可以先将它分成两半分别排序，然后再将结果合并（归并）起来。这里的分成的两半，每部分可以使用其他排序算法，也可以仍然使用归并排序（递归）。 我看《算法》…...
Redis 面试题——持久化
目录 1.概述1.1.Redis 的持久化功能是指什么？1.2.Redis 有哪些持久化机制？ 2.RDB2.1.什么是 RDB 持久化？2.2.Redis 中使用什么命令来生成 RDB 快照文件？2.3.如何在 Redis 的配置文件中对 RDB 进行配置？2.4.✨RDB 持久化…...
Linux使用固定ip地址
设置静态ip，我们就需要修改 /etc/sysconfig/network-scripts/ifcfg-ens33 配置文件。 vim /etc/sysconfig/network-scripts/ifcfg-ens33 //进入网卡ens33的配置页面 (1) 将 BOOTPROTO dhcp 改成 BOOTPROTO static 也就是将动态ip，改成静态i…...
ESP Multi-Room Music 方案：支持音频实时同步播放 实现音乐互联共享
项目背景 随着无线通信技术的发展，针对不同音频应用领域的无线音频产品正不断涌现。近日，乐鑫科技推出了基于 Wi-Fi 的多扬声器互联共享音乐通信协议——ESP Multi-Room Music 方案。该方案使用乐鑫自研的基于 Wi-Fi 局域网的音频同步播放技术ÿ…...
YOLOv13镜像实战效果：复杂场景下目标识别依然精准
YOLOv13镜像实战效果：复杂场景下目标识别依然精准 1. 引言：当目标检测遇上复杂场景 想象一下这样的场景：一个繁忙的十字路口，行人穿梭、车辆交错、自行车穿行，还有各种交通标志和广告牌。在这样的复杂环境中…...
ABB机器人重定位移动的欧拉角与Rapid指令实战解析
1. ABB机器人重定位移动的核心原理 第一次接触ABB机器人重定位功能时，我也被那些绕来绕去的旋转搞得头晕。直到有次在调试焊接路径时，发现示教器上的摇杆操作其实就是在玩转欧拉角，这才恍然大悟。重定位移动说白了就是让机器人末端工具在保持…...
我为什么开始安利 Hermes Agent：它和 OpenClaw 到底有什么不一样？
如果你最近在折腾 AI Agent，大概率已经见过一堆“能聊天、能调工具、能接 Telegram/Discord”的项目了。问题不在于有没有，而在于：哪个真的值得长期用，哪个只是演示时很猛，落地时很折磨。 这两天我认真装了一遍 Herme…...
AWPortrait-Z WebUI快捷操作指南：Enter/F5/命令行高效工作流
AWPortrait-Z WebUI快捷操作指南：Enter/F5/命令行高效工作流 1. 快速上手：三秒启动人像美化神器 AWPortrait-Z是一个基于Z-Image精心构建的人像美化工具，通过LoRA技术实现高质量的图像生成。这个WebUI界面由科哥二次开发，让普通…...
面试官: 高并发与多线程区别解析（答案深度解析）持续更新
高并发与多线程的区别 —— 面试官想听的「底层认知」⚠️ 注意：这道题不是考定义背诵，而是考察你有没有系统性工程思维。很多候选人一上来就说“多线程就是高并发”，当场被挂——这不是技术问题，是概念混淆导致的架构误判。一、先…...
ESP32-S3 + INMP441麦克风没声音？手把手教你用Arduino I2S库快速诊断（附完整代码）
ESP32-S3与INMP441麦克风无声故障全排查指南 当你兴奋地将INMP441麦克风焊接到ESP32-S3开发板，准备开始音频采集项目时，却发现设备一片寂静——这种挫败感我深有体会。去年在开发智能语音门锁原型时，我曾连续三天被这个看似简单的问题困扰。本…...
OpenClaw Ontology技能学习笔记
一、技能核心基础1. 技能定位OpenClaw的长效知识图谱技能，打造AI本地结构化记忆，解决AI对话健忘、无关联推理、上下文断层问题，让AI持久记住人物、任务、项目等信息及关联关系。2. 核心解决问题- 普通AI：对话结束即遗忘࿰…...
esp32-snippets自定义扩展：如何基于现有代码构建自己的工具库
esp32-snippets自定义扩展：如何基于现有代码构建自己的工具库 【免费下载链接】esp32-snippets Sample ESP32 snippets and code fragments 项目地址: https://gitcode.com/gh_mirrors/es/esp32-snippets esp32-snippets是一个包含丰富ESP32代码片段和示例的…...
Kubernetes Pod 网络延迟分析
Kubernetes Pod 网络延迟分析 在现代云原生架构中，Kubernetes已成为容器编排的事实标准。随着集群规模的扩大和微服务架构的普及，Pod之间的网络延迟问题逐渐成为影响应用性能的关键因素。网络延迟不仅会拖慢服务响应速度，还可能导致分布式系…...
2026年4月北京GEO优化服务商精选：京城五强实力领跑，助力华北全域增长
一、GEO 是什么 GEO全称Generative Engine Optimization，即生成式引擎优化，是生成式AI时代应运而生的全新营销优化赛道，更是北京及全国企业布局AI营销的核心抓手。其核心逻辑，是针对豆包、DeepSeek、Kimi、文心一言等主流AI对话模…...