JavaScript作為前端中的腳本語(yǔ)言，能夠?qū)崿F(xiàn)部分動(dòng)畫效果位仁、頁(yè)面與用戶的交互、頁(yè)面功能等等方椎。

1聂抢、JavaScript嵌入頁(yè)面的方式

需要注意的是，除了<script>標(biāo)簽之外辩尊，類似<input>這樣的語(yǔ)句也屬于JavaScript涛浙。

1）行間事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

2）頁(yè)面script標(biāo)簽嵌入

<script type="text/javascript">        
    alert('ok摄欲！');
</script>

3）外部引入

<script type="text/javascript" src="js/index.js"></script>

2轿亮、變量

跟python一樣，JavaScript 是一種弱類型語(yǔ)言胸墙，javascript的變量類型由它的值來(lái)決定我注， 定義變量需要用關(guān)鍵字 'var'。

 var iNum = 123;
 var sTr = 'asd';
 //同時(shí)定義多個(gè)變量可以用","隔開(kāi)迟隅，公用一個(gè)‘var’關(guān)鍵字
 var iNum = 45,sTr='qwe',sCount='68';

JavaScript中的注釋使用//或者/**/但骨，每條語(yǔ)句以分號(hào)励七；結(jié)尾。
變量類型

5種基本數(shù)據(jù)類型：
1奔缠、number 數(shù)字類型
2掠抬、string 字符串類型
3、boolean 布爾類型 true 或 false
4校哎、undefined undefined類型两波，變量聲明未初始化，它的值就是undefined
5闷哆、null null類型腰奋，表示空對(duì)象，如果定義的變量將來(lái)準(zhǔn)備保存對(duì)象抱怔，可以將變量初始化為null,在頁(yè)面上獲取不到對(duì)象劣坊，返回的值就是null

1種復(fù)合類型：
object

JavaScript的變量命名區(qū)分大小寫。

3屈留、獲取元素方法（一）

可以使用內(nèi)置對(duì)象document上的getElementById方法來(lái)獲取頁(yè)面上設(shè)置了id屬性的元素局冰，獲取到的是一個(gè)html對(duì)象，然后將它賦值給一個(gè)變量绕沈，比如：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">這是一個(gè)div元素</div>

上面的語(yǔ)句锐想，如果把javascript寫在元素的上面帮寻，就會(huì)出錯(cuò)乍狐，因?yàn)轫?yè)面上從上往下加載執(zhí)行的，javascript去頁(yè)面上獲取元素div1的時(shí)候固逗，元素div1還沒(méi)有加載浅蚪，解決方法有兩種：

第一種方法：將javascript放到頁(yè)面最下邊

....
<div id="div1">這是一個(gè)div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

第二種方法：將javascript語(yǔ)句放到window.onload觸發(fā)的函數(shù)里面,獲取元素的語(yǔ)句會(huì)在頁(yè)面加載完后才執(zhí)行，就不會(huì)出錯(cuò)了烫罩。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>
....
<div id="div1">這是一個(gè)div元素</div>

4惜傲、操作元素屬性

獲取的頁(yè)面元素，就可以對(duì)頁(yè)面元素的屬性進(jìn)行操作贝攒，屬性的操作包括屬性的讀和寫盗誊。

操作屬性的方法
1、“.” 操作
2隘弊、“[ ]”操作

屬性寫法
1哈踱、html的屬性和js里面屬性寫法一樣
2、“class” 屬性寫成 “className”
3梨熙、“style” 屬性里面的屬性开镣，有橫杠的改成駝峰式，比如：“font-size”咽扇，改成”style.fontSize”邪财。

兩種方法和字典的操作方式類似陕壹，舉兩個(gè)例子：

<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;
        // 寫(設(shè)置)屬性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href=# id="link1">txt</a>

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 讀取屬性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // 寫(設(shè)置)屬性
        // oA.style.val1 = val2; 沒(méi)反應(yīng)
        oA.style[sVal1] = sVal2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href=# id="link1">txt</a>

