重拾前端基础知识：JavaScript

前言
- 使用JavaScript
- 输出
- 语法
- 运算符
- 条件语句
- 循环
- 数据类型
- - 字符串
  - 数字
  - 数组
  - 对象
  - 日期
  - 函数
- 数学
- 正则表达式
- 异常处理
- 类
- 集合
- 模块
- JSON
- 闭包
- 异步
- 调试
- DOM（文档对象模型）
- - 事件
  - 事件监听器
  - 表单
- BOM（浏览器对象模型）
- - 弹出框
  - 定时任务
  - Cookie
- AJAX
- jQuery
- 图形
- 代码规范

前言

JavaScript 是一种高级的、解释性的编程语言，用于在网页上实现交互式效果和动态内容。它是一种多范式的语言，可以支持面向对象、函数式和基于原型的编程风格。

<!DOCTYPE html>
<html>
<head><title>网页标题</title>
</head>
<body><div id="date"></div><script>document.getElementById("date").innerHTML = Date();</script>
</body>
</html>

如图所示

在这里插入图片描述

使用JavaScript

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。

<!DOCTYPE html>
<html>
<head><title>网页标题</title>
</head>
<body><script>function change(){// todo}</script>
</body>
</html>

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

myScript.js文件内容如下

    function change(){// todo}

JavaScript 能够改变 HTML 内容、属性、样式 (CSS)。

<!DOCTYPE html>
<html>
<head><title>网页标题</title>
</head>
<body><div id="date" style="color: black;">这是默认内容</div><button onclick="change()">点击变换</button><script>function change(){document.getElementById("date").innerHTML = "改变后内容";document.getElementById("date").style.color = "red";}</script>
</body>
</html>

如图所示

在这里插入图片描述

输出

JavaScript 可以通过不同的方式来输出数据。

使用 window.alert() 弹出警告框。

  <script>window.alert("弹框示例");</script>

如图所示
在这里插入图片描述

使用 document.write() 方法将内容写到 HTML 文档中。

  <script>document.write(5 + 6);</script>

如图所示
在这里插入图片描述

使用 innerHTML 写入到 HTML 元素。

<!DOCTYPE html>
<html>
<head><title>网页标题</title>
</head>
<body><div id="content">默认示例</div><script>document.getElementById("content").innerHTML = "变化后示例";</script>
</body>
</html>

如图所示

在这里插入图片描述

使用 console.log() 写入到浏览器的控制台。

  <script>console.info("打印日志")</script>

如图所示

在这里插入图片描述

语法

语法规则定义了语言结构。

字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)。

  <script>document.write(123e5)</script>

如图所示

在这里插入图片描述
字符串（String）字面量可以使用单引号或双引号：

  <script>document.write("hello");document.write('world');</script>

如图所示

在这里插入图片描述
数组（Array）字面量定义一个数组：

[40, 100, 1, 5, 25, 10]

对象（Object）字面量定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量定义一个函数：

  <script>function myFunction(){return 5*10;}</script>

变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：

  <script>var age = 18;var name = '张三';</script>

您可以在一条语句中声明许多变量。

  <script>var person = "Bill Gates", carName = "porsche", price = 15000;</script>

所有 JavaScript 变量必须以唯一的名称的标识。这些唯一的名称称为标识符。

不带有值的变量，它的值将是 undefined。

  <script>var firstName;console.info(firstName);</script>

如图所示
在这里插入图片描述
let 和 const 是 JavaScript 新引入的关键词。它们用于声明变量，与旧关键词 var 不同。它们的主要区别在于作用域和可变性。

使用 let 声明的变量具有块级作用域，这意味着它们只在声明它们的代码块范围内有效。而使用 var 声明的变量则具有函数级作用域，这意味着它们在整个函数内都有效。

  <script>{let firstName = 1;}console.log(firstName)// firstName is not defined</script>

使用 const 声明的变量表示常量，一旦初始化就不能被重新赋值。而使用 let 声明的变量可以被重新赋值。

  <script>let z = 4;z = 5; // 可以被重新赋值const w = 6;w = 7; // 报错，常量不能被重新赋值</script>

如图所示
在这里插入图片描述

构造变量名称（唯一标识符）的通用规则是：

（1）名称可包含字母、数字、下划线和美元符号

（2）名称必须以字母开头

（3）名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）

（4）名称对大小写敏感（y 和 Y 是不同的变量）

（5）保留字（比如 JavaScript 的关键词）无法用作变量名称

作用域

在不同位置上定义的变量，拥有不同的作用域。

（1）全局作用域：全局（在函数之外）声明的变量拥有全局作用域。

  <script>var firstName = "porsche";function myFunction() {// 此处的代码也可以使用 firstName }</script>

（2）函数作用域：局部（函数内）声明的变量拥有函数作用域。

  <script>function myFunction() {// 只能在函数内使用var firstName = "porsche";}</script>

在相同的作用域，或在相同的块中，通过 let 重新声明变量是不允许的：
在这里插入图片描述

注释

注释的方式：单行注释（双斜杠 //）、多行注释（/**/）。

  <script>/* 赋值 操作*/var age = 18;//年龄var name = '张三';//姓名</script>

函数

JavaScript 语句可以写在函数内，函数可以重复引用：

引用一个函数 = 调用函数(执行函数内的语句)。

  <script>function myFunction(){return 5*10;}var fun = myFunction();</script>

字母大小写

JavaScript 对大小写是敏感的。当编写 JavaScript 语句时，请留意是否关闭大小写切换键。函数 getElementById() 与 getElementbyID() 是不同的。同样，变量 myVariable 与 MyVariable 也是不同的。

驼峰式大小写

命名的方式有很多种，常用的是驼峰命名

  <script>//下划线var first_name = '';//驼峰式大小写var firstName = '';</script>

运算符

算数运算符用于对数字执行算数运算：+ 加法、- 减法、* 乘法、/ 除法、% 取模（余数）、++ 递加、-- 递减。

  <script>var add = 8 + 7;var sub = 8 - 7;var mul = 8 * 7;var div = 8 / 7;var mod = 8 % 7;console.info(mod++);console.info(++mod);console.info(mod--);console.info(--mod);</script>

赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x-= y	x = x - y
*=	x *= y	x = x * y
/=	x/= y	x = x / y
%=	x %= y	x = x % y

示例代码

  <script>var x = 8;var y = 7;var add = x+=y;var sub = x-=y;var mul = x*=y;var div = x/=y;</script>

字符串运算符

+ 运算符也可用于对字符串进行相加，在用于字符串时，+ 运算符被称为级联运算符。

  <script>var x = "hello";var y = "world";console.info(x+y);// output: helloworld</script>

相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串：

  <script>var x = 7;var y = "day";console.info(x+y);// output: 7day</script>

比较运算符

布尔（逻辑）代表两个值之一：true 或 false。

运算符	描述
`==`	等于
`===`	等值等型
`!=`	不相等
`!==`	不等值或不等型
`>`	大于
`<`	小于
`>=`	大于或等于
`<=`	小于或等于
`?`	三元运算符

示例代码

  <script>console.info(1 == 1);// output: trueconsole.info(1 === 1);// output: trueconsole.info(1 != 1);// output: falseconsole.info(1 !== 1);// output: falseconsole.info(1 > 1);// output: falseconsole.info(1 < 1);// output: falseconsole.info(1 >= 1);// output: trueconsole.info(1 <= 1);// output: trueconsole.info(1 == 1 ? true : false);// output: true</script>

逻辑运算符

运算符	描述
`&&`	逻辑与
\|\|	逻辑或
`!`	逻辑非

示例代码

  <script>console.info(true && true);// output: trueconsole.info(true || false);// output: trueconsole.info(!"abc".endsWith("w"));// output: true</script>

位运算符

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
\|	或	5	1 0101	0001 0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
`>>`	有符号右位移	5 >> 1	0101 >> 1	0010	2
`>>>`	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

条件语句

条件语句用于基于不同条件执行不同的动作。在 JavaScript 中，我们可使用如下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码。

  <script>if(1==1){console.info("进入代码块，处理对应逻辑")}</script>

if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码。

  <script>if(1==2){console.info("结果为true，进入代码块，处理对应逻辑")}else{console.info("结果为false，进入代码块，处理对应逻辑")}</script>

if...else if....else 语句- 使用该语句来选择多个代码块之一来执行。

  <script>if(1==2){console.info("条件一为true，进入代码块，处理对应逻辑")}else if(1==3){console.info("条件二为true，进入代码块，处理对应逻辑")}else{console.info("条件一和二都为false，进入代码块，处理对应逻辑")}</script>

switch 语句 - 使用该语句来选择多个代码块之一来执行。

语法

switch(表达式) {case n:代码块break;case n:代码块break;default:默认代码块
}

示例代码如下：

  <script>switch (new Date().getDay()) {case 0:day = "星期天";break;case 1:day = "星期一";break;case 2:day = "星期二";break;case 3:day = "星期三";break;case 4:day = "星期四";break;case 5:day = "星期五";break;case 6:day = "星期六";break; default:day = "错误日期";} </script>

default 关键词规定不存在 case 匹配时所运行的代码。

有时您会需要不同的 case 来使用相同的代码。

  <script>switch (new Date().getDay()) {case 4:case 5:text = "周末快到了：）";break; case 0:case 6:text = "今天是周末~";break;default: text = "期待周末！";} </script>

循环

循环可以将代码块执行指定的次数。JavaScript 支持不同类型的循环：

for：循环代码块一定的次数。

语法

for (语句 1; 语句 2; 语句 3)
{被执行的代码块
}

示例代码如下：

  <script>for (var i=0; i<5; i++){console.log("当前数字为："+i);}/** output:当前数字为：0当前数字为：1当前数字为：2当前数字为：3当前数字为：4*/</script>

你可以通过for循环来遍历Arrays对象。

  <script>var arrs = new Array("a","b","c","d","e");for (var i=0; i<arrs.length; i++){console.log("当前值为："+arrs[i]);}/** output:当前值为：a当前值为：b当前值为：c当前值为：d当前值为：e*/</script>

for/in：循环遍历对象的属性。

语法

for (key in object) {// code block to be executed
}

示例代码如下：

  <script>var person={fname:"Bill",lname:"Gates",age:56}; for (x in person){// x 为属性名console.log(person[x]);}</script>

while：当指定的条件为 true 时循环指定的代码块。

语法

while (条件) {要执行的代码块
}

示例代码如下：

  <script>var i=0; while (i<5){console.log("当前遍历第"+i+"次");i++;}/* output:当前遍历第0次当前遍历第1次当前遍历第2次当前遍历第3次当前遍历第4次*/</script>

do/while：同样当指定的条件为 true 时循环指定的代码块（该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行）。

语法

do
{需要执行的代码
}while (条件);

示例代码如下：

  <script>var i=0; do{console.log("当前遍历第"+i+"次");i++;} while (i<5);/* output:当前遍历第0次当前遍历第1次当前遍历第2次当前遍历第3次当前遍历第4次*/</script>

Break 和 Continue

break 语句用于跳出循环。

  <script>var i=0; while (i<5){if(i == 3){break;}console.log("当前遍历第"+i+"次")i++;}/* output:当前遍历第0次当前遍历第1次当前遍历第2次*/</script>

continue 用于跳过循环中的一个迭代。

  <script>var i=0; while (i<5){i++;if(i == 3){continue;}console.log("当前遍历第"+i+"次")}/* output:当前遍历第1次当前遍历第2次当前遍历第4次当前遍历第5次*/</script>

数据类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

  <script>var x;               // x 为 undefinedvar x = 5;           // 现在 x 为数字var x = "John";      // 现在 x 为字符串</script>

变量的数据类型可以使用 typeof 操作符来查看：

  <script>console.log(typeof "John")console.log(typeof 5)</script>

如图所示

在这里插入图片描述

字符串

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

  <script>var x = "John";var y = 'John';</script>

布尔（逻辑）只能有两个值：true 或 false。

  <script>var x = true;var y = false;</script>

可以使用内置属性 length 来计算字符串的长度：

  <script>var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";console.log(str.length);//output: 26</script>

字符串中有许多特殊字符需要处理，可以使用反斜杠 (\) 来转义（反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符）。

  <script>var str = "this is a str \"Vikings\" test demo";</script>

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

代码	输出
`\'`	单引号
`\"`	双引号
`\\`	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

示例代码如下：

  <script>var str = "this is a str \r\n test demo";console.log(str);/** output* this is a str *  test demo*/</script>

还有许多字符串方法，比如：

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

示例代码如下

  <script>var str = "hello wrold";console.log(str.toLocaleUpperCase());/** output:*  HELLO WROLD*/</script>

你可以使用字符串的模板替换内容（模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串：）

  <script>let firstName = "Bill";let lastName = "Gates";let text = `Welcome ${firstName}, ${lastName}!`;console.log(text);//output: Welcome Bill, Gates!</script>

String() 可以将数字转换为字符串。

  <script>var x = new String(0.1+0.2)console.log(x.toString())</script>

数字

JavaScript 数值既可以带小数点，也可以不带：

  <script>var x = 3.14;    // 带小数点的数值var y = 3;       // 不带小数点的数值</script>

有时候会遇到精度问题，如下：

  <script>var x = 0.2 + 0.1;// x 将是 0.30000000000000004</script>

使用乘除法有助于解决上面的问题：

  <script>var x = (0.2 * 10 + 0.1 * 10) / 10; //输出 0.3alert(x)</script>

NaN 属于 JavaScript 保留词，指示某个数不是合法数。

  <script>var x = 100 / "Apple";  // x 将是 NaN（Not a Number）</script>

不过，假如字符串包含数值，则结果将是数：

  <script>var x = 100 / "10";     // x 将是 10</script>

我们可以使用一些方法，对数字进行一些处理。比如：toString()将数字作为字符串返回。

  <script>var x = 0.2 x = x.toString();console.log(typeof x);//output string</script>

你也可以使用toFixed()方法，不仅可以返回字符串还可以指定小数位数

  <script>var x = 0.23673; x = x.toFixed(2);console.log(x);//0.24console.log(typeof x);//output：string</script>

我们也可以调用一些方法将字符串类型转换为数值类型。

方法	描述
Number()	返回从其参数转换而来的数字。
parseFloat()	解析其参数并返回浮点数。
parseInt()	解析其参数并返回整数。

示例代码如下：

  <script>console.log(Number("10.5")); // 返回 10.5console.log(parseFloat("10.555"));// 返回 10.555console.log(parseInt("10.5"));// 返回 10</script>

数组

创建

数组是一种特殊的变量，它能够一次存放一个以上的值。定义数组的方式有三种，如下所示：

  <script>//方法一var arrs = new Array();arrs[0]="a";arrs[1]="b";//方法二arrs = new Array("a","b");//方法三arrs = ["a","b"];</script>

查询

我们通过引用索引号（下标号）来引用某个数组元素。

  <script>var arrs = new Array("a","b");console.log(arrs[0]);</script>

同样也可以使用这种方式修改数组

修改

  <script>var arrs = new Array("a","b");arrs[0] = 'c';console.log(arrs);//output [c,b]</script>

属性和方法

使用length 属性返回数组的长度（数组元素的数目）。

  <script>var arrs = new Array("a","b");console.log(arrs.length);//output 2</script>

join() 方法也可将所有数组元素结合为一个字符串。

  <script>var arrs = new Array("a","b");console.log(arrs.join(","));//output a,b</script>

pop() 方法从数组中删除最后一个元素，push() 方法（在数组结尾处）向数组添加一个新的元素：

  <script>var arrs = new Array("a","b");arrs.push('c');arrs.pop();console.log(arrs.join(","));//output a,b</script>

shift() 方法会删除首个数组元素，并把所有其他元素的索引向前移动。

  <script>var arrs = new Array("a","b");arrs.shift();console.log(arrs.join(","));//output b</script>

unshift() 方法（在开头）向数组添加新元素，并把所有其他元素的索引向后移动。

  <script>var arrs = new Array("a","b");arrs.unshift("aa");console.log(arrs.join(","));//output aa,a,b</script>

splice() 方法可用于向数组添加新项：

（1）第一个参数定义了应添加新元素的位置（拼接）。

（2）第二个参数定义应删除多少元素。

  <script>var arrs = new Array("a","b");arrs.splice(0,2,'c','d');console.log(arrs.join(","));//output c,d</script>

concat() 方法通过合并（连接）现有数组来创建一个新数组：

  <script>var arrs = new Array("a","b");var arrs2 = arrs.concat('c','d');console.log(arrs2.join(","));//output a,b,c,d</script>

slice() 方法用数组的某个片段切出新数组。

  <script>var arrs = new Array("a","b");var arrs2 = arrs.slice(1);console.log(arrs2.join(","));//output b</script>

排序

sort() 方法以字母顺序对数组进行排序：

  <script>var arrs = new Array("b","c","f","a");console.log(arrs.sort().join(","));//output a,b,c,f</script>

数字排序，通过一个比值函数来修正此问题：

  <script>var arrs = new Array(3,12,23,13,45,11);arrs.sort(function(a, b){return a - b}); console.log(arrs.join(","));//output 3,11,12,13,23,45</script>

迭代

数组迭代方法对每个数组项进行操作。

  <script>var numbers = [45, 4, 9, 16, 25];numbers.forEach(myFunction);function myFunction(value, index, array) {console.log(value,index,array);//output 3,11,12,13,23,45}</script>

如图所示

在这里插入图片描述

Array.map() 方法，用于创建一个新数组，其元素是原始数组中的每个元素调用一个提供的函数后返回的结果。这个方法会对数组中的每个元素依次调用传入的函数，并将返回值组合成一个新的数组。原始数组不会被改变。

  <script>var arrs = new Array(1,3,5,7,9);const doubled = arrs.map(myFunction)// const doubled = arrs.map(x => x * 2); 简化代码function myFunction(value, index, array) {return value * 2;}console.log(doubled); // 输出 [2, 6, 10, 14, 18]</script>

Array.filter()方法，用于创建一个新数组，其中包含通过传入函数测试的所有元素。

  <script>var arrs = new Array(1,3,5,7,9);// const doubled = arrs.filter(x => x % 3 == 0); 简化代码const doubled = arrs.filter(myFunction)function myFunction(value, index, array) {return value % 3 == 0;}console.log(doubled); // 输出 [3,9]</script>

Array.reduce() 方法，用于将数组中的所有元素通过指定的函数进行累积，最终返回一个单一的值。

  <script>var arrs = new Array(1,3,5,7,9);// const doubled = arrs.reduce((accumulator, value) => accumulator + value, 0); 简化代码const doubled = arrs.reduce(myFunction)function myFunction(accumulator, value, index, array) {return accumulator+value;}console.log(doubled); // 输出 25</script>

Array.every() 方法，用于检查数组中的所有元素是否都满足指定条件。

  <script>var arrs = new Array(1,3,5,6,9);// const doubled = arrs.every(x => x % 2 == 1); 简化代码const doubled = arrs.every(myFunction)function myFunction(value, index, array) {return value % 2 == 1;}console.log(doubled); // 输出 false</script>

Array.some() 方法，用于检查数组中是否至少有一个元素满足指定条件。

  <script>var arrs = new Array(1,3,5,6,9);// const doubled = arrs.some(x => x % 2 == 1); 简化代码const doubled = arrs.some(myFunction)function myFunction(value, index, array) {return value % 2 == 1;}console.log(doubled); // 输出 true</script>

Array.indexOf() 方法，用于在数组中查找指定元素的索引。

  <script>var arrs = new Array("a","b","c");const doubled = arrs.indexOf("b")console.log(doubled); // 输出 1</script>

Array.lastIndexOf() 方法，用于在数组中从后往前查找指定元素的索引。

  <script>var arrs = new Array("a","b","c");const doubled = arrs.lastIndexOf("c")console.log(doubled); // 输出 2const doubled2 = arrs.lastIndexOf("d")console.log(doubled2); // 输出 -1</script>

Array.find() 方法，用于查找数组中满足指定条件的第一个元素。

  <script>var arrs = new Array(2,4,6,8,10);// const doubled = arrs.find(x => x > 5);简写代码const doubled = arrs.find(myFunction);function myFunction(value, index, array) {return value > 5;}console.log(doubled); // 输出 6</script>

Array.findIndex() 方法，用于查找数组中满足指定条件的第一个元素，并返回该元素的索引。

  <script>var arrs = new Array(2,4,6,8,10);// const doubled = arrs.findIndex(x => x > 5);简写代码const doubled = arrs.findIndex(myFunction);function myFunction(value, index, array) {return value > 5;}console.log(doubled); // 输出 2</script>

用 const 声明的数组不能重新赋值

  <script>const arrs = new Array(2,4,6,8,10);arrs = new Array(1,3,5,7,9);//报错</script>

不影响，可以更改常量数组的元素

  <script>const arrs = new Array(2,4,6,8,10);arrs[2]= 7;console.log(arrs); // 输出 [2,4,7,8,10]</script>

对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

  <script>var person={firstname:"John", lastname:"Doe", id:5566};</script>

对象属性有两种寻址方式：

  <script>var person={firstname:"John", lastname:"Doe", id:5566};//方式一var firstname = person.firstname;console.log(firstname);//方式二var lastname = person["lastname"];console.log(lastname);</script>

如图所示

在这里插入图片描述

你可以在对象里定义一个函数，并调用它。

  <script>var person={firstname:"John", lastname:"Doe", id:5566,methodName:function(){console.log("this is object method");}  };//方法调用person.methodName();</script>

this 关键词

this 是一个特殊的关键字，用于引用当前执行代码的对象。它通常在函数内部使用，并根据函数的调用方式不同而动态地指向不同的对象。

在全局作用域中，this 指向全局对象，在浏览器环境中通常是 window 对象，在 Node.js 等环境中可能是其他全局对象。

  <script>console.log(this === window);  // 在浏览器环境中输出 true</script>

在函数内部，this 的值取决于函数被调用的方式：

  <script>function showThis() {console.log(this);}showThis();  // 在浏览器环境中输出 window 对象，在严格模式下输出 undefined</script>

如图所示
在这里插入图片描述
当函数作为对象的方法调用时，this 指向调用该方法的对象。

  <script>const obj = {name: 'Alice',greet: function() {console.log('Hello, ' + this.name);}};obj.greet();  // 输出 Hello, Alice</script>

箭头函数允许我们编写更短的函数

  <script>var hello = function() {return "Hello World!";}var hello2  = () => {return "Hello World!";}console.log(hello())console.log(hello2())</script>

如果函数只有一个语句，并且该语句返回一个值，则可以去掉括号和 return 关键字：

  <script>var hello = () => "Hello World!";console.log(hello())</script>

如果您有参数，则将它们传递到括号内：

  <script>var hello = (val) => "Hello "+ val;console.log(hello("world"))</script>

箭头函数的 this 值由定义时的外层作用域决定，而不是运行时的调用方式决定。

  <script>const obj = {name: 'David',greet: function() {const innerFunc = () => {console.log('Hello, ' + this.name);};innerFunc();}};obj.greet();  // 输出 Hello, David</script>

日期

默认情况下，JavaScript 将使用浏览器的时区并将日期显示为全文本字符串：

  <script>var d = new Date();console.log(d); // 输出 Wed Feb 28 2024 10:23:48 GMT+0800 (中国标准时间)</script>

有 4 种方法创建新的日期对象：

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)

用指定日期和时间创建新的日期对象。

  <script>//7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）var d = new Date(2024, 11, 24, 10, 33, 30, 0);console.log(d); // 输出 Tue Dec 24 2024 10:33:30 GMT+0800 (中国标准时间)//6个数字指定年、月、日、小时、分钟、秒d = new Date(2024, 11, 24, 10, 33, 30);console.log(d); // 输出 Tue Dec 24 2024 10:33:30 GMT+0800 (中国标准时间)//5个数字指定年、月、日、小时和分钟d = new Date(2024, 11, 24, 10, 33);console.log(d); // 输出 Tue Dec 24 2024 10:33:00 GMT+0800 (中国标准时间)//4个数字指定年、月、日和小时d = new Date(2024, 11, 24, 10);console.log(d); // 输出 Tue Dec 24 2024 10:00:00 GMT+0800 (中国标准时间)//3个数字指定年、月和日d = new Date(2024, 11, 24);console.log(d); // 输出 Tue Dec 24 2024 00:00:00 GMT+0800 (中国标准时间)//2个数字指定年份和月份d = new Date(2024, 11);console.log(d); // 输出 Sun Dec 01 2024 00:00:00 GMT+0800 (中国标准时间)//如果只提供一个参数，则将其视为毫秒。d = new Date(2024);console.log(d); // 输出 Thu Jan 01 1970 08:00:02 GMT+0800 (中国标准时间)</script>

你也可以通过调用方法设置日期

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

示例代码如下：

  <script>var d = new Date();d.setFullYear(2024);d.setMonth(3);d.setDate(21);d.setHours(9);d.setMinutes(12);d.setSeconds(22);console.log(d); // 输出 Sun Apr 21 2024 09:12:22 GMT+0800 (中国标准时间)</script>

ISO 8601 语法 (YYYY-MM-DD) 也是首选的 JavaScript 日期格式

  <script>var d = new Date("2024-09-12");console.log(d); // 输出 Thu Sep 12 2024 08:00:00 GMT+0800 (中国标准时间)</script>

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

示例代码如下：

  <script>var d = new Date();console.log(d.getDate()); // 输出 28console.log(d.getDay()); // 输出 3console.log(d.getFullYear()); // 输出 2024console.log(d.getHours()); // 输出 10console.log(d.getMinutes()); // 输出 37console.log(d.getSeconds()); // 输出 22</script>

空值与null

Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

  <script>var person;console.log(person);person = null;console.log(person);</script>

如图所示
在这里插入图片描述

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

  <script>function myFunction(){// 执行代码alert("Hello World!");}myFunction();</script>

如图所示
在这里插入图片描述
在调用函数时，您可以向其传递值，这些值被称为参数。

  <script>function myFunction(name,age){console.info("姓名："+name+"，年龄"+age)}myFunction("张三",18);</script>

如图所示

在这里插入图片描述
有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。

  <script>function myFunction(name,age){return "姓名："+name+"，年龄"+age;}var res = myFunction("张三",18);console.log(res);</script>

数学

Math 对象允许您对数字执行数学任务。

  <script>var a = Math.round(6.6);var b = Math.round(2.3);console.log(a); // 输出 7console.log(b); // 输出 2</script>

Math.pow(x, y) 的返回值是 x 的 y 次幂：

  <script>var a = Math.pow(2,4);console.log(a); // 输出 16</script>

Math.sqrt(x) 返回 x 的平方根：

  <script>var a = Math.sqrt(81);console.log(a); // 输出 9</script>

Math.abs(x) 返回 x 的绝对（正）值：

  <script>var a = Math.abs(-2.3);console.log(a); // 输出 2.3</script>

Math.ceil(x) 的返回值是 x 上舍入最接近的整数：

  <script>var a = Math.ceil(6.1);console.log(a); // 输出 7</script>

Math.floor(x) 的返回值是 x 下舍入最接近的整数：

  <script>var a = Math.floor(6.1);console.log(a); // 输出 6</script>

Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：

  <script>var a = Math.min(0, 450, 35, 10, -8, -300, -78);var b = Math.max(0, 450, 35, 10, -8, -300, -78);console.log(a); // 输出 -300console.log(b); // 输出 450</script>

Math.random() 返回介于 0（包括）与 1（不包括）之间的随机数：

  <script>var a = Math.random();console.log(a); // 输出 0.6547258234237794</script>

Math.random() 与 Math.floor() 一起使用用于返回随机整数。

  <script>var a = Math.floor(Math.random() * 10);		// 返回 0 至 9 之间的数;// var a = Math.floor(Math.random() * 100);		// 返回 0 至 99 之间的数;console.log(a); // 输出 4</script>

正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换操作。

语法

/正则表达式主体/修饰符(可选)

以下是一些常用的正则表达式相关操作：

创建正则表达式：可以使用字面量或者 RegExp 构造函数来创建正则表达式。例如：

使用字面量：const pattern = /pattern/;

使用构造函数：const pattern = new RegExp('pattern');

测试匹配：使用 test() 方法来测试字符串是否符合正则表达式的模式。例如：

  <script>const pattern = /hello/;const str = 'hello world';const isMatch = pattern.test(str); console.log(isMatch);// 返回 true</script>

查找匹配：使用 match() 方法来获取字符串中符合正则表达式的部分。例如：

  <script>const pattern = /worsld/;const str = 'hello world';const result = str.match(pattern);console.log(result);// 返回 ['world']</script>

替换匹配：使用 replace() 方法来替换字符串中符合正则表达式的部分。例如：

  <script>const pattern = /world/;const str = 'hello world';const result = str.replace(pattern, 'JavaScript');console.log(result);// 返回 'hello JavaScript'</script>

检索匹配位置：使用 search() 方法来查找字符串中第一个匹配项的位置。例如：

  <script>const pattern = /world/;const str = 'hello world';const result = str.search(pattern);console.log(result); // 返回 6</script>

拆分字符串：使用 split() 方法根据正则表达式匹配来拆分字符串。例如：

  <script>const pattern = /[, ]/;const str = 'apple, banana, orange';const arr = str.split(pattern);console.log(arr); // 返回 ['apple', 'banana', 'orange']</script>

异常处理

在 JavaScript 中，throw 语句用于抛出一个用户自定义的异常，并可以与 try...catch 语句结合使用来捕获并处理这个异常。

throw 语句

throw 语句用于手动抛出一个异常，其语法如下：

throw expression;

示例代码如下：

  <script>function validateInput(input) {if (input === '') {throw new Error('Input is empty');}// 其他验证逻辑}validateInput("")</script>

如图所示

在这里插入图片描述

try...catch 语句

try...catch 语句用于捕获和处理可能抛出的异常，其语法如下：

  <script>function validateInput(input) {if (input === '') {throw new Error('Input is empty');}// 其他验证逻辑}try {// 可能会抛出异常的代码块validateInput("");} catch (error) {// 捕获到异常后的处理代码console.error('An error occurred:', error.message);}</script>

如图所示

在这里插入图片描述

finally 语句

try...catch 语句还可以包含一个可选的 finally 块，无论是否发生异常，finally 块中的代码都会被执行。示例如下：

  <script>function validateInput(input) {if (input === '') {throw new Error('Input is empty');}// 其他验证逻辑}try {// 可能会抛出异常的代码块validateInput("");} catch (error) {// 捕获到异常后的处理代码console.error('An error occurred:', error.message);} finally {// 不论是否发生异常，都会执行的代码块console.log('Validation complete');}</script>

如图所示

在这里插入图片描述

类

在 JavaScript 中，类是一种特殊的函数，用于定义对象的模板。ES6（ECMAScript 2015）引入了类的概念，使得 JavaScript 支持面向对象编程的方式。通过类，我们可以创建具有相同属性和方法的多个对象实例。

使用关键字 class 创建类。

  <script>class demo{//todo}</script>

使用constructor()方法，创建构造函数，使用new关键字可以实例化一个类。

  <script>class Person {constructor(name,age){this.name = name;this.age = age;}greet() {console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);}}const person = new Person("张三",18);console.log(person.name);//output：张三console.log(person.age);//output：18person.greet();</script>

JavaScript 中的类支持继承，即一个类可以派生出另一个类。使用 extends 关键字来实现类的继承：

  <script>class Student extends Person {constructor(name, age, grade) {super(name, age); // 调用父类的构造函数this.grade = grade;}study() {console.log(`${this.name} is studying in grade ${this.grade}.`);}}const student = new Student('Charlie', 20, 12);student.greet();  // 输出 Hello, my name is Charlie and I'm 20 years old.student.study();  // 输出 Charlie is studying in grade 12.</script>

静态方法是使用 static 关键字修饰的方法，又叫类方法，属于类的，但不属于对象，在实例化对象之前可以通过 类名.方法名 调用静态方法。

  <script>class Person {constructor(name,age){this.name = name;this.age = age;}static greet() {console.log(`Hello`);}}Person.greet();</script>

集合

Set

在 JavaScript 中，集合（Set）是一种数据结构，用于存储不重复的元素。与数组不同，集合中的元素没有顺序，并且不能重复。

可以使用 new Set() 构造函数来创建一个空的集合，也可以传入包含元素的可迭代对象（如数组）来初始化集合。

  <script>// 创建一个空集合const emptySet = new Set();// 通过数组创建集合const numberSet = new Set([1, 2, 3, 4, 5]);</script>

JavaScript 的 Set 类提供了一系列方法来操作集合，常用的方法包括：

方法	说明
add(value)	向集合中添加一个新的元素。
delete(value)	从集合中删除指定元素。
has(value)	判断集合中是否存在指定元素，返回布尔值。
size	获取集合中元素的数量。
clear()	清空集合，移除所有元素。

示例代码如下：

  <script>const mySet = new Set();mySet.add(1);mySet.add(2);mySet.add(3);console.log(mySet.size); // 输出: 3console.log(mySet.has(2)); // 输出: truemySet.delete(2);console.log(mySet.has(2)); // 输出: falsemySet.clear();console.log(mySet.size); // 输出: 0</script>

可以使用 forEach 方法或 for...of 循环来遍历集合中的元素。

  <script>const mySet = new Set([1, 2, 3, 4, 5]);// 使用 forEach 方法遍历集合mySet.forEach((value) => {console.log(value);});// 使用 for...of 循环遍历集合for (const item of mySet) {console.log(item);}</script>

Map

在 JavaScript 中，Map 是一种用于存储键值对的集合，其中每个键都是唯一的。与普通对象（Object）相比，Map 提供了更多的灵活性和功能。Map 对象可以使用任意类型的值作为键或值，并且保留插入顺序。

可以使用 new Map() 构造函数来创建一个空的 Map 对象，并可以使用 set(key, value) 方法向 Map 中添加键值对。

  <script>const myMap = new Map();// 向 Map 中添加键值对myMap.set('key1', 'value1');myMap.set('key2', 'value2');</script>

JavaScript 的 Map 对象提供了一系列方法来操作键值对，常用的方法包括：

方法	说明
set(key, value)	向 Map 中添加或更新指定键的值。
get(key)	获取指定键的值。
has(key)	判断 Map 中是否存在指定键，返回布尔值。
delete(key)	删除指定键及其对应的值。
size	获取 Map 中键值对的数量。
clear()	清空 Map，移除所有键值对。

示例代码如下：

  <script>const myMap = new Map();myMap.set('key1', 'value1');myMap.set('key2', 'value2');console.log(myMap.get('key1')); // 输出: value1console.log(myMap.has('key3')); // 输出: falsemyMap.delete('key2');console.log(myMap.size); // 输出: 1myMap.clear();console.log(myMap.size); // 输出: 0</script>

以使用 forEach 方法或 for...of 循环来遍历 Map 中的键值对。

  <script>const myMap = new Map();myMap.set('key1', 'value1');myMap.set('key2', 'value2');// 使用 forEach 方法遍历 MapmyMap.forEach((value, key) => {console.log(`${key}: ${value}`);});// 使用 for...of 循环遍历 Mapfor (const [key, value] of myMap) {console.log(`${key}: ${value}`);}</script>

模块

在 JavaScript 中，模块是一种用于封装特定功能的代码单元。ES6（ECMAScript 2015）引入了模块化的概念，使得 JavaScript 开发者可以更好地组织和管理代码，并支持模块之间的依赖关系。

导出模块

要导出一个模块，可以使用 export 关键字。有两种主要方式可以导出模块中的内容：

// math.js
//方法一：默认导出（Default Export）
const add = (a, b) => a + b;
export default add;
//方法二：命名导出（Named Export）
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

要导入一个模块，可以使用 import 关键字。根据导出方式的不同，导入方式也有所区别：

  <script>//方法一：默认导入（Default Import）：import add from './math.js';console.log(add(2, 3)); // 输出 5//方法二：命名导入（Named Import）：import { multiply, divide } from './math.js';console.log(multiply(5, 4)); // 输出 20console.log(divide(10, 2)); // 输出 5</script>

注意：需要通过服务器启动才能生效，否则报CORS错误

JSON

JSON 是存储和传输数据的格式，是一种轻量级的数据交换格式。

{"firstName":"Bill", "lastName":"Gates"}

JSON 数据的书写方式是名称/值对，类似 JavaScript 对象属性。

JSON 数组在方括号中书写。

"employees":[{"firstName":"Bill", "lastName":"Gates"}, {"firstName":"Steve", "lastName":"Jobs"}, {"firstName":"Alan", "lastName":"Turing"}
]

把 JSON 文本转换为 JavaScript 对象，使用内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象。

  <script>const jsonStr = '{"name": "Alice", "age": 30, "city": "New York"}';const obj = JSON.parse(jsonStr);console.log(obj.name);  // 输出 Aliceconsole.log(obj.age);   // 输出 30console.log(obj.city);  // 输出 New York</script>

使用 JSON.stringify() 将一个 JavaScript 对象转换为 JSON 字符串。

  <script>const obj = {name: 'Alice',age: 30,city: 'New York'};const jsonStr = JSON.stringify(obj);console.log(jsonStr);// 输出 {"name":"Alice","age":30,"city":"New York"}</script>

闭包

闭包（Closure）是 JavaScript 中一种重要且常见的概念，它可以让函数访问其词法作用域之外的变量。当一个函数能够记住并访问所在的词法作用域时，就形成了闭包。

  <script>function outerFunction() {let outerVariable = 'I am from outer function';function innerFunction() {console.log(outerVariable); // 内部函数可以访问外部函数的变量}return innerFunction;}const innerFunc = outerFunction();innerFunc(); // 输出: I am from outer function</script>

异步

Promise

在 JavaScript 中，Promise 是一种用于处理异步操作的对象，它代表了一个异步操作的最终完成（或失败）以及其结果值。使用 Promise 可以更加清晰和可靠地处理异步操作，避免了传统的回调地狱问题。

可以使用 new Promise() 构造函数来创建一个 Promise 对象。Promise 构造函数接受一个带有 resolve 和 reject 两个参数的执行器函数，其中 resolve 和 reject 都是函数类型，用于异步操作成功和失败时调用。

  <script>const myPromise = new Promise((resolve, reject) => {// 异步操作，例如异步请求、定时器等// 当操作成功时调用 resolve，并传递操作结果// resolve('Operation successful');// 当操作失败时调用 reject，传递错误信息// reject('Operation failed');});</script>

可以使用 then 方法来处理 Promise 对象的成功情况，使用 catch 方法来处理 Promise 对象的失败情况。

  <script>myPromise.then((result) => {console.log('Operation successful: ' + result);}).catch((error) => {console.error('Operation failed: ' + error);});</script>

一个 Promise 对象可以处于三种状态之一：

（1）Pending：初始状态，既不是成功状态也不是失败状态。

（2）Fulfilled：意味着操作成功完成。

（3）Rejected：意味着操作失败。

一旦 Promise 处于 Fulfilled 或 Rejected 状态，它就变为 settled 状态，此后它的状态不会再发生变化。

Async

async 函数是一种用于更方便地处理异步操作的函数类型。async 函数使得编写和管理异步代码变得更加简单和直观，同时结合 await 关键字可以有效避免回调地狱问题。

使用 async 关键字定义一个异步函数，异步函数会返回一个 Promise 对象，该对象在函数执行完毕后会根据函数的执行结果进行 resolve 或 reject。

  <script>async function fetchData() {return 'Data fetched';}</script>

在 async 函数中，可以使用 await 关键字来等待一个 Promise 对象的解决，并返回其解决值。

  <script>async function fetchAndProcessData() {const data = await fetchData();console.log(data);}</script>

使用 Promise.all() 方法可以实现并行执行多个异步操作，并等待它们都完成后再继续执行后续逻辑。

  <script>async function fetchMultipleData() {const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);console.log('Data 1: ', data1);console.log('Data 2: ', data2);}</script>

调试

在编写 JavaScript 时，如果没有调试工具将是一件很痛苦的事情。

如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值，然后在Chrome 浏览器上进行 JavaScript 代码的运行与调试（F12或右键“检查”）。
在这里插入图片描述
我们可以在 Console 窗口调试 JavaScript代码，如下图：

在这里插入图片描述
在 Sources 窗口，设置断点。在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。

DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

访问 HTML 元素最常用的方法是使用元素的 id。innerHTML 属性可用于获取或替换 HTML 元素的内容。

<!DOCTYPE html>
<html>
<head><title>网页标题</title>
</head>
<body><p id="p1">Hello World!</p><script>document.getElementById("p1").innerHTML="新文本!";</script>
</body>
</html>

下面是一些如何使用 document 对象来访问和操作 HTML 的实例。

查找 HTML 元素

document.getElementById(id)：通过元素 id 来查找元素

  <script>document.getElementById("p1");</script>

document.getElementsByTagName(name)：通过标签名来查找元素

  <script>// 获取所有的 <p> 元素var paragraphs = document.getElementsByTagName('p');// 遍历所有的 <p> 元素，并修改它们的样式for (var i = 0; i < paragraphs.length; i++) {paragraphs[i].style.color = 'red';}</script>

document.getElementsByClassName(name)：通过类名来查找元素

  <script>// 获取所有具有 "example" 类名的元素var elements = document.getElementsByClassName('example');// 遍历所有具有 "example" 类名的元素，并修改它们的样式for (var i = 0; i < elements.length; i++) {elements[i].style.color = 'blue';}</script>

改变 HTML 元素

element.innerHTML = new html content ：改变元素的 inner HTML

  <script>document.getElementById("p1").innerHTML="新文本!";</script>

element.setAttribute(attribute, value)：设置元素的属性

  <script>var element = document.getElementById('myElement');element.setAttribute('id', 'newIdValue');</script>

element.style.property = new style：访问和修改元素的内联样式（inline style）的属性。

  <script>var element = document.getElementById('myElement');// 获取元素的颜色属性var color = element.style.color;// 设置元素的背景颜色属性element.style.backgroundColor = 'lightblue';</script>

添加和删除元素

document.createElement(element)：创建 HTML 元素

  <script>// 创建一个新的 <div> 元素var newDiv = document.createElement('div');// 将新创建的 <div> 添加到文档中的某个元素内部var parentElement = document.getElementById('parent');parentElement.appendChild(newDiv);</script>

document.removeChild(element)：删除 HTML 元素

  <script>var element = document.getElementById('myElement');element.parentNode.removeChild(element);</script>

document.appendChild(element)：添加 HTML 元素

  <script>var newElement = document.createElement('div');document.body.appendChild(newElement);</script>

document.replaceChild(element)：替换 HTML 元素

  <script>var oldElement = document.getElementById('oldElement');var newElement = document.createElement('div');oldElement.parentNode.replaceChild(newElement, oldElement);</script>

document.write(text)：写入 HTML 输出流

  <script>document.write('<h1>Hello, World!</h1>');</script>

事件

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

下面是一些常见的HTML事件的列表：

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

示例代码如下：

<!DOCTYPE html>
<html>
<head><title>网页标题</title>
</head>
<body onload="onloadFunction()"><select id="mySelect" onchange="onchangeFunction()"><option value="1">选项 1</option><option value="2">选项 2</option><option value="3">选项 3</option></select><button onclick="onclickFunction()">点击</button><script>function onloadFunction(){alert("页面加载完")}function onchangeFunction() {var x = document.getElementById("mySelect").value;alert("你选择了选项 " + x)}function onclickFunction(){alert("点击事件")}</script>
</body>
</html>

如图所示

在这里插入图片描述

事件监听器

addEventListener() 方法是 JavaScript 中用于向指定元素添加事件监听器的方法。通过 addEventListener() 方法，可以为指定的事件（比如点击事件、鼠标移入事件等）绑定一个处理函数，当事件发生时，该处理函数将被调用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
</head>
<body>
<button id="myButton">Click Me!</button><script>
var button = document.getElementById('myButton');// 添加点击事件监听器
button.addEventListener('click', function() {alert('Button Clicked!');
});
</script>
</body>
</html>

表单

HTML 表单验证可以通过 JavaScript 来完成。

<!DOCTYPE html>
<html>
<head><title>网页标题</title>
</head>
<body onload="onloadFunction()"><form name="myForm" action="/demo" onsubmit="return validateForm()" method="post">名字: <input type="text" name="fname"><input type="submit" value="提交"></form><script>function validateForm(){var x = document.forms["myForm"]["fname"].value;if (x == null || x == "") {alert("需要输入名字。");return false;}}</script>
</body>
</html>

如图所示
在这里插入图片描述
当用户点击提交按钮并表单通过验证后，将触发 onsubmit 事件，validateForm() 函数将被调用。如果输入框中的值为空，则会弹出一个警告框，并且返回 false，从而阻止表单提交；否则，返回 true，允许表单提交。

BOM（浏览器对象模型）

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

所有浏览器都支持 window 对象。它代表浏览器的窗口。

  <script>var innerHeight = window.innerHeight; //浏览器窗口的内高度（以像素计）var innerWidth = window.innerWidth; //浏览器窗口的内宽度（以像素计）console.log(innerHeight);console.log(innerWidth)</script>

一些其他方法：

  <script>window.open(); //打开新窗口window.close(); //关闭当前窗口window.moveTo(); //移动当前窗口window.resizeTo(); //重新调整当前窗口</script>

window.screen对象在编写时可以不使用 window 这个前缀。

（1）screen.width: 返回用户屏幕的总宽度（以像素为单位）。

（2）screen.height: 返回用户屏幕的总高度（以像素为单位）。

（3）screen.availWidth: 返回用户屏幕的可用宽度，即不包括操作系统任务栏和类似界面的宽度。

（4）screen.availHeight: 返回用户屏幕的可用高度，即不包括操作系统任务栏和类似界面的高度。

（5）screen.colorDepth: 返回用户屏幕的颜色深度，即每个像素的位数，通常为 24 位（相当于 8 位红色、8 位绿色和 8 位蓝色）。

（6）screen.pixelDepth: 与 screen.colorDepth 具有相同的功能，返回用户屏幕的像素深度

示例代码如下：

  <script>console.log('Screen Width: ' + screen.width);//output：Screen Width: 2160console.log('Screen Height: ' + screen.height);//output：Screen Height: 1440console.log('Available Width: ' + screen.availWidth);//output：Available Width: 2160console.log('Available Height: ' + screen.availHeight);//output：Available Height: 1400console.log('Color Depth: ' + screen.colorDepth);//output：Color Depth: 24console.log('Pixel Depth: ' + screen.pixelDepth);//output：Pixel Depth: 24</script>

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

（1）window.location.href：包含完整的 URL，可以用来读取当前页面的 URL 或者将页面重定向到新的 URL。

（2）window.location.protocol：包含页面使用的协议，如 “http:”、“https:”。

（3）window.location.host：包含主机名和端口号，如 “www.example.com:80”。

（4）window.location.hostname：包含主机名，如 “www.example.com”。

（5）window.location.port：包含端口号，如 “80”。

（6）window.location.pathname：包含 URL 的路径部分，如 “/path/to/page.html”。

（7）window.location.search：包含 URL 的查询参数部分，如 “?key1=value1&key2=value2”。

（8）window.location.hash：包含 URL 的哈希（#）部分，如 “#section1”。

示例代码如下：

  <script>// 获取当前页面的完整 URLvar currentURL = window.location.href;console.log('Current URL: ' + currentURL);// 获取当前页面的协议var protocol = window.location.protocol;console.log('Protocol: ' + protocol);// 获取当前页面的主机名和端口号var host = window.location.host;console.log('Host: ' + host);// 获取当前页面的路径部分var path = window.location.pathname;console.log('Pathname: ' + path);// 获取当前页面的查询参数部分var search = window.location.search;console.log('Search: ' + search);// 获取当前页面的哈希部分var hash = window.location.hash;console.log('Hash: ' + hash);</script>

window.history 对象包含浏览器历史。

（1）window.history.length：返回当前会话历史中的页面数量。

（2）window.history.back()：类似于点击浏览器的后退按钮，使浏览器返回到历史记录中的前一个页面。

（3）window.history.forward()：类似于点击浏览器的前进按钮，使浏览器前进到历史记录中的下一个页面。

（4）window.history.go(number)：加载会话历史中的某个具体页面，number 参数可为正负整数，表示前进或后退的步数。

示例代码如下：

  <script>// 返回到历史记录中的前一个页面function goBack() {window.history.back();}// 前进到历史记录中的下一个页面function goForward() {window.history.forward();}// 前进或后退指定步数function goToPage(step) {window.history.go(step);}</script>

window.navigator 对象包含有关访问者的信息。

（1）window.navigator.userAgent：返回用户代理字符串，其中包含有关浏览器的信息。

（2）window.navigator.appName：返回浏览器的名称。

（3）window.navigator.appVersion：返回浏览器的版本信息。

（4）window.navigator.platform：返回操作系统平台信息。

（5）window.navigator.language：返回用户的首选语言。

（6）window.navigator.cookieEnabled：指示浏览器是否启用了 cookie。

（7）window.navigator.onLine：指示浏览器是否处于在线状态。

  <script>// 获取用户代理字符串var userAgent = window.navigator.userAgent;console.log('User Agent: ' + userAgent);// 获取浏览器名称var browserName = window.navigator.appName;console.log('Browser Name: ' + browserName);// 获取浏览器版本信息var browserVersion = window.navigator.appVersion;console.log('Browser Version: ' + browserVersion);// 获取操作系统平台信息var platform = window.navigator.platform;console.log('Platform: ' + platform);// 获取用户首选语言var language = window.navigator.language;console.log('Language: ' + language);// 检查浏览器是否启用了 cookievar isCookieEnabled = window.navigator.cookieEnabled;console.log('Cookie Enabled: ' + isCookieEnabled);// 检查浏览器是否处于在线状态var isOnline = window.navigator.onLine;console.log('Online Status: ' + isOnline);</script>

弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。

警告框

用于向用户显示一条警告消息，并要求用户单击“确定”按钮进行确认。警告框通常用于向用户显示重要的信息或警告。

  <script>window.alert("这是一个警告消息");</script>

如图所示
在这里插入图片描述

确认框

用于向用户显示一个消息以及“确定”和“取消”两个按钮，用户可以选择其中一个来执行相应的操作。确认框通常用于要求用户确认或取消某个操作。

  <script>var result = window.confirm("您确定要执行此操作吗？");if (result) {// 用户点击了“确定”按钮} else {// 用户点击了“取消”按钮}</script>

如图所示
在这里插入图片描述

提示框

用于向用户显示一个提示消息，并要求用户输入文本。提示框通常用于要求用户输入一些信息或数据。

  <script>var userInput = window.prompt("请输入您的姓名", "张三");if (userInput !== null) {// 用户点击了“确定”按钮，并且输入了内容console.log("您输入的姓名是：" + userInput);} else {// 用户点击了“取消”按钮}</script>

如图所示
在这里插入图片描述

定时任务

setInterval 和 setTimeout 都是 JavaScript 中用于定时执行代码的函数，它们之间的主要区别在于执行的方式和使用场景。

setInterval()方法

setInterval() 函数会按照指定的时间间隔重复调用一个函数或执行一段代码。语法如下：

setInterval(function, delay)

（1）function：要重复执行的函数或代码块。

（2）delay：指定执行函数之间的时间间隔（以毫秒为单位）。

setInterval() 会按照指定的时间间隔反复调用函数，直到调用 clearInterval() 来清除计时器或页面被关闭。

  <script>let count = 0;const intervalId = setInterval(() => {console.log('Interval:', count);count++;if (count === 5) {clearInterval(intervalId); // 清除定时器}}, 1000);</script>

setTimeout()方法

setTimeout() 函数用于在指定的延迟后执行一次函数或代码块。语法如下：

setTimeout(function, delay)

（1）function：要重复执行的函数或代码块。

（2）delay：指定延迟执行的时间（以毫秒为单位）。

setTimeout() 在指定的延迟时间后执行一次函数，然后停止。如果希望周期性执行代码，可以在函数内部再次调用 setTimeout() 来实现循环。

  <script>setTimeout(() => {console.log('Timeout: Hello, world!');}, 2000);</script>

Cookie

在 JavaScript 中，可以通过使用 Cookies 来存储和获取用户在网站上的信息。Cookies 是存储在用户计算机上的小型文本文件，用于跟踪用户的会话状态、存储用户首选项等。

设置 Cookie

document.cookie = "cookieName=cookieValue; expires=expirationDate; path=pathValue";

（1）cookieName：Cookie 的名称。
（2）cookieValue：Cookie 的值。
（3）expires：Cookie 的过期时间，可以是一个日期对象或 GMT 格式的字符串。
（4）path：Cookie 的路径，指定 Cookie 可以访问的页面路径。

示例代码：

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

获取 Cookie

var cookieValue = document.cookie;

可以将返回的字符串进行解析，获取特定 Cookie 的值。

删除 Cookie

document.cookie = "cookieName=; expires=expirationDate; path=pathValue; max-age=0";

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换和更新部分页面内容。通过 AJAX 技术，可以实现更快速、更流畅的用户体验，同时减少对服务器的请求次数，提高网站的性能和响应速度。

使用 AJAX 的常见场景包括：

表单验证：在用户填写表单时，使用 AJAX 验证输入的信息，而无需刷新整个页面。
动态加载内容：通过 AJAX 加载新的内容，例如在滚动页面时加载更多的数据。
即时搜索：在用户输入搜索关键词时，使用 AJAX 在后台请求相关的搜索结果并动态显示在页面上。
提交表单：使用 AJAX 提交表单数据，而无需重新加载整个页面。

XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。这意味着可以更新网页的部分内容，而无需重新加载整个页面。

以下是一个简单的使用 AJAX 请求数据并更新页面内容的示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX Example</title>
</head>
<body><h2>获取外部数据</h2>
<button onclick="loadData()">加载数据</button>
<div id="data-container"></div><script>
function loadData() {// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();// 定义当请求状态改变时的处理函数xhr.onreadystatechange = function() {// 请求完成并成功返回if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status === 200) {// 解析服务器响应的 JSON 数据var data = JSON.parse(xhr.responseText);// 将数据显示在页面上document.getElementById('data-container').innerHTML = data.message;} else {// 如果请求失败，打印错误信息到控制台console.error('数据加载失败');}}};// 打开一个新的 GET 请求，请求的地址为 https://api.example.com/dataxhr.open('GET', 'https://api.example.com/data', true);// 发送请求xhr.send();
}
</script></body>
</html>

onreadystatechange 属性定义了一个回调函数，当 readyState 改变时执行该函数。

属性	描述
onreadystatechange	定义当 readyState 属性改变时调用的函数。
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立、2：请求已收到、3：正在处理请求、4：请求已完成且响应已就绪
status	返回请求的状态号。200: "OK、"403: “Forbidden”、404: “Not Found”
statusText	返回状态文本（比如 “OK” 或 “Not Found”）。

jQuery

jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。

引入jquery文件

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

与JavaScript获取元素方式不同，jquery使用$("选择器+名称")获取元素，示例代码如下：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><p id="p1">Hello World!</p><script>var a = $("#p1").text();console.log(a);</script>
</body>
</html>

你也可以更改 HTML 元素的字体尺寸，示例代码如下：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><p id="p1">Hello World!</p><script>var a = $("#p1").css("font-size","35px");</script>
</body>
</html>

后续有时间在写一篇jQuery的教程，有兴趣的小伙伴可以自行学习。

图形

用于人工智能图形和其他图表的 JavaScript 库：Plotly.js、Chart.js、Google Chart。

Plotly.js

<!DOCTYPE html>
<html>
<head><title>网页标题</title><script src="https://cdn.bootcdn.net/ajax/libs/plotly.js/2.26.0/plotly-basic.min.js"></script>
</head>
<body><div id="myPlot" style="width:100%;max-width:700px"></div><script>var xArray = [50,60,70,80,90,100,110,120,130,140,150];var yArray = [7,8,8,9,9,9,10,11,14,14,15];// 定义数据var data = [{x:xArray,y:yArray,mode:"markers"}];// 定义布局var layout = {xaxis: {range: [40, 160], title: "平方米"},yaxis: {range: [5, 16], title: "价格（百万元）"},  title: "房价 vs. 面积"};// 使用 Plotly 来显示Plotly.newPlot("myPlot", data, layout);</script>
</body>
</html>

如图所示
在这里插入图片描述

详细内容参考官网：https://plotly.com/javascript/

Chart.js

<!DOCTYPE html>
<html>
<head><title>网页标题</title><script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body><canvas id="myChart" style="width:100%;max-width:600px"></canvas><script>var xValues = ["意大利", "法国", "西班牙", "美国", "阿根廷"];var yValues = [55, 49, 44, 24, 15];var barColors = ["#b91d47","#00aba9","#2b5797","#e8c3b9","#1e7145"];new Chart("myChart", {type: "pie",data: {labels: xValues,datasets: [{backgroundColor: barColors,data: yValues}]},options: {title: {display: true,text: "全球葡萄酒生产 2018"}}});</script>
</body>
</html>

如图所示

在这里插入图片描述

详细内容参考官网：https://chartjs.cn/

Google Chart

<!DOCTYPE html>
<html>
<head><title>网页标题</title><script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body><div id="myChart" style="width:100%; max-width:600px; height:500px;"></div><script>google.charts.load('current', {'packages':['corechart']});google.charts.setOnLoadCallback(drawChart);function drawChart() {var data = google.visualization.arrayToDataTable([['Contry', 'Mhl'],['Italy',55],['France',49],['Spain',44],['USA',24],['Argentina',15]]);var options = {title:'全球葡萄酒生产'};var chart = new google.visualization.BarChart(document.getElementById('myChart'));chart.draw(data, options);}</script>
</body>
</html>

如图所示

在这里插入图片描述
详细内容参考官网：https://developers.google.cn/chart?hl=zh-cn

代码规范

我们对标识符名称（变量和函数）使用了驼峰式大小写。所有名称以字母开头。

firstName = "Bill";
lastName = "Gates";

代码缩进

请始终使用对代码块缩进使用 4 个空格。

  <script type="module">function toCelsius(fahrenheit) {return (5 / 9) * (fahrenheit - 32);}</script>

顶部声明

好的编码习惯是把所有声明放在每段脚本或函数的顶部。

  <script>// 在顶部声明var firstName, lastName;// 稍后使用firstName = "Bill";lastName = "Gates";</script>

初始化变量

在您声明变量时对其进行初始化是个好习惯，有效避免未定义值。

  <script>// 在开头进行声明和初始化var firstName = "",lastName  = "",price = 0,discount = 0,fullPrice  = 0,myArray = [],myObject = {};</script>

自动类型转换

请意识到数值会被意外转换为字符串或 NaN（Not a Number）。

JavaScript 属于松散类型。变量可包含不同的数据类型，并且变量能够改变其数据类型：

  <script>var x = "Hello";     // typeof x 为字符串x = 5;               // 把 typeof x 更改为数值</script>

javascript:void(0) 含义

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

语法格式如下：

void func()
javascript:void func()

下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。

<a href="javascript:void(0)">单击此处什么也不会发生</a>

当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。