JavaScript介紹
JavaScript是運行在瀏覽器端的腳步語言幢竹，JavaScript主要解決的是前端與用戶交互的問題，包括使用交互與數(shù)據(jù)交互宣蔚，JavaScript是瀏覽器解釋執(zhí)行的弄企。
前端三大塊
1戏挡、HTML：頁面結構
2、CSS：頁面表現(xiàn)：元素大小左权、顏色、位置痴颊、隱藏或顯示赏迟、部分動畫效果
3、JavaScript：頁面行為：部分動畫效果蠢棱、頁面與用戶的交互锌杀、頁面功能

JavaScript嵌入頁面的方式
1、行間事件（主要用于事件）
<input type="button" name="" onclick="alert('ok泻仙！');">
2糕再、頁面script標簽嵌入
<script type="text/javascript">
alert('ok！');
</script>
3玉转、外部引入
<script type="text/javascript" src="js/index.js"></script>

變量突想、數(shù)據(jù)類型及基本語法規(guī)范
JavaScript 是一種弱類型語言，javascript的變量類型由它的值來決定究抓。 定義變量需要用關鍵字 'var'
var iNum = 123;
var sTr = 'asd';
//同時定義多個變量可以用","隔開猾担，公用一個‘var’關鍵字
var iNum = 45,sTr='qwe',sCount='68';

變量類型
5種基本數(shù)據(jù)類型：
1、number 數(shù)字類型
2刺下、string 字符串類型
3绑嘹、boolean 布爾類型 true 或 false
4、undefined undefined類型橘茉，變量聲明未初始化工腋，它的值就是undefined
5、null null類型畅卓，表示空對象擅腰，如果定義的變量將來準備保存對象，可以將變量初始化為null,在頁面上獲取不到對象髓介，返回的值就是null

1種復合類型：
object
javascript語句與注釋
1惕鼓、javascript語句開始可縮進也可不縮進，縮進是為了方便代碼閱讀唐础，一條javascript語句應該以“;”結尾;
<script type="text/javascript">
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
alert(sTr);
};
fnAlert();
</script>
2箱歧、javascript注釋
<script type="text/javascript">

// 單行注釋
var iNum = 123;
/*
多行注釋
1、...
2一膨、...
*/
var sTr = 'abc123';
</script>
變量呀邢、函數(shù)、屬性豹绪、函數(shù)參數(shù)命名規(guī)范
1价淌、區(qū)分大小寫
2申眼、第一個字符必須是字母、下劃線（_）或者美元符號（$）
3蝉衣、其他字符可以是字母括尸、下劃線、美元符或數(shù)字

匈牙利命名風格：
對象o Object 比如：oDiv
數(shù)組a Array 比如：aItems
字符串s String 比如：sUserName
整數(shù)i Integer 比如：iItemCount
布爾值b Boolean 比如：bIsComplete
浮點數(shù)f Float 比如：fPrice
函數(shù)fn Function 比如：fnHandler
正則表達式re RegExp 比如：reEmailCheck
函數(shù)
函數(shù)就是重復執(zhí)行的代碼片病毡。

函數(shù)定義與執(zhí)行
<script type="text/javascript">
// 函數(shù)定義
function fnAlert(){
alert('hello!');
}
// 函數(shù)執(zhí)行
fnAlert();
</script>
變量與函數(shù)預解析
JavaScript解析過程分為兩個階段濒翻，先是編譯階段，然后執(zhí)行階段啦膜，在編譯階段會將function定義的函數(shù)提前有送，并且將var定義的變量聲明提前，將它賦值為undefined僧家。
<script type="text/javascript">
fnAlert(); // 彈出 hello雀摘！
alert(iNum); // 彈出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>
函數(shù)傳參 javascript的函數(shù)中可以傳遞參數(shù)。

<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>
函數(shù)'return'關鍵字
函數(shù)中'return'關鍵字的作用：
1八拱、返回函數(shù)中的值或者對象
2阵赠、結束函數(shù)的運行
<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>

