一、JavaScript
1 什么是JavaScript
JavaScript：是运行在客户端的解释性脚本语言。
客户端：指浏览器(Internet Explorer、Firefox、Chrome、Opera、Safari等)
客户端技术：包括HTML、CSS、JavaScript,其最大难点在于浏览器兼容性。
2 JavaScript能做什么
- 增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
- 实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)
3 JavaScript的使用方式
（1）使用外部的JS文件：
JavaScript文件的扩展名.js
<script type="text/javascript" src="JS文件的URL"></script>
注意：在JS文件中，不需要<script>标签,直接编写JavaScript代码就可以了。
（2）将JS代码书写于当前文档内：
<script type="text/javascript"> JS代码 </script>
（3）JavaScript代码规范：
JavaScript严格区分大小写，每行JavaScript代码"必须"以分号结尾
（4）JavaScript在页面中的位置：
浏览器解释html时是按先后顺序的。比如进行页面显示初始化的js必须放在head里面；而如果是通过事件调用执行的function那么对位置没什么要求的。但是我们一般放在网页的head或者body部分。
4 JavaScript的注释
（1）单行注释：在注释内容前加符号“
//” （同PHP单行注释，JS的单行注释最好和当前行的JS代码保持一定间隔）
（2）多行注释：以“
/*”开始，以“
*/”结束。 （同PHP多行注释）
二、变量
1 变量是什么：
变量(Variable)，指存储在内存中有名称的信息，其值在程序运行期间可以发生变化。
2 声明变量：
var 变量名称 （声明变量）
var 变量名称,变量名称 （声明多个变量）
变量名称 = 值 （变量赋值）
var 变量名称 = 值 （声明变量，并且赋值）
说明：
- 变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。
- 变量名称必须使用字母、下划线(_)或者美元符($)开始，后面包含字母、数字及下划线，遵守"驼峰标记法"；
- 变量名称禁止与系统关键字/预保留关键字相同，变量名区分大小写；
关键字：var、if、else、switch、case、break、default、for、in、while、do...，
保留字：class、float、integer、boolean、extends、abstract、public、protected、private、interface、implements、static...；
三、操作符
1 操作符
操作符是用于在JavaScript中指定一定动作的符号。
例如，算术操作符(+、-、*、/等)，比较操作符(<、>、>=、<=、==等)，逻辑操作符(&&、||、！)。
注意: “=” 操作符是赋值，不是等于。“+”不只代表加法，还可以连接两个字符串。
2 自加一，自减一 ( ++和- -)
算术操作符除了(+、-、*、/)外，还有两个非常常用的操作符，自加一“++”；自减一“--”。
举例：
mynum = mynum + 1;//等同于mynum++
mynum = mynum - 1;//等同于mynum--
3 操作符优先级
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号 （由高到低）
如果同级的运算是按从左到右次序进行,多层括号由里向外。
四、数据类型
1 字符串(string)
必须括在单引号/双引号之间,内容任意。
2 数值型(number)
存储整数或浮点数,可以带有符号位。整数可以存储八进制(以前导0开头)、十进制、十六进制(以0x或0X开头)的数字。
3 布尔型(boolean)
只能存储true或false。
4 转义符
\n,换行 \r,回车 \t,水平制表符 \v,垂直制表符 \f,换页(走纸) \\,反斜线 \',单引号 \",双引号
5 undefined
未定义,以下情况将导致为undefined:
- 声明但没有赋值的变量;
- 声明但赋值为undefined的变量
- 自定义函数的参数/返回值,默认值为undefined
6 null
空对象
7 function
自定义函数，是可以重复执行的代码段。
function 函数名(){
函数代码;
}
8 object
对象
五、数组
数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值。
1 声明数组
使用数组之前首先要创建，而且需要把数组本身赋值给一个变量。
var 变量名称 = new Array(length) （声明一个数组，并指定长度）
var 变量名称 = new Array(value,...) （声明一个数组，并赋值）
var 变量名称 = [value,...] （声明一个数组，并赋值）
注意：
- 创建的新数组是空数组，没有值，如输出，则显示undefined。
- 虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
2 数组赋值
- 方法一：
第一步：创建数组var myarr=new Array();
第二步：给数组赋值
myarr[1]=" 张三";
myarr[2]=" 李四";
- 方法二：
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
- 方法三：
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）
3 数组属性
length
描述:获取数组中包含的成员数量
语法:myarray.length; //获得数组myarray的长度
同时，JavaScript数组的length属性是可变的，这一点需要特别注意。可以自定义长度，也可以随着数组中值的个数变化。
举例：
arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10
var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34; //增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16
注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4。
4 二维数组
- 二维数组的定义方法一：
<wiz_code_mirror>
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
}
}
- 二维数组的定义方法二：
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
赋值：
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。
说明: myarr[0][1] ,0 表示表的行，1表示表的列。
5 数组方法
push()
描述:在数组的未尾添加一个或多个成员,返回数组的新长度
语法:int object.push(mixed value,...)
unshift()
描述:在数组的开头添加一个或多个成员,返回数组的新长度
语法:int object.unshift(mixed value,...)
pop()
描述:删除数组的最后一个成员,并且返回该成员
语法:mixed object.pop(void)
shift()
描述:删除数组的第一个成员,并且返回该成员
语法:mixed object.shift(void)
join()
描述:将数组成员使用指定的分隔符连接成字符串
语法:string object.join(string separator)
六、常用互动方法
1 输出内容（document.write）
document.write(字符串或变量) ：可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
输出内容用" "括起，输出多项内容，内容之间用+号连接。
2 警告（alert消息对话框）
语法：alert(字符串或变量);
![]()
注意：
- 在点击对话框"确定"按钮前，不能进行任何其它操作。
- 消息对话框通常可以用于调试程序。
- alert输出内容，可以是字符串或变量，与document.write 相似。
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
语法：confirm(字符串或变量);
返回值：Boolean值。当用户点击"确定"按钮时，返回true；当用户点击"取消"按钮时，返回false。
4 提问（prompt消息对话框）
prompt 弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法：prompt(str1, str2);
- str1: 要显示在消息对话框中的文本，不可修改
- str2：文本框中的内容，可以修改
返回值：
- 点击确定按钮，文本框中的内容将作为函数返回值
- 点击取消按钮，将返回null
5 打开新窗口（window.open）
open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法：window.open([URL], [窗口名称], [参数字符串])
参数说明：
- URL：可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口。
- 窗口名称：可选。指定target属性或窗口的名称。支持以下值：
（1）name：
表示窗口名称，可选字符串参数，该参数可以设置新窗口的名称。
相同name的窗口只能创建一个，要想创建多个窗口则name不能相同。
name 不能包含有空格。该名称由字母、数字和下划线字符组成。
（2） "_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
_parent：框架网页中在父框架中显示目标网页
- 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
举例：
<wiz_code_mirror>
<script type="text/javascript">
function Wopen(){
window.open("http://www.imooc.com","_blank","width=600,height=400,top=100,left=0");
}
</script>
6 关闭窗口（window.close）
语法：window.close(); //关闭本窗口 或 <窗口对象>.close(); //关闭指定的窗口
举例：
<wiz_code_mirror>
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
mywin.close();
</script>
七、流程控制语句
1 if 判断
条件成立时执行代码
<wiz_code_mirror>
if(条件){
}
if(条件){
} else {
}
if(条件){
} else if(条件){
} else {
}
2 switch判断
当有很多种选项的时候，switch比if else使用更方便。
语法：
<wiz_code_mirror>
switch(表达式){
case值1:
执行代码块 1
break;
case值2:
执行代码块 2
break;
case值n:
执行代码块 n
break;
default:
与 case值1 、 case值2
}
注意：
Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。JavaScript中switch语句进行严格比较(===)。
举例：
3 for循环
语法：
<wiz_code_mirror>
for(初始化变量;循环条件;循环迭代)
{
循环语句
}
表达式1永远无条件执行一次,用于初始化信息。
表达式2,在每次执行前都将执行一次,以决定能否进入循环体。
表达式3,在每次执行后都将执行一次,用于控制步长值。
4 while循环
和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。
语法：
<wiz_code_mirror>
while(判断条件)
{
循环语句
}
举例：
<wiz_code_mirror>
<script type="text/javascript">
var num=0; //初始化值
while (num<=6) //条件判断
{
document.write("取出第"+num+"个球<br />");
num=num+1; //条件值更新
}
</script>
/*输出内容：
取出第0个球
取出第1个球
取出第2个球
取出第3个球
取出第4个球
取出第5个球
取出第6个球*/
5 do...while循环
语法：
<wiz_code_mirror>
do{
循环语句
}
while(判断条件)
举例：我们试着输出5个数字。
<wiz_code_mirror>
<script type="text/javascript">
num= 1;
do
{
document.write("数值为:" + num+"<br />");
num++; //更新条件
}
while (num<=5)
</script>
/*输出内容：
数字为：1
数字为：2
数字为：3
数字为：4
数字为：5*/
注意：
- for、while是先判断,后执行;do...while是先执行,后判断;
- for、while至少执行零次;do...while至少执行一次;
6 break退出循环
在for、while、do...while循环中使用break语句退出当前整个循环，直接执行循环外的代码。
举例：当num=5的时候循环就会结束，不会输出后面循环的内容。
7 continue跳过本次循环，继续循环
continue的作用是仅仅跳过本次循环，而整个循环体继续执行。
举例：num=5的那次循环将被跳过。
八、函数
函数的作用，可以写一次代码，然后反复地重用这个代码。
1 定义函数
function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
<wiz_code_mirror>
function 函数名( )
{
函数体;
}
2 调用函数
函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。
- 第一种情况:在<script>标签内调用。
- 第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。
六、DOM对象
1 什么是DOM?
DOM[Document Object Model]，文档对象模型，定义访问和处理HTML文档的标准方法。
DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
DOM提供了处理(X)HTML、XML文档的方法,实现客户端的交互工作。
<a href="http://www.imooc.com">JavaScript DOM</a>
2 通过ID获取元素
语法：document.getElementById(“id”)
结果：null或[object HTMLParagraphElement]
注意：获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
3 innerHTML 属性
innerHTML属性用于获取或替换HTML元素的内容。
语法：Object.innerHTML
注意：
Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。注意书写，innerHTML区分大小写。
4 改变HTML样式
HTML DOM允许JavaScript改变HTML元素的样式。
语法：
Object.style.property=new style
注意：Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
基本属性表（property）:
注意：该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。
5 显示和隐藏（display属性）
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value
value取值：none“不显示”，block”显示为块级元素“。
注意：Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
6 控制类名（className属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
作用：
- 获取元素的class属性
- 为网页内的某个元素指定一个css样式来更改该元素的外观