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

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

news 2026/5/23 19:33:46

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 编程的基础。如前所述&#xff0c;在 HTML 中&#xff0c;可以通过下述 两种方式使用 JS 程序&#xff1a; 直接在 HTML 文件中通过 script 标签中嵌入 JavaScript 代码。通过 src 元素引入外部的 JavaScript 文件。 在…...

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

Java Web基础教程

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

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

BUUCTF john-in-the-middle 1

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

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

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

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

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

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

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

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

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

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

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

Spark-06：Spark 共享变量

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

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

Spring整合web环境

目录 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技术搭建企业网络&#xff0c;由于静态路由需要管理员手工配置&#xff0c;在网络拓扑发生变化时&#xff0c;也不会自动生成新的路由&#xff0c;因此采用IPv6动态路由协议RIPng实现网络连通&#xff0c;实现任意两个节点之间的通信&#xff0c;并降低…...

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

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

背景 跑vue2elementUI项目时&#xff0c;由于前端这边需要在本地存放xlsx模板文件&#xff0c;供用户下载模板文件&#xff0c;所以需要在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插件&#xff0c;能对文中外链添加一层过滤&#xff0c;有效防止追踪&#xff0c;以及提醒用户。 类似于知乎、CSDN打开其他链接的提示。 后台可以设置白名单 学习资料源代码&#xff1a;百度网盘 密码&#xff1a;123...

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

算法的10大排序

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

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

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

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

编程日记 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工具

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

编程日记 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加密技术：原理、实现与应用

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

编程日记 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系统中用于移动文件或目录&#xff0c;同时也可以用于重命名文件…...

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

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

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

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

LeetDown深度解析：如何让iPhone 5s/6等老设备重返iOS 10.3.3黄金时代

LeetDown深度解析&#xff1a;如何让iPhone 5s/6等老设备重返iOS 10.3.3黄金时代 【免费下载链接】LeetDown a macOS app that downgrades A6 and A7 iDevices to OTA signed firmwares 项目地址: https://gitcode.com/gh_mirrors/le/LeetDown 还记得iPhone 5s的Touch I…...

编程新知 2026/5/23 18:59:25

Unity UGUI血条蓝条从零实现：Canvas层级、RectTransform锚点与FillAmount原理

1. 这不是“拖拽控件就完事”的UI课&#xff0c;而是让你真正理解UGUI底层逻辑的起点 很多人学Unity UI&#xff0c;上来就是打开Canvas、拖个Button、改个颜色、加个OnClick事件——看起来5分钟就能做出个界面&#xff0c;结果一到要做血条、要动态更新、要适配不同分辨率、要…...

编程新知 2026/5/23 18:39:49

零售行业AI Agent私域运营提效实录：单店月均增收27.6万元背后的11个可复用决策节点

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;零售行业AI Agent私域运营提效实录&#xff1a;单店月均增收27.6万元背后的11个可复用决策节点 某连锁美妆品牌在华东67家直营门店部署轻量级AI Agent私域运营系统后&#xff0c;3个月内单店月均GMV提升27.6万…...

编程新知 2026/5/23 18:08:32

如何在3分钟内完成Zotero插件市场终极安装指南

如何在3分钟内完成Zotero插件市场终极安装指南 【免费下载链接】zotero-addons Zotero Add-on Market | Zotero插件市场 | Browsing and installing plugins within Zotero 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-addons 你是否曾为寻找合适的Zotero插件而…...

编程新知 2026/5/23 17:55:54

别再乱关防火墙了！ESXi 7.0/8.0 安全开放自定义端口的保姆级教程（附配置文件详解）

ESXi防火墙精细化管控&#xff1a;安全开放自定义端口的工程实践 在虚拟化环境中&#xff0c;ESXi主机作为承载业务系统的核心基础设施&#xff0c;其网络安全防护的重要性不言而喻。许多管理员在面对需要开放非标准端口的场景时&#xff0c;往往陷入两难&#xff1a;要么粗暴关…...

编程新知 2026/5/23 12:22:28

Super IO：Blender剪贴板导入导出神器，让3D工作流效率翻倍

Super IO&#xff1a;Blender剪贴板导入导出神器&#xff0c;让3D工作流效率翻倍 【免费下载链接】super_io blender addon for copy paste import / export 项目地址: https://gitcode.com/gh_mirrors/su/super_io 你是否厌倦了在Blender中反复点击文件菜单、浏览文件夹…...

编程新知 2026/5/23 10:15:15

初始中断及实现中断

外部中断基础知识 中断概念&#xff1a;在运行主程序时&#xff0c;外部出现了满足中断触发条件的信号&#xff0c;转而去执行中断处理程序&#xff0c;执行完成后返回主程序stm外部中断框架复用功能与重映射 复用功能概念&#xff1a;引脚本身默认是一个GPIO&#xff0c;但它可…...

编程新知 2026/5/23 9:20:23

Gemini 1.5、Sora与V-JEPA：AI工程水位线的三大坐标轴

1. 这份AI Newsletter到底在讲什么&#xff1f;为什么它值得你花5分钟读完“Towards AI”这个名称&#xff0c;对很多刚接触AI内容生态的朋友来说可能有点陌生——它不是某个大厂的官方号&#xff0c;也不是某位顶流KOL的个人频道&#xff0c;而是一个由一线工程师、研究员和产…...

编程新知 2026/5/23 8:54:24

如何为Claude Code配置Taotoken的API Key与Base地址实现稳定调用

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 如何为Claude Code配置Taotoken的API Key与Base地址实现稳定调用 Claude Code作为一款强大的AI编程助手&#xff0c;其原生服务在某…...

编程新知 2026/5/23 7:42:22

LCD人体秤嵌入式方案全解析：从传感器到低功耗设计

1. 项目概述&#xff1a;从“称重”到“健康管理”的智能跨越“电子秤方案——LCD人体秤方案”这个标题&#xff0c;乍一看似乎只是关于一个简单的称重工具。但在这个全民关注健康、数据驱动生活的时代&#xff0c;一台现代的人体秤早已超越了“称体重”的单一功能。它集成了传…...

编程新知 2026/5/23 7:27:16