語法規範 JavaScript嚴格區分大小寫，對空格、換行、縮進不敏感，建議語句結束加‘；’ JavaScript 會忽略多個空格。您可以向腳本添加空格，以增強可讀性。 JavaScript 程式員傾向於使用以小寫字母開頭的駝峰大小寫 firstName, lastName, masterCard, ...
語法規範
JavaScript嚴格區分大小寫，對空格、換行、縮進不敏感，建議語句結束加‘；’
JavaScript 會忽略多個空格。您可以向腳本添加空格，以增強可讀性。
JavaScript 程式員傾向於使用以小寫字母開頭的駝峰大小寫
firstName, lastName, masterCard, interCity
在運算符旁邊（ = + - * / ）添加空格是個好習慣
JavaScript非同步載入：
引入js代碼時（引入外鏈/內嵌），頁面的下載和渲染都會暫停，等待腳本執行完後才執行，頁面載入腳本文件會阻塞其他資源下載。對於外鏈式，對不需要提前執行的代碼，將引入放在< body>標簽底部。
HTML5新增兩個可選屬性：async，defer
async：用於非同步載入，先下載文件，不阻塞其他代碼執行，下載完成後再執行。
<script src='...' async></script>
defer:用於延後執行，即先下載文件，直到網頁載入完成後再執行
<script src='...' defer></script>
eval() 的參數是一個字元串。
如果字元串表示的是表達式，eval() 會對錶達式進行求值。如果參數表示一個或多個 JavaScript 語句，那麼eval() 就會執行這些語句。不需要用 eval() 來執行一個算術表達式：因為 JavaScript 可以自動為算術表達式求值。返回字元串中代碼的返回值。如果返回值為空，則返回 undefined。
如果你以字元串的形式構造了算術表達式，那麼可以在後面用 eval()對它求值。例如，假設你有一個變數 x，您可以通過將表達式的字元串值（例如 3 * x + 2）賦值給一個變數，然後在你的代碼後面的其他地方調用 eval()，來推遲涉及 x 的表達式的求值。
如果 eval() 的參數不是字元串， eval() 會將參數原封不動地返回。在下麵的例子中，String 構造器被指定，而 eval() 返回了 String 對象而不是執行字元串。
eval(new String("2 + 2")); // 返回了包含"2 + 2"的字元串對象
eval("2 + 2"); // returns 4
外部 JavaScript 的優勢
在外部文件中放置腳本有如下優勢：
分離了 HTML 和代碼
使 HTML 和 JavaScript 更易於閱讀和維護
已緩存的 JavaScript 文件可加速頁面載入
如需向一張頁面添加多個外部腳本文件 - 請使用多個 script 標簽
JavaScript的位置
<head> 或 <body> 中的 JavaScript 您能夠在 HTML 文檔中放置任意數量的腳本。腳本可被放置與 HTML 頁面的 <body> 或 <head> 部分中，或兼而有之。
把腳本置於 <body> 元素的底部，可改善顯示速度，因為腳本編譯會拖慢顯示。
HTML路徑
| 路徑 | 描述 |
|---|---|
<img src="picture.jpg"> |
picture.jpg 位於與當前網頁相同的文件夾 |
<img src="images/picture.jpg"> |
picture.jpg 位於當前文件夾的 images 文件夾中 |
<img src="/images/picture.jpg"> |
picture.jpg 當前站點根目錄的 images 文件夾中 |
<img src="../picture.jpg"> |
picture.jpg 位於當前文件夾的上一級文件夾中 |
文件路徑描述了網站文件夾結構中某個文件的位置。文件路徑會在鏈接外部文件時被用到。
絕對文件路徑是指向一個網際網路文件的完整 URL，相對路徑指向了相對於當前頁面的文件。
JavaScript 顯示方案
| JavaScript 能夠以不同方式“顯示”數據： | 描述 | 補充 |
|---|---|---|
| 使用 document.write() 寫入 HTML 輸出 | 出於測試目的，使用 document.write() 比較方便。 輸出內容位置與script標簽插入的位置有關、 document.write() 方法僅用於測試。 |
在 HTML 文檔完全載入後使用 document.write() 將刪除所有已有的 HTML |
| 使用 innerHTML 寫入 HTML 元素 | innerHTML 屬性定義 HTML 內容 | |
| 使用 console.log() 寫入瀏覽器控制台 | 在瀏覽器中，您可使用 console.log() 方法來顯示數據。 | |
| 使用 window.alert() 寫入警告框 | 用警告框來顯示數據，打開頁面彈出警告框 |
JavaScript 關鍵詞
語句常常通過某個關鍵詞來標識需要執行的 JavaScript 動作。
下麵的表格列出了一部分將在教程中學到的關鍵詞：
| 關鍵詞 | 描述 |
|---|---|
| break | 終止 switch 或迴圈。 |
| continue | 跳出迴圈併在頂端開始。 |
| debugger | 停止執行 JavaScript，並調用調試函數（如果可用）。 |
| return | 退出函數 |
| try ... catch | 對語句塊實現錯誤處理。 |
| var | var 關鍵詞告知瀏覽器創建新的變數 |
JavaScript 值
JavaScript 語句定義兩種類型的值：混合值和變數值。
混合值被稱為字面量（literal）。變數值被稱為變數。
字元串是文本，由雙引號或單引號包圍，加了引號的就是文本包括數字
使用變數不要加”“
文本："你好"，"12",
數字：12
JavaScript 變數
在編程語言中，變數用於存儲數據值。
JavaScript 使用 var 關鍵詞來聲明變數。
= 號用於為變數賦值
var a = "hello"
var b =17
JavaScript 標識符
所有 JavaScript 變數必須以唯一的名稱的標識。這些唯一的名稱稱為標識符。
標識符可以是短名稱（比如 x 和 y），或者更具描述性的名稱（age、sum、totalVolume）。
構造變數名稱（唯一標識符）的通用規則是：
名稱可包含字母、數字、下劃線和美元符號
名稱必須以字母開頭
名稱也可以 $ 和 _ 開頭（但是在本教程中我們不會這麼做）
名稱對大小寫敏感（y 和 Y 是不同的變數）
保留字（比如 JavaScript 的關鍵詞）無法用作變數名稱
提示：JavaScript 標識符對大小寫敏感
聲明變數
var a;//聲明變數,不賦值的話，a=undefined
a=10;//給變數賦值
/*一條語句，多個變數
您可以在一條語句中聲明許多變數。
聲明可橫跨多行*/
var person = "Bill Gates",
carName = "porsche",
price = 15000;
以 var 作為語句的開頭，並以逗號分隔變數
JavaScript 表達式
表達式是值、變數和運算符的組合，結果為值（數字，字元串），也可以包含變數
12 + 29
a*2
"Allerge" + "Xia"
註釋
//單行註釋
/*
多行註釋
被稱為註釋塊
*/
應用：解釋代碼；阻止代碼執行
使用單行註釋最為常見。
提示：註釋塊常用於官方聲明。
JavaScript作用域
ES2015前只有全局和函數（局部）
ES2015之後有全局、函數、塊級作用域
| 作用域 | 描述 | 應用 |
|---|---|---|
| 全局作用域 | 全局 （在函數之外）聲明的變數擁有 全局作用域 。 | 全局變數可以在 JavaScript 程式中的任何位置訪問 |
| 函數作用域 | 局部 （函數內）聲明的變數擁有函數作用域 | 局部變數只能訪問函數內部的變數 |
| 塊級作用域 | 在塊{} 內聲明的變數無法從塊外訪問 | 函數、迴圈的{} |
var carName = "porsche";
// 此處的代碼可以使用 carName
function myFunction() {
// 此處的代碼也可以使用 carName
var busName = "finghter"
//此處可以使用busName
}
//此處不可以使用busName
| var | let | const | 補充 |
|---|---|---|---|
| 聲明的變數沒有塊作用域 | 聲明擁有塊作用域的變數 | 通過 const 定義的變數與 let 變數類似，但不能重新賦值 | |
| 在塊{} 內聲明的變數可以從塊之外進行訪問 | 在塊{} 內聲明的變數無法從塊外訪問 | const 變數必須在聲明時賦值 | |
| 使用var關鍵詞在塊中重新聲明變數 將重新聲明塊外的變數 |
使用let關鍵詞在塊中重新聲明變數 不會重新聲明塊外的變數 |
const定義的不是常數，定義了對值的常量引用 我們不能更改常量原始值， 但我們可以更改常量對象的屬性，可以更改常量數組的元素 |
|
| 通過 var 關鍵詞定義的全局變數屬於 window 對象 | 通過 let關鍵詞定義的全局變數不屬於 window 對象, 不能通過window.let聲明的變數 |
||
| 允許在程式的任何位置使用 var重新聲明 | 在相同的作用域，或在相同的塊中， 通過 let 重新聲明一個 var 變數是不允許的 在不同的作用域或塊中，通過 let 重新聲明變數是允許的 |
在同一作用域或塊中，不允許將已有的 var 或 let或const 變數 重新聲明或重新賦值給 const 在另外的作用域或塊中重新聲明 const 是允許的 |
在相同的作用域，或在相同的塊中，通過 var 重新聲明一個 let 變數是不允許的 |
| 通過 var 聲明的變數會提升到頂端， 可以在聲明前使用變數 |
通過 let 定義的變數不會被提升到頂端。 在聲明 let 變數之前就使用它會導致 ReferenceError。 變數從塊的開頭一直處於“暫時死區”，直到聲明為止 |
通過const定義的變數不會被提升到頂端， const變數不能在聲明之前使用 |
通過 const 定義的變數不會被提升到頂端。
const 變數不能在聲明之前使用
重新聲明變數
使用 var 關鍵字重新聲明變數會帶來問題。
使用 let 關鍵字重新聲明變數可以解決這個問題。
在塊中重新聲明變數不會重新聲明塊外的變數
var x = 10;
// 此處 x 為 10
{
let x = 6;
// 此處 x 為 6
}
// 此處 x 為 10
var x = 10;
// 此處 x 為 10
{
var x = 6;
// 此處 x 為 6
}
// 此處 x 為 6
如果在塊外聲明聲明，那麼 var 和 let 也很相似。它們都擁有全局作用域
在函數內聲明變數時，使用 var 和 let 很相似。它們都有函數作用域
冪運算符
取冪運算符（**）將第一個操作數提升到第二個操作數的冪
var x = 5;
var z = x ** 2; // 結果是 25
x ** y 產生的結果與 Math.pow(x,y) 相同:
var x = 5;
var z = Math.pow(x,2); // 結果是 25
JavaScript 從左向右計算表達式。不同的次序會產生不同的結果
var x = 911 + 7 + "Porsche";//918Porsche
var x = "Porsche" + 911 + 7;//Porsche9117
Undefined 與 Null 的區別
Undefined 與 null 的值相等，但類型不相等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
空值
空值與 undefined 不是一回事。
空的字元串變數既有值也有類型。
var car = ""; // 值是 ""，類型是 "string"
typeof 運算符
您可使用 JavaScript 的 typeof 來確定 JavaScript 變數的類型：
typeof 運算符返回變數或表達式的類型
原始數據值是一種沒有額外屬性和方法的單一簡單數據值。
typeof 運算符可返回以下原始類型之一：
- string
- number
- boolean
- undefined
複雜數據
typeof 運算符可返回以下兩種類型之一：
- function
- object
typeof 運算符把對象、數組或 null 返回 object。
typeof 運算符不會把函數返回 object
JavaScript 函數
JavaScript 函數是被設計為執行特定任務的代碼塊。
JavaScript 函數會在某代碼調用它時被執行。
函數
聲明函數
函數只要定義一次代碼，就可以多次使用，多次向同一函數傳遞不同參數得到不同的結果
function name(參數 1, 參數 2, 參數 3) {
要執行的代碼
}
匿名函數
hello = function() {
return "Hello World!";
}
ECMAScript 的函數Function對象（ 類）實際上是功能完整的對象
使用Function對象（ 類）可以表示開發者定義的任何函數
var function_name = new Function(arg1, arg2, ..., argN, function_body)
前面是參數，最後是函數邏輯主體
函數名只是指向函數對象的引用值
儘管可以使用 Function 構造函數創建函數，但最好不要使用它，因為用它定義函數比用傳統方式要慢得多。不過，所有函數都應看作 Function 類的實例。
箭頭函數
ES6 中引入了箭頭函數。
箭頭函數允許我們編寫更短的函數
hello = () => "Hello World!";
如果函數只有一個語句，並且該語句返回一個值，則可以去掉括弧和 return 關鍵字
如果只有一個參數，您也可以略過括弧
hello = val => "Hello " + val;
函數屬於引用類型，所以它們也有屬性和方法。
length屬性，屬性 length 只是為查看預設情況下預期的參數個數提供了一種簡便方式。
與所有對象共用的 valueOf() 方法和 toString() 方法，返回的都是函數的源代碼
function doAdd(iNum) {
alert(iNum + 10);
}
function sayHi() {
alert("Hi");
}
alert(doAdd.length); //輸出 "1"
alert(sayHi.length);//輸出"0"
document.write(sayHi.toString());//function sayHi(){alert("Hi");}
函數調用
用( )調用函數，沒有（）的函數返回的是定義的函數
函數中的代碼將在其他代碼調用該函數時執行：
- 當事件發生時（當用戶點擊按鈕時）
- 當 JavaScript 代碼調用時
- 自動的（自調用）
函數返回
當 JavaScript 到達 return 語句，函數將停止執行。
函數在執行過 return 語句後立即停止代碼。因此，return 語句後的代碼都不會被執行。
如果函數被某條語句調用，JavaScript 將在調用語句之後“返回”執行代碼。
函數通常會計算出 返回值 。這個返回值會返回給調用者：
function myFunction(a, b) {
return a * b; // 函數返回 a 和 b 的乘積
}
document.getElementById("demo").innerHTML = myFunction;
//沒有(),function myFunction(a, b) { return a * b; // 函數返回 a 和 b 的乘積 }
document.getElementById("de").innerHTML = myFunction(1,2);
//有(),2
局部變數
在 JavaScript 函數中聲明的變數，會成為函數的 局部變數 。
局部變數只能在函數內訪問。
由於局部變數只能被其函數識別，因此可以在不同函數中使用相同名稱的變數。
局部變數在函數開始時創建，在函數完成時被刪除
arguments 對象
在函數代碼中，使用特殊對象 arguments，開發者 無需明確指出參數名 ，就能訪問它們。arguments中包含所以參數
應用：
arguments[0],偽數組中索引號為0的元素
arguments.length，檢測函數的參數個數
模擬函數重載
用 arguments 對象判斷傳遞給函數的參數個數，即可模擬函數重載，即通過arguments.length判斷個數，arguments[？]對不同位置的參數以另種進行重新載入
function doAdd() {
if(arguments.length == 1) {
alert(arguments[0] + 5);
} else if(arguments.length == 2) {
alert(arguments[0] + arguments[1]);
}
}
doAdd(10); //輸出 "15"
doAdd(40, 20); //輸出 "60"
閉包
函數可以使用函數之外定義的變數
簡單閉包
var sMessage = "hello world";
function sayHelloWorld() {
alert(sMessage);//執行函數時使用全局變數
}
sayHelloWorld();
複雜閉包
在一個函數中定義另一個函數會使閉包變得更加複雜
var iBaseNum = 10;
function addNum(iNum1, iNum2) {
//addNum輸入兩個參數iNum1，iNum2
function doAdd() {
//doAdd函數無輸入參數
return iNum1 + iNum2 + iBaseNum;
}
return doAdd();
}
函數 addNum() 包括函數 doAdd() （閉包）。
內部函數是一個閉包，它將獲取外部函數的參數 iNum1 和 iNum2 以及全局變數 iBaseNum 的值。
addNum() 的最後一步調用了 doAdd()，把兩個參數和全局變數相加，並返回它們的和。
這裡要掌握的重要概念是，doAdd() 函數根本不接受參數，它使用的值是從執行環境中獲取的。
閉包是 ECMAScript 中非常強大多用的一部分，可用於執行複雜的計算。
對象
對象包含屬性和方法，以鍵值對的形式來書寫
方法是作為屬性來存儲的函數，是在對象上執行的 動作 。
var obj ={
name:"xiatian",
skill:function(){
var rate =18;
return rate;
}
}
訪問對象屬性的兩種方式：
obj.name
obj['name']
訪問對象方法的方式：
obj.sayHi()
this 關鍵詞
在函數定義中，this 引用該函數的“擁有者”。
this.firstName，this 指的是“擁有” fullName 函數的 person 對象 。
換言之， 的意思是 this 對象的 firstName 屬性。
JavaScript this 關鍵詞指的是它所屬的對象。
在常規函數中，關鍵字 this 表示調用該函數的對象，可以是視窗、文檔、按鈕或其他任何東西
它擁有不同的值，具體取決於它的使用位置：
-
在對象方法中，
this指的是擁有該方法的對象。 -
單獨的情況下，
this指的是全局對象（嚴格模式下也是）。 -
在函數中，函數的擁有者預設綁定
this，this指的是全局對象。嚴格模式下，this是 undefined。 -
在事件中，
this指的是接收事件的元素 -
對於箭頭函數，
this關鍵字始終表示定義箭頭函數的對象，window 對象是函數的“所有者”。用了箭頭函數，則this表示函數的擁有者<script> var x = this;//全局對象 var obj = { age:18; fullName : function() { return this.firstName + " " + this.lastName;//this指向obj對象 return this; } function myFunction() { return this;//全局對象 } </script> <body> <button onclick="this.style.display='none'">單擊來刪除我！</button>//this指的是接收事件的button
顯式函數綁定 call() 和 apply()
call() 和 apply() 方法是預定義的 JavaScript 方法。
它們都可以用於將另一個對象作為參數調用對象方法。
JavaScript 事件
HTML 事件是發生在 HTML 元素上的“事情”。
當在 HTML 頁面中使用 JavaScript 時，JavaScript 能夠“應對”這些事件。
通常，當事件發生時，用戶會希望做某件事。JavaScript 允許您在事件被偵測到時執行代碼。
通過 JavaScript 代碼 ，HTML 允許您向 HTML 元素添加事件處理程式
常見的 HTML 事件
下麵是一些常見的 HTML 事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改變 |
| onclick | 用戶點擊了 HTML 元素 |
| onmouseover | 用戶把滑鼠移動到 HTML 元素上 |
| onmouseout | 用戶把滑鼠移開 HTML 元素 |
| onkeydown | 用戶按下鍵盤按鍵 |
| onload | 瀏覽器已經完成頁面載入 |
HTML DOM 事件允許 JavaScript 在 HTML 文檔中的元素上註冊不同的事件處理程式。
事件通常與函數結合使用，在事件發生之前函數不會被執行（例如當用戶單擊按鈕時）。
JavaScript 能夠做什麼？
事件處理程式可用於處理、驗證用戶輸入、用戶動作和瀏覽器動作：
- 每當頁面載入時應該做的事情
- 當頁面被關閉時應該做的事情
- 當用戶點擊按鈕時應該被執行的動作
- 當用戶輸入數據時應該被驗證的內容
- 等等
讓 JavaScript 處理事件的不同方法有很多：
- HTML 事件屬性可執行 JavaScript 代碼
- HTML 事件屬性能夠調用 JavaScript 函數
- 您能夠向 HTML 元素分配自己的事件處理函數
- 您能夠阻止事件被髮送或被處理
轉義序列：
使用 \ 轉義字元，反斜杠轉義字元把特殊字元轉換為字元串字元
| 代碼 | 結果 |
|---|---|
| \b | 退格鍵 |
| \f | 換頁 |
| \n | 新行 |
| \r | 回車 |
| \t | 水平製表符 |
| \v | 垂直製表符 |
字元串方法
| 方法 | 說明 | |
|---|---|---|
length |
屬性返回字元串的長度 | |
| replace() | 用另一個值替換在字元串中指定的值 | 不改變字元串,返回的是新字元串 ,只替換首個匹配,對大小寫敏感 |
toUpperCase() |
把字元串轉換為大寫 | |
toLowerCase() |
把字元串轉換為小寫 | |
concat() |
方法可用於代替加運算符 | |
trim() |
方法刪除字元串兩端的空白符 | |
split() |
將字元串轉換為數組 | 省略分隔符，被返回的數組將包含 index [0] 中的整個字元串。 分隔符是 ""，被返回的數組將是間隔單個字元的數組 |
| ECMAScript 5 (2009) 允許對字元串的屬性訪問 [ ] | 使用屬性訪問有點不太靠譜 | |
字元串搜索
| 方法 | 描述 | |
|---|---|---|
| indexOf() | 方法返回字元串中指定文本首次出現的索引（位置） | |
| （從前往後） | 如果未找到文本， | |
indexOf() 和 lastIndexOf() 均返回 -1 indexOf() 方法無法設置更強大的搜索值（正則表達式） |
||
| lastIndexOf() | 方法返回指定文本在字元串中最後一次出現的索引 | |
| (從後向前) | 兩種方法都接受作為檢索起始位置的第二個參數。 | |
var str = "The full name of China is the People's Republic of China." |
||
var pos = str.lastIndexOf("China", 50) 第二個參數是 50，則從位置 50 開始檢索，直到字元串的最後。 |
||
| search() | 方法搜索特定值的字元串，並返回匹配的位置 | 區別：search() 方法無法設置第二個開始位置參數； |
| match() | 方法根據正則表達式在字元串中搜索匹配項，並將匹配項作為 Array 對象返回k |
| 方法 |
|---|
如果字元串包含指定值，includes() 方法返回 true |
如果字元串以指定值開頭，則 startsWith() 方法返回 true，否則返回 false |
如果字元串以指定值結尾，則 endsWith() 方法返回 true，否則返回 false |
提取部分字元串
有三種提取部分字元串的方法：
| 方法 | 描述 | 區別 |
|---|---|---|
| slice(start , end ) | 提取字元串的某個部分併在新字元串中返回被提取的部分。 如果某個參數為負，則從字元串的結尾開始計數 |
|
| substring(start , end ) | 該方法設置兩個參數：起始索引（開始位置），終止索引（結束位置） 如果省略第二個參數，則該方法將裁剪字元串的剩餘部分 |
substring（） 無法接受負的索引 |
| substr(start , length ) | substr() 類似於 slice()。 |
不同之處在於第二個參數規定被提取部分的長度 |
| charAt(position) | 方法返回字元串中指定下標（位置）的字元串 | |
| charCodeAt(position ) | 方法返回字元串中指定索引的字元 unicode 編碼 |
IE 8 不支持 String.trim()。您可以使用 replace 方案把 trim 函數添加到 JavaScript String.prototype：
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
};
var str = " Hello World! ";
alert(str.trim());
