前段之JavaScript——网页的血液！！

一、JavaScript简介

二、JavaScript引入

三、声明变量

四、数据类型

五、运算符

六、函数

七、常用数据操作方法

1、字符串

2、数组

3、对象

八、BOM

九、DOM

一、JavaScript简介

JavaScript是一种用于为网页添加交互功能的脚本语言。它是一种轻量级的、解释型的语言，通常嵌入到HTML中，由浏览器解释执行。JavaScript能够使网页具有动态性，可以实现诸如表单验证、动态内容更新、用户行为跟踪等功能。

JavaScript最初是作为一种用于处理网页交互的脚本语言而开发的，但现在已经发展成为一种广泛用途的编程语言，不仅用于前端开发，还可以用于后端开发（如Node.js）、移动应用开发（如React Native）、游戏开发等领域。

JavaScript的特点包括：

1. 易学易用：JavaScript语法类似于其他编程语言（如C、Java），因此相对容易学习。
2. 强大的交互性：JavaScript可以对网页中的各种元素进行操作，实现用户与页面的交互，例如表单验证、动态内容加载、响应用户事件等。
3. 跨平台性：几乎所有的现代浏览器都支持JavaScript，因此可以在多种操作系统和设备上运行。
4. 丰富的功能库：JavaScript拥有丰富的开发库和框架，例如jQuery、React、Angular等，可以加速开发过程并提高开发效率。
5. 异步编程：JavaScript支持异步编程，可以通过事件处理、回调函数、Promise等方式处理异步操作，提高网页的响应速度和用户体验。

总的来说，JavaScript是构建现代网页和应用程序的重要技术之一，它为开发人员提供了丰富的工具和功能，使得网页更加交互且功能丰富。

二、JavaScript引入

1、在html内部使用script标签，在标签内部直接编写

2、在外部js文件中编写，在html内部通过script的src属性引入外部js文件

三、声明变量

1、const——声明常量，声明时必须赋值，不能更改

2、let——声明局部变量，出了该语句块就失效，没有赋值前不能访问且只能声明一次。

3、var——声明全局变量，可以多次声明，自带变量提升效果，没有声明就可以访问。

四、数据类型

查看数据类型可以使用typeof()方法

1、未定义类型：undefined

声明一个变量但是没有赋值时，会显示该类型。

2、数字：Number

3、字符串：String

4、布尔值：Bool

5、空值：Null，清除内存，使用typeof()返回的是Object

6、数组：Array，相当于Python中的列表

7、对象：Object，相当于Python中的字典

数组和对象这两种复杂的数据类型可以使用instanceof来检测类型。

五、运算符

1、算术运算符

+	加
-	减
*	乘
/	除
%	求余

2、赋值运算符

=	等于
+=	加等于
-=	减等于
*=	乘等于
/=	除等于
%=	余等于
a++	自增（先返回再运算）
++a	自增（先运算再返回）

3、比较运算符

>	大于
<	小于
>=	大于等于
<=	小于等于
！=	不等于
==	判等，只比较值
===	判等，先比较值，再比较类型

4、逻辑运算符

&& 与	左侧为真返回左侧，左侧为假返回右侧
\|\| 或	左侧为真返回左侧，左侧为假返回右侧
！非	非真为假，非假为真，结果只有true或false

5、流程结构

（1）顺序结构，从上向下依次执行

（2）分支结构：共有三种

if ( 条件 ) {
}


if ( 条件 ) {
}
else {
}


if ( 条件 ){
}
else if ( 条件 ) {
}
else {
}

（3）循环结构

for
while 先判断在执行
dowhile 先执行在判断

六、函数

定义函数时使用function，函数名以小驼峰形式命名。

形参：声明函数使用；实参：调用函数使用。只有一个返回值。

html中同样有匿名函数，没有函数名，不能独立存在，使用时赋予一个变量，赋予函数的形参和赋予对象的键。

html中也可使用递归函数，使用方法同Python中类似，但是自己调用自己时，地柜效率低。

七、常用数据操作方法

1、字符串

（1）str.length 求字符串长度

（2）字符串可以遍历，下标从0到length-1

（3）charAt() 根据索引找字符

（4）indexOf 根据字符找索引，找不到返回-1

（5）concat 字符串拼接

（6）endsWith 以...结尾

（7）startsWith 以...开头

（8）replace 替换

（9）match 匹配，返回对象

（10）search 匹配，返回索引

（11）slice 切片，不包含stop

（12）split 切割，支持空字符切割

（13）toLowerCase 字符串转小写

（14）toUpperCase 字符串转大写

（15）trim 剔除空格

2、数组

（1）length 求长度

（2）可以遍历，下标从0到length-1

（3）concat 数组连接，不影响原数组

（4）includes 查看数组是否包含某个值

（5）indexOf 返回查找元素索引，找不到返回-1

（6）join 将元素使用字符串拼接

（7）pop 删除末尾

（8）push 末尾插入

（9）shift 删除开头

（10）unshift 开头插入

（11）reverse 逆序，影响原数组

（12）sort 排序，影响原数组

（13）splice

start 操作位置

deleteCount 删除个数

items 插入内容，也可不插入

（14）slice 切片，结果不影响原数组

（15）高阶函数，形参是匿名函数，第一个参数是值，第二个参数是索引

forEach 遍历，没有返回值
filter 过滤，返回符合条件的
map 映射，一对一返回
find 返回索引，只返回一个
every 每一个都返回true，结果才是true
some 每一个都不符合条件，结果才是false

3、对象

对象类似于Python中的字典，为键值对格式，值可以是任意数据类型。

（1）Object.keys（obj）获取obj的所有键

（2）JSON.stringify 序列化

（3）JSON.parse 反序列化

八、BOM

BOM（浏览器对象模型）是一组用于访问和操作浏览器窗口的对象集合。与DOM（文档对象模型）类似，BOM提供了一种编程接口，允许开发人员通过JavaScript来控制浏览器的行为、属性和功能。

BOM主要由以下对象组成：

window对象：window对象代表浏览器中打开的窗口。它是BOM的核心对象，提供了许多属性和方法，用于控制浏览器窗口的大小、位置、导航等功能。
navigator对象：navigator对象提供了有关浏览器的信息，如浏览器的名称、版本、所在平台等。开发人员可以使用这些信息来编写适配不同浏览器的代码。
screen对象：screen对象提供了有关用户屏幕的信息，如屏幕的宽度、高度、色深等。开发人员可以利用这些信息来调整网页的布局和显示效果。
history对象：history对象允许开发人员在浏览器的历史记录中执行操作，如forward前进、back后退、go(n)跳转到指定页面等。通过history对象，可以实现浏览器的前进后退功能。
location对象：location对象提供了有关当前文档的信息，
1. href当前地址
2. protocol 协议
3. port 端口
4. pathname 虚拟路径
5. search 查询参数
6. hash 路由模式，锚点
7. reload() 刷新