JavaScript(原生js)是運行在瀏覽器端的腳本語言，JavaScript主要解決的是前端與用戶交互的問題，包括使用交互與數(shù)據(jù)交互。 JavaScript是瀏覽器解釋執(zhí)行的，前端腳本語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，需要插件)等。

1. js嵌入頁面的方式（3種）

-- 行間事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
-- 頁面script標(biāo)簽嵌入
<script type="text/javascript"> alert('ok！'); </script>
-- 外部引入
<script type="text/javascript" src="js/index.js"></script>

2. 變量及數(shù)據(jù)類型

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

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

//同時定義多個變量可以用","隔開，公用一個‘var’關(guān)鍵字
var iNum = 45,sTr='qwe',sCount='68';

• 變量類型
  -- js有5種基本數(shù)據(jù)類型：
  1、number 數(shù)字類型
  2、string 字符串類型
  3、boolean 布爾類型 true 或 false
  4、undefined undefined類型，變量聲明未初始化，它的值就是undefined
  5、null null類型，表示空對象，如果定義的變量將來準(zhǔn)備保存對象，可以將變量初始化為null,在頁面上獲取不到對象，返回的值就是null
  -- 1種復(fù)合類型：
  object

• js語句和注釋
  1、javascript語句開始可縮進也可不縮進，縮進是為了方便代碼閱讀，一條javascript語句應(yīng)該以“;”結(jié)尾;
  2、

單行注釋：
// var iNum = 123;
多行注釋：
/*  
    多行注釋
    1、...
    2、...
*/

• 變量、函數(shù)、屬性、函數(shù)參數(shù)命名規(guī)范
  -- 1、區(qū)分大小寫
  -- 2、第一個字符必須是字母、下劃線（_）或者美元符號（$）
  -- 3、其他字符可以是字母、下劃線、美元符或數(shù)字

• 匈牙利命名風(fēng)格：

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

3. 函數(shù)

函數(shù)就是重復(fù)執(zhí)行的代碼片。

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

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

• 變量與函數(shù)預(yù)解析
  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(5);
</script>

• 函數(shù)'return'關(guān)鍵字
  函數(shù)中'return'關(guān)鍵字的作用：
  1、返回函數(shù)中的值或者對象
  2、結(jié)束函數(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>

4. 條件語句

通過條件來控制程序的走向，就需要用到條件語句。
條件運算符
==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
注意：===會先判斷類型，再判斷值，如果類型不一樣，就不一樣。

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
{
    ... ;
}

5. 獲取元素方式

可以使用內(nèi)置對象document上的getElementById方法來獲取頁面上設(shè)置了id屬性的元素，獲取到的是一個html對象，然后將它賦值給一個變量，另外將javascript語句放到window.onload觸發(fā)的函數(shù)里面,獲取元素的語句會在頁面加載完后才執(zhí)行，避免獲取不到元素。

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

6.操作元素屬性

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

• 操作元素屬性
  var 變量 = 元素.屬性名 讀取屬性
  元素.屬性名 = 新屬性值 改寫屬性

• 屬性名在js中的寫法
  1、html的屬性和js里面屬性寫法一樣
  2、“class” 屬性寫成 “className”
  3、“style” 屬性里面的屬性，有橫杠的改成駝峰式，比如：“font-size”，改成”style.fontSize”

• innerHTML
  innerHTML可以讀取或者寫入標(biāo)簽包裹的內(nèi)容

7. 事件屬性和匿名函數(shù)

• 事件屬性
  元素上除了有樣式，id等屬性外，還有事件屬性，常用的事件屬性有鼠標(biāo)點擊事件屬性(onclick)，鼠標(biāo)移入事件屬性(mouseover),鼠標(biāo)移出事件屬性(mouseout),將函數(shù)名稱賦值給元素事件屬性，可以將事件和函數(shù)關(guān)聯(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ù)的關(guān)聯(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>