JavaScript 語法
JavaScript 是一個程序語言。語法規則定義了語言結構。
JavaScript 語法
JavaScript 是一個腳本語言。
它是一個輕量級，但功能強大的編程語言。
JavaScript 字面量
在編程語言中，一般固定值稱為字面量，如 3.14。
數字（Number）字面量 可以是整數或者是小數，或者是科學計數(e)。
3.14 1001 123e5
字符串（String）字面量 可以使用單引號或雙引號:
"John Doe" 'John Doe'
表達式字面量可以用於計算
5 + 6 5 * 10
數組（Array）字面量 定義一個數組：
[40, 100, 1, 5, 25, 10]
對象（Object）字面量 定義一個對象：
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函數（Function）字面量 定義一個函數：
function myFunction(a, b) { return a * b;}
JavaScript 變量
在編程語言中，變量用於存儲數據值。
JavaScript 使用關鍵字 var 來定義變量， 使用等號來為變量賦值：
var x, length x = 5 length = 6
JavaScript 操作符
JavaScript使用 算術運算符 來計算值:
(5 + 6) * 10
JavaScript使用賦值運算符給變量賦值：
x = 5 y = 6 z = (x + y) * 10
JavaScript語言有多種類型的運算符：
| 類型 | 實例 | 描述 |
|---|---|---|
| 賦值，算術和位運算符 | = + - * / | 在 JS 運算符中描述 |
| 條件，比較及邏輯運算符 | == != < > | 在 JS 比較運算符中描述 |
JavaScript 語句
在 HTML 中，JavaScript 語句向瀏覽器發出的命令。
語句是用分號分隔：
x = 5 + 6; y = x * 10;
JavaScript 關鍵字
JavaScript 關鍵字用於標識要執行的操作。
和其他任何編程語言一樣，JavaScript 保留了一些關鍵字為自己所用。
var 關鍵字告訴瀏覽器創建一個新的變量：
var x = 5 + 6; var y = x * 10;
JavaScript 注釋
不是所有的 JavaScript 語句都是"命令"。雙斜杠 // 后的內容將會被瀏覽器忽略：
// 我不會執行
JavaScript 數據類型
JavaScript 有多種數據類型：數字，字符串，數組，對象等等：
var length = 16; // Number 通過數字字面量賦值 var points = x * 10; // Number 通過表達式字面量賦值 var lastName = "Johnson"; // String 通過字符串字面量賦值 var cars = ["Saab", "Volvo", "BMW"]; // Array 通過數組字面量賦值 var person = {firstName:"John", lastName:"Doe"}; // Object 通過對象字面量賦值
數據類型的概念
編程語言中，數據類型是一個非常重要的內容。
為了可以操作變量，了解數據類型的概念非常重要。
如果沒有使用數據類型，以下實例將無法執行：
16 加上 "Volvo" 是如何計算呢? 以上會產生一個錯誤還是輸出以下結果呢？
你可以在瀏覽器嘗試執行以上代碼查看效果。
在接下來的章節中你將學到更多關於數據類型的知識。
JavaScript 函數
JavaScript 語句可以寫在函數內，函數可以重復引用：
引用一個函數 = 調用函數(執行函數內的語句)。
function myFunction(a, b) { return a * b; // 返回 a 乘以 b 的結果 }
JavaScript 字母大小寫
JavaScript 對大小寫是敏感的。
當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。
函數 getElementById 與 getElementbyID 是不同的。
同樣，變量 myVariable 與 MyVariable 也是不同的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆蓋了所有的字符，包含標點等字符。
如需進一步了解，請學習我們的 完整 Unicode 參考手冊。
JavaScript 語句
JavaScript 語句向瀏覽器發出的命令。語句的作用是告訴瀏覽器該做什么。
JavaScript 語句
JavaScript 語句是發給瀏覽器的命令。
這些命令的作用是告訴瀏覽器要做的事情。
下面的 JavaScript 語句向 id="demo" 的 HTML 元素輸出文本 "你好 Dolly" ：
document.getElementById("demo").innerHTML = "你好 Dolly";
分號 ;
分號用於分隔 JavaScript 語句。
通常我們在每條可執行的語句結尾添加分號。
使用分號的另一用處是在一行中編寫多條語句。
a = 5; b = 6; c = a + b;
以上實例也可以這么寫:
a = 5; b = 6; c = a + b;
JavaScript 代碼
JavaScript 代碼是 JavaScript 語句的序列。
瀏覽器按照編寫順序依次執行每條語句。
本例向網頁輸出一個標題和兩個段落：
document.getElementById("demo").innerHTML="你好 Dolly"; document.getElementById("myDIV").innerHTML="你最近怎么樣?";
JavaScript 代碼塊
JavaScript 可以分批地組合起來。
代碼塊以左花括號開始，以右花括號結束。
代碼塊的作用是一並地執行語句序列。
本例向網頁輸出一個標題和兩個段落：
function myFunction() { document.getElementById("demo").innerHTML="你好Dolly"; document.getElementById("myDIV").innerHTML="你最近怎么樣?"; }
空格
JavaScript 會忽略多余的空格。您可以向腳本添加空格，來提高其可讀性。下面的兩行代碼是等效的：
var person="Hege"; var person = "Hege";
對代碼行進行折行
您可以在文本字符串中使用反斜杠對代碼行進行換行。下面的例子會正確地顯示：
document.write("你好 \ 世界!");
JavaScript 注釋
JavaScript 注釋可用於提高代碼的可讀性。
JavaScript 注釋
JavaScript 不會執行注釋。
我們可以添加注釋來對 JavaScript 進行解釋，或者提高代碼的可讀性。
單行注釋以 // 開頭。
本例用單行注釋來解釋代碼：
// 輸出標題： document.getElementById("myH1").innerHTML="歡迎來到我的主頁"; // 輸出段落： document.getElementById("myP").innerHTML="這是我的第一個段落。";
JavaScript 多行注釋
多行注釋以 /* 開始，以 */ 結尾。
下面的例子使用多行注釋來解釋代碼：
/* 下面的這些代碼會輸出 一個標題和一個段落 並將代表主頁的開始 */ document.getElementById("myH1").innerHTML="歡迎來到我的主頁"; document.getElementById("myP").innerHTML="這是我的第一個段落。";
使用注釋來阻止執行
在下面的例子中，注釋用於阻止其中一條代碼行的執行（可用於調試）：
// document.getElementById("myH1").innerHTML="歡迎來到我的主頁"; document.getElementById("myP").innerHTML="這是我的第一個段落。";
在下面的例子中，注釋用於阻止代碼塊的執行（可用於調試）：
/* document.getElementById("myH1").innerHTML="歡迎來到我的主頁"; document.getElementById("myP").innerHTML="這是我的第一個段落。"; */
在行末使用注釋
在下面的例子中，我們把注釋放到代碼行的結尾處：
var x=5; // 聲明 x 並把 5 賦值給它 var y=x+2; // 聲明 y 並把 x+2 賦值給它
JavaScript 變量
變量是用於存儲信息的"容器"。
就像代數那樣
x=5
y=6
z=x+y
在代數中，我們使用字母（比如 x）來保存值（比如 5）。
通過上面的表達式 z=x+y，我們能夠計算出 z 的值為 11。
在 JavaScript 中，這些字母被稱為變量。
JavaScript 變量
與代數一樣，JavaScript 變量可用於存放值（比如 x=5）和表達式（比如 z=x+y）。
變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。
- 變量必須以字母開頭
- 變量也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）
- 變量名稱對大小寫敏感（y 和 Y 是不同的變量）
JavaScript 數據類型
JavaScript 變量還能保存其他數據類型，比如文本值 (name="Bill Gates")。
在 JavaScript 中，類似 "Bill Gates" 這樣一條文本被稱為字符串。
JavaScript 變量有很多種類型，但是現在，我們只關注數字和字符串。
當您向變量分配文本值時，應該用雙引號或單引號包圍這個值。
當您向變量賦的值是數值時，不要使用引號。如果您用引號包圍數值，該值會被作為文本來處理。
聲明（創建） JavaScript 變量
在 JavaScript 中創建變量通常稱為"聲明"變量。
我們使用 var 關鍵詞來聲明變量：
變量聲明之后，該變量是空的（它沒有值）。
如需向變量賦值，請使用等號：
不過，您也可以在聲明變量時對其賦值：
在下面的例子中，我們創建了名為 carname 的變量，並向其賦值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：
var carname="Volvo"; document.getElementById("demo").innerHTML=carname;
一條語句，多個變量
您可以在一條語句中聲明很多變量。該語句以 var 開頭，並使用逗號分隔變量即可：
var lastname="Doe", age=30, job="carpenter";
聲明也可橫跨多行：
var lastname="Doe", age=30, job="carpenter";
一條語句中聲明的多個不可以賦同一個值:
var x,y,z=1;
x,y 為 undefined， z 為 1。
Value = undefined
在計算機程序中，經常會聲明無值的變量。未使用值來聲明的變量，其值實際上是 undefined。
在執行過以下語句后，變量 carname 的值將是 undefined：
重新聲明 JavaScript 變量
如果重新聲明 JavaScript 變量，該變量的值不會丟失：
在以下兩條語句執行后，變量 carname 的值依然是 "Volvo"：
var carname;
JavaScript 算數
您可以通過 JavaScript 變量來做算數，使用的是 = 和 + 這類運算符：
y=5; x=y+2;
JavaScript 函數定義
JavaScript 使用關鍵字 function 定義函數。
函數可以通過聲明定義，也可以是一個表達式。
函數聲明
在之前的教程中，你已經了解了函數聲明的語法 :
function functionName(parameters) {
執行的代碼
}
函數聲明后不會立即執行，會在我們需要的時候調用到。
函數表達式
JavaScript 函數可以通過一個表達式定義。
函數表達式可以存儲在變量中：
var x = function (a, b) {return a * b};
在函數表達式存儲在變量后，變量也可作為一個函數使用：
var x = function (a, b) {return a * b}; var z = x(4, 3);
以上函數實際上是一個 匿名函數 (函數沒有名稱)。
函數存儲在變量中，不需要函數名稱，通常通過變量名來調用。
Function() 構造函數
在以上實例中，我們了解到函數通過關鍵字 function 定義。
函數同樣可以通過內置的 JavaScript 函數構造器（Function()）定義。
var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3);
實際上，你不必使用構造函數。上面實例可以寫成：
var myFunction = function (a, b) {return a * b}; var x = myFunction(4, 3);
很多時候，我們需要避免使用new關鍵字
函數提升（Hoisting）
在之前的教程中我們已經了解了 "hoisting(提升)"。
提升（Hoisting）是 JavaScript 默認將當前作用域提升到前面去的的行為。
提升（Hoisting）應用在變量的聲明與函數的聲明。
因此，函數可以在聲明之前調用：
myFunction(5); function myFunction(y) { return y * y; }
自調用函數
函數表達式可以 "自調用"。
自調用表達式會自動調用。
如果表達式后面緊跟 () ，則會自動調用。
不能自調用聲明的函數。
通過添加括號，來說明它是一個函數表達式：
(function () { var x = "Hello!!"; // 我將調用自己 })();
以上函數實際上是一個 匿名自我調用的函數 (沒有函數名)。
函數可作為一個值使用
JavaScript 函數作為一個值使用：
function myFunction(a, b) { return a * b; } var x = myFunction(4, 3);
JavaScript 函數可作為表達式使用：
function myFunction(a, b) { return a * b; } var x = myFunction(4, 3) * 2;
函數是對象
在 JavaScript 中使用 typeof 操作符判斷函數類型將返回 "function" 。
但是JavaScript 函數描述為一個對象更加准確。
JavaScript 函數有 屬性 和 方法。
arguments.length 屬性返回函數調用過程接收到的參數個數：
function myFunction(a, b) { return arguments.length; }
toString() 方法將函數作為一個字符串返回:
function myFunction(a, b) { return a * b; } var txt = myFunction.toString();
箭頭函數
ES6 新增了箭頭函數。
箭頭函數表達式的語法比普通函數表達式更簡潔。
當只有一個參數時，圓括號是可選的：
(單一參數) => {函數聲明} 單一參數 => {函數聲明}
沒有參數的函數應該寫成一對圓括號:
() => {函數聲明}
局部 JavaScript 變量
在 JavaScript 函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它。（該變量的作用域是局部的）。
您可以在不同的函數中使用名稱相同的局部變量，因為只有聲明過該變量的函數才能識別出該變量。
只要函數運行完畢，本地變量就會被刪除。
全局 JavaScript 變量
在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。
JavaScript 變量的生存期
JavaScript 變量的生命期從它們被聲明的時間開始。
局部變量會在函數運行以后被刪除。
全局變量會在頁面關閉后被刪除。
向未聲明的 JavaScript 變量分配值
如果您把值賦給尚未聲明的變量，該變量將被自動作為 window 的一個屬性。
這條語句：
將聲明 window 的一個屬性 carname。
非嚴格模式下給未聲明變量賦值創建的全局變量，是全局對象的可配置屬性，可以刪除。
var var1 = 1; // 不可配置全局屬性 var2 = 2; // 沒有使用 var 聲明，可配置全局屬性 console.log(this.var1); // 1 console.log(window.var1); // 1 delete var1; // false 無法刪除 console.log(var1); //1 delete var2; console.log(delete var2); // true console.log(var2); // 已經刪除 報錯變量未定義
JavaScript 事件
HTML 事件是發生在 HTML 元素上的事情。
當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。
HTML 事件
HTML 事件可以是瀏覽器行為，也可以是用戶行為。
以下是 HTML 事件的實例：
- HTML 頁面完成加載
- HTML input 字段改變時
- HTML 按鈕被點擊
通常，當事件發生時，你可以做些事情。
在事件觸發時 JavaScript 可以執行一些代碼。
HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來添加 HTML 元素。
單引號:
雙引號:
在以下實例中，按鈕元素中添加了 onclick 屬性 (並加上代碼):
常見的HTML事件
下面是一些常見的HTML事件的列表:
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改變 |
| onclick | 用戶點擊 HTML 元素 |
| onmouseover | 用戶在一個HTML元素上移動鼠標 |
| onmouseout | 用戶從一個HTML元素上移開鼠標 |
| onkeydown | 用戶按下鍵盤按鍵 |
| onload | 瀏覽器已完成頁面的加載 |
更多事件列表: JavaScript 參考手冊 - HTML DOM 事件。
JavaScript 可以做什么?
事件可以用於處理表單驗證，用戶輸入，用戶行為及瀏覽器動作:
- 頁面加載時觸發事件
- 頁面關閉時觸發事件
- 用戶點擊按鈕執行動作
- 驗證用戶輸入內容的合法性
- 等等 ...
可以使用多種方法來執行 JavaScript 事件代碼：
- HTML 事件屬性可以直接執行 JavaScript 代碼
- HTML 事件屬性可以調用 JavaScript 函數
- 你可以為 HTML 元素指定自己的事件處理程序
- 你可以阻止事件的發生。
- 等等 ...
JavaScript 字符串
JavaScript 字符串用於存儲和處理文本。
JavaScript 字符串
字符串可以存儲一系列字符，如 "John Doe"。
字符串可以是插入到引號中的任何字符。你可以使用單引號或雙引號：
var carname = "Volvo XC60"; var carname = 'Volvo XC60';
你可以使用索引位置來訪問字符串中的每個字符：
var character = carname[7];
字符串的索引從 0 開始，這意味着第一個字符索引值為 [0],第二個為 [1], 以此類推。
你可以在字符串中使用引號，字符串中的引號不要與字符串的引號相同:
var answer = "It's alright"; var answer = "He is called 'Johnny'"; var answer = 'He is called "Johnny"';
你也可以在字符串添加轉義字符來使用引號：
var x = 'It\'s alright'; var y = "He is called \"Johnny\"";
字符串長度
可以使用內置屬性 length 來計算字符串的長度：
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length;
特殊字符
在 JavaScript 中，字符串寫在單引號或雙引號中。
因為這樣，以下實例 JavaScript 無法解析：
字符串 "We are the so-called " 被截斷。
如何解決以上的問題呢？可以使用反斜杠 (\) 來轉義 "Vikings" 字符串中的雙引號，如下:
反斜杠是一個轉義字符。 轉義字符將特殊字符轉換為字符串字符：
轉義字符 (\) 可以用於轉義撇號，換行，引號，等其他特殊字符。
下表中列舉了在字符串中可以使用轉義字符轉義的特殊字符：
| 代碼 | 輸出 |
|---|---|
| \' | 單引號 |
| \" | 雙引號 |
| \\ | 反斜杠 |
| \n | 換行 |
| \r | 回車 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 換頁符 |
字符串可以是對象
通常， JavaScript 字符串是原始值，可以使用字符創建： var firstName = "John"
但我們也可以使用 new 關鍵字將字符串定義為一個對象： var firstName = new String("John")
var x = "John"; var y = new String("John"); typeof x // 返回 String typeof y // 返回 Object
var x = "John"; var y = new String("John"); (x === y) // 結果為 false，因為 x 是字符串，y 是對象
字符串屬性和方法
原始值字符串，如 "John", 沒有屬性和方法(因為他們不是對象)。
原始值可以使用 JavaScript 的屬性和方法，因為 JavaScript 在執行方法和屬性時可以把原始值當作對象。
字符串方法我們將在下一章節中介紹。
| 屬性 | 描述 |
|---|---|
| constructor | 返回創建字符串屬性的函數 |
| length | 返回字符串的長度 |
| prototype | 允許您向對象添加屬性和方法 |
字符串方法
更多方法實例可以參見：JavaScript String 對象。
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 連接兩個或多個字符串，返回連接后的字符串 |
| fromCharCode() | 將 Unicode 轉換為字符串 |
| indexOf() | 返回字符串中檢索指定字符第一次出現的位置 |
| lastIndexOf() | 返回字符串中檢索指定字符最后一次出現的位置 |
| localeCompare() | 用本地特定的順序來比較兩個字符串 |
| match() | 找到一個或多個正則表達式的匹配 |
| replace() | 替換與正則表達式匹配的子串 |
| search() | 檢索與正則表達式相匹配的值 |
| slice() | 提取字符串的片斷，並在新的字符串中返回被提取的部分 |
| split() | 把字符串分割為子字符串數組 |
| substr() | 從起始索引號提取字符串中指定數目的字符 |
| substring() | 提取字符串中兩個指定的索引號之間的字符 |
| toLocaleLowerCase() | 根據主機的語言環境把字符串轉換為小寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射 |
| toLocaleUpperCase() | 根據主機的語言環境把字符串轉換為大寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射 |
| toLowerCase() | 把字符串轉換為小寫 |
| toString() | 返回字符串對象值 |
| toUpperCase() | 把字符串轉換為大寫 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某個字符串對象的原始值 |
JavaScript 運算符
運算符 = 用於賦值。
運算符 + 用於加值。
運算符 = 用於給 JavaScript 變量賦值。
算術運算符 + 用於把值加起來。
For/In 循環
JavaScript for/in 語句循環遍歷對象的屬性：
var person={fname:"John",lname:"Doe",age:25}; for (x in person) // x 為屬性名 { txt=txt + person[x]; }
x為key，person[x]為value
JavaScript typeof, null, 和 undefined
JavaScript typeof, null, undefined, valueOf()。
typeof 操作符
typeof "John" // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean typeof [1,2,3,4] // 返回 object typeof {name:'John', age:34} // 返回 object
null
在 JavaScript 中 null 表示 "什么都沒有"。
null是一個只有一個值的特殊類型。表示一個空對象引用。
var person = null; // 值為 null(空), 但類型為對象
undefined
在 JavaScript 中, undefined 是一個沒有設置值的變量。
typeof 一個沒有值的變量會返回 undefined。
var person; // 值為 undefined(空), 類型是undefined
person = undefined; // 值為 undefined, 類型是undefined
undefined 和 null 的區別
typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true
JavaScript 類型轉換
Number() 轉換為數字， String() 轉換為字符串， Boolean() 轉化為布爾值。
JavaScript 數據類型
在 JavaScript 中有 5 種不同的數據類型：
- string
- number
- boolean
- object
- function
3 種對象類型：
- Object
- Date
- Array
2 個不包含任何值的數據類型：
- null
- undefined
typeof 操作符
你可以使用 typeof 操作符來查看 JavaScript 變量的數據類型。
請注意：
- NaN 的數據類型是 number
- 數組(Array)的數據類型是 object
- 日期(Date)的數據類型為 object
- null 的數據類型是 object
- 未定義變量的數據類型為 undefined
如果對象是 JavaScript Array 或 JavaScript Date ，我們就無法通過 typeof 來判斷他們的類型，因為都是 返回 object。
constructor 屬性
constructor 屬性返回所有 JavaScript 變量的構造函數。
"John".constructor // 返回函數 String() { [native code] } (3.14).constructor // 返回函數 Number() { [native code] } false.constructor // 返回函數 Boolean() { [native code] } [1,2,3,4].constructor // 返回函數 Array() { [native code] } {name:'John', age:34}.constructor // 返回函數 Object() { [native code] } new Date().constructor // 返回函數 Date() { [native code] } function () {}.constructor // 返回函數 Function(){ [native code] }
JavaScript 類型轉換
JavaScript 變量可以轉換為新變量或其他數據類型：
- 通過使用 JavaScript 函數
- 通過 JavaScript 自身自動轉換
將數字轉換為字符串
全局方法 String() 可以將數字轉換為字符串。
該方法可用於任何類型的數字，字母，變量，表達式：
實例
String(x) // 將變量 x 轉換為字符串並返回 String(123) // 將數字 123 轉換為字符串並返回 String(100 + 23) // 將數字表達式轉換為字符串並返回
Number 方法 toString() 也是有同樣的效果。
x.toString() (123).toString() (100 + 23).toString()
將布爾值轉換為字符串
全局方法 String() 可以將布爾值轉換為字符串。
String(false) // 返回 "false" String(true) // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
將日期轉換為字符串
Date() 返回字符串。
Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
全局方法 String() 可以將日期對象轉換為字符串。
String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
toString()來轉換
obj = new Date() obj.toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
在 Date 方法 章節中，你可以查看更多關於日期轉換為字符串的函數：
| 方法 | 描述 |
|---|---|
| getDate() | 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 |
| getDay() | 從 Date 對象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 從 Date 對象以四位數字返回年份。 |
| getHours() | 返回 Date 對象的小時 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 對象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 對象的分鍾 (0 ~ 59)。 |
| getMonth() | 從 Date 對象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 對象的秒數 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒數。 |
將字符串轉換為數字
全局方法 Number() 可以將字符串轉換為數字。
字符串包含數字(如 "3.14") 轉換為數字 (如 3.14).
空字符串轉換為 0。
其他的字符串會轉換為 NaN (不是個數字)。
Number("3.14") // 返回 3.14 Number(" ") // 返回 0 Number("") // 返回 0 Number("99 88") // 返回 NaN
一元運算符 +
Operator + 可用於將變量轉換為數字：
var y = "5"; // y 是一個字符串 var x = + y; // x 是一個數字
如果變量不能轉換，它仍然會是一個數字，但值為 NaN (不是一個數字):
var y = "John"; // y 是一個字符串 var x = + y; // x 是一個數字 (NaN)
將布爾值轉換為數字
全局方法 Number() 可將布爾值轉換為數字。
Number(false) // 返回 0 Number(true) // 返回 1
將日期轉換為數字
全局方法 Number() 可將日期轉換為數字。
d = new Date(); Number(d) // 返回 1404568027739
日期方法 getTime() 也有相同的效果。
自動轉換類型
當 JavaScript 嘗試操作一個 "錯誤" 的數據類型時，會自動轉換為 "正確" 的數據類型。
以下輸出結果不是你所期望的：
5 + null // 返回 5 null 轉換為 0 "5" + null // 返回"5null" null 轉換為 "null" "5" + 1 // 返回 "51" 1 轉換為 "1" "5" - 1 // 返回 4 "5" 轉換為 5
自動轉換為字符串
當你嘗試輸出一個對象或一個變量時 JavaScript 會自動調用變量的 toString() 方法：
document.getElementById("demo").innerHTML = myVar; myVar = {name:"Fjohn"} // toString 轉換為 "[object Object]" myVar = [1,2,3,4] // toString 轉換為 "1,2,3,4" myVar = new Date() // toString 轉換為 "Fri Jul 18 2014 09:08:55 GMT+0200"
數字和布爾值也經常相互轉換：
myVar = 123 // toString 轉換為 "123" myVar = true // toString 轉換為 "true" myVar = false // toString 轉換為 "false"
JavaScript 正則表達式
正則表達式（英語：Regular Expression，在代碼中常簡寫為regex、regexp或RE）使用單個字符串來描述、匹配一系列符合某個句法規則的字符串搜索模式。
搜索模式可用於文本搜索和文本替換。
什么是正則表達式？
正則表達式是由一個字符序列形成的搜索模式。
當你在文本中搜索數據時，你可以用搜索模式來描述你要查詢的內容。
正則表達式可以是一個簡單的字符，或一個更復雜的模式。
正則表達式可用於所有文本搜索和文本替換的操作。
語法
/正則表達式主體/修飾符(可選)
其中修飾符是可選的。
實例：
var patt = /runoob/i
實例解析：
/runoob/i 是一個正則表達式。
runoob 是一個正則表達式主體 (用於檢索)。
i 是一個修飾符 (搜索不區分大小寫)。
使用字符串方法
在 JavaScript 中，正則表達式通常用於兩個字符串方法 : search() 和 replace()。
search() 方法 用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，並返回子串的起始位置。
replace() 方法 用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
search() 方法使用正則表達式
實例
var str = "Visit Runoob!"; var n = str.search(/Runoob/i);
使用正則表達式搜索 "Runoob" 字符串，且不區分大小寫：
正則表達式修飾符
修飾符 可以在全局搜索中不區分大小寫:
| 修飾符 | 描述 |
|---|---|
| i | 執行對大小寫不敏感的匹配。 |
| g | 執行全局匹配（查找所有匹配而非在找到第一個匹配后停止）。 |
| m | 執行多行匹配。 |
正則表達式模式
方括號用於查找某個范圍內的字符：
| 表達式 | 描述 |
|---|---|
| [abc] | 查找方括號之間的任何字符。 |
| [0-9] | 查找任何從 0 至 9 的數字。 |
| (x|y) | 查找任何以 | 分隔的選項。 |
元字符是擁有特殊含義的字符：
| 元字符 | 描述 |
|---|---|
| \d | 查找數字。 |
| \s | 查找空白字符。 |
| \b | 匹配單詞邊界。 |
| \uxxxx | 查找以十六進制數 xxxx 規定的 Unicode 字符。 |
量詞:
| 量詞 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一個 n 的字符串。 |
| n* | 匹配任何包含零個或多個 n 的字符串。 |
| n? | 匹配任何包含零個或一個 n 的字符串。 |
使用 RegExp 對象
在 JavaScript 中，RegExp 對象是一個預定義了屬性和方法的正則表達式對象。
使用 test()
test() 方法是一個正則表達式方法。
test() 方法用於檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。
以下實例用於搜索字符串中的字符 "e"：
實例
patt.test("The best things in life are free!");
字符串中含有 "e"，所以該實例輸出為：
嘗試一下 »
你可以不用設置正則表達式的變量，以上兩行代碼可以合並為一行：
使用 exec()
exec() 方法是一個正則表達式方法。
exec() 方法用於檢索字符串中的正則表達式的匹配。
該函數返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值為 null。
以下實例用於搜索字符串中的字母 "e":
Example 1
字符串中含有 "e"，所以該實例輸出為:
JavaScript 錯誤 - throw、try 和 catch
try 語句測試代碼塊的錯誤。
catch 語句處理錯誤。
throw 語句創建自定義錯誤。
finally 語句在 try 和 catch 語句之后，無論是否有觸發異常，該語句都會執行。
JavaScript 錯誤
當 JavaScript 引擎執行 JavaScript 代碼時，會發生各種錯誤。
可能是語法錯誤，通常是程序員造成的編碼錯誤或錯別字。
可能是拼寫錯誤或語言中缺少的功能（可能由於瀏覽器差異）。
可能是由於來自服務器或用戶的錯誤輸出而導致的錯誤。
當然，也可能是由於許多其他不可預知的因素。
JavaScript 拋出（throw）錯誤
當錯誤發生時，當事情出問題時，JavaScript 引擎通常會停止，並生成一個錯誤消息。
描述這種情況的技術術語是：JavaScript 將拋出一個錯誤。
JavaScript try 和 catch
try 語句允許我們定義在執行時進行錯誤測試的代碼塊。
catch 語句允許我們定義當 try 代碼塊發生錯誤時，所執行的代碼塊。
JavaScript 語句 try 和 catch 是成對出現的。
語法
實例
在下面的例子中，我們故意在 try 塊的代碼中寫了一個錯字。
catch 塊會捕捉到 try 塊中的錯誤，並執行代碼來處理它。
JavaScript 調試
在編寫 JavaScript 時，如果沒有調試工具將是一件很痛苦的事情。
JavaScript 調試
沒有調試工具是很難去編寫 JavaScript 程序的。
你的代碼可能包含語法錯誤，邏輯錯誤，如果沒有調試工具，這些錯誤比較難於發現。
通常，如果 JavaScript 出現錯誤，是不會有提示信息，這樣你就無法找到代碼錯誤的位置。
 |
通常，你在編寫一個新的 JavaScript 代碼過程中都會發生錯誤。 |
|---|
JavaScript 調試工具
在程序代碼中尋找錯誤叫做代碼調試。
調試很難，但幸運的是，很多瀏覽器都內置了調試工具。
內置的調試工具可以開始或關閉，嚴重的錯誤信息會發送給用戶。
有了調試工具，我們就可以設置斷點 (代碼停止執行的位置), 且可以在代碼執行時檢測變量。
瀏覽器啟用調試工具一般是按下 F12 鍵，並在調試菜單中選擇 "Console" 。
console.log() 方法
如果瀏覽器支持調試，你可以使用 console.log() 方法在調試窗口上打印 JavaScript 值：
設置斷點
在調試窗口中，你可以設置 JavaScript 代碼的斷點。
在每個斷點上，都會停止執行 JavaScript 代碼，以便於我們檢查 JavaScript 變量的值。
在檢查完畢后，可以重新執行代碼（如播放按鈕）。
debugger 關鍵字
debugger 關鍵字用於停止執行 JavaScript，並調用調試函數。
這個關鍵字與在調試工具中設置斷點的效果是一樣的。
如果沒有調試可用，debugger 語句將無法工作。
開啟 debugger ，代碼在第三行前停止執行。
主要瀏覽器的調試工具
通常，瀏覽器啟用調試工具一般是按下 F12 鍵，並在調試菜單中選擇 "Console" 。
各瀏覽器的步驟如下:
Chrome 瀏覽器
- 打開瀏覽器。
- 在菜單中選擇 "更多工具"。
- 在 "更多工具" 中選擇 "開發者工具"。
- 最后，選擇 Console。
JavaScript 變量提升
JavaScript 中，函數及變量的聲明都將被提升到函數的最頂部。
JavaScript 中，變量可以在使用后聲明，也就是變量可以先使用再聲明。
以下兩個實例將獲得相同的結果：
x = 5; // 變量 x 設置為 5 elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x; // 在元素中顯示 x var x; // 聲明 x
var x; // 聲明 x x = 5; // 變量 x 設置為 5 elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x; // 在元素中顯示 x
JavaScript 嚴格模式(use strict)
JavaScript 嚴格模式（strict mode）即在嚴格的條件下運行。
使用 "use strict" 指令
"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一條語句，但是是一個字面量表達式，在 JavaScript 舊版本中會被忽略。
"use strict" 的目的是指定代碼在嚴格條件下執行。
不允許使用未聲明的變量：
"use strict"; x = 3.14; // 報錯 (x 未定義)
"use strict"; x = {p1:10, p2:20}; // 報錯 (x 未定義)
不允許刪除變量或對象。
"use strict"; var x = 3.14; delete x; // 報錯
不允許刪除函數。
"use strict"; function x(p1, p2) {}; delete x; // 報錯
不允許變量重名:
"use strict"; function x(p1, p1) {}; // 報錯
不允許使用八進制:
"use strict"; var x = 010; // 報錯
不允許使用轉義字符:
"use strict"; var x = \010; // 報錯
不允許對只讀屬性賦值:
"use strict"; var obj = {}; Object.defineProperty(obj, "x", {value:0, writable:false}); obj.x = 3.14; // 報錯
不允許對一個使用getter方法讀取的屬性進行賦值
"use strict"; var obj = {get x() {return 0} }; obj.x = 3.14; // 報錯
不允許刪除一個不允許刪除的屬性：
"use strict"; delete Object.prototype; // 報錯
變量名不能使用 "eval" 字符串:
"use strict"; var eval = 3.14; // 報錯
變量名不能使用 "arguments" 字符串:
"use strict"; var arguments = 3.14; // 報錯
不允許使用以下這種語句:
"use strict"; with (Math){x = cos(2)}; // 報錯
由於一些安全原因，在作用域 eval() 創建的變量不能被調用：
"use strict"; eval ("var x = 2"); alert (x); // 報錯
禁止this關鍵字指向全局對象。
function f(){ return !this; } // 返回false，因為"this"指向全局對象，"!this"就是false function f(){ "use strict"; return !this; } // 返回true，因為嚴格模式下，this的值為undefined，所以"!this"為true。
因此，使用構造函數時，如果忘了加new，this不再指向全局對象，而是報錯。
function f(){ "use strict"; this.a = 1; }; f();// 報錯，this未定義
保留關鍵字
為了向將來Javascript的新版本過渡，嚴格模式新增了一些保留關鍵字： implements interface let package private protected public static yield "use strict"; var public = 1500; // 報錯
JavaScript 使用誤區
本章節我們將討論 JavaScript 的使用誤區。
賦值運算符應用錯誤
在 JavaScript 程序中如果你在 if 條件語句中使用賦值運算符的等號 (=) 將會產生一個錯誤結果, 正確的方法是使用比較運算符的兩個等號 (==)。
if 條件語句返回 false (是我們預期的)因為 x 不等於 10:
var x = 0; if (x == 10)
if 條件語句返回 true (不是我們預期的)因為條件語句執行為 x 賦值 10，10 為 true:
var x = 0; if (x = 10)
if 條件語句返回 false (不是我們預期的)因為條件語句執行為 x 賦值 0，0 為 false:
var x = 0; if (x = 0)
比較運算符常見錯誤
在常規的比較中，數據類型是被忽略的，以下 if 條件語句返回 true：
var x = 10; var y = "10"; if (x == y)
在嚴格的比較運算中，=== 為恆等計算符，同時檢查表達式的值與類型，以下 if 條件語句返回 false：
var x = 10; var y = "10"; if (x === y)
這種錯誤經常會在 switch 語句中出現，switch 語句會使用恆等計算符(===)進行比較:
以下實例會執行 alert 彈窗：
var x = 10; switch(x) { case 10: alert("Hello"); }
以下實例由於類型不一致不會執行 alert 彈窗：
var x = 10; switch(x) { case "10": alert("Hello"); }
加法與連接注意事項
加法是兩個數字相加。
連接是兩個字符串連接。
JavaScript 的加法和連接都使用 + 運算符。
接下來我們可以通過實例查看兩個數字相加及數字與字符串連接的區別：
var x = 10 + 5; // x 的結果為 15 var x = 10 + "5"; // x 的結果為 "105"
使用變量相加結果也不一致:
var x = 10; var y = 5; var z = x + y; // z 的結果為 15 var x = 10; var y = "5"; var z = x + y; // z 的結果為 "105"
浮點型數據使用注意事項
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
JavaScript 字符串分行
JavaScript 允許我們在字符串中使用斷行語句:
var x = "Hello World!";
但是，在字符串中直接使用回車換行是會報錯的：
var x = "Hello World!";
字符串斷行需要使用反斜杠(\)，如下所示:
var x = "Hello \ World!";
錯誤的使用分號
以下實例中，if 語句失去方法體，原 if 語句的方法體作為獨立的代碼塊被執行，導致錯誤的輸出結果。
由於分號使用錯誤，if 語句中的代碼塊就一定會執行：
if (x == 19); { // code block }
return 語句使用注意事項
JavaScript 默認是在代碼的最后一行自動結束。
以下兩個實例返回結果是一樣的(一個有分號一個沒有):
function myFunction(a) { var power = 10 return a * power }
function myFunction(a) { var power = 10; return a * power; }
JavaScript 也可以使用多行來結束一個語句。
以下實例返回相同的結果:
function myFunction(a) { var power = 10; return a * power; }
但是，以下實例結果會返回 undefined：
function myFunction(a) { var power = 10; return a * power; }
為什么會有這樣的結果呢？因為在 JavaScript 中，實例 4 的代碼與下面的代碼一致：
function myFunction(a) { var power = 10; return; // 分號結束，返回 undefined a * power; }
數組中使用名字來索引
許多程序語言都允許使用名字來作為數組的索引。
使用名字來作為索引的數組稱為關聯數組(或哈希)。
JavaScript 不支持使用名字來索引數組，只允許使用數字索引。
var person = []; person[0] = "John"; person[1] = "Doe"; person[2] = 46; var x = person.length; // person.length 返回 3 var y = person[0]; // person[0] 返回 "John"
在 JavaScript 中, 對象 使用 名字作為索引。
如果你使用名字作為索引，當訪問數組時，JavaScript 會把數組重新定義為標准對象。
執行這樣操作后，數組的方法及屬性將不能再使用，否則會產生錯誤:
var person = []; person["firstName"] = "John"; person["lastName"] = "Doe"; person["age"] = 46; var x = person.length; // person.length 返回 0 var y = person[0]; // person[0] 返回 undefined
定義數組元素，最后不能添加逗號
添加逗號雖然語法沒有問題，但是在不同的瀏覽器可能得到不同的結果。
var colors = [5, 6, 7,]; //這樣數組的長度可能為3 也可能為4。
正確的定義方式：
points = [40, 100, 1, 5, 25, 10];
Undefined 不是 Null
在 JavaScript 中, null 用於對象, undefined 用於變量，屬性和方法。
對象只有被定義才有可能為 null，否則為 undefined。
如果我們想測試對象是否存在，在對象還沒定義時將會拋出一個錯誤。
錯誤的使用方式：
if (myObj !== null && typeof myObj !== "undefined")
正確的方式是我們需要先使用 typeof 來檢測對象是否已定義：
if (typeof myObj !== "undefined" && myObj !== null)
程序塊作用域
在每個代碼塊中 JavaScript 不會創建一個新的作用域，一般各個代碼塊的作用域都是全局的。
以下代碼的的變量 i 返回 10，而不是 undefined：
實例
for (var i = 0; i < 10; i++) { // some code } return i;
JavaScript 表單
JavaScript 表單驗證
HTML 表單驗證可以通過 JavaScript 來完成。
以下實例代碼用於判斷表單字段(fname)值是否存在， 如果不存在，就彈出信息，阻止表單提交：
function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要輸入名字。"); return false; } }
以上 JavaScript 代碼可以通過 HTML 代碼來調用：
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>
HTML 表單自動驗證
HTML 表單驗證也可以通過瀏覽器來自動完成。
如果表單字段 (fname) 的值為空, required 屬性會阻止表單提交：
<form action="demo_form.php" method="post"> <input type="text" name="fname" required="required"> <input type="submit" value="提交"> </form>