当前位置： 首页 > news >正文

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

news 2026/1/21 5:46:51

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 内联事件处理器&#xff0c;你永远不应该使用 HTML 事件处理器属性——因为那些已经过时了&#xff0c;使用它们是不好的做法。 在前端编程中&#xff0c;除了将期望发生的事件写为 JS 文件外&#xff0c;还可以使用一些组件自带…...

编程日记 2023/11/28 20:42:44

JAVA的反射机制

什么是反射机制 Java反射机制是指在运行时动态地获取类的信息并操作类的成员&#xff08;属性、方法、构造方法等&#xff09;的能力。通过反射&#xff0c;我们可以解析出类的完整信息&#xff0c;包括构造函数、成员变量、继承关系等。以下是一个使用反射机制创建对象、调用…...

编程日记 2023/11/28 20:41:43

Couchdb 权限绕过漏洞复现（CVE-2017-12635）

Couchdb 权限绕过漏洞复现&#xff08;CVE-2017-12635&#xff09; ​​ 开启环境给了三个端口号&#xff0c;不知道哪个是正常的&#xff0c;最后试出来52226端口正常。 登录URL&#xff1a;http://192.168.91.129:52226/_utils/# 来到了登录页面 ​​ 用postman发送PUT…...

编程日记 2023/11/28 20:40:42

GZ031 应用软件系统开发赛题第2套

2023年全国职业院校技能大赛 应用软件系统开发赛项&#xff08;高职组&#xff09; 赛题第2套 工位号&#xff1a; 2023年4月 竞赛说明 一、项目背景 党的二十大报告指出&#xff0c;要加快建设制造强国、数字中国&#xff0c;推动制造业高端化、智能化、…...

编程日记 2023/11/28 20:39:41

lack——主页前后端开发优化（精华：java多线程实现数据插入）

lack——主页前后端开发优化 前端开发主页 最容易的方式&#xff1a;list列表<template><van-cardv-for"user in props.userList":desc"user.profile":title"${user.username} (${user.planetCode})":thumb"user.avatarUrl"…...

编程日记 2023/11/28 20:38:40

Anaconda深度学习环境配置命令参考

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 Anaconda深度学习环境配置 Anaconda 管理1. 检查 Anaconda 版本2. 获取版本号3. 列出所有的虚拟环境4. 查看环境管理的全部命令帮助5. conda升级6. conda升级后释放空间 Anac…...

编程日记 2023/11/28 20:37:39

【iOS】知乎日报

文章目录 前言一、首页1.网络的异步请求2.避免同一网络请求执行多次3.下拉刷新与上拉加载的实现下拉刷新上拉加载 二、网页1.webView的实现2.webView的滑动加载3.网页与首页内容的同步更新 三、评论区Masonory实现行高自适应 四、收藏中心通过FMDB实现数据持久化1.创建或打开数…...

编程日记 2023/11/28 20:36:38

python实现自动刷平台学时

背景 前一阵子有个朋友让我帮给小忙&#xff0c;因为他每学期都要看视频刷学时&#xff0c;一门平均需要刷500分钟&#xff0c;一学期有3-4门需要刷的。 如果是手动刷的话&#xff0c;比较麻烦&#xff0c;能否帮他做成自动化的。搞成功的话请我吃饭。为了这顿饭&#xff0c;咱…...

编程日记 2023/11/28 20:35:35

Vue3-pnpm包管理器创建项目

一些优势&#xff1a;比同类工具快2倍左右、节省磁盘空间 官网&#xff1a;pnpm - 速度快、节省磁盘空间的软件包管理器 | pnpm中文文档 | pnpm中文网 npm升级到yarn再升级到pnpm&#xff08;速度更快&#xff09; 安装方式&#xff1a;npm install -g pnpm 创建项目&#…...

编程日记 2023/11/28 20:33:33

Centos上安装Docker和DockerCompose

安装Docker Docker可以运行在MAC&#xff0c;Windows&#xff0c;CtenOS,UBUNTU等操作系统上。目前主流的版本有Docker CE和Docker EE&#xff0c;CE是免费的开源Docker版本&#xff0c;适用于开发人员和小型团队&#xff0c;EE是适用于企业的容器化解决方案。它基于Docker CE…...

编程日记 2023/11/28 20:32:33

视频文件+EasyDarwin做摄像机模拟器模拟RTSP流很方便，还能做成系统服务，方法与流程

