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

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

news 2025/8/16 8:58:42

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/7/9 0:22:36

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/8/3 22:02:59

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/7/7 13:13:09

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/7/10 2:57:42

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/7/29 10:52:48

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...

编程新知 2025/8/8 13:20:37

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

编程新知 2025/7/9 18:30:54

生产管理系统开发：专业软件开发公司的实践与思考

生产管理系统开发的关键点 在当前制造业智能化升级的转型背景下&#xff0c;生产管理系统开发正逐步成为企业优化生产流程的重要技术手段。不同行业、不同规模的企业在推进生产管理数字化转型过程中&#xff0c;面临的挑战存在显著差异。本文结合具体实践案例&#xff0c;分析…...

编程新知 2025/8/6 3:11:45

uni-app学习笔记二十三--交互反馈showToast用法

showToast部分文档位于uniapp官网-->API-->界面&#xff1a;uni.showToast(OBJECT) | uni-app官网 uni.showToast(OBJECT) 用于显示消息提示框 OBJECT参数说明 参数类型必填说明平台差异说明titleString是提示的内容&#xff0c;长度与 icon 取值有关。iconString否图…...

编程新知 2025/8/9 0:37:41

创客匠人：如何通过创始人IP打造实现知识变现与IP变现的长效增长？

在流量红利逐渐消退的当下&#xff0c;创始人IP的价值愈发凸显。它不仅能够帮助中小企业及个人创业者突破竞争壁垒&#xff0c;还能成为企业品牌影响力的核心资产。然而&#xff0c;市场上IP孵化机构鱼龙混杂&#xff0c;如何选择一家真正具备长期价值的合作伙伴&#xff1f;创…...

编程新知 2025/7/19 4:40:43