目录
一、JavaScript简介
JavaScript是一种用于为网页添加交互功能的脚本语言。它是一种轻量级的、解释型的语言,通常嵌入到HTML中,由浏览器解释执行。JavaScript能够使网页具有动态性,可以实现诸如表单验证、动态内容更新、用户行为跟踪等功能。
JavaScript最初是作为一种用于处理网页交互的脚本语言而开发的,但现在已经发展成为一种广泛用途的编程语言,不仅用于前端开发,还可以用于后端开发(如Node.js)、移动应用开发(如React Native)、游戏开发等领域。
JavaScript的特点包括:
-
易学易用:JavaScript语法类似于其他编程语言(如C、Java),因此相对容易学习。
-
强大的交互性:JavaScript可以对网页中的各种元素进行操作,实现用户与页面的交互,例如表单验证、动态内容加载、响应用户事件等。
-
跨平台性:几乎所有的现代浏览器都支持JavaScript,因此可以在多种操作系统和设备上运行。
-
丰富的功能库:JavaScript拥有丰富的开发库和框架,例如jQuery、React、Angular等,可以加速开发过程并提高开发效率。
-
异步编程: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)分支结构:共有三种
html
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