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

本文介绍: 1）本节主要是介绍 Jav aSc rip t 编程的基础知识，介绍了 JS 编程中的变量、函数、常见语句、事件的基础概念；2）在 HTML 中添加 JS 定义可以直接在script 标签中嵌入Jav aSc rip t 代码，也可以引入外部的Jav aSc rip t 文件。3）示例在 ESP32 We b 中添加了 JS 代码，用于实时显示当前时间。

前述分别在 HTML 基础和 CSS 基础中介绍了 HTML、CSS 的基本内容。HTML 定义了网页中包含哪些对象，CSS 定义了对象的显示样式。Jav aSc r ip t(Li v eSc r ip t)是一种运行于客户端的解释性脚本语言，使 HTML 页面更具动态性和交互性。比如实现响应你的点击鼠标、通过输入框向服务器提交登录密码，加载新的网页内容等等交互性功能。

Jav aScr ip t 语言与常见的 C 语言、Py t h on 语言类似，是包含顺序语句、逻辑语句的编程语言，当运行指定的语句、函数时就会指定预定义的功能。

Jav aScr ip t 主要的作用：

1）能够改变 HTML 内容

2）能够改变 HTML 属性

3）能够改变 HTML 样式 (CSS)

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&gt;";
    i++;
}

document.querySelector("html").addEventListener("click", () =&gt; {
  alert("别戳我，我怕疼。");
});

  <body>
      <script type="text/javaScript" 
      		src="http://www.........javaScript.js">
      </script>
  </body

<!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>