　　JavaScript是運作在浏覽器端的腳步語言，JavaScript主要解決的是前端與使用者互動的問題，包括使用互動與資料互動。 JavaScript是浏覽器解釋執行的，前端腳本語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，需要插件)等。

前端三大塊：

1、HTML：頁面結構

2、CSS：頁面表現：元素大小、顔色、位置、隐藏或顯示、部分動畫效果

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>

變量、資料類型及基本文法規範

　　JavaScript 是一種弱類型語言，javascript的變量類型由它的值來決定。定義變量需要用關鍵字 'var'。

var iNum = 123;
 var sTr = 'asd';

 //同時定義多個變量可以用","隔開，公用一個‘var’關鍵字

 var iNum = 45,sTr='qwe',sCount='68';

變量類型

5種基本資料類型：

1、number 數字類型

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>

變量、函數、屬性、函數參數命名規範

1、區分大小寫

2、第一個字元必須是字母、下劃線（_）或者美元符号（$）

3、其他字元可以是字母、下劃線、美元符或數字

匈牙利命名風格：

對象o Object 比如：oDiv

數組a Array 比如：aItems

字元串s String 比如：sUserName

整數i Integer 比如：iItemCount

布爾值b Boolean 比如：bIsComplete

浮點數f Float 比如：fPrice

函數fn Function 比如：fnHandler

正規表達式re RegExp 比如：reEmailCheck

函數

　　函數就是重複執行的代碼片。

函數定義與執行

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

變量與函數預解析

　　JavaScript解析過程分為兩個階段，先是編譯階段，然後執行階段，在編譯階段會将function定義的函數提前，并且将var定義的變量聲明提前，将它指派為undefined。

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

　　函數傳參 javascript的函數中可以傳遞參數。

<script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

函數'return'關鍵字

函數中'return'關鍵字的作用：

1、傳回函數中的值或者對象

2、結束函數的運作

<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寫在元素的上面，就會出錯，因為頁面上從上往下加載執行的，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>

操作元素屬性

擷取的頁面元素，就可以對頁面元素的屬性進行操作，屬性的操作包括屬性的讀和寫。

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 href="http://www.baidu.com" 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 href="http://www.baidu.com">百度<a/>';
    }
</script>

......

<div id="div1">這是一個div元素</div>

事件屬性及匿名函數

事件屬性

　　元素上除了有樣式，id等屬性外，還有事件屬性，常用的事件屬性有滑鼠點選事件屬性(onclick)，滑鼠移入事件屬性(mouseover),滑鼠移出事件屬性(mouseout),将函數名稱指派給元素事件屬性，可以将事件和函數關聯起來。

<script type="text/javascript">

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

    oBtn.onclick = myalert;

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

</script>

匿名函數

　　定義的函數可以不給名稱，這個叫做匿名函數，可以将匿名函數的定義直接指派給元素的事件屬性來完成事件和函數的關聯，這樣可以減少函數命名，并且簡化代碼。函數如果做公共函數，就可以寫成匿名函數的形式。

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

數組及操作方法

　　數組就是一組資料的集合，javascript中，數組裡面的資料可以是不同類型的。

定義數組的方法

//對象的執行個體建立
var aList = new Array(1,2,3);

//直接量建立
var aList2 = [1,2,3,'asd'];

操作數組中資料的方法

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、reverse() 将數組反轉

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

6、indexOf() 傳回數組中元素第一次出現的索引值

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

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

多元數組

多元數組指的是數組的成員也是數組的數組。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //彈出2;

批量操作數組中的資料，需要用到循環語句

循環語句

程式中進行有規律的重複性操作，需要用到循環語句。

for循環

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

例如：數組去重

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

字元串處理方法

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(parseInt(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、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、定時調用函數

2、制作動畫

定時器類型及文法

/*
    定時器：
    setTimeout  隻執行一次的定時器 
    clearTimeout 關閉隻執行一次的定時器
    setInterval  反複執行的定時器
    clearInterval 關閉反複執行的定時器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

變量作用域

變量作用域指的是變量的作用範圍，javascript中的變量分為全局變量和局部變量。

1、全局變量：在函數之外定義的變量，為整個頁面公用，函數内部外部都可以通路。

2、局部變量：在函數内部定義的變量，隻能在定義該變量的函數内部通路，外部無法通路。

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

封閉函數

封閉函數是javascript中匿名函數的另外一種寫法，建立一個一開始就執行而不用命名的函數。

一般定義的函數和執行函數：

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

myalert();

封閉函數：

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

還可以在函數定義前加上“~”和“!”等符号來定義匿名函數

!function(){
    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();

------- 知識無價，汗水有情，如需搬運請注明出處，謝謝！

前端之JavaScript ------- 知識無價，汗水有情，如需搬運請注明出處，謝謝！

JavaScript嵌入頁面的方式

變量、資料類型及基本文法規範

變量類型

javascript語句與注釋

變量、函數、屬性、函數參數命名規範

匈牙利命名風格：

函數

函數定義與執行

變量與函數預解析

函數'return'關鍵字

條件語句

條件運算符

if else

多重if else語句

擷取元素方法

操作元素屬性

屬性名在js中的寫法

innerHTML

事件屬性及匿名函數

事件屬性

匿名函數

數組及操作方法

定義數組的方法

操作數組中資料的方法

多元數組

循環語句

for循環

例如：數組去重

字元串處理方法

字元串反轉

定時器

定時器在javascript中的作用

定時器類型及文法

變量作用域

封閉函數

封閉函數：

封閉函數的作用

------- 知識無價，汗水有情，如需搬運請注明出處，謝謝！

繼續閱讀

字元串反轉　　