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

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

news 2025/12/18 13:05:28

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

概述

上节介绍了 JS 编程的基础。如前所述，在 HTML 中，可以通过下述两种方式使用 JS 程序：

直接在 HTML 文件中通过 script 标签中嵌入 JavaScript 代码。
通过 src 元素引入外部的 JavaScript 文件。

在上一个小节的示例中，我们介绍了第一种方式。本小节主要介绍第二节方式。

示例解析

相比上节的示例，本小节主要添加了三处更改：

1）在 index.html 中通过 script指定需要的 JavaScript 文件

<body><h1>Date and Time</h1><p id="dateTime"></p><script src="script.js"></script></body>

2）在 components/fs_image/js 目录新建 script.js 文件：

function time() {var vWeek, vWeek_s, vDay;vWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];var date =  new Date();year = date.getFullYear();month = date.getMonth() + 1;day = date.getDate();hours = date.getHours();minutes = date.getMinutes();seconds = date.getSeconds();vWeek_s = date.getDay();document.getElementById("dateTime").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];
};
setInterval("time()", 1000);

3）更改后端代码，增加请求 JS 文件的 hander:

/* Handler to respond with js.* Browsers expect to GET website icon at URI /stylesheet.css.*/
static esp_err_t js_get_handler(httpd_req_t *req)
{extern const unsigned char js_start[] asm("_binary_script_js_start");extern const unsigned char js_end[]   asm("_binary_script_js_end");const size_t js_size = (js_end - js_start);httpd_resp_set_type(req, "text/javascript");httpd_resp_send(req, (const char *)js_start, js_size);return ESP_OK;
}

与前面提到的类似，在加载 HTML 文件时，若发现 HTML 通过 src 指定了要加载的文件，浏览器会自动发起 Get 请求来向服务器请求对应的资源。

总结

1）本节主要是介绍引入外部 JavaScript 文件的方法。与前述在 HTML 中引入外部 CSS 文件类似，引入外部 JS 文件也需要同时更改前端、后端代码。

2）示例在 ESP32 Web 中添加了 JS 代码，用于实时显示当前时间。

资源链接

1）ESP32-Web-Server ESP-IDF系列博客介绍
2）对应示例的 code 链接（点击直达代码仓库）

3）下一篇：ESP32-Web-Server编程- JS 基础 3

(码字不易感谢点赞或收藏)

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

ESP32-Web-Server编程-JS 基础 2 概述上节介绍了 JS 编程的基础。如前所述，在 HTML 中，可以通过下述两种方式使用 JS 程序： 直接在 HTML 文件中通过 script 标签中嵌入 JavaScript 代码。通过 src 元素引入外部的 JavaScript 文件。在…...

编程日记 2023/12/1 8:23:08

Java Web基础教程

Java Web基础教程 1. Servlet基础 1.1 什么是Servlet Servlet是JavaEE中的标准组件之一，专门用于处理客户端的HTTP请求。并且它必须依赖于Servlet容器（Tomcat就是一个标准的Servlet容器）才能运行。因为Servlet实例的创建和销毁都是由容器负…...

编程日记 2023/12/1 8:22:08

BUUCTF john-in-the-middle 1

BUUCTF:https://buuoj.cn/challenges 题目描述： 注意：得到的 flag 请包上 flag{} 提交密文： 下载附件，解压得到john-in-the-middle.pcap文件。解题思路： 1、双击文件，打开wireshark。看到很多http流…...

编程日记 2023/12/1 8:21:06

HashMap的死循环及数据覆盖问题

目录一，HashMap 线程不安全的原因二，HashMap 死循环问题死循环发生的条件死循环的具体过程死循环执行步骤1 死循环执行步骤2 死循环执行步骤3 三，HashMap 数据覆盖问题数据覆盖执行流程1 数据覆盖执行流程2 数据覆盖执行流…...

编程日记 2023/12/1 8:20:05

数据库数据恢复—MongoDB数据库文件拷贝出现错误的数据恢复案例

MongoDB数据库数据恢复环境： 一台Windows Server操作系统的虚拟机，虚拟机上部署有MongoDB数据库。 MongoDB数据库故障&检测： 在未关闭MongoDB服务的情况下，工作人员将MongoDB数据库文件拷贝到其他分区，然后将原数…...

编程日记 2023/12/1 8:18:03

2023年11月个人工作生活总结

本文为 2023 年 11 月工作生活总结。研发编码 GIS 模仿了一些有名的地图服务商的网站，将离线地图页面做成全屏，对于大屏幕更加好友。再美化一下全区的边界和区内地域的边界。不过主要工作量还是绘制路线，而绘线作为内部工作，还…...

编程日记 2023/12/1 8:17:02

Spark-06：Spark 共享变量

目录 1.广播变量（broadcast variables） 2.累加器（accumulators） 在分布式计算中，当在集群的多个节点上并行运行函数时，默认情况下，每个任务都会获得函数中使用到的变量的一个副本。如果变量很…...

编程日记 2023/12/1 8:16:01

目录 Javaweb三大组件及环境特点 Spring整合web环境的思路及实现 Spring的web开发组件spring-web MVC框架思想及其设计思路 Javaweb三大组件及环境特点 Spring整合web环境的思路及实现 package com.xfy.listener;import com.xfy.config.SpringConfig; import org.springfra…...

编程日记 2023/12/1 8:15:00

分享从零开始学习网络设备配置--任务4.3 使用动态路由RIPng实现网络连通

