文章目录
- 前言：JavaScript简介
- 一、ECMAscript（JavaScript基本语法）
- 1 JavaScript与html结合方式（快速入门）
- 2 基本知识
- （1）JavaScript注释（和Java注释一样）
- （2）JS输出语句
- 使用 window.alert()写入警告框
- 使用 document.write()写入 HTML界面 输出
- 使用 console.log()写入浏览器控制台
- （3）{ }代码块
- 3 变量
- （0）函数作用域 块级作用域 全局作用域
- （1）var关键字：var 变量名 = 初始化值;（当成python变量来理解）
- （2）let关键字：let 变量名 = 初始化值;（当成java变量来理解） ，ES6才引入
- （3）var和let声明变量的区别？
- 4 常量 const
- 5 数据类型（原始数据类型、引用数据类型）
- （1）原始数据类型(基本数据类型)
- number: 数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
- string: 字符串。字符串 "abc"，"a"，'abc'
- boolean: true和false
- null: 一个对象为空的占位符
- undefined: 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
- （2）引用数据类型(对象)
- （3）typeof(): 查看数据类型（类似python的type()函数）
- 6 （字符串方法）JS中的原始数据类型string的属性和常用方法
- （1）length属性
- （2）charAt(索引位置)方法：返回指定位置的字符
- （3）indexOf(字符串)方法：返回字符串中指定值的第一个出现的位置
- （4）trim()方法：去除字符串两端的空格
- （5）substring(开始位置, 结束位置)方法：返回指定位置的字符
- 7 运算符
- （1）一元运算符 ++, - - , +（正号，不是加）-（负号）
- （2）算数运算符 + ，- ，*，/ ，%（取模）等等
- （3）赋值运算符 = ，+=，-=, *= 等等
- （4）比较运算符 >, < , >=,<=, =\=(宽松等于)，===（严格等于），!=(宽松不等于), !=\=(严格不等于)
- （5）逻辑运算符 &&（与） ||（或） ！（非）
- （6）三元运算符 ：条件 ? 表达式1 : 表达式2
- （7） JavaScript运算符中的自动隐式转换功能
- ---- + ：加号与正号的区分（特性）及其各自特殊用法
- ---- boolean规则 + 自动转换
- （8）总结
- 8 流程控制语句
- （1）if...else...
- （2）switch语句
- （3）while 循环
- （4）for循环
- （5）break，continue，return 语句
- （6）练习：9x9乘法表 （待定！！！！！！！）
- 9 函数
- （1）函数的定义方式一：常用
- （2）函数的定义方式二：了解即可
- （3）JS函数声明中的隐藏arguments数组
- （4）JS函数中的一些注意事项（充分体现了JS是一门不严谨语言）
- 10 对象
- （1）Array数组
- 基本定义
- 属性和方法
- ---- length属性
- ---- join(分隔符) 方法用于把数组中的所有元素按照指定分隔符拼接一个字符串
- ---- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
- ---- pop() 方法用于删除并返回数组的最后一个元素
- ---- shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
- ---- splice(开始删除的索引位置，删几个) ：从数组中删除元素
- Array数组的遍历
- ---- 遍历数组1: 普通for循环会遍历所有元素，包括空位
- ---- 遍历数组2: for...of循环会遍历所有元素，包括空位
- ---- 遍历数组3: forEach方法会跳过空位
- （2）JSON对象
- ---- JSON（字符串）的创建
- ---- JSON的解析
- JSON.parse(json字符串)：JSON字符串转JS对象()JS中的一个字面量对象了变成)
- JSON.stringify(jsObject): JS对象转JSON字符串
- （3）Date 日期对象
- （4）Math 对象（静态，直接类名调用）
- （5）RegExp 对象（正则表达式对象）
- （6）Global对象：里面有一些全局方法
- ---- encodeURI() 对 URI 进行编码；decodeURI() 对 URI 进行解码
- ---- encodeURIComponent() 对 URI 进行编码，编码的方式更加复杂一些；decodeURIComponent() 对 URI 进行解码
- ---- parseInt() 将字符串转为整数
- ---- parseFloat() 将字符串转为浮点数。
- ---- isNaN() 检查一个值是否为 NaN
- ---- eval()：将字符串转出JS代码执行
- 11 JS自定义类、自定义对象
- （1）自定义类（ES6 引入了 class 关键字）
- （2）自定义对象（JSON对象其实就是指这个JS对象）
- 二、BOM对象
- 1 Window: 浏览器窗口对象
- （1）Window_弹出方法
- ---- window.alert() 显示一个警告框
- ---- window.confirm() 显示一个确认框，返回用户的选择（true 或 false）
- ---- window.prompt() 显示一个提示框，返回用户输入的字符串
- （2）Window_打开关闭方法
- ---- window.open(url) 打开一个新窗口或标签页，并返回打开的窗口的window对象
- ---- window.close() 关闭当前窗口
- （3）Window_定时器方法
- 一次性计时器
- ---- window.setTimeout(要执行的函数，毫秒值) 在指定的毫秒数后执行一次函数（一次性计时器），返回一个计时器id唯一标识
- ---- window.clearTimeout() 取消由 setTimeout() 设置的定时器
- 周期性计时器
- ---- window.setInterval(要执行的函数，毫秒值) 每隔指定的毫秒数重复执行一次函数（周期性计时器）,会返回一个计时器id唯一标识
- ---- window.clearInterval() 取消由 setInterval() 设置的定时器
- 案例：轮播图（待定！！！！！！！）
- （4）Window_属性
- ---- document 返回当前窗口的 Document 对象（DOM 树的根节点）
- ---- console 返回当前窗口的 控制台 对象
- ---- location 返回当前窗口的 Location 对象（URL 信息）
- ---- navigator 返回当前窗口的 Navigator 对象（浏览器信息）
- ---- screen 返回当前窗口的 Screen 对象（屏幕信息）
- ---- history 返回当前窗口的 History 对象（浏览历史）
- 2 Location: 地址栏对象
- (1)基本属性和方法使用
- (2)案例：自动跳转首页（待定！！！！！）
- 3 History: 历史记录对象
- 三、DOM对象
- 1 Document对象的属性和方法
- （1）获取Element元素对象
- ---- document.getElementById(id属性值) 通过 id 属性值获取元素节点,返回单个Element对象
- ---- document.getElementsByClassName(class 属性值) 通过 class 属性值获取元素节点数组, 返回Element对象数组
- ---- document.getElementsByTagName(标签名) 通过标签名获取元素节点数组, 返回Element对象数组
- ---- document.getElementsByName(name属性值) 根据name属性值获取，返回Element对象数组
- （2）创建其他DOM对象并插入到指定位置
- 创建其他DOM对象
- ---- createElement() 创建一个新的元素节点（Element）对象
- ---- createAttribute(name) 创建一个新的属性节点（Attribute）对象
- ---- createTextNode() 创建一个新的文本节点（Text）对象
- ---- createComment() 创建一个新的注释节点（Comment）对象
- 将创建的DOM对象插入html指定位置处（其实下面两个是Node对象里面通用方法，后面会讲）
- ---- appendChild() 将节点添加到指定元素的子节点列表末尾
- ---- insertBefore() 将节点插入到指定元素的前面
- 2 Element对象的属性和方法
- 属性
- ---- innerHTML属性 获取或设置元素的 HTML 内容
- ---- textContent 获取或设置元素的文本内容（忽略 HTML 标签）
- ---- style 返回元素的样式对象，用于操作内联样式（可以用这个修改css里面具体信息）
- 方法
- ---- getAttribute()：获取属性值
- ---- setAttribute(): 设置属性值
- ---- removeAttribute(): 删除属性
- ---- querySelector(selector) 返回元素内匹配指定选择器的第一个子元素
- ---- querySelectorAll(selector) 返回元素内匹配指定选择器的所有子元素（NodeList）
- 3 Node对象的属性和方法
- （1）属性
- ---- parentNode: 返回父节点
- （2）方法
- ---- appendChild(node): 将一个节点添加到子节点列表的末尾
- ---- removeChild(node): 从子节点列表中移除一个节点
- ---- replaceChild(newNode, oldNode): 替换一个子节点
- ---- insertBefore(newNode, referenceNode): 在指定节点前插入一个新节点
- 4 DOM_进行CSS样式控制
- （1）方式1：使用Element对象的style属性（前面讲Element对象演示过）
- （2）方式2：使用Element对象的className属性选择类选择器样式
- 5 JS事件监听
- （1）addEventListener事件监听
- （2）事件监听简写方式
- 方式一：通过HTML标签中事件属性进行绑定
- 方式二：通过Element节点对象的属性
- 练习
- 1 案例1：点亮灯泡（待定！！！！！！！）
- 2 案例2：动态表格操作（待定！！！！！！！）
前言：JavaScript简介
-
概念: 一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
- 脚本语言: 不需要编译，直接就可以被浏览器解析执行了
-
功能:
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 -
JavaScript发展史:
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为:c–, 后来更名为:ScriptEase
- 1995年, Netscape(网景)公司，开发了一门客户端脚本语言: Livescript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
- 1996年，微软抄袭JavaScript开发出JScript语言
- 1997年，ECMA(欧洲计算机制造商协会)，制定了一套所有的客户端脚本语言要遵守的规范ECMAScript，就是所有客户端脚本语言的标准
JavaScript = ECMAscript + JavaScript自己特有的东西(BOM+DOM)
一、ECMAscript（JavaScript基本语法）
ECMAscript是一套统一的标准，类似与数据库中的SQL语法，通用的。所以将其理解为JavaScript基本语法也是没有错的。
1 JavaScript与html结合方式（快速入门）
参考视频
- 与html的结合方式：
- 内部JS: 定义<script>标签，标签体里面的内容就是js代码
- 外部JS: 定义<script>标签，通过src属性引入外部的js文件
- 注意:
- <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序
- <script>可以定义多个。
内部JS：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素状态示例</title></head>
<body><!-- 内部JS：可以在html的任意位置插入js代码，注意插入的位置，位置不同，执行的时机也不同 --><script>alert("hello world"); // 弹出一个警告框</script></body>
</html>
外部JS： js文件使用 .js后缀即可
b.js
alert("我是外部引入的b.js文件");
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素状态示例</title></head>
<body><!-- 外部部JS：可以在html的任意位置引入外部js，注意插入的位置，位置不同，执行的时机也不同 --><script src="b.js"></script></body>
</html>
2 基本知识
（1）JavaScript注释（和Java注释一样）
- 单行注释: //注释内容
- 多行注释: /*注释内容*/
（2）JS输出语句
使用 window.alert()写入警告框
使用 document.write()写入 HTML界面 输出
使用 console.log()写入浏览器控制台
（3）{ }代码块
- JS同样也是一门{ }代码块区分语言
3 变量
（0）函数作用域 块级作用域 全局作用域
学习变量前先来学习一下作用域的概念
-
作用域
- 函数作用域：顾名思义根据函数内外来区分变量作用域
- 典型的就是python中的global关键字定义全局变量、局部变量
- 全局作用域：就是全局的意思
- 典型就是各种类里面定义在最前面的 self、this这些属性变量
- python中直接写在最外面的层的变量，作用域也是全局作用域
- 块级作用域：仅仅在{ }内起作用
- 典型的就是java所有变量的作用范围都是根据{ }确定的
就算是java中的类属性，是全局的，实际上也是因为其属于的{ }是最顶层，所以也才是全局的作用域
- 典型的就是java所有变量的作用范围都是根据{ }确定的
- 函数作用域：顾名思义根据函数内外来区分变量作用域
-
各种语言：
- python：函数作用域 + 全局作用域
全局作用域：定义在最外层的变量；类属性（self）; 函数内部使用global声明的变量；（主要是这三种情况）
函数作用域：变量定义在函数内外分为来确定变量的作用范围，函数内部定义的变量就只能函数内部使用，除非使用global声明才能继续外部也能访问 - java：块级作用域 + 全局作用域
这个很好理解，java变量作用范围一切以{ }为标准 - JS：函数作用域+块级作用域+全局作用域
这个JS就结合了python和java的一切情况了- 使用 var定义变量，就是python那一套，要使用函数作用域那一套规则
- 使用let定义变量，那作用范围就是{ }，另外如果是在最顶层的文件用let定义变量，那作用范围也是全局，也变成了全局的了
- python：函数作用域 + 全局作用域
（1）var关键字：var 变量名 = 初始化值;（当成python变量来理解）
-
变量: 一小块存储数据的内存空间
-
Java语言是强类型语言，而JavaScript是弱类型语言
- 强类型: 在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
int a = 3; 那么后面给a赋值只能是int, a = "hello"就是违法的 ---- 这就是强类型的含义 - 弱类型: 在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
var a = 3; 那么后面对a进行赋值可以任意赋值任意类型， a = "hello"是合法的。（和python有点像）
- 强类型: 在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
-
语法：
- var 变量名 = 初始化值;
- var 变量名；
- var关键字就是声明一个变量，不管任意类型数据类型
-
加入函数的概念就可以引入全局变量与局部变量的概念
变量的定义使用var关键字，也可以不使用- 用: 定义的变量是局部变量
- 不用: 定义的变量是全局变量(不建议)
结合function函数理解。其实就是和python中的global关键字声明全局变量，一样的效果。
-
变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
<script>var a;a = 10;alert(a); // 弹出10这么一个提示框a = "hello";alert(a); // 弹出hello这么一个提示框
</script>
【注】：js语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略(但不建议)
（2）let关键字：let 变量名 = 初始化值;（当成java变量来理解） ，ES6才引入
- 规则：
- let 声明的变量是块级作用域（block scope），即变量只在声明它的代码块（如 {}）内有效。
- 如果在最外层，直接文件最上层都还没有{ }，那用let声明的变量同样是全局作用域了。
（3）var和let声明变量的区别？
举一个例子就明白了：
总结就是 在{ }里面定义的var在{}外面也能访问（var作用范围只和函数内外有关），let不行（let作用范围只和{ }有关）
<script>{var a = 1;}console.log(a); // 1{let b = 2;}console.log(b); // Uncaught ReferenceError: b is not defined ,直接报错
</script>
4 常量 const
- const 是 JavaScript 中用于声明 常量 的关键字，也是在 ES6（ECMAScript 2015） 中引入的。
- const 声明的变量必须在声明时初始化，且不能重新赋值。
- 块级作用域: 与 let 类似，const 声明的变量具有块级作用域（block scope），即变量只在声明它的代码块（如 {}）内有效。
const PI = 3.14159;
const API_URL = "https://api.example.com";
5 数据类型（原始数据类型、引用数据类型）
（1）原始数据类型(基本数据类型)
number: 数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
string: 字符串。字符串 “abc”，“a”，‘abc’
boolean: true和false
null: 一个对象为空的占位符
undefined: 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
<script>// 定义number类型var num = 1;var num2 = 1.2;var num3 = NaN;// document.write()方法用于向文档写入HTML表达式(类似java中的System.out.println())document.write(num + "<br>");document.write(num2 + "<br>");document.write(num3 + "<br>");// 定义string类型var str = "hello";var str2 = 'world';document.write(str + "<br>");document.write(str2 + "<br>");// 定义boolean类型var bool = true;var bool2 = false;document.write(bool + "<br>");document.write(bool2 + "<br>");// 定义null类型和undefined类型var n = null;document.write(n + "<br>");var u = undefined;var u2;document.write(u + "<br>");document.write(u2 + "<br>");</script>
（2）引用数据类型(对象)
（3）typeof(): 查看数据类型（类似python的type()函数）
<script>// 定义number类型var num = 1;document.write(num + "----" + typeof(num) + "<br>"); // 1----numbervar str2 = 'world';document.write(str2 + "----" + typeof(str2) + "<br>"); // world----string// 定义boolean类型var bool = true;document.write(bool + "----" + typeof(bool) + "<br>"); // true----boolean// 定义null类型和undefined类型var n = null;document.write(n + "----" + typeof(n) + "<br>"); // null----objectvar u = undefined;document.write(u + "----" + typeof(u) + "<br>"); // undefined----undefined
</script>
可以看到 null的数据类型竟然是object(对象)，这其实是JavaScript的一个bug，但是一直沿用至今
注释: 您也许会问，为什么 typeof 运算符对于 null 值会返回"object"。这实际上是 JavaScript 最初实现中的一个错误，然后被
ECMAScript 沿用了。现在，null 被认为是对象的占位符, 从而解释了这一矛盾，但从技术上来说,它仍然是原始值。
6 （字符串方法）JS中的原始数据类型string的属性和常用方法
JS中的string字符串虽然是原始数据类型，但是里面存在和java中一样的自动装箱机制会将其封装成一个字符串对象，里面定义了一些方法我们是可以使用的。
（1）length属性
（2）charAt(索引位置)方法：返回指定位置的字符
（3）indexOf(字符串)方法：返回字符串中指定值的第一个出现的位置
（4）trim()方法：去除字符串两端的空格
（5）substring(开始位置, 结束位置)方法：返回指定位置的字符
// JS中的string的属性和方法// 1. length属性
var str = "hello";
console.log(str.length); // 5// 2. charAt(索引位置)方法：返回指定位置的字符
console.log(str.charAt(0)); // h// 3. indexOf(字符串)方法：返回字符串中指定值的第一个出现的位置
console.log(str.indexOf("ll")); // 2// 4 trim()方法：去除字符串两端的空格
var str2 = " hello ";
console.log(str2.trim()); // hello// 5 substring(开始位置, 结束位置)方法：返回指定位置的字符
// 左闭右开
var str = "hello world";
console.log(str.substring(6, 10)); // worl
7 运算符
Java运算符参考
（1）一元运算符 ++, - - , +（正号，不是加）-（负号）
自增和自减的注意事项参考java里面的
- 正号：+1，+3
- 负号：-1，-3
就是数学上的那个，用于界面上可以展示的。正号和符号的特殊用法需要注意的就是在【6JavaScript自带强转功能在运算符运算中】
（2）算数运算符 + ，- ，*，/ ，%（取模）等等
略过，和java中的一样。
（3）赋值运算符 = ，+=，-=, *= 等等
（4）比较运算符 >, < , >=,<=, ==(宽松等于)，===（严格等于），!=(宽松不等于), !==(严格不等于)
- ==（宽松等于）
功能: 比较两个值是否相等，会进行自动类型转换再比较。
console.log(5 == "5"); // true，因为类型转换后相等
console.log(true == 1); // true，因为 true 转换为 1
console.log(null == undefined); // true
- ===（严格等于）
功能: 比较两个值是否相等，不会进行类型转换。
这个才是其他编程里面的等于
console.log(5 === "5"); // false，因为类型不同
console.log(true === 1); // false，因为类型不同
console.log(null === undefined); // false
- !=（宽松不等于）
功能: 比较两个值是否不相等，会进行类型转换。
console.log(5 != "5"); // false，因为类型转换后相等
console.log(5 != 10); // true
console.log(true != 1); // false，因为 true 转换为 1
- !==（严格不等于）
功能: 比较两个值是否不相等，不会进行类型转换。
console.log(5 !== "5"); // true，因为类型不同
console.log(5 !== 10); // true
console.log(true !== 1); // true，因为类型不同
【注】：>==是不合法的呦，别被带偏了。另外 5>"4"这种写法在javascript中会返回true，很神奇吧，这种设计自动的隐式转换规则放在现在是很离谱的，但是没有办法，javascript一开始设计就是要避免将报错信息展现在前端，为了兼容以前的产品，就没有将这种离谱的隐式转换规则改正过来。我们还是当遵从java那个隐式转换规则，这个javascript里面的太自由了，很危险，完全没有必要这么干
（5）逻辑运算符 &&（与） ||（或） ！（非）
和java一样，&&（与）、 ||（或）都具有短路效果
（6）三元运算符 ：条件 ? 表达式1 : 表达式2
- 如果 条件 为 true，则返回 表达式1 的值。
- 如果 条件 为 false，则返回 表达式2 的值。
<script>var a = 3;var b = 4;var c = a > b ? 1:0;
</script>
（7） JavaScript运算符中的自动隐式转换功能
Java运算符强制转换特性参考
上面在演示的时候也挑出来几个演示了一下这个特性，这里再挑几个详细讲一下
注意: 在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型转换
在这个里面比较特殊的就是 + 这个运算符在什么情况下表示 加号还是正号了
---- + ：加号与正号的区分（特性）及其各自特殊用法
JavaScript 会根据上下文自动区分它们是加号还是正号。
- 区分正号和加号
- 加号 (+): 作为二元运算符（有两个操作数），用于加法或字符串拼接。
- 正号 (+): 作为一元运算符（只有一个操作数），用于将操作数转换为数字。
- 加号 (+)：加号用于 算术加法 或 字符串拼接。
- 算数加法：这个不用讲也知道
当操作数都是数字时，+ 表示加法运算。 - 字符串拼接（只要有一个操作数是字符串就表示拼接）
当至少有一个操作数是字符串时，+ 表示字符串拼接。
- 算数加法：这个不用讲也知道
console.log("hell0" + 10000); // "Hello10000"
- 正号 (+)
- 数字转换（比较常见就是字符串转数字，+可以让其自动强转）
当 + 作为一元运算符（只有一个操作数）时，它会尝试将操作数转换为数字。 - 布尔值转换
布尔值 true 和 false 会被转换为 1 和 0。 - 其他类型转换
如果操作数无法转换为数字，则结果为 NaN。
很显然负号也有这些转换规则
- 数字转换（比较常见就是字符串转数字，+可以让其自动强转）
let str = "123";
let num = +str;
console.log(num); // 123（数字类型）console.log(+true); // 1
console.log(+false); // 0console.log(+"Hello"); // NaN
console.log(+null); // 0
console.log(+undefined); // NaN
---- boolean规则 + 自动转换
- 其他类型转boolean:
- number: 0或NaN为假，其他为真
- string: 除了空字符串(“”)，其他都是true
- null&undefined: 都是false
- 对象: 所有对象都为true
这些规则是 JavaScript 隐式类型转换的一部分，通常用于条件判断、逻辑运算等场景。特别是结合当成 while （条件），if (条件)，这些里面条件如果不是布尔就会自动按照上面规则转换成布尔
if (0) {console.log("This will not run");
}
if ("Hello") {console.log("This will run");
}
（8）总结
JavaScript运算符中的自动转换功能很离谱，实际开发中我们最好还是按照java的规则来，但是也要知道一点这些离谱的自动转换，防止其他人秀操作你看不懂。自己写，java的规则就能实现，何必玩这些有的没的折磨自己。
8 流程控制语句
先回顾一下JS里面的JS规则
- 其他类型转boolean:
- number: 0或NaN为假，其他为真
- string: 除了空字符串(“”)，其他都是true
- null&undefined: 都是false
- 对象: 所有对象都为true
这些规则是 JavaScript 隐式类型转换的一部分，通常用于条件判断、逻辑运算等场景。特别是结合当成 while （条件），if (条件)，这些里面条件如果不是布尔就会自动按照上面规则转换成布尔
（1）if…else…
- 语法：
if (条件) {// 条件为 true 时执行的代码
}
if (条件) {// 条件为 true 时执行的代码
} else {// 条件为 false 时执行的代码
}
if (条件1) {// 条件1为 true 时执行的代码
} else if (条件2) {// 条件2为 true 时执行的代码
} else {// 所有条件为 false 时执行的代码
}
（2）switch语句
-
在java中，switch语句可以接受的数据类型：byte int shor char, 枚举(jdk1.5)，string(jdk1.7）
-
在JS中, switch语句可以接受任意的原始数据类型
-
语法：
switch (表达式) {case 值1:// 表达式等于值1时执行的代码break;case 值2:// 表达式等于值2时执行的代码break;default:// 表达式不等于任何值时执行的代码
}
var day = "Monday";
switch (day) {case "Monday":console.log("今天是周一");break;case "Tuesday":console.log("今天是周二");break;default:console.log("今天不是周一或周二");
}
（3）while 循环
- 语法：
while (条件) {// 循环体
}
var sum = 0;
var num = 1;
while (条件) {sum = sum + num;num++;
}
alter(sum); // 5050
（4）for循环
- 语法：
for循环这里还有很多变体，这里我们先学习最基本的
for (初始化; 条件; 更新) {// 循环体
}
var sum = 0;
for (var i = 1; i <= 100; i++){
sum += i;
}
alter(sum);
（5）break，continue，return 语句
和其他编程语言完全一样。
（6）练习：9x9乘法表 （待定！！！！！！！）
参考视频
9 函数
（1）函数的定义方式一：常用
- 介绍: 函数(方法)是被设计为执行特定任务的代码块。
- 定义: JavaScript 函数通过 function 关键字进行定义，语法为:
- 注意:
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
- 和python的函数比较像，都不用声明参数类型
- 调用: 函数名称(实际参数列表)
- 注意JS中，函数调用可以传递任意个数的参数
下面的add例子，其他语言都要严格 add(10,20)才行，但JS可以add(10,20,40,50), 随便传它只取前两个
- 注意JS中，函数调用可以传递任意个数的参数
（2）函数的定义方式二：了解即可
- 介绍：在JS中函数也是一个对象，因此也提供了下面这种定义函数方式
（3）JS函数声明中的隐藏arguments数组
- 在JS中定义函数时该函数会自动创建一个隐藏的数组arguments，用来存放调用中传入的实际参数封装所有的实际参数
在函数内部我们可以直接用变量名arguments访问这个数组 - 利用这个特性我们可以实现JS中的可变参数
基本演示
// arguments 是一个类数组对象，包含了函数调用时传入的所有参数
function add(){console.log(arguments[0]); console.log(arguments[1]);
}add(1,2,3,4,5); // 1,2add(1); // 1,undefined
可变参数求任意个参数的和
<script>// arguments 是一个类数组对象，包含了函数调用时传入的所有参数function add(){let sum = 0;for(let i = 0; i < arguments.length; i++){sum += arguments[i];}return sum;}console.log(add(1, 2, 3, 4, 5)); // 15console.log(add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)); // 55
</script>
（4）JS函数中的一些注意事项（充分体现了JS是一门不严谨语言）
- 注意1: JS中，函数调用可以传递任意个数的参数
function add(a,b){return a+b;
}
console.log(add(1,2)); //3
console.log(add(1,2,3,4,5)); //3
console.log(add(1)); //NaN
- 注意1: JS中，如果定义相同名字函数，不会报错，后面写的函数会完全覆盖前面的
function add(a,b){return a+b;
}
console.log(add(1,2)); //-1function add(a,b){return a - b;
}
console.log(add(1,2)); //-1
可以看到都是调用a-b的那一个
10 对象
（1）Array数组
基本定义
- JavaScript 中 Array对象用于定义数组。
- 定义：
- 访问：
- 特点：
- JS中Array数组 长度可变，同一个数组可以存放不同数据类型
- JS中不存在索引越界（JS的不严谨特性）
这种不严谨性千万别带到其他语言上去
// 特点：长度可变，元素类型可变
var arr = [1, 2, 3, 4];arr[10] = 50; // JS中不会报错（不存在索引越界问题），但是会自动补充中间的空位，默认是初始化成undefined
console.log(arr); // [1, 2, 3, 4, empty × 6, 50]arr[9] = "hello"; // 可以混合存储不同类型的元素
arr[8] = true;console.log(arr); // [1, 2, 3, 4, empty × 4, true, "hello", empty, "50"]
属性和方法
- 属性
| 属性 | 描述 |
|---|---|
| length | 设置或返回数组中元素的数量 |
- 方法
| 方法 | 描述 |
|---|---|
| push() | 向数组的末尾添加一个或多个元素，，并返回新的长度 |
| join(参数) | 将数组中的元素按照指定的分隔拼接为字符串 |
| pop() | 删除并返回数组的最后一个元素 |
| shift() | 删除并返回数组的第一个元素 |
| splice(开始删除的索引位置，删几个) | 从数组中删除元素 |
---- length属性
---- join(分隔符) 方法用于把数组中的所有元素按照指定分隔符拼接一个字符串
---- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
---- pop() 方法用于删除并返回数组的最后一个元素
---- shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
---- splice(开始删除的索引位置，删几个) ：从数组中删除元素
// join(分隔符) 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
// 默认分隔符是逗号拼接
var arr = ["h", "e", "l", "l", "o","1"];
console.log(arr.join()); // h,e,l,l,o,1
console.log(arr.join("_")); // h_e_l_l_o_1// push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
var arr1 = ["h", "e", "l", "l", "o"];
arr1.push(100);
console.log(arr1); // ["h", "e", "l", "l", "o", 100]
arr1.push(200, 300);
console.log(arr1); // ["h", "e", "l", "l", "o", 100, 200, 300]// pop() 方法用于删除并返回数组的最后一个元素。
var arr2 = ["h", "e", "l", "l", "o"];
var last = arr2.pop();
console.log(last); // o
console.log(arr2); // ["h", "e", "l", "l"]// shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
var arr3 = ["h", "e", "l", "l", "o"];
var first = arr3.shift();
console.log(first); // h
console.log(arr3); // ["e", "l", "l", "o"] // splice(开始删除的索引位置，删几个) ：从数组中删除元素
var arr4 = ["h", "e", "l", "l", "o"];
arr4.splice(1, 2); // 从索引1开始删除2个元素
console.log(arr4); // ["h", "l", "o"]
Array数组的遍历
---- 遍历数组1: 普通for循环会遍历所有元素，包括空位
---- 遍历数组2: for…of循环会遍历所有元素，包括空位
---- 遍历数组3: forEach方法会跳过空位
forEach(函数) 方法：遍历数组中每一个有值的元素，并调用一次传入的函数（可以写成lambda表达式）
// 特点：长度可变，元素类型可变
var arr = [1, 2, 3, 4];arr[10] = 50; // JS中不会报错（不存在索引越界问题），但是会自动补充中间的空位
console.log(arr); // [1, 2, 3, 4, empty × 6, 50]arr[9] = "hello"; // 可以混合存储不同类型的元素
arr[8] = true;console.log(arr); // [1, 2, 3, 4, empty × 4, true, "hello", empty, "50"] console.log("=====================================");// 遍历数组1: 普通for循环会遍历所有元素，包括空位
for (let index = 0; index < arr.length; index++) {console.log(arr[index]); // 1 2 3 4 undefined undefined undefined undefined true "hello" 50
}console.log("=====================================");// 遍历数组2: for...of循环会遍历所有元素，包括空位
for (let e of arr) {console.log(e); // 1 2 3 4 true hello 50
}console.log("=====================================");// 遍历数组3: forEach方法会跳过空位
arr.forEach(function(e){console.log(e); // 1 2 3 4 true hello 50})// 箭头函数写法 (...) => {...} 其实下面还可以省略一些，这里为了更清晰就不省略了
// 和java中的lambda表达式类似
arr.forEach((e) => {console.log(e);
}) // 1 2 3 4 true hello 50
（2）JSON对象
学JSON对象前建议先学了【11 JS自定义类、自定义对象】
- 概念: JavaScript Object Notation，JavaScript对象标记法
- JSON 是通过JavaScript 对象标记法书写的文本
- 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
---- JSON（字符串）的创建
- 定义：
- 注意：
- 键必须使用双引号，单引号不可以
- 在js中JSON最外层必须包裹单引号或者双引号变成一个字符串
- 如果JSON里面继续嵌套了自定义对象，那就继续嵌套 { }
// 定义json
var json = '{"name": "张三","age": 20,"address": ["北京","上海","广州"],"friends": [{"name": "李四","age": 21},{"name": "王五","age": 22}]}';
---- JSON的解析
JSON.parse(json字符串)：JSON字符串转JS对象()JS中的一个字面量对象了变成)
// 定义json
var json = '{"name": "张三","age": 20,"address": ["北京","上海","广州"],"friends": [{"name": "李四","age": 21},{"name": "王五","age": 22}]}';// json字符串转换为JS对象
var use = JSON.parse(json);
var name = use.name;
var age = use.age;
console.log(name + " " + age); // 张三 20// 获取数组
var address_arr = use.address;
address_arr.forEach(element => {console.log(element); // 北京 上海 广州});var friends_arr = use.friends;
friends_arr.forEach(element => {console.log(element.name + " " + element.age); // 李四 21 王五 22
});
JSON.stringify(jsObject): JS对象转JSON字符串
var user = {name: 'John',age: 25,email: "2023111@uestc,cn"
}var jsonStr = JSON.stringify(user);
console.log(jsonStr); // "{"name":"John","age":25,"email":"2023111@uestc,cn"}"
（3）Date 日期对象
-
创建 Date 对象
可以通过多种方式创建 Date 对象- 无参数：创建一个表示当前日期和时间的 Date 对象
let now = new Date();
console.log(now); // 输出当前日期和时间，例如: 2023-10-05T12:34:56.789Z - 传递年、月、日等参数
传递年、月、日、时、分、秒、毫秒等参数
注意：月份从 0 开始（0 表示 1 月，11 表示 12 月）
let date = new Date(2023, 9, 5, 12, 34, 56); // 2023 年 10 月 5 日 12:34:56
console.log(date); - 传递日期字符串
传递一个日期字符串，JavaScript 会尝试解析该字符串。
let date = new Date(“2023-10-05T12:34:56Z”);
console.log(date); - 传递时间戳
传递一个时间戳（从 1970 年 1 月 1 日 00:00:00 UTC 开始的毫秒数）
let date = new Date(1696521600000); // 时间戳对应 2023-10-05 00:00:00 UTC
console.log(date);
- 无参数：创建一个表示当前日期和时间的 Date 对象
-
方法：
这里给出一些get方法，还有很多set方法和格式化方法就不一一演示了，要用到现查就可以了- getFullYear() 获取年份（四位数）
date.getFullYear() → 2023 - getMonth() 获取月份（0-11，0 表示 1 月）
date.getMonth() → 9（10 月） - getDate() 获取日期（1-31）
date.getDate() → 5 - getDay() 获取星期几（0-6，0 表示周日）
date.getDay() → 4（周四） - getHours() 获取小时（0-23）
date.getHours() → 12 - getMinutes() 获取分钟（0-59）
date.getMinutes() → 34 - getSeconds() 获取秒数（0-59）
date.getSeconds() → 56 - getMilliseconds() 获取毫秒数（0-999）
date.getMilliseconds() → 789 - getTime() 获取时间戳（从 1970 年 1 月 1 日开始的毫秒数）
date.getTime() → 1696521600000
- getFullYear() 获取年份（四位数）
（4）Math 对象（静态，直接类名调用）
在 JavaScript 中，Math 对象 是一个内置对象，提供了许多数学相关的常量和函数。与 Date 对象不同，Math 对象不是一个构造函数，因此不能通过 new Math() 创建实例。所有 Math 对象的属性和方法都是静态的，可以直接通过 Math 调用。
- 属性
- Math.E 自然对数的底数（e）
2.718281828459045 - Math.PI 圆周率（π）
3.141592653589793 - …
- Math.E 自然对数的底数（e）
- 方法：
- Math.sin(x) 返回 x 的正弦值（x 为弧度）
- Math.round(x) 四舍五入到最接近的整数
Math.round(4.7) → 5 - Math.ceil(x) 向上取整（返回大于或等于 x 的最小整数）
Math.ceil(4.2) → 5 - …
console.log(Math.pow(2, 3)); // 8
console.log(Math.sqrt(16)); // 4
console.log(Math.log(10)); // 2.302585092994046
（5）RegExp 对象（正则表达式对象）
在JS中正则表达式我们不需要知道太多，学一个方法就行（表单校验的时候用一下）。复杂的正则也用不到前端处理，交给后端。
-
创建
- var reg = new RegExp(“正则表达式”)；
- var reg = /正则表达式/；
注意这种字面量的方式，千万不要加引号；后期这种字面量的方式使用的更多
两种方式都可以
-
方法：
- test(str) 测试字符串是否匹配正则表达式，返回布尔值。
我们前端知道这一个方法就够了
- test(str) 测试字符串是否匹配正则表达式，返回布尔值。
var reg = new RegExp("\\w{6,12}"); // 这种方式 双斜杠 才 代表一个斜杠var reg2 = /\w{6,12}/; // 匹配6-12位的字母数字下划线var username = "zhangsan";
// 验证
if(reg.test(username)){console.log("验证通过"); // 验证通过
}else{console.log("验证失败");
}
（6）Global对象：里面有一些全局方法
Global 对象 是一个隐含的全局对象，它代表了全局作用域。
这个对象里面的一些方法我们要用到，并且特殊的是，这个里面的方法我们直接方法名就可以调用，连对象都可以不用创建。就像python中直接调用print()函数一样
---- encodeURI() 对 URI 进行编码；decodeURI() 对 URI 进行解码
我们在一些URL中经常看到 %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2这种，其实就是加密了
这么做主要是为了防止URL乱码（中文等等）和更加安全
encodeURI() 对 URI 进行编码。
decodeURI() 对 URI 进行解码。
var str1 = "http://www.baidu.com?wd=传智播客"; // 一般情况下，直接传这种不安全，很容易被别人知道信息
var encodeStr1 = encodeURI(str1); //
console.log(encodeStr1); // http://www.baidu.com?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var decodeStr1 = decodeURI(encodeStr1);
console.log(decodeStr1); // http://www.baidu.com?wd=传智播客
---- encodeURIComponent() 对 URI 进行编码，编码的方式更加复杂一些；decodeURIComponent() 对 URI 进行解码
encodeURIComponent() 对 URI 进行编码，编码的方式更加复杂一些
decodeURIComponent() 对 URI 进行解码
var str1 = "http://www.baidu.com?wd=传智播客"; // 一般情况下，直接传这种不安全，很容易被别人知道信息
var encodeStr1 = encodeURIComponent(str1); // 对字符串进行编码
console.log(encodeStr1); // http%3A%2F%2Fwww.baidu.com%3Fwd%3D%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var decodeStr1 = decodeURIComponent(encodeStr1); // 对字符串进行解码
console.log(decodeStr1); // http://www.baidu.com?wd=传智播客
---- parseInt() 将字符串转为整数
var str = "345";
var num = parseInt(str);
console.log(typeof(num)); // number
console.log(num + 1); // 346
---- parseFloat() 将字符串转为浮点数。
---- isNaN() 检查一个值是否为 NaN
Nan == 比较压根比不了 ，只能使用这个方法
---- eval()：将字符串转出JS代码执行
var str = "alert('hello world')";
eval(str); // 将字符串当作代码执行
11 JS自定义类、自定义对象
注意类和对象的不同啊哈哈哈
（1）自定义类（ES6 引入了 class 关键字）
// 定义类
class Person {// 定义构造函数constructor(name, age) {this.name = name;this.age = age;}// 定义方法sayHello() {console.log(`Hello, my name is ${this.name}`);}
}// 创建对象
var person1 = new Person("Alice", 25);
person1.sayHello(); // 输出: Hello, my name is Alice
（2）自定义对象（JSON对象其实就是指这个JS对象）
注意这是对象，下面这种有点像java中的匿名内部类
-
定义格式：
-
调用方式：
// 自定义对象
var user = {name: '张三',age: 18,gender: '男',eat() {alert('吃饭');}
};// 输出属性
document.write(user.name + '<br>' + user.age + '<br>' + user.gender + '<br>');// 显式调用 eat 方法
// user.eat(); // 如果需要调用 eat 方法，取消注释
二、BOM对象
- 概念: Browser Obiect Model浏览器对象模型，允许JavaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。
- 组成：
- Window: 浏览器窗口对象
- Navigator: 浏览器对象（开发用不到）
这个对象里面记录了一些浏览器的版本信息这些东西，我们开发压根用不到 - Screen: 屏幕对象（开发用不到）
这个对象可以调整屏幕的色彩、亮度这些。开发中我们不会使用这个，电脑操作系统都能调，你浏览器调算什么对吧 - History: 历史记录对象
- Location: 地址栏对象
1 Window: 浏览器窗口对象
在 JavaScript 中，Window 对象 是浏览器环境中的全局对象，代表了浏览器窗口或标签页（浏览器每一个tab页就是一个Window窗口对象）。它是 JavaScript 的顶级对象，所有全局变量和函数都是 Window 对象的属性或方法。
在浏览器中，Window 对象是全局对象，所有在全局作用域中定义的变量和函数都会成为 Window 对象的属性。
-
介绍: 浏览器窗口对象。
-
获取: 直接使用 window，其中 window. 可以省略。
我们写JS中所有东西默认都是window的属性或者方法，一般我们习惯不写window. 所以就经常忽略这个
-
全局对象:
在浏览器中，Window 对象是全局对象，所有在全局作用域中定义的变量和函数都会成为 Window 对象的属性。
var x = 10;
console.log(window.x); // 输出: 10
这段代码中 变量x , console都是Window 对象的属性
Window 对象是 JavaScript 的顶级对象，document、location、navigator、console 等对象都是 Window 对象的属性。 -
属性：
- window.document 返回当前窗口的 Document 对象（DOM 树的根节点）
- window.console 返回当前窗口的 控制台 对象
- window.location 返回当前窗口的 Location 对象（URL 信息）
- window.navigator 返回当前窗口的 Navigator 对象（浏览器信息）
- window.screen 返回当前窗口的 Screen 对象（屏幕信息）
- window.history 返回当前窗口的 History 对象（浏览历史）
-
方法
- window.alert() 显示一个警告框
- window.confirm() 显示一个确认框，返回用户的选择（true 或 false）
- window.prompt() 显示一个提示框，返回用户输入的字符串
- window.open() 打开一个新窗口或标签页
- window.close() 关闭当前窗口
- window.setTimeout() 在指定的毫秒数后执行一次函数
- window.setInterval() 每隔指定的毫秒数重复执行一次函数
- window.clearTimeout() 取消由 setTimeout() 设置的定时器
- window.clearInterval() 取消由 setInterval() 设置的定时器
这里属性和方法很多，这里我们只演示几个常见的，具体的详细的还是要具体学到单独的部分再详细介绍
（1）Window_弹出方法
---- window.alert() 显示一个警告框
---- window.confirm() 显示一个确认框，返回用户的选择（true 或 false）
如果用户点击确定按钮，则方法返回true
如果用户点击取消按钮，则方法返回false
---- window.prompt() 显示一个提示框，返回用户输入的字符串
返回值:获取用户输入的值
alert("这是一个警告框");
var isConfirmed = confirm("你确定吗？");
console.log(isConfirmed); // true 或 false
var userInput = prompt("请输入你的名字");
console.log(userInput); // 用户输入的字符串
（2）Window_打开关闭方法
---- window.open(url) 打开一个新窗口或标签页，并返回打开的窗口的window对象
---- window.close() 关闭当前窗口
注意：这个关闭方法是那个window对象调用关的就是谁。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title></head>
<body><input id = "openBtn" type="button" value="打开窗口"> <!-- 定义一个按钮，用于打开新窗口 --><input id = "closeBtn" type="button" value="关闭窗口"> <!-- 定义一个按钮，用于关闭新窗口 --><script> // 使用script标签定义JavaScript代码var openBtn = document.getElementById('openBtn'); // 获取打开窗口按钮var closeBtn = document.getElementById('closeBtn'); // 获取关闭窗口按钮var newwindow = null; // 定义一个变量，用于存放新打开的窗口openBtn.onclick = function(){ // 绑定打开窗口按钮的点击事件newwindow = open('http://www.baidu.com'); // 打开百度首页}closeBtn.onclick = function(){newwindow.close(); // 关闭新打开的窗口}</script></body>
</html>
（3）Window_定时器方法
一次性计时器
---- window.setTimeout(要执行的函数，毫秒值) 在指定的毫秒数后执行一次函数（一次性计时器），返回一个计时器id唯一标识
---- window.clearTimeout() 取消由 setTimeout() 设置的定时器
// setTimeout() 一次性定时器setTimeout(function(){console.log('1秒后执行1次');
}, 1000);
也可以直接传函数，后面继续加的参数可以当做函数参数
function add(a, b){console.log(a+b);
}setTimeout(add, 2000, 5, 11); // 16
取消计时器：例如我设置了一个2分钟后执行的计数器，我们可以通过计时器的id值取消计时器
function add(a, b){console.log(a+b);
}var id = setTimeout(add, 100000, 5, 11); // 根据计时器的id来清除计时器
clearTimeout(id);
周期性计时器
---- window.setInterval(要执行的函数，毫秒值) 每隔指定的毫秒数重复执行一次函数（周期性计时器）,会返回一个计时器id唯一标识
---- window.clearInterval() 取消由 setInterval() 设置的定时器
// setInterval() 重复性定时器
var i = 0;
setInterval(function(){i++;console.log('定时器执行了'+i+'次');
},1000)/*
定时器执行了1次
定时器执行了2次
定时器执行了3次
...
*/
计时器取消
// setInterval() 重复性定时器
var i = 0;
var id = setInterval(function(){i++;console.log('定时器执行了'+i+'次');
},5000)// clearInterval() 清除定时器
clearInterval(id);
案例：轮播图（待定！！！！！！！）
参考视频
（4）Window_属性
---- document 返回当前窗口的 Document 对象（DOM 树的根节点）
---- console 返回当前窗口的 控制台 对象
---- location 返回当前窗口的 Location 对象（URL 信息）
---- navigator 返回当前窗口的 Navigator 对象（浏览器信息）
---- screen 返回当前窗口的 Screen 对象（屏幕信息）
---- history 返回当前窗口的 History 对象（浏览历史）
具体的属性使用还得看具体的使用
2 Location: 地址栏对象
(1)基本属性和方法使用
在 JavaScript 中，Location 对象 是 Window 对象的一个属性，用于表示当前文档的 URL 信息，并提供了操作浏览器地址栏的方法。通过 Location 对象，可以获取或修改当前页面的 URL，并实现页面的跳转和刷新。
- 创建（获取）：
- location 或者 window.location
- 属性
- href 获取或设置完整的 URL
- protocol 获取或设置 URL 的协议（如 http: 或 https:）
- host 获取或设置 URL 的主机名和端口（如 www.example.com:8080）
- hostname 获取或设置 URL 的主机名（如 www.example.com）
- port 获取或设置 URL 的端口号
- 方法：
- reload() 重新加载当前页面（刷新页面）
- assign(url) 加载指定的 URL（会在浏览器历史中记录）、页面跳转
- replace(url) 加载指定的 URL（不会在浏览器历史中记录）、页面跳转
获取当前url
let currentUrl = location.href;
console.log("当前 URL: " + currentUrl);
页面跳转
注意这里直接location.href = “https://www.example.com/new-page”;修改url也是会触发页面跳转的
// 修改url:跳转到新页面
location.href = "https://www.example.com/new-page";// 或者使用 assign()
location.assign("https://www.example.com/new-page");// 或者替换当前页面（不记录历史）
location.replace("https://www.example.com/new-page");
(2)案例：自动跳转首页（待定！！！！！）
参考视频
3 History: 历史记录对象
参考视频
在 JavaScript 中，History 对象 是 Window 对象的一个属性，用于操作浏览器的会话历史记录（即用户访问过的页面列表）。通过 History 对象，可以实现页面的前进、后退、跳转等功能，而无需重新加载页面
- 创建（获取）：
- history 或者 window.history
- 属性：
- length 返回历史记录中的页面数量
- 方法：
- back() 导航到历史记录中的上一个页面
- forward() 导航到历史记录中的下一个页面
- go(n) 导航到历史记录中的第 n 个页面（正数表示前进，负数表示后退）
go(1): 前进一个界面，等价于forward()
go(-1): 后退一个界面，等价于back()
其实这几个前进、回退功能，浏览器都自带了，不用我们写，这里只是来介绍一下
这个前进和后退功能，其实很多。比如说小说见面的上一页和下一页就可以使用这个功能演示，两个按钮分别绑定前进和后退
注意：这个history只能控制当前这个tab页的浏览记录，不是右上角那个浏览器的历史记录
三、DOM对象
- 概念: Document Object Model，文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
其实就是具体的html封装成了一个对象（一颗DOM树） - 将标记语言的各个组成部分封装为对应的对象:
- Document: 整个文档对象
- Element: 元素对象
- Attribute: 属性对象
- Text: 文本对象
- Comment: 注释对象
DOM对象主要就是上面的5种，我们开发中用Document: 整个文档对象、Element: 元素对象这两个就足以应对基本全部清空，下面我们也主要是讲这两种
- JavaScript 通过DOM，就能够对HTML进行操作
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML元素
1 Document对象的属性和方法
（1）获取Element元素对象
通过 document 对象访问
---- document.getElementById(id属性值) 通过 id 属性值获取元素节点,返回单个Element对象
---- document.getElementsByClassName(class 属性值) 通过 class 属性值获取元素节点数组, 返回Element对象数组
---- document.getElementsByTagName(标签名) 通过标签名获取元素节点数组, 返回Element对象数组
---- document.getElementsByName(name属性值) 根据name属性值获取，返回Element对象数组
注：上述的返回值不是前面讲到Array数组，而是一种类数组结构。其中并没有forEach方法，遍历我们使用普通的for遍历需要。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title></head>
<body><img id = "h1" src="1.png"> <br><br><div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby">篮球<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏
</body>
<script>// 1 获取Element元素对象// 1.1 通过id属性获取元素对象var img = document.getElementById("h1");// 1.2 通过标签名获取元素对象 - divvar divs = document.getElementsByTagName("div"); // 注意返回的是一个集合，是一个类数组对象，没有forEach方法, 但是可以通过for循环遍历for (var i = 0; i < divs.length; i++) {console.log(divs[i].innerHTML); // 传智教育 黑马程序员}// 1.3 通过类名获取元素对象var cls = document.getElementsByClassName("cls");for (var i = 0; i < cls.length; i++) {console.log(cls[i].innerHTML); // 传智教育 黑马程序员}// 1.4 通过name属性获取元素对象var hobby = document.getElementsByName("hobby");
</script></html>
（2）创建其他DOM对象并插入到指定位置
创建其他DOM对象
---- createElement() 创建一个新的元素节点（Element）对象
---- createAttribute(name) 创建一个新的属性节点（Attribute）对象
---- createTextNode() 创建一个新的文本节点（Text）对象
---- createComment() 创建一个新的注释节点（Comment）对象
将创建的DOM对象插入html指定位置处（其实下面两个是Node对象里面通用方法，后面会讲）
---- appendChild() 将节点添加到指定元素的子节点列表末尾
---- insertBefore() 将节点插入到指定元素的前面
只有一个 createElement() 创建一个新的元素节点（Element）对象用到的概率大一点，这里我们就简单演示这个（其余的要具体学习还是要好好的学习前端去）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title>
</head>
<body><div id="div1">传智教育</div><div id="div2">黑马程序员</div>
</body><script>let newElement1 = document.createElement("div"); // 创建新元素newElement1.textContent = "新的元素:我应该在body末尾";document.body.appendChild(newElement1); // 添加到 body 末尾let newElement2 = document.createElement("div"); // 创建新元素newElement2.textContent = "新的元素:我应该在div2（黑马程序员）前面";let div2 = document.getElementById("div2");document.body.insertBefore(newElement2, div2); // 插入到 div2 前面
</script></html>
2 Element对象的属性和方法
属性
---- innerHTML属性 获取或设置元素的 HTML 内容
参考视频
- 功能:
- 获取或设置元素的 HTML 内容，包括所有子元素和标签
- 返回的字符串包含 HTML 标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title>
</head>
<body><div id="myElement"><p>Hello, <strong>world</strong>!</p></div></body><script>let element = document.getElementById("myElement");// 获取 innerHTMLconsole.log(element.innerHTML); // 输出: <p>Hello, <strong>world</strong>!</p>// 设置 innerHTMLelement.innerHTML = "<p>New content</p>";
</script></html>
---- textContent 获取或设置元素的文本内容（忽略 HTML 标签）
- 功能:
- 获取或设置元素的 文本内容，忽略所有 HTML 标签
- 返回的字符串不包含 HTML 标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title>
</head>
<body><div id="myElement"><p>Hello, <strong>world</strong>!</p></div></body><script>let element = document.getElementById("myElement");// 获取 textContentconsole.log(element.textContent); // 输出: Hello, world!// 设置 textContentelement.textContent = "New content";
</script></html>
---- style 返回元素的样式对象，用于操作内联样式（可以用这个修改css里面具体信息）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><style>#box {width: 200px;height: 200px;background-color: lightblue;color: white;text-align: center;line-height: 200px;font-size: 20px;}</style></head>
<body><div id="box">Hello, World!</div><button id="changeColor">Change Color</button><button id="changeSize">Change Size</button><button id="resetStyle">Reset Style</button></body>
<script>// 获取元素const box = document.getElementById('box');const changeColorButton = document.getElementById('changeColor');const changeSizeButton = document.getElementById('changeSize');const resetStyleButton = document.getElementById('resetStyle');// 点击按钮改变背景颜色changeColorButton.addEventListener('click', () => {box.style.backgroundColor = 'tomato'; // 修改背景颜色box.style.color = 'black'; // 修改文字颜色});// 点击按钮改变大小changeSizeButton.addEventListener('click', () => {box.style.width = '300px'; // 修改宽度box.style.height = '300px'; // 修改高度box.style.lineHeight = '300px'; // 修改行高以保持文字居中});// 点击按钮重置样式resetStyleButton.addEventListener('click', () => {box.style.backgroundColor = 'lightblue'; // 重置背景颜色box.style.color = 'white'; // 重置文字颜色box.style.width = '200px'; // 重置宽度box.style.height = '200px'; // 重置高度box.style.lineHeight = '200px'; // 重置行高});
</script></html>
-
结果
- 初始状态：
#box 的背景颜色为 lightblue，文字颜色为 white，宽度和高度为 200px。 - 点击 “Change Color” 按钮：
#box 的背景颜色变为 tomato，文字颜色变为 black。 - 点击 “Change Size” 按钮：
#box 的宽度和高度变为 300px，行高也相应调整以保持文字居中。 - 点击 “Reset Style” 按钮：
#box 的样式恢复到初始状态。
- 初始状态：
-
详细解释
- style 属性：
style 是一个对象，表示元素的内联样式。
通过 style，你可以直接修改元素的样式属性，例如 backgroundColor、width、height 等。 - 修改样式：
使用 element.style.property = value 的方式修改样式。
注意：CSS 属性名中的连字符（如 background-color）需要转换为驼峰命名（如 backgroundColor）。
- style 属性：
方法
---- getAttribute()：获取属性值
- 功能: 获取元素的指定属性值。
- 语法: element.getAttribute(attributeName)
- 返回值: 属性值（字符串），如果属性不存在则返回 null。
<body><div id="myElement" class="example" data-custom="12345">Hello, world!</div></body>
<script>let element = document.getElementById("myElement");// 获取 id 属性let id = element.getAttribute("id");console.log(id); // 输出: myElement// 获取 class 属性let className = element.getAttribute("class");console.log(className); // 输出: example// 获取自定义属性let customData = element.getAttribute("data-custom");console.log(customData); // 输出: 12345// 获取不存在的属性let nonExistent = element.getAttribute("nonexistent");console.log(nonExistent); // 输出: null
</script>
---- setAttribute(): 设置属性值
- 功能: 设置元素的指定属性值。如果属性已存在，则更新其值；如果属性不存在，则创建新属性。
- 语法: element.setAttribute(attributeName, value)
<body><div id="myElement">Hello, world!</div>
</body>
<script>let element = document.getElementById("myElement");// 设置 class 属性element.setAttribute("class", "newClass");console.log(element.getAttribute("class")); // 输出: newClass// 设置自定义属性element.setAttribute("data-custom", "67890");console.log(element.getAttribute("data-custom")); // 输出: 67890// 设置不存在的属性element.setAttribute("newAttribute", "value");console.log(element.getAttribute("newAttribute")); // 输出: value
</script>
---- removeAttribute(): 删除属性
- 功能: 删除元素的指定属性。
- 语法: element.removeAttribute(attributeName)
<body><div id="myElement" class="example" data-custom="12345">Hello, world!</div></body><script>let element = document.getElementById("myElement");// 删除 class 属性element.removeAttribute("class");console.log(element.getAttribute("class")); // 输出: null// 删除自定义属性element.removeAttribute("data-custom");console.log(element.getAttribute("data-custom")); // 输出: null// 删除不存在的属性element.removeAttribute("nonexistent"); // 不会报错
</script>
---- querySelector(selector) 返回元素内匹配指定选择器的第一个子元素
- querySelector 方法返回元素内匹配指定选择器的第一个子元素。如果没有匹配的元素，则返回 null
- selector：css选择器(就是前面学的那个css选择器)
<div id="container"><p class="text">Paragraph 1</p><p class="text">Paragraph 2</p><p class="text">Paragraph 3</p>
</div><script>// 获取容器元素const container = document.getElementById('container');// 查找第一个匹配的子元素const firstParagraph = container.querySelector('.text');console.log(firstParagraph.textContent); // 输出: "Paragraph 1"
</script>
---- querySelectorAll(selector) 返回元素内匹配指定选择器的所有子元素（NodeList）
- querySelectorAll 方法返回元素内匹配指定选择器的所有子元素，结果是一个 NodeList（类数组对象）。如果没有匹配的元素，则返回空的 NodeList。
-
- selector：css选择器(就是前面学的那个css选择器)
<body><div id="container"><p class="text">Paragraph 1</p><p class="text">Paragraph 2</p><p class="text">Paragraph 3</p></div></body>
<script>
// 获取容器元素
const container = document.getElementById('container');// 查找所有匹配的子元素
const allParagraphs = container.querySelectorAll('.text');
console.log(allParagraphs); // 输出: NodeList(3) [p.text, p.text, p.text]// 遍历 NodeList
allParagraphs.forEach((e) => {console.log(e.textContent); // 输出: Paragraph 1 Paragraph 2 Paragraph 3
});
</script>
3 Node对象的属性和方法
Node对象其实就是节点，前面讲的 Document: 整个文档对象、Element: 元素对象、Attribute: 属性对象、Text: 文本对象、Comment: 注释对象这些都是Node对象，所以这里面有一些通用的属性和方法是大家都能用的
我们主要学习其中的通用CRUD方法
（1）属性
---- parentNode: 返回父节点
<body><div id="container"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div></body>
<script>// 获取第一个 <p> 元素const firstParagraph = document.querySelector('#container p');// 获取第一个 <p> 元素的父节点const parent = firstParagraph.parentNode;// 输出父节点的信息console.log(parent); // 输出: <div id="container">...</div>console.log(parent.id); // 输出: "container"// 修改父节点的样式parent.style.backgroundColor = 'lightblue';// 在父节点末尾添加一个新元素const newParagraph = document.createElement('p');newParagraph.textContent = 'New Paragraph';parent.appendChild(newParagraph);
</script>
（2）方法
---- appendChild(node): 将一个节点添加到子节点列表的末尾
<div id="container"><p>Paragraph 1</p>
</div><script>// 获取父节点const container = document.getElementById('container');// 创建一个新的段落元素const newParagraph = document.createElement('p');newParagraph.textContent = 'Paragraph 2';// 将新段落添加到容器的末尾container.appendChild(newParagraph);
</script>
结果：
<div id="container"><p>Paragraph 1</p><p>Paragraph 2</p>
</div>
---- removeChild(node): 从子节点列表中移除一个节点
<div id="container"><p>Paragraph 1</p><p>Paragraph 2</p>
</div><script>// 获取父节点const container = document.getElementById('container');// 获取要移除的子节点const paragraphToRemove = container.querySelector('p');// 移除子节点container.removeChild(paragraphToRemove);
</script>
结果：
<div id="container"><p>Paragraph 2</p>
</div>
---- replaceChild(newNode, oldNode): 替换一个子节点
<div id="container"><p>Old Paragraph</p>
</div><script>// 获取父节点const container = document.getElementById('container');// 创建一个新的段落元素const newParagraph = document.createElement('p');newParagraph.textContent = 'New Paragraph';// 获取要被替换的子节点const oldParagraph = container.querySelector('p');// 替换子节点container.replaceChild(newParagraph, oldParagraph);
</script>
结果：
<div id="container"><p>New Paragraph</p>
</div>
---- insertBefore(newNode, referenceNode): 在指定节点前插入一个新节点
<div id="container"><p>Paragraph 1</p><p>Paragraph 3</p>
</div><script>// 获取父节点const container = document.getElementById('container');// 创建一个新的段落元素const newParagraph = document.createElement('p');newParagraph.textContent = 'Paragraph 2';// 获取参考节点（在哪个节点前插入）const referenceNode = container.querySelector('p:nth-child(2)');// 在参考节点前插入新节点container.insertBefore(newParagraph, referenceNode);
</script>
结果：
<div id="container"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p>
</div>
‘p:nth-child(2)’ 是一个 CSS 选择器，用于选择作为其父元素的第二个子元素的 <p> 元素。它的含义可以分为两部分：
（1）p: 表示选择 <p> 元素。
（2）:nth-child(2): 表示选择其父元素的第二个子元素。
css选择器有很多种，又看到一种新的，没办法，只能查文档
4 DOM_进行CSS样式控制
（1）方式1：使用Element对象的style属性（前面讲Element对象演示过）
```html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><style>#box {width: 200px;height: 200px;background-color: lightblue;color: white;text-align: center;line-height: 200px;font-size: 20px;}</style></head>
<body><div id="box">Hello, World!</div><button id="changeColor">Change Color</button><button id="changeSize">Change Size</button><button id="resetStyle">Reset Style</button></body>
<script>// 获取元素const box = document.getElementById('box');const changeColorButton = document.getElementById('changeColor');const changeSizeButton = document.getElementById('changeSize');const resetStyleButton = document.getElementById('resetStyle');// 点击按钮改变背景颜色changeColorButton.addEventListener('click', () => {box.style.backgroundColor = 'tomato'; // 修改背景颜色box.style.color = 'black'; // 修改文字颜色});// 点击按钮改变大小changeSizeButton.addEventListener('click', () => {box.style.width = '300px'; // 修改宽度box.style.height = '300px'; // 修改高度box.style.lineHeight = '300px'; // 修改行高以保持文字居中});// 点击按钮重置样式resetStyleButton.addEventListener('click', () => {box.style.backgroundColor = 'lightblue'; // 重置背景颜色box.style.color = 'white'; // 重置文字颜色box.style.width = '200px'; // 重置宽度box.style.height = '200px'; // 重置高度box.style.lineHeight = '200px'; // 重置行高});
</script></html>
-
结果
- 初始状态：
#box 的背景颜色为 lightblue，文字颜色为 white，宽度和高度为 200px。 - 点击 “Change Color” 按钮：
#box 的背景颜色变为 tomato，文字颜色变为 black。 - 点击 “Change Size” 按钮：
#box 的宽度和高度变为 300px，行高也相应调整以保持文字居中。 - 点击 “Reset Style” 按钮：
#box 的样式恢复到初始状态。
- 初始状态：
-
详细解释
- style 属性：
style 是一个对象，表示元素的内联样式。
通过 style，你可以直接修改元素的样式属性，例如 backgroundColor、width、height 等。 - 修改样式：
使用 element.style.property = value 的方式修改样式。
注意：CSS 属性名中的连字符（如 background-color）需要转换为驼峰命名（如 backgroundColor）。
- style 属性：
（2）方式2：使用Element对象的className属性选择类选择器样式
提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><style>.box-style {width: 200px; /* 宽度 */height: 200px; /* 高度 */background-color: lightblue; /* 背景颜色: 淡蓝色 */ color: white; /* 字体颜色: 白色 */text-align: center; /* 文本居中 */line-height: 200px; /* 行高 */font-size: 20px; /* 字体大小 */}.highlight {background-color: tomato; /* 背景颜色: 番茄色 */border: 5px solid black; /* 边框: 5px 黑色实线 */border-radius: 20px; /* 边框圆角: 20px */}.large {width: 300px; /* 宽度: 300px */height: 300px; /* 高度: 300px */line-height: 300px; /* 行高: 300px */}</style></head>
<body><div id="box" class="box-style">Hello, World!</div><button id="addClass">Add Class</button><button id="removeClass">Remove Class</button><button id="toggleClass">Toggle Class</button></body>
<script>// 获取元素const box = document.getElementById('box');const addClassButton = document.getElementById('addClass');const removeClassButton = document.getElementById('removeClass');const toggleClassButton = document.getElementById('toggleClass');// 点击按钮添加类addClassButton.addEventListener('click', () => {box.className = 'box-style highlight large'; // 替换类名});// 点击按钮移除类removeClassButton.addEventListener('click', () => {box.className = 'box-style'; // 重置为初始类名});// 点击按钮切换类toggleClassButton.addEventListener('click', () => {if (box.className.includes('highlight')) {box.className = 'box-style'; // 如果包含 highlight 类，则移除} else {box.className = 'box-style highlight'; // 否则添加 highlight 类}});
</script></html>
- 结果：
-
初始状态：
#box 的类名为 box-style，显示为浅蓝色背景、白色文字。
-
点击 “Add Class” 按钮：
#box 的类名变为 box-style highlight large，显示为红色背景、黑色边框、圆角，并且尺寸变大。
-
点击 “Remove Class” 按钮：
#box 的类名恢复为 box-style，样式回到初始状态。
-
点击 “Toggle Class” 按钮：
如果 #box 当前有 highlight 类，则移除该类；否则添加该类。
-
是的，在 CSS 中，后面的样式规则会覆盖前面的样式规则，前提是它们的优先级相同。这种覆盖行为是基于 CSS 的 层叠规则（Cascading Rules）。
覆盖规则
- 相同属性的覆盖：
- 如果多个类定义了相同的属性（例如 background-color、width 等），后面的类会覆盖前面的类。
- 例如：
- .box-style 定义了 background-color: lightblue;。
- .highlight 定义了 background-color: tomato;。
- 最终生效的是 .highlight 的 background-color: tomato;，因为 .highlight 在 .box-style 之后。
- 不同属性的合并：
- 如果多个类定义了不同的属性，这些属性会合并生效。
- 例如：
- .box-style 定义了 font-size: 20px;。
- .highlight 定义了 border: 5px solid black;。
- .large 定义了 width: 300px;。
- 最终生效的样式是这些属性的合并结果。
5 JS事件监听
在 JavaScript 中，事件监听是一种机制，用于在特定事件发生时执行指定的代码。通过事件监听，你可以让网页对用户的操作（如点击、鼠标移动、键盘输入等）或其他事件（如页面加载、网络请求完成等）做出响应。
- 事件: HTML事件是发生在HTML元素上的“事情”。比如
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
- 事件监听: JavaScript可以在事件被侦测到时 执行代码
事件监听的核心方法是 addEventListener，它允许你为 DOM 元素绑定事件处理函数。
（1）addEventListener事件监听
-
addEventListener 方法
addEventListener 是用于为元素添加事件监听器的标准方法。 -
语法：
- element.addEventListener(event, callback, options);
- event: 事件类型（如 “click”、“mouseover”、“keydown” 等）。
- callback: 事件触发时执行的回调函数。
- options: 可选参数，用于指定事件监听器的行为（如 { once: true } 表示只触发一次）。
- element.addEventListener(event, callback, options);
-
以下是一些常见的事件类型：
- click 鼠标点击元素时触发。
- mouseover 鼠标移动到元素上方时触发。
- mouseout 鼠标移出元素时触发。
- keydown 按下键盘按键时触发。
- keyup 松开键盘按键时触发。
- focus 元素获得焦点时触发。
- blur 元素失去焦点时触发。
- submit 表单提交时触发。
- load 资源（如图片、脚本）加载完成时触发。
- DOMContentLoaded HTML 文档加载完成时触发。
<button id="myButton">Change Color</button>
<div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div><script>const button = document.getElementById('myButton');const div = document.getElementById('myDiv');// 添加点击事件监听器button.addEventListener('click', () => {div.style.backgroundColor = 'tomato';});
</script>
点击按钮后，#myDiv 的背景颜色会变为 tomato。
（2）事件监听简写方式
方式一：通过HTML标签中事件属性进行绑定
方式二：通过Element节点对象的属性
<body><button id="myButton">Change Color</button><div id="myDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div></body>
<script>const button = document.getElementById('myButton');const div = document.getElementById('myDiv');// 添加点击事件监听器button.onclick = function(){div.style.backgroundColor = 'tomato';}
</script>
练习
1 案例1：点亮灯泡（待定！！！！！！！）
参考视频
- 需求：
2 案例2：动态表格操作（待定！！！！！！！）
参考视频
参考视频
参考视频：使用innerHTML属性改进代码