innerHTML
innerHTML可以讀取html標(biāo)簽中的文本，并對(duì)其進(jìn)行修改操作树埠。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //讀取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //寫入
        oDiv.innerHTML = '<a href=#>這是一個(gè)文本<a/>';
    }
</script>

......

<div id="div1">這是一個(gè)div元素</div>

5糠馆、函數(shù)

函數(shù)定義與執(zhí)行

<script type="text/javascript">
    // 函數(shù)定義
    function fnAlert(){
        alert('hello!');
    }
    // 函數(shù)執(zhí)行
    fnAlert();
</script>

變量與函數(shù)預(yù)解析
函數(shù)的調(diào)用可以放在定義的前面，但是變量的調(diào)用要放到后面怎憋，不然就會(huì)自動(dòng)賦值為undefined榨惠。

<script type="text/javascript">    
    fnAlert();       // 彈出 hello！
    alert(iNum);  // 彈出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

提取行間事件
定義的函數(shù)可以在html行中直接調(diào)用盛霎，也可以賦予ID或其他屬性赠橙，然后在JavaScript腳本中調(diào)用，例如：

<!--行間事件調(diào)用函數(shù)   -->
<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">

匿名函數(shù)

定義的函數(shù)可以不給名稱愤炸，這個(gè)叫做匿名函數(shù)期揪，可以將匿名函數(shù)直接賦值給元素綁定的事件來(lái)完成匿名函數(shù)的調(diào)用。

<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ù)'return'關(guān)鍵字
函數(shù)中'return'關(guān)鍵字的作用：

• 返回函數(shù)執(zhí)行的結(jié)果
• 結(jié)束函數(shù)的運(yùn)行
  -阻止默認(rèn)行為

<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>

6规个、條件語(yǔ)句

和c語(yǔ)言極為類似凤薛，if/else和switch/case兩種模式：

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

var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}

7、數(shù)組及操作方法

數(shù)組就是一組數(shù)據(jù)的集合诞仓，javascript中缤苫，數(shù)組里面的數(shù)據(jù)可以是不同類型的。

定義數(shù)組的方法

//對(duì)象的實(shí)例創(chuàng)建
var aList = new Array(1,2,3);
//直接量創(chuàng)建
var aList2 = [1,2,3,'asd'];

操作數(shù)組中數(shù)據(jù)的方法

1)獲取數(shù)組的長(zhǎng)度：aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 彈出4

2)用下標(biāo)操作數(shù)組的某個(gè)數(shù)據(jù)：aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 彈出1

3)join() 將數(shù)組成員通過(guò)一個(gè)分隔符合并成字符串

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)unshift()和 shift() 從數(shù)組前面增加成員或刪除成員

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() 將數(shù)組反轉(zhuǎn)

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 彈出4,3,2,1

7)indexOf() 返回?cái)?shù)組中元素第一次出現(xiàn)的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

8)splice() 在數(shù)組中增加或刪除成員

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //從第2個(gè)元素開(kāi)始墅拭，刪除1個(gè)元素活玲，然后在此位置增加'7,8,9'三個(gè)元素
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;

8谍婉、循環(huán)語(yǔ)句

格式同c語(yǔ)言舒憾，for和while兩種：

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);

9、獲取元素方法（二）

可以使用內(nèi)置對(duì)象document上的getElementsByTagName方法來(lái)獲取頁(yè)面上的某一種標(biāo)簽穗熬，獲取的是一個(gè)選擇集镀迂，不是數(shù)組，但是可以用下標(biāo)的方式操作選擇集里面的標(biāo)簽元素唤蔗。

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // aLi.style.backgroundColor = 'gold'; // 出錯(cuò)探遵！不能同時(shí)設(shè)置多個(gè)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>

10、Javascript組成