條件語句
通過條件來控制程序的走向，就需要用到條件語句乘粒。
條件運算符
==豌注、===、>灯萍、>=轧铁、<、<=旦棉、!=齿风、&&(而且)、||(或者)绑洛、!(否)
if else
var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
sTr = '大于';
}
else
{
sTr = '小于';
}
alert(sTr);
多重if else語句

var iNow = 1;
if(iNow==1)
{
... ;
}
else if(iNow==2)
{
... ;
}
else
{
... ;
}

獲取元素方法
可以使用內置對象document上的getElementById方法來獲取頁面上設置了id屬性的元素救斑，獲取到的是一個html對象，然后將它賦值給一個變量真屯，比如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">這是一個div元素</div>
上面的語句脸候，如果把javascript寫在元素的上面，就會出錯绑蔫，因為頁面上從上往下加載執(zhí)行的运沦，javascript去頁面上獲取元素div1的時候，元素div1還沒有加載配深，解決方法有兩種：
第一種方法：將javascript放到頁面最下邊
....
<div id="div1">這是一個div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
第二種方法：將javascript語句放到window.onload觸發(fā)的函數(shù)里面,獲取元素的語句會在頁面加載完后才執(zhí)行携添，就不會出錯了。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">這是一個div元素</div>
操作元素屬性
獲取的頁面元素篓叶，就可以對頁面元素的屬性進行操作烈掠，屬性的操作包括屬性的讀和寫羞秤。

操作元素屬性
var 變量 = 元素.屬性名 讀取屬性
元素.屬性名 = 新屬性值 改寫屬性
屬名在js中的寫法
1、html的屬性和js里面屬性寫法一樣
2左敌、“class” 屬性寫成 “className”
3瘾蛋、“style” 屬性里面的屬性，有橫杠的改成駝峰式矫限，比如：“font-size”瘦黑，改成”style.fontSize”
<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;
// 寫(設置)屬性
oA.style.color = 'red';
oA.style.fontSize = sValue;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a id="link1">傳智播客</a>
innerHTML
innerHTML可以讀取或者寫入標簽包裹的內容

<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//讀取
var sTxt = oDiv.innerHTML;
alert(sTxt);
//寫入
oDiv.innerHTML = '<a ;
}
</script>
......
<div id="div1">這是一個div元素</div>

事件屬性及匿名函數(shù)
事件屬性
元素上除了有樣式，id等屬性外奇唤，還有事件屬性，常用的事件屬性有鼠標點擊事件屬性(onclick)匹摇，鼠標移入事件屬性(mouseover),鼠標移出事件屬性(mouseout),將函數(shù)名稱賦值給元素事件屬性咬扇，可以將事件和函數(shù)關聯(lián)起來。
<script type="text/javascript">

window.onload = function(){
var oBtn = document.getElementById('btn1');

oBtn.onclick = myalert;

function myalert(){
    alert('ok!');
}

}
</script>
匿名函數(shù)
定義的函數(shù)可以不給名稱廊勃，這個叫做匿名函數(shù)懈贺，可以將匿名函數(shù)的定義直接賦值給元素的事件屬性來完成事件和函數(shù)的關聯(lián)，這樣可以減少函數(shù)命名坡垫，并且簡化代碼梭灿。函數(shù)如果做公共函數(shù)，就可以寫成匿名函數(shù)的形式冰悠。
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接將匿名函數(shù)賦值給綁定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>

數(shù)組及操作方法
數(shù)組就是一組數(shù)據(jù)的集合堡妒，javascript中，數(shù)組里面的數(shù)據(jù)可以是不同類型的溉卓。

