网站整改方案,jexus wordpress,北京新浪网站制作公司,西宁休闲娱乐场所ESP32-Web-Server编程-JS 基础 1
概述
前述分别在 HTML 基础 和 CSS 基础 中介绍了 HTML、CSS 的基本内容。HTML 定义了网页中包含哪些对象#xff0c;CSS 定义了对象的显示样式。JavaScript(LiveScript)是一种运行于客户端的解释性脚本语言#xff0c;使 HTML 页面更具动态…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 (i5)
{xx The number is i br;i;
}事件当触发一定的事件如点击鼠标事件时触发执行某函数
document.querySelector(html).addEventListener(click, () {alert(别戳我我怕疼。);
});更多 JS 的学习资料可以参考 JavaScript 教程 | 菜鸟教程 (runoob.com).
在 HTML 中添加 JS 定义
在 THNL 页面中使用 JavaScript 代码主要有两种方法。 直接在script标签中嵌入JavaScript代码。 bodyscript typetext/javaScript....../script
/body一般在比较大的项目里面是不推荐使用这种方法的一般都是使用引入外部文件。一来是代码混乱不好维护代码。二来是代码不美观。 引入外部的JavaScript文件。 bodyscript typetext/javaScript srcscript1.js/script
/body进一步地也可以引入其他网页上的 js 文件 bodyscript typetext/javaScript srchttp://www.........javaScript.js/script/bodyJavaScript文件可位于 HTML 的 或 部分中或者同时存在于两个部分中。但是为了整洁通常都放置在 部分中。并且通常将 JS 部分放在 HTML 文件的底部附近因为浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML那么它可能由于 HTML 尚未被加载而失效。
需求及功能解析
本节主要演示如何在 ESP32 上通过 JS 脚本建立一个实时显示时间的网页。编译并烧录固件到设备参考
本系列博客并不是一门专门介绍 JS 编程的课程我们只需边实践边学习了解常用的技术就可以了。
示例解析
与前述的示例类似建议了解全系列博客-按顺序学习相关内容本小节主要是 components/fs_image/index.html 中增加 JS 脚本
!DOCTYPE html
htmlheadmeta charsetUTF-8titleIOT LAO WANG/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet typetext/css hrefstylesheet.css/headbodyh1Date and Time/h1p iddateTime/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 externjs console
讨论
总结
1本节主要是介绍 JavaScript 编程的基础知识介绍了 JS 编程中的变量、函数、常见语句、事件的基础概念
2在 HTML 中添加 JS 定义可以直接在script标签中嵌入JavaScript代码也可以引入外部的JavaScript文件。
3示例在 ESP32 Web 中添加了 JS 代码用于实时显示当前时间。
资源链接
1ESP32-Web-Server ESP-IDF系列博客介绍 2对应示例的 code 链接 点击直达代码仓库
3下一篇ESP32-Web-Server编程-JS 基础 2
(码字不易感谢点赞或收藏)
