JavaScript

一、JavaScript简介

1、什么是JavaScript？

JavaScript简称JS，由网景公司开发的客户端脚本语言（Java服务器端的编程语言），需要编译，可以直接运行

Web前端三层：

结构层HTML定义页面的结构
样式层CSS定义页面的样式
行为层JavaScript用来实现交互，提升用户体验

2、JavaScript作用

在客户端动态的操作页面，eg：购物车
在客户端做数据校验
在客户端发送异步请求

二、引用方式

1、内联方式

在页面中使用script标签，在script标签的标签体中编写js代码

2、行内方式

在普通标签中编写js代码，一般需要结合事件属性，如：onclick、onmouseover等

补充：

对象：客观存在的并且可以相互区别的事物，eg：标签 div p span

外观：-----长相-----CSS

行为：-----事件属性-----“我爱你”

3.外部方式

使用单独的js文件定义，然后在页面中使用script标签引入外部脚本文件

注意：如果某个script标签用于引入外部的js文件，则该script标签的标签体中不能再写js代码

三、基本用法

1、变量

js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型

语法：var 变量名=常量或表达式；

注意：数据类型：常量（具体值）和变量（存放变量的量）

在ECMAScript6规范中新增let 关键字，也用于声明变量

使用let声明的变量支持块级作用域，而var声明的变量不支持块级作用域

注意：在IDEA中配置ES版本Settings–>language&frameworks–>javascript–>javascript language version

2、输入和输出

输出：

alert()弹出警告框
console.log()输出到浏览器的控制台
document.write()输出到页面
输入：

prompt()弹出一个输入框，获取用户输入的数据

使用typeof变量名判断变量的类型

使用Number(变量名)将字符串转换为数值

3、转义字符

常用的转义字符：

\n换行
\t缩进
'单引号
"双引号

4、注释

单行注释：//

多行注释：/注释内容/

5、编码规范

代码是区分大小写

每条语句以分号结尾

代码缩进

四、核心语法

1、数据类型

基础数据类型：

string字符串
number数值(NaN表示非数字Not a Number，其自身是number类型，表示数值为不正常状态)
boolean布尔
null空类型
undefined未定义类型
数据类型的转换

转换为number

使用Number()、parselnt()、parseFloat()

转换为string

拼接空字符串

转换为boolean

使用Boolean()

注：0、空字符串、null、undefined、NaN会被转换为false，其他值都会被转换为true

2、运算符

算术运算符：+、-、*、/、%、**、++、–

比较运算符：>、>=、<、<=、、=、!=

赋值运算符：=、+=、-=、*=、/=、%=、**=

逻辑运算符：&&、||、！

条件运算符：条件？表达式1：表达式2

3、选择结构

if…else…、switch

4、循环结构

while、do…while、for、for…in

break、continue

break：退出整个循环

continue：退出本次循环，继续进行下一次是否执行循环体的条件判断

5、数组

5.1定义方式

语法：

注：

数组的长度会自动扩展
数组中元素的默认值为undefined
使用length属性来获取到数组的宽度

5.2常用方法

5.3二维数组

二维数组可以认为是一个特殊的一维数组，即一维数组中的每个元素又是一个一维数组

语法：

6、函数

6.1自定义函数

语法：

注：

定义函数时不需要指定参数的类型
实参个数和形参个数可以不同，未指定参数时其默认值为undefined
不需要指定返回值的类型，如果有返回值，直接使用return返回即可
如果函数中没有使用return返回值，则默认返回undefined
变量的作用域：

局部作用域

在函数中声明的变量，只能在该函数内访问，函数运行结束后变量会自动销毁

全局作用域

在函数外声明的变量，在任何位置均可以访问

块级作用域

使用let关键字声明的变量，只能在声明它的代码块中访问

6.2回调函数

不立即执行的函数调用，满足一定条件时才会执行或者是由别的代码调用执行，称为回调函数callback

调用时只写函数名，没有小括号和参数

应用：

作为事件绑定的函数
作为另一个函数的参数

6.3匿名函数

没有名字的函数，称为匿名函数，一般用于回调

应用：

用于函数的回调

用于一次性执行的函数，会自动执行，称为自执行函数—定义插件时使用

6.4箭头函数

ES6中允许使用箭头=>定义函数，称为箭头函数，也叫lambda表达式，是一种特殊的匿名函数

五、复合数据

1、string

1.1定义方式

语法：

使用length属性获取字符串的长度

1.2字符串常用方法

2、Date

2.1定义方式

语法：

2.2常用方法

setXxx方法与getXxx方法类似，用于设置对应的值

3、JSON

3.1 JSON简介

javaScript Object Notation是一种轻量级的数据交换格式，用于表示javaScript对象的一种方式

采用与编程语言无关的文本格式，易于阅读和编写，同时也易于解析和生成

3.2基本用法

语法：{“属性名”:“属性值”,“属性名”:属性值,…}

注意：

JSON结构是由一系列的键值对所组成，称为JSON对象
属性名必须用双撇号括起来
使用：

简单的JSON对象
复合属性，属性的值为JSON对象
JSON对象的集合

3.3 JSON转换

JSON转换为字符串

字符串转换为JSON

4、对象类型

4.1对象简介

对象类型可以理解为java中的引用数据类型

