ESP32-Web-Server编程-JS 基础 1
ESP32-Web-Server编程-JS 基础 1
概述
前述分别在 HTML 基础 和 CSS 基础 中介绍了 HTML、CSS 的基本内容。HTML 定义了网页中包含哪些对象,CSS 定义了对象的显示样式。JavaScript(LiveScript)是一种运行于客户端的解释性脚本语言,使 HTML 页面更具动态性和交互性。比如实现响应你的点击鼠标、通过输入框向服务器提交登录密码,加载新的网页内容等等交互性功能。
JavaScript语言与常见的 C 语言、Python 语言类似,是包含顺序语句、逻辑语句的编程语言,当运行指定的语句、函数时就会指定预定义的功能。
JavaScript 主要的作用:
1)能够改变 HTML 内容
2)能够改变 HTML 属性
3)能够改变 HTML 样式 (CSS)
4) 能够隐藏 HTML 元素
5)能够显示 HTML 元素
JS 的基本语法
JS 是一个定义非常完善的编程语言,与 C\Python 类似,其包含变量(对大小写是敏感的)、语句(语句之间用分号分隔)、函数、作用域、循环结构、选择结构等概念。
变量示例:
var length = 10; // Number 通过数字字面量赋值
var points = x * 6; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Sab", "Vlvo", "B0W"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // 键值对对象 通过对象字面量赋值
class iot-wang { // 定义一个类constructor(name, url) {this.name = name;this.url = url;}
}
函数示例:
// 定义函数,返回 a 乘以 b 的结果
function myFunction(a, b) {return a * b;
}
// 调用一次该函数
myFunction();// 匿名函数
myButton.onclick = function () {alert("hello");
};
条件语句:
if (condition1)
{当条件 1 为 true 时执行的代码
}
else if (condition2)
{当条件 2 为 true 时执行的代码
}
else
{当条件 1 和 条件 2 都不为 true 时执行的代码
}
循环语句:
while (i<5)
{x=x + "The number is " + i + "<br>";i++;
}
事件,当触发一定的事件,如点击鼠标事件时触发执行某函数:
document.querySelector("html").addEventListener("click", () => {alert("别戳我,我怕疼。");
});
更多 JS 的学习资料可以参考 JavaScript 教程 | 菜鸟教程 (runoob.com).
在 HTML 中添加 JS 定义
在 THNL 页面中使用 JavaScript 代码主要有两种方法。
-
直接在script标签中嵌入JavaScript代码。
<body><script type="text/javaScript">......</script> </body>一般在比较大的项目里面是不推荐使用这种方法的,一般都是使用引入外部文件。一来是代码混乱,不好维护代码。二来是代码不美观。
-
引入外部的JavaScript文件。
<body><script type="text/javaScript" src="script1.js"></script> </body>
进一步地,也可以引入其他网页上的 js 文件:
<body><script type="text/javaScript" src="http://www.........javaScript.js"></script></body
JavaScript文件可位于 HTML 的 或 部分中,或者同时存在于两个部分中。但是为了整洁,通常都放置在 部分中。并且,通常将 JS 部分放在 HTML 文件的底部附近,因为浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。
需求及功能解析
本节主要演示如何在 ESP32 上通过 JS 脚本建立一个实时显示时间的网页。编译并烧录固件到设备参考:
本系列博客并不是一门专门介绍 JS 编程的课程,我们只需边实践边学习,了解常用的技术就可以了。
示例解析
与前述的示例类似(建议了解全系列博客-按顺序学习相关内容),本小节主要是 components/fs_image/index.html 中增加 JS 脚本:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>IOT LAO WANG</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="stylesheet.css"></head><body><h1>Date and Time</h1><p id="dateTime"></p>// JS 脚本<script>// var todays_date = new Date();// document.getElementById("dateTime").innerHTML = todays_date;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);</script></body>
</html>
示例效果:

