從零開始學JavaScript——基礎篇
整理自菜鳥教程
JavaScript 簡介
JavaScript 是網際網路上最流行的指令碼語言，這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、膝上型電腦、平板電腦和智慧手機等裝置。
JavaScript 是指令碼語言
JavaScript 是一種輕量級的程式語言。
JavaScript 是可插入 HTML 頁面的程式設計程式碼。
JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。
JavaScript 很容易學習。
JavaScript：直接寫入 HTML 輸出流
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
JavaScript 能夠直接寫入 HTML 輸出流中：
</p>
<script>
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落。</p>");
</script>
<p>
您只能在 HTML 輸出流中使用 <strong>document.write</strong>。
如果您在文件已載入後使用它（比如在函式中），會覆蓋整個文件。
</p>
</body>
</html>
JavaScript：對事件的反應
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>我的第一個 JavaScript</h1>
<p>
JavaScript 能夠對事件作出反應。比如對按鈕的點選：
</p>
<button type="button" onclick="alert('歡迎!')">點我!</button>
</body>
</html>
alert() 函式在 JavaScript 中並不常用，但它對於程式碼測試非常方便。
onclick 事件只是您即將在本教程中學到的眾多事件之一。
JavaScript：改變 HTML 內容
使用 JavaScript 來處理 HTML 內容是非常強大的功能。
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改變 HTML 元素的內容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改變內容
}
</script>
<button type="button" onclick="myFunction()">點選這裡</button>
</body>
</html>
您會經常看到 document.getElementById("some id")。這個方法是 HTML DOM 中定義的。
DOM (Document Object Model)（文件物件模型）是用於訪問 HTML 元素的正式 W3C 標準。
JavaScript 能夠改變任意 HTML 元素的大多數屬性以及樣式。
JavaScript：驗證輸入
JavaScript 常用於驗證使用者的輸入。
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>請輸入數字。如果輸入值不是數字，瀏覽器會彈出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是數字");
}
}
</script>
<button type="button" onclick="myFunction()">點選這裡</button>
</body>
</html>
以上例項只是普通的驗證，如果要在生產環境中使用，需要嚴格判斷，如果輸入的空格，或者連續空格 isNaN 是判別不出來的。可以新增正則來判斷（後續章節會說明）：
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>請輸入數字。如果輸入值不是數字，瀏覽器會彈出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert("不是數字");
}
}
</script>
<button type="button" onclick="myFunction()">點選這裡</button>
</body>
</html>
您知道嗎？
 |
