1、JavaScript介绍
JavaScript是运行在浏览器端的脚本 语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。
前端三大块
（1）HTML：页面结构
（2）CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
（3）JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
2、JavaScript嵌入页面的方式
2.1 行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
2.2 页面script标签嵌入
<script type="text/javascript"> alert('ok！'); </script>
2.3 外部引入
<script type="text/javascript" src="js/index.js"></script>
3、变量
javascript是一种弱类型语言，javascript的变量类型由它的值来决定。
定义变量需要用关键字"var"
var iNum = 123; var sTr = 'asd'; //同时定义多个变量可以用","隔开，公用一个‘var’关键字 var iNum = 45,sTr='qwe',sCount='68';
3.1 变量类型
5中基本数据类型：
（1）number数字类型
（2）string字符串类型
（3）boolean布尔类型true或false
（4）undefined undefined类型，变量声明未初始化，它的值就是undefined
（5）null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回的值就是null
1中复合类型：
（1）object
3.2 javascript语句与注释
（1）一条javascript语句应该以“;”结尾
<script type="text/javascript">
var iNum=123;
var sTr="abc123"
function fnAltert(){
alert(sTr);
};
fnAltert();
</script>
（2）javascript注释
<script type="text/javascript"> // 单行注释 var iNum = 123; /* 多行注释 1、... 2、... */ var sTr = 'abc123'; </script>
3.3 变量、函数、属性、函数参数命名规范
（1）区分大小写
（2）第一个字符必须是字母、下划线（_）或者美元符号（$）
（3）其他字符可以是字母、下划线、美元符或数字
3.4 匈牙利命名风格
对象o Object 比如：oDiv
数组a Array 比如：alterms
字符串s String 比如：sUserName
整数i Integer 比如：iltemCount
布尔值b Boolean 比如：blsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck
4、获取元素
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量。
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>
上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：
第一种方法：将javascript放到页面最下边
.... <div id="div1">这是一个div元素</div> .... <script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> </body>
第二种方法：将javascript语句放到window.onload触发的函数里面，获取元素的语句会在页面加载完成后才执行，就不会出错。
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); } </script> .... <div id="div1">这是一个div元素</div>
5、操作元素属性
获取到页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写：
5.1 操作属性的方法
（1）"."操作
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8" />
<title>test_javascript</title>
<script type="text/javascript">
window.onload=function(){
var oInput=document.getElementById("input1");
var oA=document.getElementById("link1")
//读取属性值
var sValue=oInput.value;
var sType=oInput.type;
var sName=oInput.name;
var sLinks=oA.href;
alert(sType);
// 写（设置属性）
oA.style.color='red';
oA.style.fontSize=sValue;
oA.title="这是去到百度网的链接"
};
</script>
</head>
<body>
<input type="text" name="setsize" id="input1" value="20px" />
<a href="http://www.baidu.com" id="link1">百度链接</a>
</body>
</html>
（2）"[ ]"操作
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var oDiv=document.getElementById("div1");
var sMystyle="color";
var sValue="red";
// oDiv.style.color="red"; 正确的写法
// oDiv.style.sMystyle="red"; 错误的写法
// oDiv.style.sMystyle=sValue;错误的写法
/*属性用变量来代替的话需要用[]来操作*/
oDiv.style[sMystyle]=sValue;
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
5.2 属性写法
（1）html的属性和js里面属性写法一样
（2）"class"属性写成"className"
（3）"style"属性里面的属性，由横杠的改成驼峰式，比如：“font-size”，改成"style.fontSize"
5.3 innerHTML
innerHTML可以读取或者写入标签包囊的内容
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div");
//读取标签div包囊的内容
var sTr=oDiv.innerHTML;
alert(sTr);
//写入
oDiv.innerHTML="<a href='http://www.baidu.com'>百度</a>"
};
</script>
</head>
<body>
<div id="div">这是一个div元素</div>
</body>
</html>
6、函数
6.1 函数定义与执行
<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
// 函数执行
fnAlert();
</script>
6.2 变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<script type="text/javascript"> fnAlert(); // 弹出 hello！ alert(iNum); // 弹出 undefined function fnAlert(){ alert('hello!'); } var iNum = 123; </script>
6.3 提取行间事件
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。
<!--行间事件调用函数 -->
<script type="text/javascript">
function fnAlert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = fnAlert;
function fnAlert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">
6.4 匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn1'); /* oBtn.onclick = myalert; function myalert(){ alert('ok!'); } */ // 直接将匿名函数赋值给绑定的事件 oBtn.onclick = function (){ alert('ok!'); } } </script>
6.5 函数传参
<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>
6.6 函数"return"关键字
函数中'return'关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为
<script type="text/javascript"> function fnAdd(iNum01,iNum02){ var iRs = iNum01 + iNum02; return iRs; alert('here!'); } var iCount = fnAdd(3,4); alert(iCount); //弹出7 </script>
7、条件语句
通过条件来控制程序的走向
7.1 运算符
1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
7.2 if else
7.3 多重if else语句
7.4 switch语句
swithc(条件){
case 1：...；break；
...
}
8、数组及操作方法
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
8.1 定义数组的方法
//对象的实例创建 var aList = new Array(1,2,3); //直接量创建 var aList2 = [1,2,3,'asd'];
8.2 操作数组中数据的方法
（1）获取数组的长度：aList.length;
var aList = [1,2,3,4]; alert(aList.length); // 弹出4
（2）用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4]; alert(aList[0]); // 弹出1
（3）join()将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4]; alert(aList.join('-')); // 弹出 1-2-3-4
（4）push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4]; aList.push(5); alert(aList); //弹出1,2,3,4,5 aList.pop(); alert(aList); // 弹出1,2,3,4
（5）unshift()和shift()从数组前面增加成员或删除成员
var aList = [1,2,3,4]; aList.unshift(5); alert(aList); //弹出5,1,2,3,4 aList.shift(); alert(aList); // 弹出1,2,3,4
（6）reverse() 将数组反转
var aList = [1,2,3,4]; aList.reverse(); alert(aList); // 弹出4,3,2,1
（7）indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4]; alert(aList.indexOf(1));
（）splice() 在数组中增加或删除成员
var aList = [1,2,3,4]; aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素 alert(aList); //弹出 1,2,7,8,9,4
8.3 多维数组指的是数组的成员也是数组的数组
var aList = [[1,2,3],['a','b','c']]; alert(aList[0][1]); //弹出2;
批量操作数组中的数据，需要用到for循环语句
9、循环语句
9.1 for循环
for(var i=0;i<len;i++) { ...... }
9.2 while循环
var i=0; while(i<8){ ...... i++; }
9.3 数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1]; var aList2 = []; for(var i=0;i<aList.length;i++) { if(aList.indexOf(aList[i])==i) { aList2.push(aList[i]); } } alert(aList2);
10、获取元素的方法二
可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。
<script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); // aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li alert(aLi.length); aLi[0].style.backgroundColor = 'gold'; } </script> .... <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
11、javascript组成
1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法
12、字符串处理方法
（1）字符串合并操作：“+”
var iNum01 = 12; var iNum02 = 24; var sNum03 = '12'; var sTr = 'abc'; alert(iNum01+iNum02); //弹出36 alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加 alert(sNum03+sTr); // 弹出12abc
（2）parseInt()将数字字符串转化为整数
var sNum01 = '12'; var sNum02 = '24'; var sNum03 = '12.32'; alert(sNum01+sNum02); //弹出1224 alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36 alert(sNum03) //弹出数字12 将字符串小数转化为数字整数
（3）parseFloat()将数字字符串转换为小数
var sNum03 = '12.32' alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
（4）split() 把一个字符串分隔成字符串组成的数组
var sTr = '2017-4-22'; var aRr = sTr.split("-"); var aRr2= sTr.split(""); alert(aRr); //弹出['2017','4','2'] alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']
（5）charAt()获取字符串中的某一个字符
var sId = "#div1"; var sTr = sId.charAt(0); alert(sTr); //弹出 #
（6）indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh"; var iNum = sTr.indexOf("c"); alert(iNum); //弹出2
（7）substring() 截取字符串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl"; var sTr2 = sTr.substring(3,5); var sTr3 = sTr.substring(1); alert(sTr2); //弹出 de alert(sTr3); //弹出 bcdefghijkl
（8）toUpperCase() 字符串转大写
var sTr = "abcdef"; var sTr2 = sTr.toUpperCase(); alert(sTr2); //弹出ABCDEF
（9）toLowerCase() 字符串转小写
var sTr = "ABCDEF"; var sTr2 = sTr.toLowerCase(); alert(sTr2); //弹出abcdef
（10）字符串反转
var str = 'asdfj12jlsdkf098'; var str2 = str.split('').reverse().join(''); alert(str2);
13、类型转换
13.1 直接转换parseInt()与parseFloat()
alert('12'+7); //弹出127
alert( parseInt('12') + 7 ); //弹出19
alert( parseInt(5.6)); // 弹出5
alert('5.6'+2.3); // 弹出5.62.3
alert(parseFloat('5.6')+2.3); // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9
13.2 隐式转换 “==” 和 “-”
if('3'==3) { alert('相等'); } // 弹出'相等' alert('10'-3); // 弹出7
13.3 NaN和isNaN
alert( parseInt('123abc') ); // 弹出123
alert( parseInt('abc123') ); // 弹出NaN
14、调试程序的方法
14.1 alert
14.2 console.log
14.3 document.title
15、定时器
定时器在javascript中的作用：（1）制作动画（2）异步操作（3）函数缓冲与节流
15.1 定时器类型及语法
/* 定时器： setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器 */ var time1 = setTimeout(myalert,2000); var time2 = setInterval(myalert,2000); /* clearTimeout(time1); clearInterval(time2); */ function myalert(){ alert('ok!'); }
15.2 定时器制作时钟
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); function timego(){ var now = new Date(); var year = now.getFullYear(); var month = now.getMonth()+1; var date = now.getDate(); var week = now.getDay(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var str = '当前时间是：'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second); oDiv.innerHTML = str; } timego(); setInterval(timego,1000); } function toweek(n){ if(n==0) { return '星期日'; } else if(n==1) { return '星期一'; } else if(n==2) { return '星期二'; } else if(n==3) { return '星期三'; } else if(n==4) { return '星期四'; } else if(n==5) { return '星期五'; } else { return '星期六'; } } function todou(n){ if(n<10) { return '0'+n; } else { return n; } } </script> ...... <div id="div1"></div>
15.3 定时器制作倒计时
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); function timeleft(){ var now = new Date(); var future = new Date(2016,8,12,24,0,0); var lefts = parseInt((future-now)/1000); var day = parseInt(lefts/86400); var hour = parseInt(lefts%86400/3600); var min = parseInt(lefts%86400%3600/60); var sec = lefts%60; str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒'; oDiv.innerHTML = str; } timeleft(); setInterval(timeleft,1000); } </script> ...... <div id="div1"></div>
16、变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
17、封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
//一般定义的函数和执行函数 function myalert(){ alert('hello!'); }; myalert();
//封闭函数 (function myalert(){ alert('hello!'); })();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数。
!function myalert(){ alert('hello!'); }()
封闭函数的好处：
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全。
var iNum01 = 12; function myalert(){ alert('hello!'); } (function(){ var iNum01 = 24; function myalert(){ alert('hello!world'); } alert(iNum01); myalert() })() alert(iNum01); myalert();
18、常用内置对象
18.1 document
document.getElementById //通过id获取元素 document.getElementsByTagName //通过标签名获取元素 document.referrer //获取上一个跳转页面的地址(需要服务器环境)
18.2 location
window.location.href //获取或者重定url地址 window.location.search //获取地址参数部分 window.location.hash //获取页面锚点或者叫哈希值
18.3 Math
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整