其他 JS 示例
仓库中还提供了其他 JS 示例:
- js data time extern:
- js console
讨论
总结
1)本节主要是介绍 JavaScript 编程的基础知识,介绍了 JS 编程中的变量、函数、常见语句、事件的基础概念;
2)在 HTML 中添加 JS 定义可以直接在script标签中嵌入JavaScript代码,也可以引入外部的JavaScript文件。
3)示例在 ESP32 Web 中添加了 JS 代码,用于实时显示当前时间。
资源链接
1)ESP32-Web-Server ESP-IDF系列博客介绍
2)对应示例的 code 链接 (点击直达代码仓库)
3)下一篇:ESP32-Web-Server编程-JS 基础 2
(码字不易感谢点赞或收藏)
相关文章:
ESP32-Web-Server编程-JS 基础 1
ESP32-Web-Server编程-JS 基础 1 概述 前述分别在 HTML 基础 和 CSS 基础 中介绍了 HTML、CSS 的基本内容。HTML 定义了网页中包含哪些对象,CSS 定义了对象的显示样式。JavaScript(LiveScript)是一种运行于客户端的解释性脚本语言,使 HTML 页面更具动态…...
代码随想录算法训练营第23天|● 669. 修剪二叉搜索树 ● 108.将有序数组转换为二叉搜索树 ● 538.把二叉搜索树转换为累加树 ● 总结篇
108. 将有序数组转换为二叉搜索树 简单 给你一个整数数组 nums ,其中元素已经按 升序 排列,请你将其转换为一棵 高度平衡 二叉搜索树。 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树。 示例 1: …...
UniApp 中的 u-input 属性讲解
在 UniApp 中,u-input 是一个常用的组件,用于接收用户的输入。它具有多种属性,用于控制输入框的样式和行为。下面我将为您讲解一些常用的 u-input 属性。 基本属性 value:表示输入框的初始值,可以使用 v-model 进行双…...
解决方案:新版WPS-右键粘贴值到可见单元格没有了
WPS筛序后复制,并且粘贴到可见单元格 (如果直接粘贴数据会乱掉) 旧版WPS,右键就能出现 但是新版WPS不是在这里(方法1) 新版WPS(方法2) 视频详细教程链接:解决方案&…...
pat模拟题—7-11 两个序列的中位数
一个长度为n(n⩾1)的升序序列S,处在第2n个位置的数称为序列S的中位数(median number),例如,序列S1{10,13,14,16,18,19}的中位数是14。两个序列的中位数是它们所有元素的升序序列的中位数,例如,S2{2,4,8,9,20,21},则S1和S2的中位数是13。现有…...
Java中的i++是原子操作吗?
我们都知道i分为三步进行,分别是1:取到当前i的值,2:,3:将最终结果赋值 因此我们可通过创建两个线程,对同一个变量count,一个线程对count进行递增操作,另一个线程对count进行递减操作。每个线程…...
git commit message 书写规范
在使用 Git 提交时,遵循良好的提交消息规范可以提高代码的可读性和可维护性。以下是一些常见的 Git 提交消息书写规范: 提交消息格式:一个提交消息通常包含三个部分:标题、空行和正文。它们之间使用空行分隔。 复制 <标题>&…...
sql 注入 ctf wiki
部分转载ctf-wiki 判闭合形式: 哪个报错就是哪种 1,1’,1’‘,1’,1’(双引号带括号) 万能密码: admin’ – admin’ # admin’/* ’ or 11– ’ or 11# ’ or 11/* ) or ‘1’1– ) or (‘1’1– 数据库名: SEL…...
Flutter创建TabBar
使用TabBar和TabBarView来创建一个包含"首页"、"分类"和"我的"的TabBar。每个Tab对应一个Tab控件,TabBarView中的每个页面对应一个Widget。 1.Tab使用自定义图标和颜色 一般UI设计的图会带渐变色之类的,应该保持图片的原…...
双流网络论文精读笔记
精读视频:双流网络论文逐段精读【论文精读】_哔哩哔哩_bilibili Two-Stream Convolutional Networks for Action Recognition in Videos 传统的神经网络难以学习到物体的运动信息,双流网络则通过光流将物体运动信息抽取出来再传递给神经网络 给模型提供…...
机器人与3D视觉 Robotics Toolbox Python 一 安装 Robotics Toolbox Python
一 安装python 库 前置条件需要 Python > 3.6,使用pip 安装 pip install roboticstoolbox-python测试安装是否成功 import roboticstoolbox as rtb print(rtb.__version__)输出结果 二 Robotics Toolbox Python样例程序 加载机器人模型 加载由URDF文件定义…...
JS之Object.defineProperty方法
给对象添加属性的方法有许多,这次让我为大家介绍一种给对象添加属性的静态方法吧! 语法:Objcet.defineProperty(对象的名称,“添加的键名”,{value:键值}) const obj {name:"张三",age:18}// 我…...
卷积神经网络(CNN)注意力检测
文章目录 一、前言二、前期工作1. 设置GPU(如果使用的是CPU可以忽略这步)2. 导入数据3. 查看数据 二、数据预处理1.加载数据2. 可视化数据4. 配置数据集 三、调用官方网络模型四、设置动态学习率五、编译六、训练模型七、模型评估1. Accuracy与Loss图2. …...
4. 权限,特权
对数据段特权检查对直接转移的代码段特权检查栈段的检查调用门的检查 权限问题: 由于CPL,DPL 无法完整表达权限的问题. 例如用户程序(CPL3)通过调用门(将调用到内核过程,从低权限到高权限)执行,此时CPL0,此时可以为所欲为.因此加入RPL.此参数由操作系统来保证,CPU仅使用 RPL:…...
云原生系列Go语言篇-泛型Part 2
类型推导和泛型 就像在使用:时支持类型推导一样,在调用泛型函数时Go同样支持类型推导。可在上面对Map、Filter和Reduce调用中看出。有些场景无法进行类型推导(如类型参数仅用作返回值)。这时,必…...
借助ETL快速查询金蝶云星空表单信息
随着数字化转型的加速,企业信息化程度越来越高,大量的数据产生并存储在云端,需要进行有效的数据管理和查询。金蝶云星空是金蝶云旗下的一款云ERP产品,为企业提供了完整的业务流程和数据管理功能,因此需要进行有效的数据…...
基于深度学习的驾驶员状态监测预警系统(正文)
摘 要 近年来驾驶员因疲劳驾驶而造成的交通事故逐年增多,驾驶员的驾驶状态对道路和人身安全产生重大影响,因此做好驾驶员驾驶状态的管理及预警是非常有必要的。 随着深度学习在目标检测算法应用的不断深入,YOLOv5等目标检测算法也相继具有了广…...
读书笔记之《价值》张磊
读书笔记之《价值》张磊 自序 这是一条长期主义之路 长期主义——把时间和信念投入能够长期产生价值的事情中,尽力学习最有效率的思维方式和行为标准,遵循第一性原理,永远探求真理。 真正的投资,有且只有一条标准,那…...
【shell】文本三剑客之sed详解
目录 一、sed简介(行编辑器) 二、基本用法 三、sed脚本格式(匹配地址 脚本命令) 1、不给地址,那么就是针对全文处理 2、单地址,表示#,指定的行,$表示最后一行,/pattt…...
Centos7 制作Openssh9.5 RPM包
Centos7 制作Openssh9.5 RPM包 最近都在升级Openssh版本到9.3.在博客里也放了openssh 9.5的rpm包. 详见:https://blog.csdn.net/qq_29974229/article/details/133878576 但还是有小伙伴不停追问这个rpm包是怎么做的,怕下载别人的rpm包里被加了盐. 于是做了个关于怎么用官方的o…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
