当前位置：首页 > news >正文

3 前端（中）：JavaScript

news 2025/6/20 20:50:25

文章目录

前言：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中的类属性，是全局的，实际上也是因为其属于的{ }是最顶层，所以也才是全局的作用域
各种语言：
- python：函数作用域 + 全局作用域
  全局作用域：定义在最外层的变量；类属性（self）; 函数内部使用global声明的变量；（主要是这三种情况）
  函数作用域：变量定义在函数内外分为来确定变量的作用范围，函数内部定义的变量就只能函数内部使用，除非使用global声明才能继续外部也能访问
- java：块级作用域 + 全局作用域
  这个很好理解，java变量作用范围一切以{ }为标准
- JS：函数作用域+块级作用域+全局作用域
  这个JS就结合了python和java的一切情况了
  - 使用 var定义变量，就是python那一套，要使用函数作用域那一套规则
  - 使用let定义变量，那作用范围就是{ }，另外如果是在最顶层的文件用let定义变量，那作用范围也是全局，也变成了全局的了

（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), 随便传它只取前两个

（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);
方法：
这里给出一些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

（4）Math 对象（静态，直接类名调用）

在 JavaScript 中，Math 对象是一个内置对象，提供了许多数学相关的常量和函数。与 Date 对象不同，Math 对象不是一个构造函数，因此不能通过 new Math() 创建实例。所有 Math 对象的属性和方法都是静态的，可以直接通过 Math 调用。

属性
- Math.E 自然对数的底数（e）
  2.718281828459045
- Math.PI 圆周率（π）
  3.141592653589793
- …
方法：
- 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) 测试字符串是否匹配正则表达式，返回布尔值。
  我们前端知道这一个方法就够了

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）。

方法

---- 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）。

（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 } 表示只触发一次）。
以下是一些常见的事件类型：
- 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属性改进代码

文章目录

前言：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 进行解码

使用 document.write()写入 HTML界面输出

（0）函数作用域块级作用域全局作用域

（2）let关键字：let 变量名 = 初始化值;（当成java变量来理解），ES6才引入

number: 数字。整数/小数/NaN(not a number 一个不是数字的数字类型)

（5）逻辑运算符 &&（与） ||（或）！（非）

（6）三元运算符：条件 ? 表达式1 : 表达式2

（6）练习：9x9乘法表（待定！！！！！！！）

---- console 返回当前窗口的控制台对象

---- innerHTML属性获取或设置元素的 HTML 内容