本文主要是介绍前段之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对象提供了有关当前文档的信息，
-
href当前地址
-
protocol 协议
-
port 端口
-
pathname 虚拟路径
-
search 查询参数
-
hash 路由模式，锚点
-
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
这篇关于前段之JavaScript——网页的血液！！的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
