1.用法

HTML 中的指令碼必須位於 <script> 與 </script> 標籤之間。

2.輸出

JavaScript 可以通過不同的方式來輸出資料：
使用 window.alert() 彈出警告框。
使用 document.write() 方法將內容寫到 HTML 文件中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制檯。

3.語法

1.字面量：數字、字串、表示式、陣列（Array）、物件（Object）、函式（Function）字面量
2.變數：用var來定義
3.操作符：算術與賦值
4.語句：用分號隔開， 對大小寫是敏感的
5.關鍵字：必須以字母、下劃線（_）或美元符（$）開始，js有自己的保留字
6.資料型別：數字，字串，陣列，物件等

4.語句

1.分號隔開
2.程式碼：瀏覽器按照編寫順序依次執行每條語句
3.開始：語句通常以一個 語句識別符號 為開始，並執行該語句。語句識別符號是保留關鍵字不能作為變數名使用。
4.空格：JavaScript 會忽略多餘的空格

5.變數

1.變數：可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。變數必須以字母開頭，變數也能以 $ 和 _ 符號開頭（不推薦）， 變數名稱對大小寫敏感（y 和 Y 是不同的變數）
2. 變數的資料型別：有文字和數值。當變數分配文字值時，應該用雙引號或單引號包圍這個值。當變數賦的值是數值時，不要使用引號。如果用引號包圍數值，該值會被作為文字來處理。
3. 宣告：用var

來宣告變數，用=進行賦值。在一條語句中宣告很多變數。該語句以 var 開頭，並使用逗號分隔變數即可。

6.資料型別

5 種不同的資料型別：
1.字串（String）：使用單引號或雙引號
2.數字(Number)：
typeof NaN // 返回 number
JavaScript 中的所有資料都是以 64 位浮點型資料(float) 來儲存。
所有的程式語言，包括 JavaScript，對浮點型資料的精確度都很難確定：

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的結果為 0.3
if (z == 0.3)            // 返回 false
 

修改，用整數的乘除法來解決：

var z = (x * 10 + y * 10) / 10;       // z 的結果為 0.3

3.布林(Boolean)：布林（邏輯）只能有兩個值：true 或 false
4.物件(Object)
5.函式(Function)
3 種物件型別：
1.物件(Object)：物件由花括號分隔。在括號內部，物件的屬性以名稱和值對的形式 (name : value) 來定義，屬性由逗號分隔。物件的定址方式:

name=person.lastname; 
 //person是定義的變數，lastname是屬性的名稱。可以找到屬性的值
name=person["lastname"];

2.陣列(Array)：陣列下標是基於零的，所以第一個專案是 [0]，第二個是 [1]，以此類推。JavaScript 不支援使用名字來索引陣列，只允許使用數字索引。定義陣列元素，最後不能新增逗號。

3.Date
2 種不包含任何值的資料型別：
Undefined 和 Null：undefined 這個值表示變數不含有值，null可清空變數。null 用於物件, undefined 用於變數，屬性和方法。

宣告變數的型別：
當宣告新變數時，可以使用關鍵詞 “new” 來宣告其型別：

var carname=new String; 
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

變數均為物件。當宣告一個變數時，就建立了一個新的物件。

7.物件

物件是擁有屬性和方法的資料。
1.物件：所有的事物都是物件。JavaScript 物件是變數的容器
2.定義：使用字元來定義和建立 JavaScript 物件。
3.屬性：JavaScript 物件是鍵值對的容器。鍵值對通常寫法為 name : value (鍵與值以冒號分割)。
4.訪問屬性

   name=person.lastname; 
     //person是定義的變數，lastname是屬性的名稱。可以找到屬性的值
    name=person["lastname"];

5.方法：定義了一個函式，並作為物件的屬性儲存。 物件方法通過新增 () 呼叫 (作為一個函式)。

name = person.fullName();
//訪問了 person 物件的 fullName() 方法:
name = person.fullName;
//訪問 person 物件的 fullName 屬性，它將作為一個定義函式的字串返回

5.訪問方法

methodName : function() { code lines  } //建立方法
objectName.methodName()   //訪問方法

8.函式

函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊。
1.語法：函式是包裹在花括號中的程式碼塊，使用了關鍵詞 function
2.呼叫帶引數的函式：在呼叫函式時，可以向其傳遞值，這些值被稱為引數。引數可以有多個，由逗號 (,) 分隔。
當宣告函式時，把引數作為變數來宣告。變數和引數必須以一致的順序出現。第一個變數就是第一個被傳遞的引數的給定的值，以此類推。

<p>點選這個按鈕，來呼叫帶引數的函式。</p>
<button onclick="myFunction('Harry Potter','Wizard')">點選這裡</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

3.帶有返回值的函式：通過使用 return 語句可以實現，函式會停止執行，並返回指定的值。當退出函式時 ，也可使用 return 語句。

9.作用域

