一、JS介绍
可以在前端页面上进行逻辑处理,来解决表单的验证等问题,提升效率,直接在前端提示问题,减少服务器压力
应用1:可以做静态验证和动态验证(进行异步请求)
应用2:可以解析后端传过来的响应
应用3:可以制作页面的行为,比如定时轮播、时钟、加载数据...
二、语法
1.语法组成
2.编写位置
可以在head和Body中写<script>
3.注释
4.输出
输出到控制台
5.外部文件引入
6.变量声明与赋值
7.数据类型
(1)number
(2)boolean
(3)undefined
声明变量,但没赋值
(4)string
通过json文件进行前后端的传递,用单引号/双引号都可以表示
(5)null
(6)强制类型转换
转化为number
转化为boolean
转化为string
parseInt和parseFloat分别转为整数和小数,比如下面的指令都可以在控制台输出123.45
8.运算符
(1)算数运算符
除数运算时,整数/整数可以得到小数
(2)自增自减运算符
(3)赋值运算符
(4)比较运算符
===值和类型都相等
(5)逻辑运算符
(6)三元运算符
(7)字符串连接运算符
9.流程控制语句
do...while是无条件先执行一次
10.隐式转换
11.函数定义和复用
函数表达式
12.arguments对象
封装的是实参的数据,可以获取所有的实参数据,哪怕实参超过形参的数量
13.变量作用范围
只有在函数中声明的变量是局部变量,在外部不能访问,js没有作用域、代码块的概念,因此即使在if语句中声明的变量,在外面也能访问。
14.JS内置对象
(1)字符串对象
(2)数组对象
创建
length获取信息并且可以改变信息
访问数组元素
对数组元素进行操作
(3)math对象
(4)date对象
创建:月份从0开始定义
方法:
(5)正则对象
创建有两种方式:
定义了字符串的组成规则
(6)框对象
警告框
询问框
确认框
(7)定时器对象
循环定时:比如广告定时弹出一次
一定定时:比如在打开一个页面多久后,广告只弹出一次
15.自定义对象
通过new关键字创建对象
通过字面量创建对象
通过构造函数创建对象
三、DOM操作
可以动态的改变文档结构
1.Document对象
可以用来获取元素
script要放在内容之后
2.Element对象
获取元素的属性,从而进行增删改查操作 (需要先通过上一步获取元素)
3.标签体内容操作
4.元素关系操作
获取父元素和子元素
5.插入节点
创建新的节点,插入到已有的节点中
还可以插入到已有节点的前面
6.删除节点
通过父删除子,有两种方式:
7.表单操作
通过DOM可以便捷地操作表单
四、事件
1.单击事件
2.焦点事件
3.改变事件
4.鼠标移入移出事件
下例动态地改变class的属性值
5.页面加载事件
定义在页面内容之前,可正常加载
6.表单事件
五、BOM操作
1.window对象
2.location对象
跳转到其他页面,还可以加定时器
3.history对象
六、ES6新增特性
1.let关键字
2.const关键字
定义的变量值不允许修改,定义的数组不允许修改整个数组/对象的引用,但可以修改数组元素/对象内容