學習筆記之JavaScript——知識點（5）

JavaScript 變量提升

JavaScript 中，函數及變量的聲明都將被提升到函數的最頂部。
JavaScript 中，變量可以在使用後聲明，也就是變量可以先使用再聲明。

x = 5; // 變量 x 設置爲 5
var x; // 聲明 x

和

var x; // 聲明 x
x = 5; // 變量 x 設置爲 5

是相同的效果。

變量提升：函數聲明和變量聲明總是會被解釋器悄悄地被”提升”到方法體的最頂部。

JavaScript 初始化不會提升
JavaScript 只有聲明的變量會提升，初始化的不會。

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 顯示 x 和 y

var y = 7; // 初始化 y

/* y 輸出了 undefined，這是因爲變量聲明 (var y) 提升了，但是初始化(y = 7) 並不會提升，所以 y 變量是一個未定義的變量。*/

和

var x = 5; // 初始化 x
var y;     // 聲明 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 顯示 x 和 y

y = 7;    // 設置 y 爲 7

相似。

---

JavaScript 嚴格模式(use strict)

嚴格模式（strict mode）即在嚴格的條件下運行。

使用 “use strict” 指令

“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一條語句，但是是一個字面量表達式，在 JavaScript 舊版本中會被忽略。

“use strict” 的目的是指定代碼在嚴格條件下執行。
嚴格模式下你不能使用未聲明的變量。

支持嚴格模式的瀏覽器:
Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。

• 爲什麼使用嚴格模式:
  
  • 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行爲;
  • 消除代碼運行的一些不安全之處，保證代碼運行的安全；
  • 提高編譯器效率，增加運行速度；
  • 爲未來新版本的Javascript做好鋪墊。
  • “嚴格模式”體現了Javascript更合理、更安全、更嚴謹的發展方向，包括IE 10在內的主流瀏覽器，都已經支持它，許多大項目已經開始全面擁抱它。
  • 另一方面，同樣的代碼，在”嚴格模式”中，可能會有不一樣的運行結果；一些在”正常模式”下可以運行的語句，在”嚴格模式”下將不能運行。掌握這些內容，有助於更細緻深入地理解Javascript，讓你變成一個更好的程序員。

嚴格模式的限制

不允許使用未聲明的變量。對象也是一個變量。
不允許刪除變量或對象。
不允許刪除函數。
不允許變量重名。
不允許使用八進制。
不允許使用轉義字符。
不允許對只讀屬性賦值。
不允許對一個使用getter方法讀取的屬性進行賦值。
不允許刪除一個不允許刪除的屬性。
變量名不能使用 "eval" 字符串，不能使用 "arguments" 字符串。
由於一些安全原因，在作用域 eval() 創建的變量不能被調用。
禁止this關鍵字指向全局對象。

保留關鍵字
爲了向將來Javascript的新版本過渡，嚴格模式新增了一些保留關鍵字：
implements
interface
let
package
private
protected
public
static
yield

"use strict" 指令只運行出現在腳本或函數的開頭。

---

JavaScript 使用誤區

賦值運算符應用錯誤

在 JavaScript 程序中如果在 if 條件語句中使用賦值運算符的等號 (=) 將會產生一個錯誤結果, 正確的方法是使用比較運算符的兩個等號 (==)。
*賦值語句返回變量的值。

---

比較運算符常見錯誤

在常規的比較中，數據類型是被忽略的。
在嚴格的比較運算中，=== 爲恆等計算符，同時檢查表達式的值與類型。

---

加法與連接注意事項

加法是兩個數字相加。
連接是兩個字符串連接。
JavaScript 的加法和連接都使用 + 運算符。

var x = 10 + 5;          // x 的結果爲 15
var x = 10 + "5";        // x 的結果爲 "105"

---

浮點型數據使用注意事項

JavaScript 中的所有數據都是以 64 位浮點型數據(float) 來存儲。
所有的編程語言，包括 JavaScript，對浮點型數據的精確度都很難確定,爲解決以上問題，可以用整數的乘除法來解決。

---

JavaScript 字符串分行

JavaScript 允許我們在字符串中使用斷行語句:

var x =
"Hello World!";

但是，在字符串中直接使用回車換行是會報錯的。

var x = "Hello
World!";

---

錯誤的使用分號

---

Return 語句使用注意事項

JavaScript 默認是在代碼的最後一行自動結束。

---

在 JavaScript 中，分號是可選的 。

由於 return 是一個完整的語句，所以 JavaScript 將關閉 return 語句。

注意：不用對 return 語句進行斷行。 

---

數組中使用名字來索引

許多程序語言都允許使用名字來作爲數組的索引。
使用名字來作爲索引的數組稱爲關聯數組(或哈希)。

JavaScript 不支持使用名字來索引數組，只允許使用數字索引。

在 JavaScript 中, 對象 使用 名字作爲索引。

如果你使用名字作爲索引，當訪問數組時，JavaScript 會把數組重新定義爲標準對象。
執行這樣操作後，數組的方法及屬性將不能再使用，否則會產生錯誤。

---

定義數組元素，最後不能添加逗號

定義對象，最後不能添加逗號

---

Undefined 不是 Null

在 JavaScript 中, null 用於對象, undefined 用於變量，屬性和方法。
對象只有被定義纔有可能爲 null，否則爲 undefined。
如果我們想測試對象是否存在，在對象還沒定義時將會拋出一個錯誤。正確的方式是我們需要先使用 typeof 來檢測對象是否已定義。

---

程序塊作用域

在每個代碼塊中 JavaScript 不會創建一個新的作用域。
一般各個代碼塊的作用域都是全局的。

---

JavaScript 表單

JavaScript 表單驗證

HTML 表單驗證可以通過 JavaScript 來完成。

HTML 表單自動驗證

HTML 表單驗證也可以通過瀏覽器來自動完成。
如果表單字段 (fname) 的值爲空, required 屬性會阻止表單提交。

---

數據驗證

數據驗證用於確保用戶輸入的數據是有效的。

典型的數據驗證有：
必需字段是否有輸入?
用戶是否輸入了合法的數據?
在數字字段是否輸入了文本?

大多數情況下，數據驗證用於確保用戶正確輸入數據。
數據驗證可以使用不同方法來定義，並通過多種方式來調用。
服務端數據驗證是在數據提交到服務器上後再驗證。
客戶端數據驗證 side validation是在數據發送到服務器前，在瀏覽器上完成驗證。

HTML 約束驗證

HTML5 新增了 HTML 表單的驗證方式：約束驗證（constraint validation）。
約束驗證是表單被提交時瀏覽器用來實現驗證的一種算法。

HTML 約束驗證基於：
    HTML 輸入屬性
    CSS 僞類選擇器
    DOM 屬性和方法

約束驗證 HTML 輸入屬性

屬性	描述
disabled	規定輸入的元素不可用
max	規定輸入元素的最大值
min	規定輸入元素的最小值
pattern	規定輸入元素值的模式
required	規定輸入元素字段是必需的
type	規則輸入元素的類型

約束驗證 CSS 僞類選擇器

選擇器	描述
:disabled	選取屬性爲 “disabled” 屬性的 input 元素
:invalid	選取無效的 input 元素
:optional	選擇沒有”required”屬性的 input 元素
:required	選擇有”required”屬性的 input 元素
:valid	選取有效值的 input 元素

---

JavaScript 表單驗證

JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。
表單數據經常需要使用 JavaScript 來驗證其正確性：

驗證表單數據是否爲空？
驗證輸入是否是一個正確的email地址？
驗證日期是否輸入正確？
驗證表單輸入內容是否爲數字型？

必填（或必選）項目

下面的函數用來檢查用戶是否已填寫表單中的必填（或必選）項目。假如必填或必選項爲空，那麼警告框會彈出，並且函數的返回值爲 false，否則函數的返回值則爲 true（意味着數據沒有問題）：

function validateForm()
{
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必須填寫");
    return false;
  }
}

E-mail 驗證

下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。
意思就是說，輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，並且 @ 之後需有至少一個點號：

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一個有效的 e-mail 地址");
    return false;
  }
}