區域性變數與全域性變數
在 JavaScript 函式內部宣告的變數（使用 var）是區域性變數，所以只能在函式內部訪問它，故可以在不同的函式中使用名稱相同的區域性變數。只要函式執行完畢，本地變數就會被刪除。
在函式外宣告的變數是全域性變數，網頁上的所有指令碼和函式都能訪問它。全域性變數會在頁面關閉後被刪除。

10.事件

HTML 事件是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。
1.語法：<some-HTML-element some-event='‘JavaScript 程式碼’'>

<button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button>
//修改了id為demo的元素   
<button onclick="this.innerHTML=Date()">現在的時間是?</button>
//修改了自身的內容

2.常用事件
onchange HTML 元素改變
onclick 使用者點選 HTML 元素
onmouseover 使用者在一個HTML元素上移動滑鼠
onmouseout 使用者從一個HTML元素上移開滑鼠
onkeydown 使用者按下鍵盤按鍵
onload 瀏覽器已完成頁面的加

11.字串

用於儲存和處理文字。
1.字串：
使用單引號或雙引號
可以使用索引位置來訪問字串中的每個字元，字串的索引從 0 開始[0]
在字串新增轉義字元來使用引號
2.可以使用內建屬性**. length** 來計算字串的長度
3.JavaScript 字串是原始值，可以使用字元建立。也可以使用 new 關鍵字將字串定義為一個物件

<script>
var x = "John";              // x是一個字串
var y = new String("John");  // y是一個物件
document.getElementById("demo").innerHTML =typeof x + " " + typeof y;
</script>

12.運算子

算數運算子
加+、減—、乘*、除/、取餘%、++ 自增 、-- 自減
i++表示先賦值後運算，++i表示先運算後賦值（減法同理）
賦值運算子
=、+= 、-= 、*= 、/= 、%=
+=的意思：i+=j 意思是i=i+j
字串操作
（1）字串與字串相加的效果：字串的拼接；
（2）字串與其他型別相加的效果：其他型別被轉換為字串，與字串拼接；
（3）字串操作可以不宣告，直接使用var j=”5”+5 輸出j為：55

13.比較

比較運算子
==、===、！=、！==、>、<、>=、<=
（1）比較運算子的輸出結果都是波爾型別：ture或者false
（2）在雙等==時，當比較元素的字串的值和別的型別值時，別的值會被自動轉換為字串進行比較。例：”5”和5的輸出為true
（3）在三等===時，型別也必須完全相同。例：”5”和5的輸出為false
（4）同理，不等！=和完全不等！==
邏輯運算子
&&與、||或、！非
輸出結果為布林型別
條件運算子
語法：

document.write(i>10?"i大於10":"i小於10"); 
//條件，符合條件輸出結果，不符合條件的輸出結果

14.條件語句

if 語句 - 只有當指定條件為 true 時，使用該語句來執行程式碼。注意判斷條件要用==
if…else 語句 - 當條件為 true 時執行程式碼，當條件為 false 時執行其他程式碼
if…else if…else 語句- 使用該語句來選擇多個程式碼塊之一來執行
switch 語句 - 使用該語句來選擇多個程式碼塊之一來執行

<script>
    var  i=1;
    switch (i) {
        case 1:            //當i為1時的情況
            document.write("i=1");    //執行
            break             //跳出當前
        case  2:
            document.write("i=2");
            break
        default:              //如果不滿足以上的case時
            document.write("條件不滿足");
            break
    }
</script>

15.迴圈語句

1. for 語句：

<script>
    var  i=[1,2,3,4,5,6];
    for (j=0;j<6;j++){ 
//語句1開始前執行,語句 2 定義執行迴圈的條件,語句3在迴圈已被執行之後執行
        document.write(i[j]+"、")
    }
</script>

2. for/in 迴圈遍歷物件的屬性

 <script>
       var  i=[1,2,3,4,5,6];
       var j
       for (j in i){    /
// 用於對陣列或者物件的屬性進行迴圈操作。
// for ... in 迴圈中的程式碼每執行一次，就會對陣列的元素或者物件的屬性進行一次操作。
           document.write(i[j]+"、")
       }
   </script>

3.while - 當指定的條件為 true 時迴圈指定的程式碼塊

<script>
    var  i=1;
    while (i<10){   //先判定
        document.write("i="+i+"<br/>")   //再執行
        i++;
    }
</script>

4. do/while - 同樣當指定的條件為 true 時迴圈指定的程式碼塊

<script>
    var  i=10;
    do{      //區別是do...while會先執行一次再判定，而while先判定
        document.write("i="+i+"<br/>")
        i++;
    }
    while (i<10){
    }
</script>

5.Break 和 Continue 語句
break 語句可用於跳出迴圈
continue 語句跳出迴圈後，會繼續執行該迴圈之後的程式碼
6.標籤
有了標籤，可以使用break和continue在多層迴圈的時候控制外層迴圈：