JavaScript是面向对象的语言，但并不是人们常说的纯粹的面向对象的语言，因为它不支持某些特征

4.2创建对象

三种方式：

使用object

使用构造函数，模拟类的定义，相当于自定义了一个类型

使用JSON格式对象，一般只在JSON对象中定义属性

六、DOM操

# 1、DOM简介

Document Object Model文档对象模型

浏览器加载HTML文档，会将HTML文档解析为一个树形结构，称为DOM树

HTML文档和DOM树是一一对应的关系
当DOM树被改变时，与之对应的html文档也会随之改变
当需要对html中的内容进行动态改变时，可以使用DOM来操作
DOM提供了一组用来操作html文档的API，即提供一套属性、方法和事件
树上的每一个节点都是一个DOM对象，树的顶层为Document对象，表示整个文档

2、查询操作

即获取DOM对象

3、访问操作

3.1访问属性

即获取/设置DOM对象的属性

DOM对象的属性和HTML标签属性几乎是一样的，一般情况下DOM对象都会存在一个与对应的HTML标签同名的属性

用法：DOM对象.属性

3.2获取内容

即获取/设置标签中的内容

两种方式：

使用innerHTML

用法：DOM对象.innerHTML将内容解析为HTML

使用innerText

用法：DOM对象.innerText将内容作为纯文本

3.3访问CSS

即获取/设置CSS样式

两种方式：

使用style属性

用法：DOM对象.style.样式属性

使用calssName属性

用法：DOM对象.className

4、添加操作

5、删除操作

七、事件处理

1、简介

事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为，如：

用户点击了某个HTML元素
用户将鼠标移动到某个HTML元素上
用户输入数据时光标离开
页面加载完成
事件源：事件触发的源头，即触发事件的元素，如按钮、输入框、超链接等

事件对象：当一个事件发生时，这个事件相关的详细信息会保存在一个对象中，称为event对象

事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件的函数，即回调函数

2、绑定事件

两种方式：

静态绑定，通过标签的事件属性绑定

动态绑定，通过JS代码来绑定事件

注意：

可以通过事件回调函数的第一个参数获取事件对象event

在事件回调函数中，this表示事件源，即发生事件的元素

3、常用事件

3.1鼠标事件

3.2键盘事件

3.3表单事件

4、事件操作

4.1事件冒泡

概念：当一个HTML元素产生事件时，该事件会从当前元素（事件源）开始，往上冒泡直到页面的根元素，所以经过的节点都会收到该事件并执行

特点：先触发子级元素的事件，再触发父级元素的事件

阻止事件冒泡：event.stopPropagation()或event.cancelBubble=true;

4.2事件默认行为

概念：当一个事件发生时浏览器自己默认做的事情，如：点击链接时会默认跳转，右键点击默认会弹出菜单

阻止事件的默认行为：event.preventDefault();

5、示例：下拉列表

5.1 Select和Option对象

Select对象：表示HTML表单中的一个下拉列表

属性：

length 设置或返回下拉列表中选项的数量

selectedIndex 设置或返回下拉列表中被选中项的索引

value 返回下拉列表中被选项的值

option 返回下拉列表中所有选项，值为Option对象数组（当该数组改变时对应下拉列表的选项也会改变）

方法：

add()向下拉列表的选项改变时触发

事件：

onchange下拉列表的选项改变时触发

Option对象：表示HTML表单中下拉列表的一个选项

属性：

text:设置或返回在页面显示的文本值

value:设置或返回传递给服务器的值

方法：

Option(文本值，服务器值) 创建一个选项

5.2二级菜单联动

实现省市级联的效果

八、BOM操作

1、BOM简介

javascript由三部分组成

ECMAScript核心语法
DOM文档对象模型
BOM浏览器对象模型

2、window对象

常用属性：

document、location、history等，都是子级对象

常用方法：

常用事件：

注意：由于window对象是BOM结构的顶层对象，所以在调用window的属性和方法时可以省略window

3、location对象

常用属性

href 设置或返回地址栏中的url
常用方法

reload 重新加载当前页面 4、history对象

常用方法：

九、数据校验

1、正则表达式

1.1简介

正则表达式是一门独立的语言，有自己的语法，用于检测指定字符串是否符合特定规则

正则表达式就是用来定义规则的，称为Regular Expresstion

在javaScript中提供了RegExp对象，表示正则表达式

1.2定义方式

创建正则表达式对象，两种方式：

使用字变量

var reg = /pattern/sttribute;

使用构造函数

var reg = new RegExp(pattern,attribute);

说明：

pattern表示匹配模式，用于指定匹配规则，由元字符、量词、特殊符号组成
attribute表示匹配特征，取值：i忽略大小写、g全局匹配、m多行匹配

1.3匹配规则

元字符：具有特殊含义的字符

量词：指定字符出现的次数

特殊符号：具有特殊含义的符号

注：[\u4E00-\u9FA5]用于匹配中文字符

1.4基本用法

使用正则表达式对象的test方法

语法：

var flag = reg.test(字符串);

判断字符串是否符合正则表达式对象所指定的模式规则，返回true或false

2、表单校验

2.1目的

客户端表单校验的目的

保证输入的数据符合要求
减轻服务器的压力

2.2实现

通过onsubmit事件绑定回调函数，判断表单数据是否符合要求

如果不符合要求，则返回false
如果符合要求，则返回true