定義數(shù)組的方法
//對象的實例創(chuàng)建
var aList = new Array(1,2,3);
//直接量創(chuàng)建
var aList2 = [1,2,3,'asd'];
操作數(shù)組中數(shù)據(jù)的方法
1皮迟、獲取數(shù)組的長度：aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 彈出4
2、用下標操作數(shù)組的某個數(shù)據(jù)：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 彈出1
3桑寨、join() 將數(shù)組成員通過一個分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 彈出 1-2-3-4
4伏尼、push() 和 pop() 從數(shù)組最后增加成員或刪除成員
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、reverse() 將數(shù)組反轉
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 彈出4,3,2,1
6尉尾、indexOf() 返回數(shù)組中元素第一次出現(xiàn)的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
7爆阶、splice() 在數(shù)組中增加或刪除成員
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
多維數(shù)組
多維數(shù)組指的是數(shù)組的成員也是數(shù)組的數(shù)組辨图。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //彈出2;
批量操作數(shù)組中的數(shù)據(jù)，需要用到循環(huán)語句
循環(huán)語句
程序中進行有規(guī)律的重復性操作芭碍，需要用到循環(huán)語句徒役。

for循環(huán)

for(var i=0;i<len;i++)
{
......
}

1、數(shù)組去重
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);
2窖壕、將數(shù)組數(shù)據(jù)放入頁面

字符串處理方法
1忧勿、字符串合并操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02); //彈出36
alert(iNum01+sNum03); //彈出1212 數(shù)字和字符串相加等同于字符串相加
alert(sNum03+sTr); // 彈出12abc
2杉女、parseInt() 將數(shù)字字符串轉化為整數(shù)
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //彈出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //彈出36
alert(parseInt(sNum03)) //彈出數(shù)字12 將字符串小數(shù)轉化為數(shù)字整數(shù)
3、parseFloat() 將數(shù)字字符串轉化為小數(shù)
var sNum03 = '12.32'
alert(parseFloat(sNum03)); //彈出 12.32 將字符串小數(shù)轉化為數(shù)字小數(shù)
4鸳吸、split() 把一個字符串分隔成字符串組成的數(shù)組
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熏挎、indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //彈出2
6、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
字符串反轉
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);

定時器
定時器在javascript中的作用
1晌砾、定時調用函數(shù)
2坎拐、制作動畫
定時器類型及語法
/*
定時器：
setTimeout 只執(zhí)行一次的定時器
clearTimeout 關閉只執(zhí)行一次的定時器
setInterval 反復執(zhí)行的定時器
clearInterval 關閉反復執(zhí)行的定時器
/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}

變量作用域
變量作用域指的是變量的作用范圍，javascript中的變量分為全局變量和局部變量养匈。
1哼勇、全局變量：在函數(shù)之外定義的變量，為整個頁面公用呕乎，函數(shù)內部外部都可以訪問积担。
2、局部變量：在函數(shù)內部定義的變量猬仁，只能在定義該變量的函數(shù)內部訪問帝璧，外部無法訪問。
<script type="text/javascript">
// 定義全局變量
var a = 12;
function myalert()
{
// 定義局部變量
var b = 23;
alert(a);
// 修改全局變量
a++;
alert(b);
}
myalert(); // 彈出12和23
alert(a); // 彈出13
alert(b); // 出錯
</script>

封閉函數(shù)
封閉函數(shù)是javascript中匿名函數(shù)的另外一種寫法湿刽，創(chuàng)建一個一開始就執(zhí)行而不用命名的函數(shù)的烁。
一般定義的函數(shù)和執(zhí)行函數(shù)：
function myalert(){
alert('hello!');
};
myalert();
封閉函數(shù)：
(function(){
alert('hello!');
})();
還可以在函數(shù)定義前加上“~”和“!”等符號來定義匿名函數(shù)
!function(){
alert('hello!');
}()
封閉函數(shù)的作用
封閉函數(shù)可以創(chuàng)造一個獨立的空間，在封閉函數(shù)內定義的變量和函數(shù)不會影響外部同名的函數(shù)和變量诈闺，可以避免命名沖突渴庆，在頁面上引入多個js文件時，用這種方式添加js文件比較安全买雾，比如：
var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();