个人免费网站制作,上海招投标网官方,哪些网站可以免费做代码,网站建设个人职责ESP32-Web-Server编程-JS 基础 2
概述
上节介绍了 JS 编程的基础。如前所述#xff0c;在 HTML 中#xff0c;可以通过下述 两种方式使用 JS 程序#xff1a;
直接在 HTML 文件中通过 script 标签中嵌入 JavaScript 代码。通过 src 元素引入外部的 JavaScript 文件。
在…ESP32-Web-Server编程-JS 基础 2
概述
上节介绍了 JS 编程的基础。如前所述在 HTML 中可以通过下述 两种方式使用 JS 程序
直接在 HTML 文件中通过 script 标签中嵌入 JavaScript 代码。通过 src 元素引入外部的 JavaScript 文件。
在上一个小节的示例中我们介绍了第一种方式。本小节主要介绍第二节方式。
示例解析
相比上节的示例本小节主要添加了三处更改
1在 index.html 中通过 script指定需要的 JavaScript 文件
bodyh1Date and Time/h1p iddateTime/pscript srcscript.js/script/body2在 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 代码用于实时显示当前时间。
资源链接
1ESP32-Web-Server ESP-IDF系列博客介绍 2对应示例的 code 链接 点击直达代码仓库
3下一篇ESP32-Web-Server编程- JS 基础 3
(码字不易感谢点赞或收藏)
