前段之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主要由以下对象组成：

1. window对象：window对象代表浏览器中打开的窗口。它是BOM的核心对象，提供了许多属性和方法，用于控制浏览器窗口的大小、位置、导航等功能。

2. navigator对象：navigator对象提供了有关浏览器的信息，如浏览器的名称、版本、所在平台等。开发人员可以使用这些信息来编写适配不同浏览器的代码。

3. screen对象：screen对象提供了有关用户屏幕的信息，如屏幕的宽度、高度、色深等。开发人员可以利用这些信息来调整网页的布局和显示效果。

4. history对象：history对象允许开发人员在浏览器的历史记录中执行操作，如forward前进、back后退、go(n)跳转到指定页面等。通过history对象，可以实现浏览器的前进后退功能。

5. location对象：location对象提供了有关当前文档的信息，

   1. href当前地址

   2. protocol 协议

   3. port 端口

   4. pathname 虚拟路径

   5. search  查询参数

   6. hash 路由模式，锚点

   7. reload() 刷新

九、DOM

DOM（文档对象模型）是一种用于表示和操作HTML和XML文档的编程接口。它将文档解析为一个由节点（Node）组成的树状结构，开发人员可以使用JavaScript来访问和修改这些节点，从而实现对文档的动态操作和交互。

1、获取页面元素

querySelector，找到符合匹配的第一个

querySelectorAll，找到所有，返回类似数组，可以使用下标获取单个

document.query*，搜索整个文档

target.query*，在target内部找

2、绑定事件

鼠标点击：onclick

鼠标划入：onmouseenter

鼠标离开：onmouseleave

鼠标按下：onmousedown

鼠标抬起：onmouseup

鼠标移动：onmousemove

表单元素：

        聚焦：onfocus

        失去焦点：onblur

        输入内容改变：oninput

        键盘抬起：onkeyup

3、获取、修改

innerText不考虑标签；innerHTML可以识别标签

获取类名，对象.classList，add添加；remove删除；contains是否有；

toggle 有就删除没有就添加。

样式设置时，设置的为行内样式，.style.样式属性名=

获取样式时，可以通过style.样式属性名获取

4、相关元素

获取父节点：parentElement

获取所有子节点：children

获取下一个相邻节点：nextElementSibling

获取上一个相邻节点：previousElementSibling

5、元素的创建与删除

创建元素：createElement

将元素插入文档：appendChild

删除元素：remove