之前我看到过一家人工智能做算法的企业&#xff0c;用EasyDarwinFFMPEG做了一个摄像机的模拟器&#xff0c;方法大概是&#xff1a; 用ffmpeg读取mp4等类型的视频文件&#xff08;当然ffmpeg啥都能读取&#xff09;&#xff0c;再以RTSP协议的形式推送给EasyDarwin&#xff1b…...

编程日记 2023/11/28 20:31:32

修改Linux系统的网络参数

修改Linux系统的网络参数 接收缓冲区是用来存储从网络接口接收到的数据的一块内存区域。通过增大接收缓冲区的大小&#xff0c;可以提高网络传输的性能&#xff0c;特别是在处理大量数据或高负载情况下。 sudo sysctl -w net.core.rmem_max2097152 sudo sysctl -w net.core.r…...

编程日记 2023/11/28 20:30:31

virtualList 封装使用 虚拟列表 列表优化

虚拟列表 列表优化 virtualList 组件封装 virtualList 组件封装 本虚拟列表 要求一次性加载完所有数据 不适合分页 新建一个select.vue 组件页面 <template><div> <el-select transfer"true" :popper-append-to-body"true"popper-class…...

编程日记 2023/11/28 20:29:30

HCIP-九、路由控制

九、路由控制 实验拓扑实验需求及解法1.企业生产网运行 OSPF&#xff0c;完成以下需求&#xff1a;2.数据中心运行 ISIS3.路由引入4.路由策略5.策略路由6.ISP 过滤私网路由 实验拓扑 实验需求及解法 1.企业生产网运行 OSPF&#xff0c;完成以下需求&#xff1a; 1.1 OSPF 进程…...

编程日记 2023/11/28 20:28:29

Vue3水印（Watermark）

APIs 参数说明类型默认值必传width水印的宽度&#xff0c;默认值为 content 自身的宽度numberundefinedfalseheight水印的高度&#xff0c;默认值为 content 自身的高度numberundefinedfalserotate水印绘制时&#xff0c;旋转的角度&#xff0c;单位 number-22falsezIndex追加…...

编程日记 2023/11/28 20:27:24

redis的性能管理、主从复制和哨兵模式

一、redis的性能管理 redis的数据时缓存在内存中的 查看系统内存情况 info memory used_memory:853688 redis中数据占用的内存 used_memory_rss:10522624 redis向操作系统申请的内存 used_memory_peak:853688 redis使用内存的峰值 系统巡检&#xff1a;硬件巡检、数据库 n…...

编程日记 2023/11/28 20:26:22

排序算法:归并排序、快速排序、堆排序

归并排序 要将一个数组排序&#xff0c;可以先将它分成两半分别排序&#xff0c;然后再将结果合并&#xff08;归并&#xff09;起来。这里的分成的两半&#xff0c;每部分可以使用其他排序算法&#xff0c;也可以仍然使用归并排序&#xff08;递归&#xff09;。 我看《算法》…...

编程日记 2023/11/28 20:25:20

Redis 面试题——持久化

目录 1.概述1.1.Redis 的持久化功能是指什么&#xff1f;1.2.Redis 有哪些持久化机制&#xff1f; 2.RDB2.1.什么是 RDB 持久化&#xff1f;2.2.Redis 中使用什么命令来生成 RDB 快照文件&#xff1f;2.3.如何在 Redis 的配置文件中对 RDB 进行配置&#xff1f;2.4.✨RDB 持久化…...

编程日记 2023/11/28 20:24:18

Linux使用固定ip地址

设置静态ip&#xff0c;我们就需要修改 /etc/sysconfig/network-scripts/ifcfg-ens33 配置文件。 vim /etc/sysconfig/network-scripts/ifcfg-ens33 //进入网卡ens33的配置页面 (1) 将 BOOTPROTO dhcp 改成 BOOTPROTO static 也就是将动态ip&#xff0c;改成静态i…...

编程日记 2023/11/28 20:23:17

ESP Multi-Room Music 方案：支持音频实时同步播放 实现音乐互联共享

项目背景 随着无线通信技术的发展&#xff0c;针对不同音频应用领域的无线音频产品正不断涌现。近日&#xff0c;乐鑫科技推出了基于 Wi-Fi 的多扬声器互联共享音乐通信协议——ESP Multi-Room Music 方案。该方案使用乐鑫自研的基于 Wi-Fi 局域网的音频同步播放技术&#xff…...

编程日记 2023/11/28 20:22:15

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/1/20 9:28:53

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/20 7:21:44

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/19 2:44:14

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2026/1/19 23:00:51

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2026/1/15 5:05:14

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2026/1/8 0:40:27