JavaScript 與 Java 是兩種完全不同的語言，無論在概念上還是設計上。 Java（由 Sun 發明）是更復雜的程式語言。 ECMA-262 是 JavaScript 標準的官方名稱。 JavaScript 由 Brendan Eich 發明。它於 1995 年出現在 Netscape 中（該瀏覽器已停止更新），並於 1997 年被 ECMA（一個標準協會）採納。 |
|---|
ECMAScript 版本
JavaScript 已經由 ECMA（歐洲電腦製造商協會）通過 ECMAScript 實現語言的標準化。
| 年份 | 名稱 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一個版本 |
| 1998 | ECMAScript 2 | 版本變更 |
| 1999 | ECMAScript 3 | 新增正則表示式 新增 try/catch |
| ECMAScript 4 | 沒有釋出 | |
| 2009 | ECMAScript 5 | 新增 "strict mode"，嚴格模式 新增 JSON 支援 |
| 2011 | ECMAScript 5.1 | 版本變更 |
| 2015 | ECMAScript 6 | 新增類和模組 |
| 2016 | ECMAScript 7 | 增加指數運算子 (**) 增加 Array.prototype.includes |
ECMAScript 6 也稱為 ECMAScript 2015。
ECMAScript 7 也稱為 ECMAScript 2016。
JavaScript 用法
HTML 中的指令碼必須位於 <script> 與 </script> 標籤之間。
指令碼可被放置在 HTML 頁面的 <body> 和 <head> 部分中。
<script> 標籤
如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標籤。
<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。
<script> 和 </script> 之間的程式碼行包含了 JavaScript:
<script>
alert("我的第一個 JavaScript");
</script>
您無需理解上面的程式碼。只需明白，瀏覽器會解釋並執行位於 <script> 和 </script>之間的 JavaScript 程式碼
|
那些老舊的例項可能會在 <script> 標籤中使用 type="text/javascript"。現在已經不必這樣做了。JavaScript 是所有現代瀏覽器以及 HTML5 中的預設指令碼語言 |
|---|
JavaScript 函式和事件
JavaScript 語句可以在頁面載入時執行。
或在某個事件發生時執行程式碼，比如當用戶點選按鈕時。
如果我們把 JavaScript 程式碼放入函式中，就可以在事件發生時呼叫該函式。
在 <head> 或者 <body> 的JavaScript
您可以在 HTML 文件中放入不限數量的指令碼。
指令碼可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於兩個部分中。
通常的做法是把函式放入 <head> 部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。
外部的 JavaScript
也可以把指令碼儲存到外部檔案中。外部檔案通常包含被多個網頁使用的程式碼。
外部 JavaScript 檔案的副檔名是 .js。
如需使用外部檔案，請在 <script> 標籤的 "src" 屬性中設定該 .js 檔案。
你可以將指令碼放置於 <head> 或者 <body>中，放在 <script> 標籤中的指令碼與外部引用的指令碼執行效果完全一致。
|
外部指令碼不能包含 <script> 標籤。 |
|---|
JavaScript 輸出
JavaScript 沒有任何列印或者輸出的函式。
JavaScript 顯示資料
JavaScript 可以通過不同的方式來輸出資料：
- 使用 window.alert() 彈出警告框。
- 使用 document.write() 方法將內容寫到 HTML 文件中。
- 使用 innerHTML 寫入到 HTML 元素。
- 使用 console.log() 寫入到瀏覽器的控制檯。
操作 HTML 元素
如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。
請使用 "id" 屬性來標識 HTML 元素，並 innerHTML 來獲取或插入元素內容。
例項
<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<p id="demo">我的第一個段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
以上 JavaScript 語句（在 <script> 標籤中）可以在 web 瀏覽器中執行：
document.getElementById("demo") 是使用 id 屬性來查詢 HTML 元素的 JavaScript 程式碼 。
innerHTML = "段落已修改。" 是用於修改元素的 HTML 內容(innerHTML)的 JavaScript 程式碼。
寫到 HTML 文件
出於測試目的，您可以將JavaScript直接寫在HTML 文件中：
例項
<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<p>我的第一個段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
|
請使用 document.write() 僅僅向文件輸出寫內容。 如果在文件已完成載入後執行 document.write，整個 HTML 頁面將被覆蓋。 |
|---|
例項
<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<p>我的第一個段落。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html>
上述例子就是在文件已完成載入後執行 document.write，整個 HTML 頁面將被覆蓋。
寫到控制檯
如果您的瀏覽器支援除錯，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。
瀏覽器中使用 F12 來啟用除錯模式， 在除錯視窗中點選 "Console" 選單。
例項
<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
您知道嗎?
|
程式中除錯是測試，查詢及減少bug(錯誤)的過程。 |
|---|
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 可以輕易區分開關鍵字和數字）。
以下是 JavaScript 中最重要的保留字（按字母順序）：
| abstract | else | instanceof | super |
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | with |
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"
16 加上 "Volvo" 是如何計算呢? 以上會產生一個錯誤還是輸出以下結果呢？
"16Volvo"
JavaScript 函式
JavaScript 語句可以寫在函式內，函式可以重複引用：
引用一個函式 = 呼叫函式(執行函式內的語句)。
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的結果
}
JavaScript 字母大小寫
JavaScript 對大小寫是敏感的。
當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。
函式 getElementById 與 getElementbyID 是不同的。
同樣，變數 myVariable 與 MyVariable 也是不同的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆蓋了所有的字元，包含標點等字元。
您知道嗎?
|
JavaScript 中，常見的是駝峰法的命名規則，如 lastName (而不是lastname)。 |
|---|
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 程式碼是 JavaScript 語句的序列。
瀏覽器按照編寫順序依次執行每條語句。
本例向網頁輸出一個標題和兩個段落：
例項
document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎麼樣?";
JavaScript 程式碼塊
JavaScript 可以分批地組合起來。
程式碼塊以左花括號開始，以右花括號結束。
程式碼塊的作用是一併地執行語句序列。
例項
function myFunction()
{
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎麼樣?";
}
JavaScript 語句識別符號
JavaScript 語句通常以一個 語句識別符號 為開始，並執行該語句。
語句識別符號是保留關鍵字不能作為變數名使用。
下表列出了 JavaScript 語句識別符號 (關鍵字) ：
| 語句 | 描述 |
|---|---|
| break | 用於跳出迴圈。 |
| catch | 語句塊，在 try 語句塊執行出錯時執行 catch 語句塊。 |
| continue | 跳過迴圈中的一個迭代。 |
| do ... while | 執行一個語句塊，在條件語句為 true 時繼續執行該語句塊。 |
| for | 在條件語句為 true 時，可以將程式碼塊執行指定的次數。 |
| for ... in | 用於遍歷陣列或者物件的屬性（對陣列或者物件的屬性進行迴圈操作）。 |
| function | 定義一個函式 |
| if ... else | 用於基於不同的條件來執行不同的動作。 |
| return | 退出函式 |
| switch | 用於基於不同的條件來執行不同的動作。 |
| throw | 丟擲（生成）錯誤 。 |
| try | 實現錯誤處理，與 catch 一同使用。 |
| var | 宣告一個變數。 |
| while | 當條件語句為 true 時，執行語句塊。 |
空格
JavaScript 會忽略多餘的空格。您可以向指令碼新增空格，來提高其可讀性。下面的兩行程式碼是等效的：
var person="Hege";
var person = "Hege";
對程式碼行進行折行
您可以在文字字串中使用反斜槓對程式碼行進行換行。下面的例子會正確地顯示：
document.write("你好 \
世界!");
不過，您不能像這樣折行：
document.write \
("你好世界!");
您知道嗎？
提示：JavaScript 是指令碼語言。瀏覽器會在讀取程式碼時，逐行地執行指令碼程式碼。而對於傳統程式設計來說，會在執行前對所有程式碼進行編譯。
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 變數
變數是用於儲存資訊的"容器"。
例項
var x=5;
var y=6;
var z=x+y;
就像代數那樣
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 變數都對大小寫敏感。 |
|---|
JavaScript 資料型別
JavaScript 變數還能儲存其他資料型別，比如文字值 (name="Bill Gates")。
在 JavaScript 中，類似 "Bill Gates" 這樣一條文字被稱為字串。
JavaScript 變數有很多種型別，但是現在，我們只關注數字和字串。
當您向變數分配文字值時，應該用雙引號或單引號包圍這個值。
當您向變數賦的值是數值時，不要使用引號。如果您用引號包圍數值，該值會被作為文字來處理。
例項
var pi=3.14;
var person="John Doe";
var answer='Yes I am!';
宣告（建立） JavaScript 變數
在 JavaScript 中建立變數通常稱為"宣告"變數。
我們使用 var 關鍵詞來宣告變數：
var carname;
變數宣告之後，該變數是空的（它沒有值）。
如需向變數賦值，請使用等號：
carname="Volvo";
不過，您也可以在宣告變數時對其賦值：
var carname="Volvo";
在下面的例子中，我們建立了名為 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：
var carname;
重新宣告 JavaScript 變數
如果重新宣告 JavaScript 變數，該變數的值不會丟失：
在以下兩條語句執行後，變數 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;
JavaScript 算數
您可以通過 JavaScript 變數來做算數，使用的是 = 和 + 這類運算子：
例項
y=5; x=y+2;
JavaScript 資料型別
值型別(基本型別)：字串（String）、數字(Number)、布林(Boolean)、對空（Null）、未定義（Undefined）、Symbol。
引用資料型別：物件(Object)、陣列(Array)、函式(Function)。
注：Symbol 是 ES6 引入了一種新的原始資料型別，表示獨一無二的值。
JavaScript 擁有動態型別
JavaScript 擁有動態型別。這意味著相同的變數可用作不同的型別：
例項
var x; // x 為 undefined
var x = 5; // 現在 x 為數字
var x = "John"; // 現在 x 為字串
JavaScript 字串
字串是儲存字元（比如 "Bill Gates"）的變數。
字串可以是引號中的任意文字。您可以使用單引號或雙引號：
例項
var carname="Volvo XC60";
var carname='Volvo XC60';
您可以在字串中使用引號，只要不匹配包圍字串的引號即可：
例項
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
JavaScript 數字
JavaScript 只有一種數字型別。數字可以帶小數點，也可以不帶：
例項
var x1=34.00; //使用小數點來寫
var x2=34; //不使用小數點來寫
極大或極小的數字可以通過科學（指數）計數法來書寫：
例項
var y=123e5; // 12300000
var z=123e-5; // 0.00123
JavaScript 布林
布林（邏輯）只能有兩個值：true 或 false。
var x=true;
var y=false;
布林常用在條件測試中。
JavaScript 陣列
下面的程式碼建立名為 cars 的陣列：
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):
例項
var cars=["Saab","Volvo","BMW"];
陣列下標是基於零的，所以第一個專案是 [0]，第二個是 [1]，以此類推。
JavaScript 物件
物件由花括號分隔。在括號內部，物件的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的物件 (person) 有三個屬性：firstname、lastname 以及 id。
空格和折行無關緊要。宣告可橫跨多行：
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
物件屬性有兩種定址方式：
例項
name=person.lastname;
name=person["lastname"];
Undefined 和 Null
Undefined 這個值表示變數不含有值。
可以通過將變數的值設定為 null 來清空變數。
例項
cars=null;
person=null;
宣告變數型別
當您宣告新變數時，可以使用關鍵詞 "new" 來宣告其型別：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
|
JavaScript 變數均為物件。當您宣告一個變數時，就建立了一個新的物件。 |
|---|
JavaScript 物件
JavaScript 物件是擁有屬性和方法的資料。
真實生活中的物件，屬性和方法
真實生活中，一輛汽車是一個物件。
物件有它的屬性，如重量和顏色等，方法有啟動停止等:
| 物件 | 屬性 | 方法 |
|---|---|---|
 |
