目录
一、JavaScript简介
1.1JavaScript
JavaScript（简称“js”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，
js可以嵌入到html中，是基于对象和事件驱动的脚本语言。
JavaScript具有以下几个特点：
- 交互性：需要用户与界面进行交互才会作用，比如当用户点击了某个按钮事件
- 安全性：JavaScript不能访问本地磁盘
- 跨平台：浏览器中就具备了JavaScript解析器
1.2JavaScript作用
- 能动态的修改(增删)html和css的代码
- 能动态的校验数据
1.3JavaScript历史及组成
JavaScript分为：
- ECMAScript：描述了语言的语法和基本对象
- BOM(Browser Object Model)：即浏览器对象模型，用于描述处理网页内容的方法和接口
- DOM(Document Object Model) ：即文档对象模型，描述与浏览器进行交互的方法和接口
1.4JavaScript的使用方式
和css的使用方式类似，JavaScript的使用方式也有三种
1.4.1内嵌脚本
内嵌脚本就是将JavaScript脚本写在元素内部中，例如：
<input type="button" value="按钮" onclick="alert('内嵌脚本')"></input>首先我们创建了一个按钮，onclick是点击按钮的处理程序，
相应程序alert是弹出一个消息框，消息框的内容就是alert('')括号中的内容，页面效果如下：
1.4.2内部脚本
内部脚本就是在html任意位置定义JavaScript脚本，如果我们把它放在head中，
那么脚本会在网页进行加载时执行，比如刚进入网页或者刷新的时候都会执行脚本的程序，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
alert("内部脚本");
</script>
</head>
<body>
<input type="button" value="按钮"></input>
</body>
</html>页面效果：
1.4.3外部脚本
首先我们需要创建一个js文件，将代码写在文件中，
alert("外部脚本")然后在html中引入，
<script type="text/javascript" src="myjs.js"></script>在引入的时候放在哪里都可以，但是一般而言，在不影响html功能的前提下，越晚加载js越好，
如果js代码比较多加载时间就会很慢，而且源码中任何地方都可以直接使用js代码，但是它的优先级最低，推荐写到最后，
二、JavaScript基本语法
2.1变量
变量是用于存储信息的"容器"，
在js中我们通过var关键字来定义一个变量（不用在定义的时候表明数据类型），
var a=5;
a='javascript';
var b="javascript";
var c=true;在JavaScript中单引号和双引号都可以表示一个字符串，二者在语法上没有区别，
我们还可以省略掉var，直接对变量赋值，
x=5;2.2原始数据类型
- number：数字类型
- string：字符串类型
- boolean：布尔类型
- null：空类型
- undefined：未定义
注意，number、boolean和string是伪对象，可以看做成对象，调用对象的一些方法。
所谓伪对象, 首先并不是对象, 换句话说就是值类型, 其因为某种原因(通常是环境增强)可以使用某些相对应对象的方法和属性, 以达到OO方式的编程目的。
在JavaScript中, boolean, number, string这些值类型对应的对象为三个内置对象boolean,Number,String;
而js解释器将这三个对象的方法和属性同样绑定在对应的值类型之上, 从而使得我们在编写js代码时会出现 字面值也拥有方法及属性的情况。
实际上称Boolean,Number,String这些内置对象为包装类对象, 而称能够编码时调用对应包装类方法和属性的boolean,number,string这些基本值类型称为伪对象。
小写的boolean等表示的是一个值类型，
大些的Boolean等可以表示一个函数, 或一个内置对象。我们用代码测试看看，
<script type="text/javascript">
var x=5;
var y="javascript";
var b=true;
var n=null;
alert("x:"+typeof x+
" y:"+typeof y+
" b:"+typeof b+
" n:"+typeof n+
" k:"+typeof k
);
</script>显示结果：
这里需要注意的是，typeof null返回数据类型为object，而这是因为历史原因造成的，
1995年JavaScript语言的第一版，所有值都设计成32位，其中最低的3位用来表述数据类型，object对应的值是000。
当时，只设计了五种数据类型（对象、整数、浮点数、字符串和布尔值），完全没考虑null，只把它当作object的一种特殊值，32位全部为0。
这是typeof null返回object的根本原因。
原始数据类型的类型转换一般有以下几种形式：
- number\boolean转成string：toString();（因为是伪对象所以可以调用方法）
- string\boolean转成number：parseInt()和parseFloat()
- boolean不能转换为number，转换结果为NaN
- 非数字的string转换结果也为NaN
- 数字开头的字符串可以转换成number，遇到第一个非数字的字符就会停止转换。如“123a3sd5”转成123
- 强制转换
- Boolean()：强转成布尔类型
- 数字强转成布尔：非零就是true，零就是false
- 字符串强转成布尔：非“”(空字符串)就是true，空字符串“”就是false
- Number()：强转成数字类型
- 布尔转数字：true转成1，false转成0
- 字符串转数字：不能强转
- Boolean()：强转成布尔类型
2.3引用数据类型
也就是对象类型Object type，比如：Object 、Array 、Function 、Data等。
javascript的引用数据类型是保存在堆内存中的对象。
与其他语言的不同是，你不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。
所以，引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。
var obj = new Object();
var num = new Number();2.4运算符
2.4.1赋值运算符
赋值运算符就是我们常用的“=”，
var x = 5;2.4.2算数运算符
算数运算符包括：+、-、*、/、%
- +：遇到字符串时变成连接
- -：先把字符串转成数字然后进行运算
- *：先把字符串转成数字然后进行运算
- /：先把字符串转成数字然后进行运算
2.4.3逻辑运算符
逻辑运算符包括与或非：&&、||、!
2.4.4比较运算符
比较运算符在逻辑语句中使用，以判定变量或值是否相等，
我们假设x=5，下表解释了比较运算符：
| 运算符 | 描述 | 比较 | 返回 |
| == | 等于 | x==8 | false |
| x==5 | true | ||
| x=="5" | true | ||
| === | 值相等且类型相等 | x===5 | true |
| x==="5" | false | ||
| != | 不相等 | x!=8 | true |
| !== | 值不相等或类型不相等 | x!==5 | false |
| x!=="5" | true | ||
| x!==8 | true | ||
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于或等于 | x>=8 | false |
| <= | 小于或等于 | x<=8 | true |
2.4.5三元运算符
js的三元运算符和java的类似，格式：
variablename = (condition) ? value1:value2例如：
var rich=(money>100)?"有钱":"没钱";2.4.6void运算符
void是一元运算符，它可以出现在任意类型的操作数之前执行操作数，却忽略操作数的返回值，返回一个 undefined。
void常用于HTML脚本中执行JavaScript表达式，但不需要返回表达式的计算结果。
在下面代码中，使用void运算符让表达式返回undefined，
var a = b = c = 2; //定义并初始化变量的值
d = void (a -= (b *= (c += 5))); //执行void运算符，并把返回值赋予变量d
console.log(a); //返回-12
console.log(b); //返回14
console.log(c); //返回7
console.log(d); //返回undefined由于 void 运算符的优先级比较高，高于普通运算符的优先级，所以在使用时应该使用小括号明确void运算符操作的操作数，避免引发错误。
在下面两行代码中，由于第一行代码没有使用小括号运算符，则 void 运算符优先执行，返回值 undefined 再与 1 执行减法运算，所以返回值为 NaN。
在第二行代码中由于使用小括号运算符明确 void 的操作数，减法运算符先被执行，然后执行 void 运算，最后返回值是 undefined。
console.log(void 2 - 1); //返回NaN
console.log(void (2 - 1)); //返回undefinedvoid 运算符也能像函数一样使用，如 void(0) 也是合法的。在特殊环境下一些复杂的语句可能不方便使用 void 运算符，而必须使用 void 函数。
console.log(void (i = 0)); //返回undefined
console.log(void (i = 0;i++)); //返回undefined2.4.7类型运算符
- typeof：它返回值是一个字符串，该字符串说明运算数的类型
console.log(typeof(111)) // number
console.log(typeof('111')) // string
console.log(typeof(false)) // boolean
function fn(){
}
console.log(typeof(fn)) // function
console.log(typeof(undefined)) //undefined
console.log(typeof({})) // object
console.log(typeof([])) //object
console.log(typeof(null)) //object
console.log(typeof(v)) // undefined未定义的变量使用时会报错，但是 typeof类型为 undefined。
数组的typeof类型也是object，在js中，数组是一种特殊的对象。
- instanceof：用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上
通俗来说就是用于判断一个实例是否是其父类型或祖先类型所生成的实例，
var a = {}
var b = []
console.log(a instanceof Object) // true
console.log(b instanceof Array) // true2.5逻辑语句
js的逻辑语句分为顺序语句、分支语句和循环语句。
1、顺序语句就是程序由上至下按顺序执行，没有分支和循环；
2、分支语句就是根据条件的不同执行不同的代码；
1.if
if(条件){
条件为true时执行的代码
}
2.if...else
if(条件){
条件为true时执行的代码
}else{
条件为false时执行的代码
}
3.if...else if...else
if(条件1){
条件1为true时执行的代码
}else if(条件2){
条件2为true时执行的代码
}else{
条件1,2都为false时执行的代码
}
4.switch
switch(n){
case 1:
代码块1
break;
case 2:
代码块2
break;
default:
1,2都不满足的情况执行的代码块
}3、循环语句就是在条件满足时，循环执行某段代码；
1.for语句
for(var i=0;i<5;i++){
alert(i);
}
2.for in语句
var arr = [1,3,5,7,"js"];
for(index in arr){//index代表下标
alert(arr[index]);
}
3.while语句
while(条件){
条件为true时一直执行的代码//先判断再执行
}
4.do while语句
do{
条件为true时一直执行的代码//先执行再判断
}while(条件)需要注意的是，在循环语句我们还会搭配break、continue一起使用，
- break：用于跳出当前循环
- continue：用于跳过循环中的一次迭代，继续下一次循环
三、JavaScript内建对象
JavaScript包含了17个内建的对象，以下为常用的几种对象，
- 1、Number
- 创建方式：
- var myNum=newNumber(value);
- var myNum=Number(value);
- 属性和方法：
- toString()：转成字符串
- valueOf()：返回一个 Number 对象的基本数字值
- 创建方式：
- 2、Boolean
- 创建方式：
- var bool = new Boolean(value);
- var bool = Boolean(value);
- 属性和方法：
- toString()：转成字符串
- valueOf()：返回一个 Boolean 对象的基本值(boolean)
- 创建方式：
- 3、String
- 创建方式：
- var str = new String(s);
- var str = String(s);
- 属性和方法：
- length：字符串的长度
- charAt()：返回索引位置的字符
- charCodeAt()：返回索引位置字符的ASCII码
- concat()：连接字符串
- indexOf()：返回目标字符的索引
- lastIndexOf()：逆向开始搜索，返回目标字符的索引
- split()：将字符串按照特殊字符切割成字符串数组
- substr()：从起始索引号提取字符串中指定数量的字符
- substring()：提取字符串中两个指定的索引号之间的字符（包括头不包括尾）
- toUpperCase()：转大写
- 创建方式：
- 4、Array
- 创建方式：
- var arr = new Array();//空数组
- var arr = new Array(size);//创建一个指定长度的数组（超出长度也可以添加元素到数组中）
- var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
- var arr = [];//空数组
- var arr = [1,2,5,"java"];//创建数组直接实例化元素
- 属性和方法：
- length：数组长度
- join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
- pop()：删除并返回数组最后一个元素
- push()：向数组的末尾添加一个或更多元素，并返回新的长度
- reverse()：反转数组
- sort()：对数组元素进行排序（先排数字，字符串按照字典顺序进行排序）
- 创建方式：
- 5、Date
- 创建方式：
- var myDate = new Date();
- var myDate = new Date(毫秒值);//代表从1970-1-1到现在的毫秒值
- 属性和方法：
- getFullYear()：获得当前年份
- getMonth()：月，值为0-11
- getDate()：日，值为1-31
- getDay()：星期，值为0-6
- getTime()：返回1970年1月1日午夜到指定日期（字符串）的毫秒数
- toLocalString()：获得本地时间格式的字符串
- 创建方式：
- 6、Math
- 创建方式：
- Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。（类似java中静态函数的概念，通过类名加函数名可以直接调用）
- 属性和方法：
- PI：圆周率
- abs()：绝对值
- max()：最大值
- min()：最小值
- ceil()：对数据进行上舍入
- floor()：对数据进行下舍入
- pow(x,y)：返回 x 的 y 次幂
- random()：0-1之间的随机数
- round()：四舍五入
- 创建方式：
- 7、RegExp，描述正则表达式对象，用于规定在文本中检索的内容格式
- 创建方式：
- var reg = new RegExp(pattern);
- var reg = /^正则规则$/;
- 正则表达式规则：
- 表达式：
- [abc]：查找方括号内的任何字符
- [^abc]：查找任何不在方括号内的字符
- [0-9]：查找0-9的任何数字
- [a-z]：查找小写a到小写z的任何字符
- [A-Z]：查找大写A到大写Z的任何字符
- [A-z]：查找大写A到小写z的任何字符
- 元字符：
- .：查找单个字符（除了换行和行结束符\r\n）
- \w：查找单词字符
- \W：查找非单词字符
- \d：查找数字字符
- \D：查找非数字字符
- \s：查找空白字符
- \S：查找非空白字符
- \b：匹配单词边界
- \B：匹配非单词边界
- \0：查找NULL字符
- \n：查找换行符
- \r：查找回车符
- 量词：
- n+：n字符串出现一次或多次
- n*：n字符串出现零次或多次
- n?：n字符串出现零次或一次
- n{x}：n字符串出现x次
- n{x,y}：n字符串出现x次或y次
- n{x,}：n字符串至少出现x次
- n$：以n字符串结尾
- n^：以n字符串开头
- ?=n：查找任何其后紧跟字符串n的字符串
- ?!n：查找任何其后没有紧跟字符串n的字符串
- 表达式：
- 方法：
- test(str)：检索字符串中指定的值。返回 true 或 false
- exec(str)：检索字符串中指定的值。返回找到的值，并确定其位置
- 实例：
- 校验邮箱：
- var email = [email protected]
- var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;//字母开头，有@和.字符
- reg.test(email);
- 校验邮箱：
- 创建方式：
四、JavaScript的函数
4.1js函数定义的方式
4.1.1普通方式
格式：function 函数名(参数列表){函数体}，然后通过函数名加参数列表就可以调用，
例如：
function method(){
alert("xxx");
}
method();4.1.2匿名函数
匿名函数就是没有名字的函数，在函数作为参数时，可以在参数列表中直接定义一个匿名函数，
格式：function (参数列表){函数体}，
例如：
var method = function(){
alert("yyy");
};
method();4.1.3对象函数
对象函数就是将函数当作对象使用new进行创建，
语法：new Function(参数列表,函数体)，
注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
例如：
var fn = new Function("a","b","alert(a+b)");
fn(2,5);4.2函数的参数
JavaScript函数不会对参数值进行任何检查，
简单来说，js并不关注有多少个参数被传递，也不关注传递的参数是什么数据类型，
js有一个内置对象arguments，它是函数运行时的实参列表，
当传入的参数数量大于形参数量时，我们可以通过arguments的下标访问到所有的实参，
function fn(a,b,c）{
console.log(a+b+c);//6
console.log(arguments[0]);//1
console.log(arguments[1]);//2
console.log(arguments[2]);//3
console.log(arguments[3])};//4
}
fn(1,2,3,4)；如果传入的参数数量小于形参数量，那么未传入的参数就是undefined类型，
function fn(a,b,c）{
console.log(a+b+c);//NaN,因为1+2+undefined结果为NaN
console.log(arguments[0]);//1
console.log(arguments[1]);//2
console.log(arguments[2]);//undefined
console.log(arguments[3])};//undefined
}
fn(1,2)；总结来说，JavaScript的函数参数有以下几个特点：
- 形参没有var去修饰，不用指定数据类型
- 形参和实参个数不一定相等
- arguments对象是个数组，会将传递的实参进行封装
4.3返回值
JavaScript在定义函数的时候不用显示的写出返回值类型，
- 每一个函数都会有一个返回值，这个返回值可以通过关键字return进行设置
- 若未显式地设置函数的返回值，那函数会默认返回一个undefined值，但若设置了函数的返回值return后，函数将返回开发者手动设置的那个值
- 在函数中，一旦执行完成return语句，那么整个函数就结束了，后续语句将不再执行
-
就是return之后的值只能有一个。如果尝试返回多个值，那得到的结果始终是最后一个值（例如return 1,2，返回结果是2）
-
如果真的需要函数返回多个值，那就只有将值组合成一个对象或数组进行返回（例如return [1,2]）
4.4js的全局函数
js有一些给我们定义好的函数可以直接使用，我们称为全局函数：
| 功能 | 函数名 | 描述 |
| 编码和解码 | decodeURI() | 解码某个编码的 URI |
| encodeURI() | 把字符串编码为 URI | |
| decodeURIComponent() | 解码一个编码的 URI 组件 | |
| encodeURIComponent() | 把字符串编码为 URI 组件 | |
| escape() | 对字符串进行编码 | |
| unescape() | 对由 escape() 编码的字符串进行解码 | |
| 强制转换 | Number() | 把对象的值转换为数字 |
| String() | 把对象的值转换为字符串 | |
| Boolean() | 把对象的值转换为布尔值 | |
| 转成数字 | parseInt() | 解析一个字符串并返回一个整数 |
| parseFloat() | 解析一个字符串并返回一个浮点数 | |
| 数值检测 | isNaN() | 检查某个值是否是数字 |
| isFinite() | 检查某个值是否为有穷大的数 | |
| 其他 | eval() | 将字符串当作脚本代码进行解析运行 |
| getClass() | 返回一个 JavaObject 的 JavaClass |
五、JavaScript的事件
5.1事件的概述
首先我们看看下面的概念：
- 事件：可以被 JavaScript 侦测到的行为，网页中的每个元素都可以产生某些可以触发JavaScript函数的事件
- 事件源：产生事件的元素
- 响应程序：应对事件产生的一系列反应
JavaScript的事件更准确的说是发生在HTML上的，
用户通过交互产生了事件，比如点击某个链接、按钮等，这时就需要用JavaScript来应对这些事件
5.2js的常用事件
下面我们介绍一下js的一些常用事件，然后逐个详细介绍，
| 事件 | 描述 |
| onchange | HTML元素被改变 |
| onclick | HTML元素被点击 |
| onfoucus | HTML元素获得了焦点 |
| onblur | HTML元素失去了焦点 |
| onmouseover | 用户将鼠标移动到了HTML元素上 |
| onmouseout | 用户将鼠标从HTML元素上移开了 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器完成了页面加载 |
5.2.1事件onchange
onchange是元素被改变，我们用填写地区为例，选自不同的城市弹出不同的区名，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span>地区：</span>
<select id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="sh">上海</option>
</select>
<select id="area">
<option>海淀</option>
<option>朝阳</option>
<option>东城</option>
</select>
</body>
<script type="text/javascript">
var select = document.getElementById("city");
var area=document.getElementById("area");
select.onchange=function () {
var optionVal =select.value;
switch (optionVal){
case "bj":
area.innerHTML="<option>海淀</option><option>朝阳</option><option>东城</option>";
break;
case "tj":
area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
break;
case "sh":
area.innerHTML = "<option>黄埔</option><option>徐汇</option><option>静安</option>";
break;
default:
alert("error");
break;
}
};
</script>
</html>页面效果，选择不同的城市会跳转不同的区名，
5.2.2事件onclick
onclick就是点击了某个元素的事件，我们写一个按钮点击事件处理程序，
<input type="button" onclick="alert('您点击了按钮')" value="点击">页面效果：
5.2.3事件onfocus&onblur
onfocus是当前元素获得焦点，就是点击了当前元素将焦点放在当前元素上，
onblur就是元素失去了焦点，其他元素获得了焦点，我们用输入框测试一下这两个事件，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label for="txt">name</label>
<input id="txt" type="text" /><span id="action"></span>
</body>
<script type="text/javascript">
var txt = document.getElementById("txt");
txt.onfocus = function(){
//友好提示
var span = document.getElementById("action");
span.innerHTML = "用户名格式最小8位";
span.style.color = "green";
};
txt.onblur = function(){
//错误提示
var span = document.getElementById("action");
span.innerHTML = "对不起 格式不正确";
span.style.color = "red";
};
</script>
</html>页面效果，当我们点击输入框时提示格式，输入框失去焦点时提示格式错误：
5.2.4事件onmouseover&onmouseout
onmouseover是鼠标悬浮在当前元素上的事件，onmouseout是鼠标从当前元素上移开的事件，
我们用div元素的背景颜色测试一下这两个事件的使用，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{background-color: red;width:200px;height: 200px;}
</style>
</head>
<body>
<div id="d1">移动鼠标至此处</div>
</body>
<script type="text/javascript">
var div = document.getElementById("d1");
div.onmouseover = function(){
div.innerText="请将鼠标移开";
this.style.backgroundColor = "green";//这里的this指向的就是窗体，通过窗体修改背景样式
};
div.onmouseout = function(){
div.innerText="移动鼠标至此处";
this.style.backgroundColor = "red";//还有需要注意的是css中背景属性名为background-color，js中背景属性名为backgroundColor；一般js将css属性名中的"-"去掉了且第二个单词首字母会大写
};
</script>
</html>页面效果，红色的为没有移动鼠标到div上，绿色为移动鼠标到div上：
5.2.5事件onkeydown
onkeydown是监测键盘输入的事件，通过参数event中的key获取按下的键值，我们看看具体如何使用，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span>请输入：</span>
<input type="text" id="input" ><br><br>
<span>输出结果：</span>
<textarea id="output" cols="21" rows="1"></textarea>
</body>
<script type="text/javascript">
var inputText=document.getElementById("input");
var outputText=document.getElementById("output");
inputText.onkeydown=function (e) {
var key=e.key;
outputText.innerText="你按下了"+key;
};
</script>
</html>页面效果：
5.2.6事件onload
onload是浏览器完成了页面加载的事件，
如果我们要将js代码放在head中，就要让窗口都加载完再执行js代码，
否则很有可能在js代码先于窗口元素加载完成，那么js访问这个元素的时候就会获取到空指针，就会影响功能，
这个时候就可以把js的代码放在onload函数中，让js在窗体加载完成之后再执行，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function () {
var span=document.getElementById("span");
span.innerText="onload text";
}
</script>
</head>
<body>
<span id="span"></span>
</body>
</html>页面效果：
5.3事件的绑定方式
1、将事件和响应行为都内嵌到html标签中
<input type="button" value="button" onclick="alert('xxx')"/>2、将事件内嵌到html中，而响应行为用函数进行封装
<input type="button" value="button" onclick="fn()" />
<script type="text/javascript">
function fn(){
alert("yyy");
}
</script>3、将事件和响应行为与html标签完全分离
<input id="btn" type="button" value="button"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("zzz");
};
</script>5.4this关键字
面向对象语言中this表示当前对象的一个引用，
但在JavaScript中this不是固定不变的，它会随着执行环境的改变而改变。
- 在方法中，this表示该方法所属的对象
- 如果单独使用，this表示全局对象
- 在函数中，this表示全局对象；在严格模式下，this是未定义的(undefined)
- 在事件中，this表示接收事件的元素（事件源）
- 类似call()和apply()方法可以将this引用到任何对象
我们测试一下在事件中this的使用，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fn(obj){
alert(obj.name);
}
</script>
</head>
<body>
<input id="btn" name="mybtn" type="button" value="mybtn" onclick="fn(this)"/>
</body>
</html>页面效果：
5.5阻止事件的默认行为
当我们不设置元素的事件响应程序时，js中有些元素有一些默认的处理行为，
比如a标签可以网页跳转，那么如果需要更改默认的处理行为，则需要组织默认行为，
按照浏览器遵循的不同标准，我们分为两种不同的方式完成阻止事件的默认行为，
- IE：window.event.returnValue=false;
- W3C：传递过来的事件对象.preventDefault();
下面我们实际测试一下怎么使用（实验用的是chorme浏览器，是符合W3C标准的），
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" onclick="fn(event)">百度一下你就知道</a>
</body>
<script type="text/javascript">
function fn(e){
if(e&&e.preventDefault){//如果浏览器满足W3C标准
e.preventDefault();
}else{//如果浏览器满足IE标准
window.event.returnValue=false;
}
}
</script>
</html>还可以通过事件返回false，也可以阻止事件的默认行为：
<a href="http://www.baidu.com" onclick="return false">百度一下你就知道</a>5.6阻止事件的传播
js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。
- 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。
- 目标阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。
- 事件冒泡: 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。
通俗的理解，捕获阶段就是从外向里查找事件源元素，目标阶段就是找到目标事件的监听器，事件冒泡阶段就是从内到外依次出发相应的行为。
下图为事件流传播的原理图：
从图中我们可以知道
- 一个完整的JS事件流是从window开始，最后回到window的一个过程
- 事件流被分为三个阶段(1~5)捕获过程、(5~6)目标过程、(6~10)冒泡过程
- 在冒泡过程中6比7早触发
我们简单写个小程序看一下事件的传播过程，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: red;padding: 30px" onclick="fn1()">
<div style="width: 100px;height: 100px;background-color: green;" onclick="fn2()"></div>
</div>
</body>
<script type="text/javascript">
function fn1() {
alert("外部");
}
function fn2() {
alert("内部");
}
</script>
</html>点击内部的div发现fn2和fn1方法先后被执行了，这是因为事件冒泡的原因，
为了实现点击内部div只执行内部方法，事件不传播到外层div，我们需要阻止事件的传播，同样的也有两种方式：
- IE：window.event.cancleBubble=true;
- W3C：传递过来的事件对象.stopPropagation();
我们修改一下上面的代码，看一下是否可以阻止事件的传播，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: red;padding: 30px" onclick="fn1()">
<div style="width: 100px;height: 100px;background-color: green;" onclick="fn2(event)"></div>
</div>
</body>
<script type="text/javascript">
function fn1() {
alert("外部");
}
function fn2(e) {
alert("内部");
if(e&&e.stopPropagation){//如果浏览器满足W3C标准
e.stopPropagation();
}else{//如果浏览器满足IE标准
window.event.cancelBubble = true;
}
}
</script>
</html>点击发现外部的方法没有被触发，事件的传播被阻止了，
六、BOM
BOM(Browser Object Model)，即浏览器对象模型，是用于描述处理网页内容的方法和接口，
我们可以简单理解为网页上面的菜单栏那些功能（比如回退前一个网页，输入网址，刷新等），都是属于BOM的内容。
BOM主要包括以下几个对象：
- window ：是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
- document 对象，文档对象；
- location 对象，浏览器当前URL信息；
- navigator 对象，浏览器本身信息；
- screen 对象，客户端屏幕信息；
- history 对象，浏览器访问历史信息
6.1window对象
window对象是JavaScript层级中的顶层对象，代表一个浏览器窗口或一个框架。
window对象会在<body>或<frameset>每次出现时被自动创建，
所有JavaScript全局对象、函数以及变量都是window对象的成员，全局变量是window对象的属性，全局函数是window对象的方法
6.1.1弹框方法
在window对象中，主要有三种弹框的方法：
- 提示框：alert("提示信息");
- 返回值：为默认的undefined
- 确认框：confirm("确认信息");
- 返回值：如果点击确认返回true，如果点击取消返回false
- 输入框：prompt("输入信息");
- 返回值：如果点击确认返回输入框的文本，点击取消返回null
6.1.2 open方法
open方法用于打开一个新的浏览器窗口，或查找一个已命名的窗口，
同样的close方法用于关闭当前页面，下面我们通过代码看看具体如何使用，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="fnopen()" value="百度"></div>
<input type="button" onclick="fnclose()" value="关闭当前窗口"></div>
</body>
<script type="text/javascript">
function fnopen() {
window.open("http://www.baidu.com");
}
function fnclose() {
window.close();
}
</script>
</html>6.1.3定时器
定时器就是在一定时间后执行某个函数方法，
- setTimeout(函数，时间)//只执行一次函数
- setInterval(函数，时间)//无线执行函数
- clearTimeout/clearInterval(定时器名称)//清除定时器
我们分别用两种方法测试一下定时器如何设置与清除，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var timer;
var timefn=function(){
alert("定时器");
timer=setTimeout(timefn,2000);
};
var closer=function(){
clearTimeout(timer);
};
timefn();
</script>
</head>
<body>
<input type="button" value="停止" onclick="closer()">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var timer = setInterval(
function(){
alert("定时器2");
}, 2000
);
var closer = function(){
clearInterval(timer);
};
</script>
</head>
<body>
<input type="button" value="停止" onclick="closer()">
</body>
</html>页面效果：
6.2 location对象
location地址对象描述的是某一个窗口对象所打开的地址，
location.href="url地址";我们看看具体代码中如何使用，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
恭喜您注册成功，<span id="second" style="color: red;">5</span>
秒后跳转到百度，如不跳转请点击<a href="http://www.baidu.com"></a>
</body>
<script type="text/javascript">
var time=4;
var timer;
timer=setInterval(
function() {
var second=document.getElementById("second");
if(time>=1){
second.innerText=time;
time--;
}else{
clearInterval(timer);
location.href="http://www.baidu.com";
}
},1000
);
</script>
</html>页面效果：
6.3 history对象
history对象主要有三个方法，
- back()：后退到前面一个加载的界面
- forward()：前进到后面一个加载的界面
- go()：可加载历史列表中的某个具体的页面，-1上一个页面，1前进一个页面。或者为完整的URL
<input type="button" value="后退" onclick="history.back()">
<input type="button" value="前进" onclick="history.forward()">
<input type="button" value="后退" onclick="history.go(-1)">
<input type="button" value="前进" onclick="history.go(1)">七、DOM
7.1 DOM简介
DOM(Document Object Model) ，即文档对象模型，是描述与浏览器进行交互的方法和接口，
同样的，我们也可以了解为网页主页面加载的东西，都是属于DOM的内容。
当网页被加载时，浏览器会创建页面的文档对象模型，HTML DOM模型被结构化为对象树：
在DOM树当中一切皆为节点对象，通过这个对象模型，JavaScript获得创建动态HTML的所有功能：
- HTML
- 改变页面中的所有HTML元素
- 改变页面中的所有HTML属性
- 添加新的HTML元素和属性
- 删除已有的HTML元素和属性
- CSS
- 改变页面中的所有CSS样式
- 事件
- 在页面中创建新的HTML事件
- 对页面中所有已有的HTML事件作出反应
7.2 DOM HTML
HTML DOM允许JavaScript改变和增删HTML元素以及属性
7.2.1改变HTML元素和属性
js可以改变HTML的输出流，利用write方法直接向HTML输出流写内容，
document.write(Date());//向输出流写当前的日期页面效果：
我们可以通过id、name和tagname来获取到元素：
document.getElementById(id)//通过id获取html元素
document.getElementsByName(name)//通过name获取html元素集合（可能多个元素name相同）
document.getElementsByTagName(tagname)//通过标签名称获取html元素集合（可能多个元素标签名相同）
我们用id来测试一下改变元素和属性，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="test" style="background-color: red">测试文本</span>
<input type="button" value="改变元素" onclick="fn()">
</body>
<script type="text/javascript">
function fn() {
var spantest=document.getElementById("test");
spantest.innerHTML="我变色了";
spantest.style.backgroundColor="yellow";
}
</script>
</html>页面效果：
7.2.2添加HTML元素和属性
如需向HTML DOM添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素，
需要用的到的主要方法如下：
createElement("p")//按照给定的标签名创建一个新的元素节点
createTextNode(string)//创建文本节点
setAttribute(attributeName,attributeValue)//将给定元素节点添加一个新的属性值或改变它的现有属性的值我们以添加一个段落元素为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<p id="p1">第一行</p>
<p id="p2">第二行</p>
</div>
</body>
<script type="text/javascript">
var para=document.createElement("p");//创建新的<p>元素
var node=document.createTextNode("新加的第三行");//创建文本节点
para.setAttribute("style","color:red");//设置颜色为红色
para.appendChild(node);//将文本节点放置在<p>元素中，也可以直接对<p>元素的innerHTML赋值完成该效果
var element=document.getElementById("div1");
element.appendChild(para);//将<p>元素放置在div中
</script>
</html>页面效果：
7.2.3删除HTML元素和属性
如需删除HTML元素，必须首先获得该元素的父元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<p id="p1">第一行</p>
<p id="p2">第二行</p>
</div>
</body>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</html>页面效果：
7.3 DOM CSS
HTML DOM允许JavaScript改变HTML元素的样式，
document.getElementById(id).style.property=new style比如我们改变字体的颜色和大小，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">Hello World!</p>
</body>
<script>
var paraStyle=document.getElementById("p1").style;
paraStyle.color="blue";
paraStyle.fontSize="40px";
</script>
</html>页面效果：
7.4 DOM事件
HTML DOM使JavaScript有能力对HTML事件做出反应，
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>我们还可以在js中设置点击的响应程序，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="mybtn" value="点击">
</body>
<script>
document.getElementById("mybtn").onclick=function(){
document.write(Date());
};
</script>
</html>页面效果：