任务描述某公司使用IPv6技术搭建企业网络，由于静态路由需要管理员手工配置，在网络拓扑发生变化时，也不会自动生成新的路由，因此采用IPv6动态路由协议RIPng实现网络连通，实现任意两个节点之间的通信，并降低…...

编程日记 2023/12/1 8:13:59

vue2.0+elementui集成file-loader之后图标失效问题

背景跑vue2elementUI项目时，由于前端这边需要在本地存放xlsx模板文件，供用户下载模板文件，所以需要在webpack构建的时候增加file-loader进行解析xlsx文件打包。 vue版本2.x element-ui 版本 2.13.x 注意 npm i -D file-loader版本号给vue项…...

编程日记 2023/12/1 8:12:58

C# 文件帮助类(FileHelper)

引言在研究程序反射的时候我们往往需要获取当前运行程序所引用的dll文件，按照传统的方式我们可以维护一个这样的列表，但是这样维护成本实在是太高，而且不利于团队合作开发，在高版本的.net 4.6.2之后官方出了专门的dll帮我们做这个事情Microsoft.Extensions.DependencyMod…...

编程日记 2023/12/1 8:11:57

WordPress 外链跳转插件

WordPress 外链跳转插件是本站开发的一款WordPress插件，能对文中外链添加一层过滤，有效防止追踪，以及提醒用户。类似于知乎、CSDN打开其他链接的提示。后台可以设置白名单学习资料源代码：百度网盘密码：123...

编程日记 2023/12/1 8:10:56

算法的10大排序

10大排序算法--python 一颗星--选择排序一颗星--冒泡排序一颗星--插入排序两颗星--归并排序（递归-难）三颗星--桶排序三颗星--计数排序四颗星--基数排序四颗星--快速排序，寻找标志位（递归-难）四颗星--又是比较难的希尔排…...

编程日记 2023/12/1 8:09:55

“十道机器学习问题，帮助你了解基础知识和常见算法“

目录简介： 1. 什么是机器学习？它与传统编程有什么不同之处？2. 请解释监督学习和无监督学习的区别。3. 什么是过拟合和欠拟合？如何解决这些问题？4. 请解释交叉验证在机器学习中的作用。5. 什么是特征选择？为…...

编程日记 2023/12/1 8:08:54

部署WAF安全应用防火墙(openresty部署)

使用NGINX+Openresty实现WAF功能一、了解WAF 1.1 什么是WAF Web应用防护系统(也称：网站应用级入侵防御系统。英文：Web Application Firewall，简称： WAF)。利用国际上公认的一种说法：Web应用防火墙是通过执行一系列针对HTTP/HTTPS的安全策略来专门为Web应用提供保…...

编程日记 2023/12/1 8:07:53

yml转properties工具

目前搜索到的大部分代码都存在以下问题： 复杂结构解析丢失解析后顺序错乱所以自己写了一个，经过不充分测试，基本满足使用。可以直接在线使用在线地址除了yml和properties互转之外，还可以生成代码、sql转json等，可…...

编程日记 2023/12/1 8:06:51

zerotier 搭建 moon中转服务器及自建planet

搭建moon 服务器环境准备 # 安装依赖 yum install wget gcc gcc-c git -y yum install json-devel -y# 下载及安装 curl -s https://install.zerotier.com/ | sudo bash节点ID 配置配置moon.json文件 cd /var/lib/zerotier-one/# 导出依赖 zerotier-idtool initmoon ide…...

编程日记 2023/12/1 8:05:50

深入了解Rabbit加密技术：原理、实现与应用

一、引言在信息时代，数据安全愈发受到重视，加密技术作为保障信息安全的核心手段，得到了广泛的研究与应用。Rabbit加密技术作为一种新型加密方法，具有较高的安全性和便捷性。本文将对Rabbit加密技术进行深入探讨，分析…...

编程日记 2023/12/1 8:03:48

Linux常用命令——mv命令

文章目录 1. 简介2. 命令格式3. 主要参数4. 常见用法及示例4.1 移动文件4.2 重命名文件4.3 交互式移动文件4.4 强制移动文件4.5 移动多个文件4.6 使用通配符移动文件 5. 注意事项6. 结论 1. 简介 mv 命令在Linux系统中用于移动文件或目录，同时也可以用于重命名文件…...

编程日记 2023/12/1 8:02:47

Panalog 日志审计系统前台RCE漏洞复现

0x01 产品简介 Panalog是一款日志审计系统，方便用户统一集中监控、管理在网的海量设备。 0x02 漏洞概述 Panalog日志审计系统 sy_query.php接口处存在远程命令执行漏洞，攻击者可执行任意命令，接管服务器权限。 0x03 复现环境 FOFA&#xf…...

编程日记 2023/12/1 8:01:46

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点轻量级&#xff…...

编程新知 2025/11/30 15:33:36

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...

编程新知 2025/12/11 10:24:33

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...

编程新知 2025/12/9 7:25:28

JavaScript基础-API 和 Web API

在学习JavaScript的过程中，理解API（应用程序接口）和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能，使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制在高并发场景下，限制某个 IP 的访问频率是非常重要的，可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案，使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

并发编程 - go版

1.并发编程基础概念进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/12/13 10:22:33

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"：Gitee Test如何破解行业痛点在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力，从金融交易到交通管控，这些关乎国计民生的关键领域…...

编程新知 2025/12/12 13:19:52

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

概述

示例解析

总结

资源链接

相关文章：