car.name = Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start() car.drive() car.brake() car.stop() |
所有汽車都有這些屬性，但是每款車的屬性都不盡相同。
所有汽車都擁有這些方法，但是它們被執行的時間都不盡相同。
JavaScript 物件
在 JavaScript中，幾乎所有的事物都是物件。
|
在 JavaScript 中，物件是非常重要的，當你理解了物件，就可以瞭解 JavaScript 。 |
|---|
你已經學習了 JavaScript 變數的賦值。
以下程式碼為變數 car 設定值為 "Fiat" :
var car = "Fiat";
物件也是一個變數，但物件可以包含多個值（多個變數）。
var car = {type:"Fiat", model:500, color:"white"};
在以上例項中，3 個值 ("Fiat", 500, "white") 賦予變數 car。
在以上例項中，3 個變數 (type, model, color) 賦予變數 car。
|
JavaScript 物件是變數的容器。 |
|---|
物件定義
你可以使用字元來定義和建立 JavaScript 物件:
例項
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
定義 JavaScript 物件可以跨越多行，空格跟換行不是必須的：
例項
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
物件屬性
可以說 "JavaScript 物件是變數的容器"。
但是，我們通常認為 "JavaScript 物件是鍵值對的容器"。
鍵值對通常寫法為 name : value (鍵與值以冒號分割)。
鍵值對在 JavaScript 物件通常稱為 物件屬性。
|
JavaScript 物件是屬性變數的容器。 |
|---|
訪問物件屬性
你可以通過兩種方式訪問物件屬性:
person.lastName;
person["lastName"];
物件方法
物件的方法定義了一個函式，並作為物件的屬性儲存。
物件方法通過新增 () 呼叫 (作為一個函式)。
如果你要訪問 person 物件的 fullName 屬性，它將作為一個定義函式的字串返回：
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>建立和使用物件方法。</p>
<p>物件方法是一個函式定義,並作為一個屬性值儲存。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括號輸出函式表示式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括號輸出函式執行結果：" + person.fullName();
</script>
</body>
</html>
執行結果：
建立和使用物件方法。
物件方法是一個函式定義,並作為一個屬性值儲存。
不加括號輸出函式表示式：function () { return this.firstName + " " + this.lastName; }
加括號輸出函式執行結果：John Doe
|
JavaScript 物件是屬性和方法的容器。 |
|---|
訪問物件方法
你可以使用以下語法建立物件方法：
methodName : function() { code lines }
你可以使用以下語法訪問物件方法：
objectName.methodName()
通常 fullName() 是作為 person 物件的一個方法， fullName 是作為一個屬性。
有多種方式可以建立，使用和修改 JavaScript 物件。
同樣也有多種方式用來建立，使用和修改屬性和方法。
JavaScript 函式
函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊。
例項
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript 函式語法
函式就是包裹在花括號中的程式碼塊，前面使用了關鍵詞 function：
function functionname()
{
執行程式碼
}
當呼叫該函式時，會執行函式內的程式碼。
可以在某事件發生時直接呼叫函式（比如當用戶點選按鈕時），並且可由 JavaScript 在任何位置進行呼叫。
|
JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的，並且必須以與函式名稱相同的大小寫來呼叫函式。 |
|---|
呼叫帶引數的函式
在呼叫函式時，您可以向其傳遞值，這些值被稱為引數。
這些引數可以在函式中使用。
您可以傳送任意多的引數，由逗號 (,) 分隔：
myFunction(argument1,argument2)
當您宣告函式時，請把引數作為變數來宣告：
function myFunction(var1,var2)
{
程式碼
}
變數和引數必須以一致的順序出現。第一個變數就是第一個被傳遞的引數的給定的值，以此類推。
有時，我們會希望函式將值返回呼叫它的地方。
通過使用 return 語句就可以實現。
在使用 return 語句時，函式會停止執行，並返回指定的值。
語法
function myFunction()
{
var x=5;
return x;
}
上面的函式會返回值 5。
注意： 整個 JavaScript 並不會停止執行，僅僅是函式。JavaScript 將繼續執行程式碼，從呼叫函式的地方。
函式呼叫將被返回值取代：
var myVar=myFunction();
myVar 變數的值是 5，也就是函式 "myFunction()" 所返回的值。
即使不把它儲存為變數，您也可以使用返回值：
document.getElementById("demo").innerHTML=myFunction();
"demo" 元素的 innerHTML 將成為 5，也就是函式 "myFunction()" 所返回的值。
您可以使返回值基於傳遞到函式中的引數：
在您僅僅希望退出函式時 ，也可使用 return 語句。返回值是可選的：
function myFunction(a,b) { if (a>b) { return; } x=a+b }
如果 a 大於 b，則上面的程式碼將退出函式，並不會計算 a 和 b 的總和。
區域性 JavaScript 變數
在 JavaScript 函式內部宣告的變數（使用 var）是區域性變數，所以只能在函式內部訪問它。（該變數的作用域是區域性的）。
您可以在不同的函式中使用名稱相同的區域性變數，因為只有宣告過該變數的函式才能識別出該變數。
只要函式執行完畢，本地變數就會被刪除。
全域性 JavaScript 變數
在函式外宣告的變數是全域性變數，網頁上的所有指令碼和函式都能訪問它。
JavaScript 變數的生存期
JavaScript 變數的生命期從它們被宣告的時間開始。
區域性變數會在函式執行以後被刪除。
全域性變數會在頁面關閉後被刪除。
向未宣告的 JavaScript 變數分配值
如果您把值賦給尚未宣告的變數，該變數將被自動作為 window 的一個屬性。
這條語句：
carname="Volvo";
將宣告 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 作用域
作用域可訪問變數的集合。
JavaScript 作用域
在 JavaScript 中, 物件和函式同樣也是變數。
在 JavaScript 中, 作用域為可訪問變數，物件，函式的集合。
JavaScript 函式作用域: 作用域在函式內修改。
JavaScript 區域性作用域
變數在函式內宣告，變數為區域性作用域。
區域性變數：只能在函式內部訪問。
因為區域性變數只作用於函式內，所以不同的函式可以使用相同名稱的變數。
區域性變數在函式開始執行時建立，函式執行完後區域性變數會自動銷燬。
JavaScript 全域性變數
變數在函式外定義，即為全域性變數。
全域性變數有 全域性作用域: 網頁中所有指令碼和函式均可使用。
如果變數在函式內沒有宣告（沒有使用 var 關鍵字），該變數為全域性變數。
以下例項中 carName 在函式內，但是為全域性變數。
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
如果你的變數沒有宣告，它將自動成為全域性變數：
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
"我可以顯示 " + carName;
function myFunction()
{
carName = "Volvo";
}
</script>
</body>
</html>
JavaScript 變數生命週期
JavaScript 變數生命週期在它宣告時初始化。
區域性變數在函式執行完畢後銷燬。
全域性變數在頁面關閉後銷燬。
函式引數
函式引數只在函式內起作用，是區域性變數。
HTML 中的全域性變數
在 HTML 中, 全域性變數是 window 物件: 所有資料變數都屬於 window 物件。
你知道嗎?
|
你的全域性變數，或者函式，可以覆蓋 window 物件的變數或者函式。 區域性變數，包括 window 物件可以覆蓋全域性變數和函式。 |
|---|
JavaScript 事件
HTML 事件是發生在 HTML 元素上的事情。
當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。
HTML 事件
HTML 事件可以是瀏覽器行為，也可以是使用者行為。
以下是 HTML 事件的例項：
- HTML 頁面完成載入
- HTML input 欄位改變時
- HTML 按鈕被點選
通常，當事件發生時，你可以做些事情。
在事件觸發時 JavaScript 可以執行一些程式碼。
HTML 元素中可以新增事件屬性，使用 JavaScript 程式碼來新增 HTML 元素。
單引號:
<some-HTML-element some-event='JavaScript 程式碼'>
雙引號:
<some-HTML-element some-event="JavaScript 程式碼">
在以下例項中，按鈕元素中添加了 onclick 屬性 (並加上程式碼):
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button>
<p id="demo"></p>
</body>
</html>
以上例項中，JavaScript 程式碼將修改 id="demo" 元素的內容。
在下一個例項中，程式碼將修改自身元素的內容 (使用 this.innerHTML):
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="this.innerHTML=Date()">現在的時間是?</button>
</body>
</html>
|
JavaScript程式碼通常是幾行程式碼。比較常見的是通過事件屬性來呼叫. |
|---|
常見的HTML事件
下面是一些常見的HTML事件的列表:
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改變 |
| onclick | 使用者點選 HTML 元素 |
| onmouseover | 使用者在一個HTML元素上移動滑鼠 |
| onmouseout | 使用者從一個HTML元素上移開滑鼠 |
| onkeydown | 使用者按下鍵盤按鍵 |
| onload | 瀏覽器已完成頁面的載入 |
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" from the north."
字串 "We are the so-called " 被截斷。
如何解決以上的問題呢？可以使用反斜槓 (\) 來轉義 "Vikings" 字串中的雙引號，如下:
"We are the so-called \"Vikings\" from the north."
反斜槓是一個轉義字元。 轉義字元將特殊字元轉換為字串字元：
轉義字元 (\) 可以用於轉義撇號，換行，引號，等其他特殊字元。
下表中列舉了在字串中可以使用轉義字元轉義的特殊字元：
| 程式碼 | 輸出 |
|---|---|
| \' | 單引號 |
| \" | 雙引號 |
| \\ | 反斜槓 |
| \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
|
不要建立 String 物件。它會拖慢執行速度，並可能產生其他副作用： |
|---|
例項
var x = "John";
var y = new String("John");
(x === y) // 結果為 false，因為 x 是字串，y 是物件
=== 為絕對相等，即資料型別與值都必須相等。
字串屬性和方法
原始值字串，如 "John", 沒有屬性和方法(因為他們不是物件)。
原始值可以使用 JavaScript 的屬性和方法，因為 JavaScript 在執行方法和屬性時可以把原始值當作物件。
字串屬性
| 屬性 | 描述 |
|---|---|
| constructor | 返回建立字串屬性的函式 |
| length | 返回字串的長度 |
| prototype | 允許您向物件新增屬性和方法 |
字串方法
| 方法 | 描述 |
|---|---|
| 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 變數賦值。
算術運算子 + 用於把值加起來。
例項
指定變數值，並將值相加：
y=5;
z=2;
x=y+z;
在以上語句執行後，x 的值是：
7
JavaScript 算術運算子
y=5，下面的表格解釋了這些算術運算子：