JavaScript
1：javascript简介
JavaScript是一种脚本语言，能实现网页内容的交互显示，当用户在客户端显示该网页时，浏览器就会执行JavaScript程序，用户通过交互的操作来改变网页等等内容，来实现html语言无法实现的效果
(html是网页的基础，css是样式，js是特效)
2:javascript语言特点
2.1:JavaScript是基于对象和事件驱动的（动态的），它可以直接对用户或客户输入做出响应，无须经过web服务程序，他对用户的响应，是采用以事件驱动的方式进行的 ，所谓事件驱动，就是指在主页中执行了某种操作产生的动作，就成为事件。比如按下鼠标，移动窗口，选择菜单都可以视为事件，当事件发生后，可能引起相应的事件响应
2.2:JavaScript是跨平台的
javascript是依赖于浏览器本身的，与操作系统无关。
3：如何使用JavaScript
3.1：通过<script></script>中直接编写
3.2：通过<script src='目标文档的URL'></script>链接外部的js文件
3.3：作为某个元素的事件属性值或者是超链接的href属性值
<a href="javascript:alert('hello')">点击</a>
4：代码屏蔽
4.1：<!--//-->当浏览器不支持js时进行代码屏蔽
4.2：如果浏览器不支持js,可以使用<noscript></noscript>标签，显示noscript中的内容
5：javascript的基本语法
5.1：JavaScript的执行顺序
(1):按照在html文件中出现的顺序依次执行
(2):优化由于html的执行顺序则js的代码(脚本)最好放在body标签中，放到网页的最后，css样式放在head标签中
(遵循雅虎14条前端优化的规则)
5.2：大小写敏感，忽略空白符和换行符
JavaScript严格区分大小写
5.3：语句分隔符
使用结束语句；
可以把多个语句写在一行；
最后一个语句的分号可以省略，但尽量不要省略；
可以使用{}括成一个语句组，形成一个block块；
5.4：\进行折行操作是针对代码的，避免一行过长，
document.write("asdfghjklqwer\
tyuiopzxcvbnm");
5.5：注释
//单行注释内容
/*
*多行注释内容
*/
5.6：JavaScript中的错误
5.7：通过document.write()向文档书写内容(不可以拿来调试bug)
通过console.log()向控制台写入内容(控制台输出)
5.8：火狐浏览器
进行程序的断点调试，插件的安装，菜单--》附加组件--》Firebug
(F12打开Firebug,firebug第一可以查看和编辑修改html和css的源码
第二页面概况，第三动态执行JavaScript。火狐工具打断点调试，第四监控网络情况)
6:Javascript变量和数据类型
6.1：定义变量
var 变量名;(var这个关键词可以省略的)；
6.2：javascript变量的类型是如何决定的
JavaScript中变量的数据类型是js引擎决定的；
6.3：typeof关键字
检查变量代表的具体数据类型
document.write(typeof name);
document.write(typeof age);
document.write(type 18);
6.4：数据类型
(1):基本数据类型
数值类型(Number):判断是否是数值类型isNaN();
布尔类型(Boolean)
字符串类型(String)
null：空值 var sex=null;结果为null;
null类型只有一个值，就是null,
undefined:表示不存在的值或者尚未赋值的变量，对一个变量只声明不赋值或者赋予一个不存在的属性值，都会使这个变量的值为undefined
undefined类型只有一个值undefined，当声明的变量未初始化的时候，该变量的默认值就是undefined
document.write(null==undefined);结果为true;
null和undefined的区别：null表示尚未存在的对象(typeof null)，undefined声明变量但未对其初始化时赋予该变量的值
(2):复合数据类型(引用数据类型)
对象：var obj=new Object();
数组：var arr=new Array();
函数：var test=function(){
console.log("函数的使用");
}
//调用函数
test();
6.5：转换成数值
(1):转换成整形：parseInt();
(2):转换成浮点型：parseFloat();
(3):Number()函数
(4):注意：Number函数将字符串转换为数值比parseInt函数严格的多，基本上只要有一个字符无法转换成数值，整个字符串都会被转换为NaN;
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <!--link href="*.css" rel="stylesheet" type="text/css">--> 5 <title>柠檬学院</title> 6 </head> 7 <body> 8 <script language="javascript"> 9 //数值类型 10 var age=22; 11 //布尔类型 12 var flag=true; 13 //字符串类型 14 var name="别宏利"; 15 //null类型 16 var sex=null; 17 //undefined类型表示只声明未对其进行初始化操作 18 var grade=undefined; 19 document.write("age="+age+"<br/>"); 20 document.write("flag="+flag+"<br/>"); 21 document.write("name="+name+"<br/>"); 22 document.write("sex="+sex+"<br/>"); 23 document.write("grade="+grade+"<br/>"); 24 console.log(age); 25 console.log(flag); 26 console.log(name); 27 console.log(sex); 28 console.log(grade); 29 //复合数据类型，对象 30 var obj=new Object(); 31 obj.name="biehongli"; 32 obj.age="22"; 33 obj.sex="nan"; 34 document.write(obj.name+"<br/>"); 35 document.write(obj.age+"<br/>"); 36 document.write(obj.sex+"<br/>"); 37 //数组 38 var arr=new Array(); 39 arr[0]="12"; 40 arr[1]="34"; 41 arr[2]="55"; 42 document.write(arr+"<br/>");//注意这个输出的全部的数值，自带分号 43 document.write(arr[0]+"<br/>"); 44 document.write(arr[1]+"<br/>"); 45 document.write(arr[2]+"<br/>"); 46 console.log(arr); 47 console.log(arr[0]); 48 console.log(arr[1]); 49 console.log(arr[2]); 50 //函数 51 var test=function(){ 52 document.write("我是一个函数"+"<br/>"); 53 console.log("我是一个函数"); 54 } 55 test();//函数的调用 56 //数值类型的转换 57 var num1="125"; 58 var num2="125"; 59 var num3=num1+num2; 60 document.write(num3+"<br/>"); 61 console.log(num3); 62 //parseInt();类型转换 63 var a="123"; 64 var b=321; 65 var c=parseInt(a)+b; 66 document.write(c+"<br/>"); 67 console.log(c); 68 //parseFloat();浮点型 69 var i=111.111; 70 var j=222.222; 71 var k=parseFloat(i)+parseFloat(j); 72 document.write(k+"<br/>"); 73 console.log(k); 74 //判断是否是数值类型NaN 75 var v1="123"; 76 var v2="123 456"; 77 var v3="456a"; 78 document.write("v1="+isNaN(v1)+"<br/>"); 79 document.write("v2="+isNaN(v2)+"<br/>"); 80 document.write("v3="+isNaN(v3)+"<br/>"); 81 //Number函数 82 var test1="true"; 83 var test2="false"; 84 var test3=new Date();//获取当前时间 85 var test4="999"; 86 var test5="999 888"; 87 document.write(Number(test1)+"<br/>"); 88 document.write(Number(test2)+"<br/>"); 89 document.write(Number(test3)+"<br/>"); 90 document.write(Number(test4)+"<br/>"); 91 document.write(Number(test5)+"<br/>"); 92 93 </script> 94 </body> 95 </html>
7：运算符与表达式
7.1:表达式-表达式是用于JavaScript脚本运行时进行计算的式子，可以包含常量，变量，运算符
7.2:运算符
(1):算术运算符：
+，-，*，/，%，++，--
注意：
《1》+号用来连接两个字符串
《2》js代码的执行顺序是从左到右，所以在+连接的表达式中，遇到字符串型数据之前，所有出现的数值型数据
(或者可以自动转换为数值型的数据)仍被作为数值来处理，为了避免这种情侣，我们可以在表达式前拼一个空字符串
《3》只要+连接的操作数中有一个是字符串型，js就会自动把非字符串型数据作为字符串型数据来处理
(2):字符连接符：通过+连接字符串
(3):赋值运算符：=,+=,-= ,*= ,/= ,%=
(4):比较运算符：>, < ,>= ,<= ,== ,!= ,!== ,===,
比较运算符的结果为布尔类型
注意：==用于一般比较，只要求值相等；===用于严格比较，值和类型都相等，只要类型不匹配就返回false；=是赋值
实例：document.write("1"==true);//true
document.write("1"===true);//false
(5):逻辑运算符：&&，||，！
&&：结论第一个表达式为false，第二个表达式不执行；第一个表达式为true,第二个表达式才执行。
||：结论第一个表达式为false，第二个表达式才执行；第一个表达式为true,第二个表达式不执行。
注意：逻辑运算符的结果为布尔类型，&&如果第一个表达式为false,造成短路，||如果第一个表达式为true，造成短路
(6):三元运算符：
exp1?exp2:exp3；
(7):其他运算符：
(1):void运算符，用来指明一个表达式返回结果
(2):typeof运算符，用来返回一个字符串，返回的是操作数的数据类型
7.3:运算符的优先级-通过()改变优先级
8：流程控制
8.1：条件语句
if(exp)执行一句代码
if(exp){执行代码块};
if(exp){exp为true执行代码段}else{exp为false执行代码段};
if...elseif...
switch...case
if嵌套
8.2：循环语句
(1):for循环：for(语句1;语句2;语句3){语句块}
特殊情况如下
for(x in arr)
var arr={"张三","李四","阿五"};
for(x in arr){document.write(arr[x]);}
(2):while循环
while(条件语句1){语句块}
(3):do...while循环（这个循环至少会执行一次，即使这个条件为false）
do{语句块}while(条件语句1);
8.3：特殊循环控制
(1):break终止循环
(2):continue跳过当次循环，进入下次循环
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title></title> 5 <style type="text/css"> 6 </style> 7 </head> 8 <body> 9 <script language="javascript"> 10 var a=9; 11 var b=0; 12 document.write(a<8&&b>-1);//&&且运算符，相当于and 13 //true true true; 14 //true false false 15 //结论第一个表达式为false，第二个表达式不执行 16 //第一个表达式为true,第二个表达式才执行。 17 document.write("<br/>"); 18 document.write(a+"<br/>"); 19 document.write(b); 20 document.write("<br/>"); 21 var i=10; 22 var j=0; 23 document.write(i<11||j>1); 24 document.write("<br/>"); 25 document.write(i); 26 document.write("<br/>"); 27 document.write(j); 28 document.write("<br/>"); 29 var x=10; 30 document.write(!x); 31 document.write("<br/>"); 32 var m=45; 33 var n=12; 34 var l=m<n?m:n; 35 document.write(l); 36 document.write("<br/>"); 37 var age=18; 38 document.write(age>=18?"成年人哦":"未成年人哦"); 39 document.write("<br/>"); 40 41 </script> 42 </body> 43 </html>
9：Javascript函数
9.1：什么是函数？
函数是完成某一功能的代码段，函数是可重复执行的代码段，函数方便管理和维护
9.2：函数的定义和使用
9.2.1：函数的分类：
自定义函数，我们自己编写的函数，通过function关键字；
function 函数名称([参数...]){代码段;return 返回值;}
系统函数，JavaScript自带的函数，如alert函数
9.2.2：函数的声明
常用方式：function 函数名([参数...]){代码段;} 调用方式：函数名();
函数表达式：var 函数名=function([参数...]){语句块;} 调用方式：var 变量=函数名(); 变量("实际参数");
9.2.3：函数的调用方式
普通调用：functionName(实际参数...)
通过指向函数的变量去调用：var myVar=函数名;myVar(实际参数);
9.3：函数返回值
当函数无明确返回值时，返回的值就是undefined
当函数有返回值时，返回值是什么就返回什么
9.4：参数
9.4.1：函数可以有参数也可以没有参数，如果定义了参数，在调用函数的时候没有传值，默认设置为undefined
9.4.2：在调用函数时如果传递参数超过了定义时参数，js会忽略掉多余的参数
9.4.3：可变参数
函数的参数列表可以是任意多个，并且数据类型可以是任意的类型
可以通过arguments对象实现可变参数的函数
9.5：局部变量，全局变量
9.5.1：局部变量
在函数体内声明的变量，仅在函数体内可以使用
9.5.2：全部变量
函数体外声明的变量，在变量声明开始到脚本结束都可以使用
9.5.3：注意
尽量控制全局变量的数量，容易引发bug
最好总是使用var 语句来声明变量
9.6：JavaScript创建动态函数
动态函数比较用Function对象来定义(Function是JavaScript中的一个对象，是固定不变的，规定Function对象的"F"必须大写)
创建动态函数的基本格式：var 变量名=new Function("参数1","参数2","参数3","参数n","执行语句");
9.7：匿名函数
9.7.1:直接声明一个匿名函数，立即使用；
9.7.2:好处：省得定义一个用一次就不用的函数，而且避免了命名冲突的问题。js中没有命名空间的概念，因此很容易函数命名的冲突，一旦命名冲突以最后声明为准
9.7.3:格式：
alert(function(i1,i2){return i1+i2; }(10,9));
9.8：JavaScript不支持函数的重载
javascript没有方法重载的说法，如果两个方法名字一样，即使参数个数不一样，那么后面定义的就会覆盖前面定义，调用方法调用的是后面的方法。
9.9：JavaScript函数的特殊性
JavaScript中的函数本身就是变量，所以函数也可以当做普通变量来使用。
9.10：JavaScript全局函数
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title></title> 5 <style type="text/css"> 6 </style> 7 </head> 8 <body> 9 <script language="javascript"> 10 11 //常规方法，开发项目中使用较多，第二种使用方式较少 12 function test(str){ 13 alert(str); 14 } 15 //函数调用的第一种方式 16 test("我的第一个函数"); 17 //函数表达式 18 var test2=function(str2){ 19 alert(str2); 20 } 21 //函数调用的第二种方式 22 var a2=test2;//这个不加括号() 23 a2("我的第二个函数"); 24 25 //函数的返回值，无明确返回值，则返回undefined类型 26 function test3(name){ 27 alert("hello:"+name); 28 } 29 var ret=test3("biexiansheng");//接收返回的值 30 alert("函数返回的结果"+ret); 31 32 //有返回值类型 33 function test4(name2){ 34 alert("hello:"+name2); 35 return "hi"+name2; 36 } 37 var ret2=test4("biexiansheng"); 38 alert("存在返回值类型:"+ret2); 39 //参数问题 40 function test5(num1,num2){ 41 alert(num1); 42 alert(num2); 43 } 44 test5(15);//传递的实参少于形参，则最后的输出undefined 45 test5(69,96); 46 test5(11,22,33);/*传递的实参大于形参，则最后的实参不被输出*/ 47 /*可变的参数：函数的参数列表任意多个，数据类型也是任意的类型*/ 48 /*可变参数，每个函数里面有2个变量 this arguments*/ 49 //add函数是一个参数可变的函数 50 function add(){ 51 alert("参数的个数"+arguments.length); 52 for(var i=0;i<arguments.length;i++){ 53 alert(arguments[i]); 54 } 55 } 56 //调用函数 57 add("biexiansheng",18,"男"); 58 //实现任意多个参数的和运算 59 function add(){ 60 alert("参数的个数"+arguments.length); 61 var result=0; 62 for(var i=0;i<arguments.length;i++){ 63 result+=arguments[i]; 64 } 65 alert(result); 66 } 67 add(1,2,3,4,5); 68 69 /*全局变量和局部变量的学习*/ 70 var name="biexiansheng"; 71 function test(){ 72 var age=22; 73 //如果在函数内部声明变量不加var,那么这个变量为全局变量 74 sex="男";//全部变量 75 alert("函数内部引用全部变量name:"+name); 76 alert("函数内部引用局部变量age:"+age); 77 alert("函数内部引用全部变量sex:"+sex); 78 } 79 test();//调用函数 80 alert("函数外部引用全部变量sex:"+sex); 81 alert("函数外部引用全部变量name:"+name); 82 alert("函数外部引用局部变量age:"+age);/*不会执行,则下面的代码也不会执行*/ 83 84 /*动态函数创建和使用*/ 85 //常规方式 86 function sum1(num1,num2){ 87 return num1+num2; 88 } 89 //表达式方式 90 var sum2=function(num1,num2){ 91 return num1+num2; 92 } 93 94 /*动态函数创建，不常用*/ 95 var sum3=new Function("num1","num2","return num1+num2"); 96 97 //调试 98 document.write("<pre>"); 99 document.writeln("sum1(1,2)="+sum1(1,2)); 100 document.writeln("sum2(11,22)="+sum2(11,22)); 101 document.writeln("sum3(16,24)="+sum3(16,24)); 102 document.write("<pre>"); 103 104 //匿名函数,在jQuery中使用最多。写插件 105 alert(function(a,b){ 106 return "和："+(a+b); 107 }(3,5)); 108 </script> 109 </body> 110 </html>
10:javascript全部函数
10.1：parseInt(string,radix):返回转换成整数的值
10.2：parseFloat(string):返回转换成浮点数的值
10.3：isFinite(value):检测某个是否是无穷值
10.4：isNaN(value):检测某个值是否是NaN,检测是否是非数字值，如果值为NaN返回true,否则返回false
var a="111";
alert(isNaN(a));
10.5：encodeURI(uri):将字符串编码为URI
注意：使用decodeURI()方法可以编码URI(通用资源标识符：UniformResourceIdentifier,简称"URI")
对以下在URI中具有特殊含义的ASCII标点符号，encodeURI()函数不会进行转义的：. / ? : @ & = + $ #(可以使用encodeURIComponent()方法分别对特殊含义的ASCII标点符号进行编码)
10.6：decodeURI(uri):解码某个编码的URI
10.7：encodeURIComponent():将字符串编码为uri组件
10.8：dncodeURIComponent():解码一个编码的uri组件
10.9：escape():对字符串进行编码
10.10：unescape():解码由escape()编码的字符串
10.11：eval():将javascript字符串当作脚本来执行
注意：
如果参数是一个表达式，eval()函数将执行表达式，如果参数是javascript语句，eval()将执行javascript语句
eval()函数是一种由函数执行的动态代码，比直接执行脚本慢很多
慎重使用eval()函数，尽量不用，保证程序的安全性
var str="alert('测试')";
eval(str);
10.12：Number(object):把对象的值转换为数字
注意：如果对象的值无法转换为数字，Number()函数返回NaN
如果参数的Date对象，Number()返回从1970年1月1日到现在所经历的毫秒数
10.13：String:把对象的值转换为字符串
String()函数返回与字符串对象的toString()方法值一样
var b=new Number(true);
alert(b);
var c=new String(123);
alert(c+111);
11:事件
11.1：什么是事件？
指的是文档或者浏览器窗口发生的一些特定交互瞬间，我们可以通过侦听器(或者处理程序)来预定事件，以便事件发生的时候执行相应的代码
11.2：鼠标事件
onmousedown:鼠标按钮被按下
onmousemove:鼠标被移动
onmouseout:鼠标从某元素移开
onmouseover:鼠标移到某元素之上
onmouseup:鼠标按键被松开
11.3：键盘事件
onkeydown:某个键盘按键被按下
onkeypress:某个键盘按键被按下并松开
onkeyup:某个键盘按键被松开
11.4：表单事件
onblur:元素失去焦点
onchange:域的内容被改变
onclick:当用户点击某个对象的调用的事件句柄
ondblclick:当用户双击某个对象的调用的事件句柄
onerror:在加载文档或图像时发生错误
onfocus:元素获得焦点
onselect:文本被选中
onsubmit:确认按钮被点击
onunload:用户退出页面
12：DOM
12.1:DOM简介：当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)
javascript能够改变页面中的所有HTML元素
javascript能够改变页面中的所有HTML属性
javascript能够改变页面中的所有css样式
12.2:查看HTML元素
注意：通过id找到HTML元素--document.getElementById("info");
通过标签名找到HTML元素--document.getElementsByTagName
通过标签的name属性获取元素--document.getElementsByName
12.3:改变HTML输出流document.write
12.4:修改HTML内容：使用innerHTML属性
13:Javascript数组的学习和应用
13.1：数组的创建
1：document.write("1:创建一个空数组"+"<br/>");
var arr1=new Array();
2：document.write("2:指定数组的长度"+"<br/>");
var arr2=new Array(5);
3：document.write("3:创建数组并初始化参数"+"<br/>");
var arr3=new Array(9528,"小别","男");
4：document.write("4:创建一个数组"+"<br/>");
var arr4=[];
5：document.write("5:使用括号[]，并且传入初始值"+"<br/>");
var arr5=[12,23,45,6,8];
