2015-12-23复习之JavaScript基础一
1、JavaScript介绍
JavaScript是互联网上最流行的脚本语言，这门语言可用于web和HTML，更广泛用于，服务器，PC端和移动端。
JavaScript是一种轻量级的编程语言，是可插入HTML页面的编程代码，可由所有浏览器执行。
2、JavaScript实现
HTML中脚本必须位于<script></script>中，脚本可被放置在HTML页面中的head和body中，不限制脚本数量，通常放在head中，以不干扰页面内容
3、JavaScript输出
JavaScript经常用来操作HTML
文档输出，document.write("<h1>你好</h1>"); document.getElementById("p").innerHTML = "你好";
4、JavaScript语法
JavaScript语句向浏览器发出的命令
语句之间用分号分隔
执行顺序是按照编写顺序依次执行
JavaScript标识符必须以字母，下划线或者美元符号开始（没有数字！），不可以使用关键字
JavaScript对大小写敏感
JavaScript会忽略多余的空格
单行注释// 多行注释/**/
5、JavaScript变量
变量是用来储存信息的容器 var a = 10; var $b = "hello";
6、JavaScript数据类型
字符串（string）、数字（number）、布尔（Boolean）、数组（array）、对象（object）、空（null）
未定义、可以通过赋值为null的方式清除变量
7、JavaScript运算符
算术运算符：+、-、*、/、%、++、--
赋值运算符：= 、+= 、-=、*=、/=、%=
比较运算符：==、！=、<、<=、>、>=、===、！===（var i=10;var j="10"; i==j/*true*/ i===j /*false*/）
逻辑运算符：&&、||、！
条件运算符：x<10?"x<10":"x>=10"
字符串操作：var i="5"; var j="5"; i+j ------>"55"
8、JavaScript条件语句
if...else -----> if(...){...}else if(...){...}else{...}
switch -----> switch(i){ case 1: ... break; case 2: ... break; default : ... break;}
9、JavaScript循环语句
for---------->for(int i=0;i<2;i++){}
for/in------->var i=[1,2,3]; var j; for(j in i){alert i[j];}
while-------->while(i<3){...}//先判断后执行
do...while--->do{...}while(i<3);//先执行后判断
10、JavaScript跳转语句
break------->跳出当前循环
continue---->结束本次循环，继续下一次循环
return------->返回
11、JavaScript函数
了解函数的用途：函数是事件驱动的或者当它被调用时执行的可重复使用的代码块。
定义函数：function 函数名(){函数体；（代码块）}
调用函数：函数定义好后不能自动执行，需要调用。在script标签内调用，在HTML文件中调用
带参数的函数：在函数的调用过程中，也可以传递值，这些值被称作参数。通过传递参数的个数及类型完成不同的功能。
带返回值的函数：有时我们需要把函数的值返回给调用它的地方，通过return执行，之后不要有任何代码。
局部变量和全局变量：局部（在函数内部声明var a=1;）全局（函数外面var b=2;或者任意地方c=3;但是如果在函数内部的话，需要先调用这个函数，这个变量才是全局变量。？）
12、JavaScript异常处理和事件处理
异常：当JavaScript引擎执行JavaScript代码时发生错误，导致程序停止运行。
异常抛出：当异常产生的时候，并且将这个异常生成一个错误信息
异常捕获：try{发生异常的代码块}catch(err){错误信息处理}
throw语句：创建一个自定义错误
事件是可以被JavaScript侦测到的行为
onclick、onmouseover、onchange（文本内容改变）、onselect（文本框选中）、onfocus、onblur、onload（网页加载）、onunload（关闭网页）
13、JavaScript—DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
JavaScript能够改变页面中的所有HTML元素
JavaScript能够改变页面中的所有HTML属性
JavaScript能够改变页面中的所有CSS样式
JavaScript能够对页面中的所有事件作出反应
14、DOM操作HTML
改变HTML输出流（注意绝对不要在文档加载完成之后使用document.write()，这会覆盖该文档）
通过ID或者标签名寻找到HTML元素（document.getElementById，document.getElementByTagName相同元素中第一个）
改变HTML内容，使用innerHTML
改变HTML属性，使用attribute（eg：document.getElementById(...).href="..."）
15、DOM操作CSS
通过DOM对象改变CSS
语法：document.getElementById(id).style.property = new style;
16、DOM-EventListener
addEventListener();//向元素添加事件句柄
removeEventListener();//移除事件句柄
document.getElementById(id).addEventListener("click",funcName);
document.getElementById(id).removeEventListener("click",funcName);
17、JavaScript事件详解
事件流：描述的是在页面中接受事件的顺序
事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件
通俗的讲就是事件被触发的顺序
18、JavaScript事件处理
HTML事件处理：直接添加到HTML结构之中（优点：简便；缺点：不便修改）
<button onclick="hello()">hello</button>
DOM0级事件处理：把一个函数赋值给一个事件处理程序属性（优点：和HTML无关；缺点：会被覆盖）
document.getElementById(id).onclick=function(){};
DOM2级事件处理：（优点：不会被覆盖；）
addEventListener("事件名","事件处理函数","布尔值")（true 事件捕获，false 事件冒泡）
removeEventListener();
document.getElementById(id).addEventListener("click",funcName);
兼容解决：IE事件处理（版本小于8）
attachEvent和detachEvent
“DOM2级事件”中规定的事件流同时支持了事件捕获阶段和事件冒泡阶段，而作为开发者，我们可以选择事件处理函数在哪一个阶段被调用。
addEventListener方法用来为一个特定的元素绑定一个事件处理函数，是JavaScript中的常用方法。addEventListener有三个参数：
element.addEventListener(event, function, useCapture)
第一个参数是需要绑定的事件，第二个参数是触发事件后要执行的函数。而第三个参数默认值是false，表示在事件冒泡的阶段调用事件处理函数，如果参数为true，则表示在事件捕获阶段调用处理函数。
上面一段摘自浅谈事件冒泡与事件捕获
兼容demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">hello</button>
<script>
var btn = document.getElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else{
btn.onclick = demo();
}
function demo(){
alert("hello");
}
</script>
</body>
</html>
19、JavaScript事件对象
在出发DOM事件的时候都会产生一个对象
事件对象event：
type获取时间类型 function demo(event){alert(event.type);}//click,mouseover...
target获取事件目标 function demo(e){console.log(e.target);}//<button id="btn">hello</button>
stopPropagtion()阻止事件冒泡
preventDefault()阻止事件默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div"><button id="btn">button</button></div>
<script>
document.getElementById("btn").addEventListener("click",showBtn);
document.getElementById("div").addEventListener("click",showDiv);
function showBtn(e){
alert(e.type);
e.stopPropagation();//阻止事件冒泡
}
function showDiv(){
alert("div");
}
</script>
</body>
</html>当点击button按钮的时候，不仅会alert出"click"，而且还会alert出"div"，就是因为事件冒泡，阻止事件冒泡见上面代码注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a id="a" href="http://www.baidu.com">baidu</a>
<script>
function showA(e){
e.preventDefault();//阻止事件默认行为（href）
}
</script>
</body>
</html>当点击a标签时，会跳转到百度首页，但是如果阻止事件默认行为，就不会跳转了。