1妓柜、ECMAscript javascript的語(yǔ)法（變量箱季、函數(shù)、循環(huán)語(yǔ)句等語(yǔ)法）
2领虹、DOM 文檔對(duì)象模型 操作html和css的方法
3规哪、BOM 瀏覽器對(duì)象模型 操作瀏覽器的一些方法

11、字符串處理方法

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ù)字字符串轉(zhuǎn)化為整數(shù)

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //彈出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //彈出36
alert(sNum03)   //彈出數(shù)字12 將字符串小數(shù)轉(zhuǎn)化為數(shù)字整數(shù)

3蝠嘉、parseFloat() 將數(shù)字字符串轉(zhuǎn)化為小數(shù)

var sNum03 = '12.32'
alert(parseFloat(sNum03));  //彈出 12.32 將字符串小數(shù)轉(zhuǎn)化為數(shù)字小數(shù)

4、split() 把一個(gè)字符串分隔成字符串組成的數(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杯巨、charAt() 獲取字符串中的某一個(gè)字符

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() 字符串轉(zhuǎn)大寫

var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //彈出ABCDEF

9杜恰、toLowerCase() 字符串轉(zhuǎn)小寫

var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //彈出abcdef

10、字符串反轉(zhuǎn)

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

12仍源、類型轉(zhuǎn)換

1心褐、直接轉(zhuǎn)換 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

2、隱式轉(zhuǎn)換 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}

// 彈出'相等'
alert('10'-3);  // 彈出7

3笼踩、NaN 和 isNaN

alert( parseInt('123abc') );  // 彈出123
alert( parseInt('abc123') );  // 彈出NaN

13逗爹、調(diào)試程序的方法

1、alert
2嚎于、console.log
3掘而、document.title

14、定時(shí)器

定時(shí)器在javascript中的作用:
1于购、制作動(dòng)畫
2袍睡、異步操作
3、函數(shù)緩沖與節(jié)流
舉一個(gè)倒計(jì)時(shí)的例子:

<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點(diǎn)還剩下'+day+'天'+hour+'時(shí)'+min+'分'+sec+'秒';
            oDiv.innerHTML = str; 
        }
        timeleft();
        setInterval(timeleft,1000);        
    }

</script>
......
<div id="div1"></div>

15肋僧、封閉函數(shù)

JavaScript中的變量分為全局變量和局部變量?jī)煞N斑胜，同C語(yǔ)言。
封閉函數(shù)是javascript中匿名函數(shù)的另外一種寫法色瘩，創(chuàng)建一個(gè)一開(kāi)始就執(zhí)行而不用命名的函數(shù)伪窖。

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

還可以在函數(shù)定義前加上“~”和“!”等符號(hào)來(lái)定義匿名函數(shù)：

!function(){
    alert('hello!');
}()

封閉函數(shù)可以創(chuàng)造一個(gè)獨(dú)立的空間，在封閉函數(shù)內(nèi)定義的變量和函數(shù)不會(huì)影響外部同名的函數(shù)和變量居兆，可以避免命名沖突，在頁(yè)面上引入多個(gè)js文件時(shí)竹伸，用這種方式添加js文件比較安全泥栖，比如：

var iNum01 = 12;
function myalert(){
    alert('hello!');
}
(function(){
    var iNum01 = 24;
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})()
alert(iNum01);
myalert();

16、常用內(nèi)置對(duì)象

1勋篓、document

document.getElementById //通過(guò)id獲取元素
document.getElementsByTagName //通過(guò)標(biāo)簽名獲取元素
document.referrer  //獲取上一個(gè)跳轉(zhuǎn)頁(yè)面的地址(需要服務(wù)器環(huán)境)

2吧享、location

window.location.href  //獲取或者重定url地址
window.location.search //獲取地址參數(shù)部分
window.location.hash //獲取頁(yè)面錨點(diǎn)或者叫哈希值

3、Math

Math.random 獲取0-1的隨機(jī)數(shù)
Math.floor 向下取整
Math.ceil 向上取整