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 局域网的音频同步播放技术ÿ…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
python/java环境配置
环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选 可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
dify打造数据可视化图表
一、概述 在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...
IP如何挑？2025年海外专线IP如何购买？
你花了时间和预算买了IP，结果IP质量不佳，项目效率低下不说，还可能带来莫名的网络问题，是不是太闹心了？尤其是在面对海外专线IP时，到底怎么才能买到适合自己的呢？所以，挑IP绝对是个技…...
C++.OpenGL （20/64）混合（Blending）
混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架：基于 （一个现代化的 React 节点绘图库） 功能： 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...