outerloop:
for (var i = 0; i < 10; i++)
{
    innerloop:
    for (var j = 0; j < 10; j++)
    {
        if (j > 3)
        {
            break;
        }
        if (i == 2)
        {
            break innerloop;
        }
        if (i == 4)
        {
            break outerloop;
        }
        document.write("i=" + i + " j=" + j + "");
    }
}

16.typeof 操作符

1. typeof 操作符來檢測變數的資料型別。

       typeof "John"                // 返回 string
       typeof 3.14                  // 返回 number
       typeof false                 // 返回 boolean
       typeof [1,2,3,4]        // 返回 object，陣列是一種特殊的物件型別。
       typeof {name:'John', age:34} // 返回 object
   

2.null值為 null(空), 型別為物件
undefined值為 undefined（空）, 型別為 undefined

17.型別轉換

1.由於陣列和日期的型別都是object，所以需要constructor屬性返回。constructor 屬性返回所有 JavaScript 變數的建構函式：

 "John".constructor          // 返回function String()  { [native code] }
(3.14).constructor             // 返回function Number()  { [native code] }
false.constructor               // 返回function Boolean() { [native code] }
[1,2,3,4].constructor            // 返回function Array()   { [native code] }
{name:'John', age:34}.constructor // 返回function Object()  { [native code] }
new Date().constructor           // 返回function Date()    { [native code] }
function () {}.constructor      // 返回function Function(){ [native code] } 

舉例：

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

返回函式型別，轉為字串，返回某個指定的字串值在字串中首次出現的位置。看看是否包含字串 “Array”。

2.JavaScript 型別轉換
（1）全域性方法 String()將數字轉換為字串：

String(x)         // 將變數 x 轉換為字串並返回
String(123)       // 將數字 123 轉換為字串並返回
String(100 + 23)  // 將數字表達式轉換為字串並返回
x.toString()
(123).toString()
(100 + 23).toString()

將布林值轉換為字串

String(false)        // 返回 "false"
String(true)         // 返回 "true" 
false.toString()     // 返回 "false"
true.toString()      // 返回 "true" 

將日期轉換為字串
(2)全域性方法 Number() 可以將字串轉換為數字。

Number("99 88")   // 返回 NaN，意思是這是一個非數字值

（3）Operator + 可用於將變數轉換為數字

var y = "John";   // y 是一個字串
var x = + y;      // x 是一個數字 (NaN)

（4）全域性方法 Number() 可將布林值轉換為數字。

18.正則表示式

正則表示式是由一個字元序列形成的搜尋模式。
search() 方法使用正則表示式：搜尋

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);  //輸出結果為6

replace() 方法使用正則表示式：取代

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");

test() 方法用於檢測一個字串是否匹配某個模式，如果字串中含有匹配的文字，則返回 true，否則返回 false。
exec() 方法用於檢索字串中的正則表示式的匹配。該函式返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值為 null。

19. 錯誤 - throw、try 和 catch

1. 丟擲（throw）錯誤:當錯誤發生時，當事情出問題時，JavaScript 引擎通常會停止，並生成一個錯誤訊息。描述這種情況的技術術語是JavaScript 將丟擲一個錯誤。

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值為空";
        if(isNaN(x)) throw "不是數字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "錯誤: " + err;
    }

}
2.try和 catch:try 語句允許我們定義在執行時進行錯誤測試的程式碼塊。catch 語句允許我們定義當 try 程式碼塊發生錯誤時，所執行的程式碼塊。
3.語法

try {
  //在這裡執行程式碼
} catch(err) {
  //在這裡處理錯誤
}

4.異常捕獲

<script>
    function  demo() {
        try {             //捕獲錯誤
            alert(str);    // 一定執行，無論是否有錯
        }catch (err) {
            alert(err);    //當發生錯誤時才會觸發
        }
    }
</script>

20. 除錯

1.console.log() 方法:使用 console.log() 方法在除錯視窗上列印 JavaScript 值
2.設定斷點:設定 JavaScript 程式碼的斷點,在每個斷點上，都會停止執行 JavaScript 程式碼，以便於檢查 JavaScript 變數的值.
3.debugger 關鍵字:用於停止執行 JavaScript，並呼叫除錯函式。這個關鍵字與在除錯工具中設定斷點的效果是一樣的。如果沒有除錯可用，debugger 語句將無法工作。開啟 debugger ，程式碼在第三行前停止執行。

21.表單

22.表單驗證

23.JSON字串

JSON 是用於儲存和傳輸資料的格式， 通常用於服務端向網頁傳遞資料 。
JSON.parse() 用於將一個 JSON 字串轉換為 JavaScript 物件。
JSON.stringify() 用於將 JavaScript 值轉換為 JSON 字串。

24.void

javascript:void(0) 中最關鍵的是 void 關鍵字， 該操作符指定要計算一個表示式但是不返回值。
href="#"與href="javascript:void(0)"的區別：
#包含了一個位置資訊，預設的錨是#top 也就是網頁的上端。而javascript:void(0), 僅僅表示一個死連結。在頁面很長的時候會使用 # 來定位頁面的具體位置，格式為：# + id