JavaScript进阶篇
JavaScript能做什么？
1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)
JS进阶篇学习什么？
在JavaScript入门篇中，我们学习了如何插入JS、输出内容及简单的DOM操作，JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作，制作简单的网页动态效果。
什么是变量
什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果...等。
变量命名
1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:
2.变量名区分大小写，如:A与a是两个不同变量。
3.不允许使用JavaScript关键字和保留字做变量名
变量声明
声明变量语法: var 变量名;
变量赋值
使用"="号给变量存储内容
表达式
表达式与数学中的定义相似，表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。
操作符
算术操作符(+、-、*、/等)，比较操作符(<、>、>=、<=等)，逻辑操作符(&&、||、！)。
"+"操作符
自加一“++”；自减一“--”
比较操作符：< > <= >= == !=
逻辑与操作符：&&
(逻辑或操作符：||
逻辑非操作符：!
操作符之间的优先级（高到低）:算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
什么是数组
数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值。
如何创建数组
创建数组语法：var myarray=new Array();
我们创建数组的同时，还可以为数组指定长度，长度可任意指定。var myarray= new Array(8); //创建数组，存储8个数据。
注意：
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
数组赋值
数组的表达方式：
第一步：创建数组var myarr=new Array();
第二步：给数组赋值
var myarray=new Array(); //创建一个新的空数组
myarray[0]=66; //存储第1个人的成绩
myarray[1]=80; //存储第2个人的成绩
myarray[2]=90; //存储第3个人的成绩
myarray[3]=77; //存储第4个人的成绩
myarray[4]=59; //存储第5个人的成绩
注意：数组每个值有一个索引号，从0开始。
我们还可以用简单的方法创建上面的数组和赋值：
第一种方法：var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
第二种方法：var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
向数组增加一个新元素
只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。
使用数组元素
要得到一个数组元素的值，只需引用数组变量并提供一个索引。myarray[0]
数组属性length
如果我们想知道数组的大小，只需引用数组的一个属性length。Length属性表示数组的长度，即数组中元素的个数。
语法：myarray.length; //获得数组myarray的长度
二维数组
一维数组，我们看成一组盒子，每个盒子只能放一个内容。一维数组的表示: myarray[ ]
二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子。二维数组的表示: myarray[ ][ ]
注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。
1. 二维数组的定义方法一
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j
}
}
2. 二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 赋值
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。
做判断（if语句）
if语句是基于条件成立才执行相应代码时使用的语句。
语法:if(条件){ 条件成立时执行代码}
二选一 （if...else语句）
if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。
语法:
if(条件)
{ 条件成立时执行的代码}
else
{条件不成立时执行的代码}
多重判断（if..else嵌套语句）
要在多组语句中选择一组来执行，使用if..else嵌套语句。
语法:
if(条件1)
{ 条件1成立时执行的代码}
else if(条件2)
{ 条件2成立时执行的代码}
...
else if(条件n)
{ 条件n成立时执行的代码}
else
{ 条件1、2至n不成立时执行的代码}
多种选择（Switch语句)
当有很多种选项的时候，switch比if else使用更方便。
语法:
switch(表达式)
{
case值1:
执行代码块 1
break;
case值2:
执行代码块 2
break;
...
case值n:
执行代码块 n
break;
default:
与 case值1 、 case值2...case值n 不同时执行的代码
}
注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句
重复重复（for循环）
for语句结构：
for(初始化变量;循环条件;循环迭代)
{
循环语句
}
反反复复(while循环)
和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。
while语句结构：
while(判断条件)
{
循环语句
}
来来回回(Do...while循环)
do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。
do...while语句结构：
do
{
循环语句
}
while(判断条件)
退出循环break
格式如下：
for(初始条件;判断条件;循环后条件值更新)
{
if(特殊情况)
{break;}
循环代码
}
继续循环continue
continue的作用是仅仅跳过本次循环，而整个循环体继续执行。
语句结构：
for(初始条件;判断条件;循环后条件值更新)
{
if(特殊情况)
{ continue; }
循环代码
}
什么是函数
函数的作用，可以写一次代码，然后反复地重用这个代码。
定义函数
function 函数名( )
{
函数体;
}
function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
函数调用
函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。
第一种情况:在<script>标签内调用。
第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。
有参数的函数
function 函数名(参数1,参数2)
{
函数代码
}
什么是事件
avaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
onclick、onmouseover、onmouseout、onchange、onselect、onfocus、onblur、onload、onunload
鼠标单击事件( onclick ）
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
鼠标经过事件（onmouseover）
鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
鼠标移开事件（onmouseout）
鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
光标聚焦事件（onfocus）
当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
失焦事件（onblur）
onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
内容选中事件（onselect）
选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
文本框内容改变事件（onchange）
通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
加载事件（onload）
事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：
1. 加载页面时，触发onload事件，事件写在<body>标签内。
2. 此节的加载页面，可理解为打开一个新页面时。
卸载事件（onunload）
当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
什么是对象
JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：var objectName =new Array();
访问对象属性的语法:objectName.propertyName
访问对象的方法：objectName.methodName()
Date 日期对象
日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。
定义一个时间对象:var Udate=new Date();
返回/设置年份方法
get/setFullYear() 返回/设置年份，用四位数表示。
返回星期方法
getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成
返回/设置时间方法
get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
String 字符串对象
在之前的学习中已经使用字符串对象了，定义字符串的方法就是直接赋值
访问字符串对象的属性length:stringObject.length; 返回该字符串的长度。
访问字符串对象的方法：使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写 toLowerCase()
返回指定位置的字符
charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
语法:stringObject.charAt(index)
返回指定的字符串首次出现的位置
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法：stringObject.indexOf(substring, startpos)
字符串分割split()
split() 方法将字符串分割为字符串数组，并返回此数组。
语法：stringObject.split(separator,limit)
提取字符串substring()
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法:stringObject.substring(startPos,stopPos)
提取指定数目的字符substr()
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
语法:stringObject.substr(startPos,length)
Math对象
Math对象，提供对数据的数学计算。
向上取整ceil()
ceil() 方法可对一个数进行向上取整。
语法:Math.ceil(x)
向下取整floor()
floor() 方法可对一个数进行向下取整。
语法:Math.floor(x)
四舍五入round()
round() 方法可把一个数字四舍五入为最接近的整数。
语法:Math.round(x)
随机数 random()
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
语法：Math.random();
Array 数组对象
数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的
数组定义的方法：
1. 定义了一个空数组:var 数组名= new Array();
2. 定义时指定有n个空元素的数组：var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：var 数组名 = [<元素1>, <元素2>, <元素3>...];
数组元素使用：
数组名[下标] = 值;注意: 数组的下标用方括号括起来，从0开始。
数组属性：
length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
数组连接concat()
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
语法：arrayObject.concat(array1,array2,...,arrayN)
指定分隔符连接数组元素join()
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法：arrayObject.join(分隔符)
颠倒数组元素顺序reverse()
reverse() 方法用于颠倒数组中元素的顺序。
语法：arrayObject.reverse()
注意：该方法会改变原来的数组，而不会创建新的数组。
选定元素slice()
slice() 方法可从已有的数组中返回选定的元素。
语法：arrayObject.slice(start,end)
数组排序sort()
sort()方法使数组中的元素按照一定的顺序排列。
语法:arrayObject.sort(方法函数)
function sortNum(a,b) {
return b-a;
}
document.write(myarr.sort(sortNum));
window对象
window对象是BOM的核心，window对象指当前的浏览器窗口。
alert prompt confirm open close print focus blur moveBy moveTo resizeTo scrollBy scrollTo setInterval setTimeout clearInterval clearTimeout
JavaScript 计时器
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
setTimeout clearTimeout setInterval clearInterval
计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:setInterval(代码,交互时间);
取消计时器clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：clearInterval(id_of_setInterval)
计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:setTimeout(代码,延迟时间);
取消计时器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止计时器。
语法:clearTimeout(id_of_setTimeout)
History 对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：window.history.[属性|方法]
History 对象属性：length
History 对象方法：back forward go
返回前一个浏览的页面
back()方法，加载 history 列表中的前一个 URL
语法：window.history.back();
返回下一个浏览的页面
forward()方法，加载 history 列表中的下一个 URL。
window.history.forward();
forward()相当于go(1),代码如下:window.history.go(1);
返回浏览历史中的其他页面
go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。
语法：window.history.go(number);
Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
语法:location.[属性|方法]
location 对象属性：hash host hostname href pathname port protocol search
location 对象方法：assign reload replace
Navigator对象
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性:appCodeName appName appVersion platform userAgent
userAgent
返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
语法：navigator.userAgent
screen对象
screen对象用于获取用户的屏幕信息
语法：window.screen.属性
对象属性:availHeight availWidth colorDepth pixelDepth height width
屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。
屏幕可用高和宽度
1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
getElementsByName()方法
返回带有指定名称的节点对象的集合。
语法：document.getElementsByName(name)
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:document.getElementsByTagName(Tagname)
区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法：elementNode.getAttribute(name)
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value)
节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：elementNode.childNodes
注意：如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
访问子节点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
访问父节点parentNode
获取指定节点的父节点
语法：elementNode.parentNode
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：nodeObject.nextSibling
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：nodeObject.previousSibling
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:appendChild(newnode)
插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:nodeObject.removeChild(node)
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：node.replaceChild (newnode,oldnew )
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName)
创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：document.createTextNode(data)
浏览器窗口可视区域大小
网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)
JS进阶篇学习什么？
在JavaScript入门篇中，我们学习了如何插入JS、输出内容及简单的DOM操作，JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作，制作简单的网页动态效果。
什么是变量
什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果...等。
变量命名
1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:
2.变量名区分大小写，如:A与a是两个不同变量。
3.不允许使用JavaScript关键字和保留字做变量名
变量声明
声明变量语法: var 变量名;
变量赋值
使用"="号给变量存储内容
表达式
表达式与数学中的定义相似，表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。
操作符
算术操作符(+、-、*、/等)，比较操作符(<、>、>=、<=等)，逻辑操作符(&&、||、！)。
"+"操作符
自加一“++”；自减一“--”
比较操作符：< > <= >= == !=
逻辑与操作符：&&
(逻辑或操作符：||
逻辑非操作符：!
操作符之间的优先级（高到低）:算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
什么是数组
数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值。
如何创建数组
创建数组语法：var myarray=new Array();
我们创建数组的同时，还可以为数组指定长度，长度可任意指定。var myarray= new Array(8); //创建数组，存储8个数据。
注意：
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
数组赋值
数组的表达方式：
第一步：创建数组var myarr=new Array();
第二步：给数组赋值
var myarray=new Array(); //创建一个新的空数组
myarray[0]=66; //存储第1个人的成绩
myarray[1]=80; //存储第2个人的成绩
myarray[2]=90; //存储第3个人的成绩
myarray[3]=77; //存储第4个人的成绩
myarray[4]=59; //存储第5个人的成绩
注意：数组每个值有一个索引号，从0开始。
我们还可以用简单的方法创建上面的数组和赋值：
第一种方法：var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
第二种方法：var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
向数组增加一个新元素
只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。
使用数组元素
要得到一个数组元素的值，只需引用数组变量并提供一个索引。myarray[0]
数组属性length
如果我们想知道数组的大小，只需引用数组的一个属性length。Length属性表示数组的长度，即数组中元素的个数。
语法：myarray.length; //获得数组myarray的长度
二维数组
一维数组，我们看成一组盒子，每个盒子只能放一个内容。一维数组的表示: myarray[ ]
二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子。二维数组的表示: myarray[ ][ ]
注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。
1. 二维数组的定义方法一
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j
}
}
2. 二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 赋值
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。
做判断（if语句）
if语句是基于条件成立才执行相应代码时使用的语句。
语法:if(条件){ 条件成立时执行代码}
二选一 （if...else语句）
if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。
语法:
if(条件)
{ 条件成立时执行的代码}
else
{条件不成立时执行的代码}
多重判断（if..else嵌套语句）
要在多组语句中选择一组来执行，使用if..else嵌套语句。
语法:
if(条件1)
{ 条件1成立时执行的代码}
else if(条件2)
{ 条件2成立时执行的代码}
...
else if(条件n)
{ 条件n成立时执行的代码}
else
{ 条件1、2至n不成立时执行的代码}
多种选择（Switch语句)
当有很多种选项的时候，switch比if else使用更方便。
语法:
switch(表达式)
{
case值1:
执行代码块 1
break;
case值2:
执行代码块 2
break;
...
case值n:
执行代码块 n
break;
default:
与 case值1 、 case值2...case值n 不同时执行的代码
}
注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句
重复重复（for循环）
for语句结构：
for(初始化变量;循环条件;循环迭代)
{
循环语句
}
反反复复(while循环)
和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。
while语句结构：
while(判断条件)
{
循环语句
}
来来回回(Do...while循环)
do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。
do...while语句结构：
do
{
循环语句
}
while(判断条件)
退出循环break
格式如下：
for(初始条件;判断条件;循环后条件值更新)
{
if(特殊情况)
{break;}
循环代码
}
继续循环continue
continue的作用是仅仅跳过本次循环，而整个循环体继续执行。
语句结构：
for(初始条件;判断条件;循环后条件值更新)
{
if(特殊情况)
{ continue; }
循环代码
}
什么是函数
函数的作用，可以写一次代码，然后反复地重用这个代码。
定义函数
function 函数名( )
{
函数体;
}
function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
函数调用
函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。
第一种情况:在<script>标签内调用。
第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。
有参数的函数
function 函数名(参数1,参数2)
{
函数代码
}
返回值的函数
什么是事件
avaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
onclick、onmouseover、onmouseout、onchange、onselect、onfocus、onblur、onload、onunload
鼠标单击事件( onclick ）
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
鼠标经过事件（onmouseover）
鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
鼠标移开事件（onmouseout）
鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
光标聚焦事件（onfocus）
当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
失焦事件（onblur）
onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
内容选中事件（onselect）
选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
文本框内容改变事件（onchange）
通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
加载事件（onload）
事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：
1. 加载页面时，触发onload事件，事件写在<body>标签内。
2. 此节的加载页面，可理解为打开一个新页面时。
卸载事件（onunload）
当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
什么是对象
JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：var objectName =new Array();
访问对象属性的语法:objectName.propertyName
访问对象的方法：objectName.methodName()
Date 日期对象
日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。
定义一个时间对象:var Udate=new Date();
返回/设置年份方法
get/setFullYear() 返回/设置年份，用四位数表示。
返回星期方法
getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成
返回/设置时间方法
get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
String 字符串对象
在之前的学习中已经使用字符串对象了，定义字符串的方法就是直接赋值
访问字符串对象的属性length:stringObject.length; 返回该字符串的长度。
访问字符串对象的方法：使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写 toLowerCase()
返回指定位置的字符
charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
语法:stringObject.charAt(index)
返回指定的字符串首次出现的位置
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法：stringObject.indexOf(substring, startpos)
字符串分割split()
split() 方法将字符串分割为字符串数组，并返回此数组。
语法：stringObject.split(separator,limit)
提取字符串substring()
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法:stringObject.substring(startPos,stopPos)
提取指定数目的字符substr()
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
语法:stringObject.substr(startPos,length)
Math对象
Math对象，提供对数据的数学计算。
向上取整ceil()
ceil() 方法可对一个数进行向上取整。
语法:Math.ceil(x)
向下取整floor()
floor() 方法可对一个数进行向下取整。
语法:Math.floor(x)
四舍五入round()
round() 方法可把一个数字四舍五入为最接近的整数。
语法:Math.round(x)
随机数 random()
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
语法：Math.random();
Array 数组对象
数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的
数组定义的方法：
1. 定义了一个空数组:var 数组名= new Array();
2. 定义时指定有n个空元素的数组：var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：var 数组名 = [<元素1>, <元素2>, <元素3>...];
数组元素使用：
数组名[下标] = 值;注意: 数组的下标用方括号括起来，从0开始。
数组属性：
length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
数组连接concat()
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
语法：arrayObject.concat(array1,array2,...,arrayN)
指定分隔符连接数组元素join()
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法：arrayObject.join(分隔符)
颠倒数组元素顺序reverse()
reverse() 方法用于颠倒数组中元素的顺序。
语法：arrayObject.reverse()
注意：该方法会改变原来的数组，而不会创建新的数组。
选定元素slice()
slice() 方法可从已有的数组中返回选定的元素。
语法：arrayObject.slice(start,end)
数组排序sort()
sort()方法使数组中的元素按照一定的顺序排列。
语法:arrayObject.sort(方法函数)
function sortNum(a,b) {
return b-a;
}
document.write(myarr.sort(sortNum));
window对象
window对象是BOM的核心，window对象指当前的浏览器窗口。
alert prompt confirm open close print focus blur moveBy moveTo resizeTo scrollBy scrollTo setInterval setTimeout clearInterval clearTimeout
JavaScript 计时器
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
setTimeout clearTimeout setInterval clearInterval
计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:setInterval(代码,交互时间);
取消计时器clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：clearInterval(id_of_setInterval)
计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:setTimeout(代码,延迟时间);
取消计时器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止计时器。
语法:clearTimeout(id_of_setTimeout)
History 对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：window.history.[属性|方法]
History 对象属性：length
History 对象方法：back forward go
返回前一个浏览的页面
back()方法，加载 history 列表中的前一个 URL
语法：window.history.back();
返回下一个浏览的页面
forward()方法，加载 history 列表中的下一个 URL。
window.history.forward();
forward()相当于go(1),代码如下:window.history.go(1);
返回浏览历史中的其他页面
go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。
语法：window.history.go(number);
Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
语法:location.[属性|方法]
location 对象属性：hash host hostname href pathname port protocol search
location 对象方法：assign reload replace
Navigator对象
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性:appCodeName appName appVersion platform userAgent
userAgent
返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
语法：navigator.userAgent
screen对象
screen对象用于获取用户的屏幕信息
语法：window.screen.属性
对象属性:availHeight availWidth colorDepth pixelDepth height width
屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。
屏幕可用高和宽度
1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
getElementsByName()方法
返回带有指定名称的节点对象的集合。
语法：document.getElementsByName(name)
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:document.getElementsByTagName(Tagname)
区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法：elementNode.getAttribute(name)
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：elementNode.setAttribute(name,value)
节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：elementNode.childNodes
注意：如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
访问子节点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
访问父节点parentNode
获取指定节点的父节点
语法：elementNode.parentNode
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：nodeObject.nextSibling
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：nodeObject.previousSibling
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:appendChild(newnode)
插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:nodeObject.removeChild(node)
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：node.replaceChild (newnode,oldnew )
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName)
创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：document.createTextNode(data)
浏览器窗口可视区域大小
网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
网页卷去的距离与偏移量
http://www.imooc.com/learn/10