JS
作者：烨竹
JS简介：
JavaScript是一门 基于浏览器的 、 事件触发式的 、 嵌入式的… 脚本语言
变量、常量与数据类型
变量
声明变量：var关键字，逗号分隔多个变量,批量声明，为一个变量首次赋值称为变量的初始化，未未初始化的变量值为undefined(未定义)
全局变量默认保存为window对象下的属性(重要!);
常量
声明常量：const关键字，常量不能多次赋值，声明常量时必须初始化:
系统常量:
undefined:未定义
null:空
NaN:不是一个数 常见于非数值类型参与的算术运算 ‘a’*10
Infinity:无限大 数值型 可以带符号 常见于以0作为除数 100/0
-Infinity:无限小
数据类型
数据类型是对数据的描述。
无论是常量还是变量都是数据的容器,数据类型是根据变量或常量保存的数据决定的
基本数据类型：最多保存一个值,
（1） 短整型 short （2）长整型 long （3）双精度 ：double 型（4）字符型 char （5）布尔型，有两种一个是true ，一个是false（6）单精度 float （7）字节型 byte （8）整型 int
引用数据类型：引用数据类型可以保存多个、多种值
类、接口类型、数组类型、枚举类型、注解类型；
数组在内存中的形态：
数组元素在内存中所占的空间大小一致,大小为4字节
相邻数组元素所用的内存地址连续
数据类型检测
typeof 运算符
如何区分一般的对象和数组?
利用instanceof运算符,判断当前变量是否为Array系统类的实例。
如果true:当前变量是数组
如果false:当前变量不是数组
函数
简单理解：
一段实现特定功能的，可以重复调用的代码就是函数
使用函数的目的是为了代码的复用。
函数的定义与调用：
函数的参数有两种:形参和实参
形参:形式参数,定义函数时使用的参数,没有明确的取值
实参:实际参数,调用函数时,真正参与运算的数据,实际取值
函数返回值:return
匿名函数：
把匿名函数5种常见场景(代码的惯用写法):
1、 匿名函数自调用(IEF)
2、 把函数表达式保存到变量中
3、 JavaScript语言最大的特点就是事件编程.事件绑定时,经常使用匿名函数
4、 匿名函数作为返回值
5、 匿名函数作为参数:常见于回调函数
程序语言要运行,需要经过两个阶段: 编译与执行
高级语言转化成机器语言的过程就是编译.
语法检测、代码优化(去除空格、去掉换行)、调整顺序、代码编译
声明变量、声明函数、定义类等是在编译阶段进行的
调用函数、引用变量、赋值操作、运算表达式是在执行阶段进行的
多个script代码段执行流程图
作用域
简单理解：
作用域:一个变量有效的引用范围就是作用域
引用:读取一个变量对应内存地址中的值就是引用
跨作用域引用变量：
全局作用域不能引用局部变量
局部作用域能直接引用全局变量
想要JS学得好 两链一包不能少:作用域链
作用域链原则:
举例子：你被欺负了，找你爸爸，没找到，就去找你爷爷，没找到，依次向上找，找遍了你的十八代都没找到，最后你只能靠自己了；
1、 当引用一个变量时,先在当前作用域,寻找该变量的声明语句(var 变量名),如果有,用
2、 如果未找到,向上一级作用域继续寻找,如果有,直接用
3、 如果还没有,继续向上一级作用域寻找该变量的声明语句,以此类推…
4、 如果找到全局作用域依然没有找到var声明语句,那么系统会自动(隐式)在全局作用域创建这个变量。
作用域是以函数定义来划分的,与调用无关
案例：
闭包：
JavaScript与PHP作用域比较
PHP
1.PHP中全局访问局部，需要用global关键字声明全局变量
2.局部变量不能直接访问全局变量:借助$GLOBALS,从局部作用域取得全局变量的值
JavaScript
闭包要解决的问题:
解决方案,闭包的原理图
闭包实现：
DOM操作
7.1 DOM的概念
在浏览器上有三种主要语言:
HTML: 主要负责构成网页的成分 HTML网页元素
CSS: 主要负责网页元素的样式
JS: 主要负责网页元素的动态特效,数据的处理逻辑代码
JS需要处理动态特效: 样式的变化 颜色、尺寸、属性、位置变化 网页元素的新增或移除前端界面真实的结构（节点树DOM Tree）
节点的概念
通常元素就是节点
document对象文档节点
html对象是根节点
html标签是元素
双标中包含的文本内容是文本节点
html属性是属性节点
查询元素
找到要操作的HTML节点,原始的通过children逐层寻找的方法太麻烦了,需要掌握一些能够快速定位到要操作的HTML节点的方法
通过id获取要操作的HTML元素(捕获DOM对象)：document.getElementById(要匹配的ID);
通过class获取要操作的HTML元素(捕获DOM对象集合)：document.getElementsByClassName(要匹配的class);
通过标签名获取要操作的HTML元素(捕获DOM对象集合)：document.getElementsByTagName(标签名);
通过name属性,匹配要操作的HTML元素(捕获DOM对象集合),通常用于表单域：document.getElementsByName(要匹配的name)
新增元素
1.创建新元素：document.createElement(标签名);
2.把子元素追加到父元素中的方法：父元素.appendChild(子元素);追加把子元素放到父元素内容的尾部;
3.把新子元素插入到旧子元素之前的方法:父元素.insertBefore(新子元素,旧子元素);
删除元素
打狗要看主人面,如果要删掉某个元素,必须通知其监护人(父元素)：父元素.removeChild(子元素);
需求:把第二行后的空行删除掉
替换元素
替换操作也涉及到通知父元素的需要：父元素.replaceChild(新子元素,旧子元素);
事件编程
事件驱动式
一个完整的事件驱动应当具备三个部分:
事件的主体:一般是HTML元素
事件的类型:浏览器提供了常用事件类型
事件的处理程序:根据需求编写
1.png
常用事件类型
onclick: 点击事件 一次完整的点击应该是按下后抬起
onmousedown: 鼠标按下时触发的事件
onmouseup: 鼠标按键抬起时触发的事件
onmouseover : 鼠标悬浮时触发的事件
onmousemove: 鼠标移动时触发的事件
onkeydown: 键盘按下时触发的事件
onkeypress: 键盘按下时触发的事件
onkeyup: 键盘按键抬起时触发的事件
onsubmit: 表单提交事件
onchange: 下拉菜单选项改变时触发的事件
onfocus: 聚焦事件 文本框被选中时触发的事件
onblur: 失去焦点时触发的事件
onload: 页面加载事件
事件无效(没有绑定成功),报错捕获DOM对象的结果为undefined
解决方法:利用window.onload事件,在页面载入完成后,再进行DOM对象的捕获,避免出现undefined:
事件处理程序例子：延时器与定时器
延时器:延迟一段时间,执行一次代码(执行一次)：
setTimeout(函数名,要延迟毫秒数);setTimeout函数是有返回值的,是一个整数.是当前延时器在内存中的序号
清除延时器:clearTimeout(延时器序号);在延时器触发前,把延时器清除掉
如果将来要清除延时器,在设置延时器时,就要把序号保存起来。
定时器:每隔一段时间,执行一次代码(执行多次)setInterval(函数,间隔毫秒数);
清除定时器:在任何时候,可以把定时器取消:clearInterval(定时器序号);
事件绑定：
事件绑定:形成一个完整的事件驱动就是事件绑定；事件绑定有两种形式:行内绑定与动态绑定；
行内绑定(静态绑定):在HTML代码中,利用HTML的标签属性进行事件绑定:
动态绑定:通过JS代码动态地捕获HTML元素(捕获DOM对象),再进行事件绑定:由于需要捕获DOM对象,要注意页面载入事件；动态绑定的本质,是给DOM对象的事件属性赋值一个函数；
事件监听
关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段
非IE：
element.addEventListener(event, function, useCapture)
event ： （必需）事件名，支持所有 DOM事件 。
function：（必需）指定要事件触发时执行的函数。
useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。
IE：
element.attachEvent(event, function)
event：（必需）事件类型。需加“on“，例如：onclick。
function：（必需）指定要事件触发时执行的函数
移除事件监听
非IE：dom对象.removeEventListener(事件类型,函数名);事件类型参数,不带on前缀
IE：dom对象.detachEvent(事件类型,函数名);
如果将来要取消事件监听,一定要保留函数名;
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件冒泡
在特定的情况下(html元素有覆盖的情况),会发生一些特殊的事件触发:
点击box2的同时,由于覆盖的关系,也就点击到了box1.box3同理,box2和box1都被点击了，这种特性称为事件冒泡
禁用事件冒泡非IE：event事件对象.stopPropagation();
IE：window.event.cancelBubble = true;
元素默认行为与阻止默认行为
什么是元素的默认行为?
表单与超链接
默认情况下,点击了表单中的提交按钮,页面会发生跳转
默认情况下,点击了超链接,也会发生跳转
有些需求,需要在点击了提交按钮或超链接后,不能够跳转的。
非IE阻止默认行为:event事件对象.preventDefault();
IE老版本阻止默认行为:window.event.returnValue = false;
