JavaScript 數據類型
JavaScript 擁有動態類型。這意味著相同的變量可用作不同的類型。
數字、字符串、布爾、數組、對象
let和var
let作用于塊內，var變量作用于整個函數
Undefined 和 Null
Undefined 這個值表示變量不含有值。
可以通過將變量的值設置為 null 來清空變量。
聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：
（注意：var聲明了變量但是不賦值，其類型為undfined）
對象
對象定義
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
對象訪問
person.lastName;
person["lastName"];
訪問對象方法
- 創建對象方法：
methodName : function() { code lines }- 訪問對象方法：
objectName.methodName()
JavaScript 函數
function myFunction()
{
var x=5;
return x;
}
var myVar=myFunction();
JavaScript 作用域
- 變量在函數內聲明，變量為局部作用域。局部變量：只能在函數內部訪問。局部變量在函數執行完畢后銷毀。
- 變量在函數外定義，即為全局變量。全局變量有全局作用域: 網頁中所有腳本和函數均可使用。全局變量在頁面關閉后銷毀。
- 如果變量在函數內沒有聲明（沒有使用 var 關鍵字），該變量為全局變量。(在全局變量是 window 對象: 所有數據變量都屬于 window 對象。函數外的未用var聲明的為window變量可刪除，用var聲明的不可刪除)
JavaScript 事件
常見的HTML事件的列表:
JavaScript 字符串
- 可以使用索引位置來訪問字符串中的每個字符:
var carname = "Volvo XC60";
var character = carname[7];- 使用內置屬性 length 來計算字符串的長度：
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;- 使用反斜杠 () 來轉義
- 通常， JavaScript 字符串是原始值，可以使用字符創建： var firstName = "John"
但我們也可以使用 new 關鍵字將字符串定義為一個對象： var firstName = new String("John")
Example:
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object常見字符串方法
運算符
- 條件運算符
voteable=(age<18)?"年齡太小":"年齡已達到";
循環
- For/In 循環
var person={fname:"John",lname:"Doe",age:25};
for (x in person) // x 為屬性名
{
txt=txt + person[x];
}- do/while 循環
do{
x=x + "The number is " + i + "
";
i++;
}
while (i<5);
break和continue
- break 和 continue 語句僅僅是能夠跳出代碼塊的語句。
- continue 語句（帶有或不帶標簽引用）只能用在循環中。
- break 語句（不帶標簽引用），只能用在循環或 switch 中。但是通過標簽引用，break 語句可用于跳出任何 JavaScript 代碼塊：
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0]);
document.write(cars[1]);
document.write(cars[2]);
break list;//帶標簽引用
document.write(cars[3]);
document.write(cars[4]);
document.write(cars[5]);
}
JavaScript typeof, null, 和 undefined
- 使用 typeof 操作符來檢測變量的數據類型。
- JavaScript 中 null 表示 "什么都沒有"
- JavaScript 中, undefined 是一個沒有設置值的變量。
var person = null; // 值為 null(空), 但類型為對象
var person = undefined; // 值為 undefined, 類型為 undefined- null 和 undefined 的值相等，但類型不等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
JavaScript 數據類型
- 在 JavaScript 中有 5 種不同的數據類型：
string
number
boolean
object
function- 3 種對象類型：
Object
Date
Array- 2 個不包含任何值的數據類型：
null
undefined- 注意的數據類型
NaN 的數據類型是 number
數組(Array)的數據類型是 object
日期(Date)的數據類型為 object
null 的數據類型是 object
未定義變量的數據類型為 undefined- 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 嘗試操作一個 "錯誤" 的數據類型時，會自動轉換為 "正確" 的數據類型。
以下輸出結果不是你所期望的：
5 + null // 返回 5 null 轉換為 0
"5" + null // 返回"5null" null 轉換為 "null"
"5" + 1 // 返回 "51" 1 轉換為 "1"
"5" - 1 // 返回 4 "5" 轉換為 5
(+號放在前面，可以讓+號后的類型變得和前面一樣；-號放在后面，可以讓-號前面的類型變得和后面一樣)- 一元運算符 +
Operator + 可用于將變量轉換為數字：
實例
var y = "5"; // y 是一個字符串
var x = + y; // x 是一個數字- 將字符串轉換為數字
全局方法 Number() 可以將字符串轉換為數字。
字符串包含數字(如 "3.14") 轉換為數字 (如 3.14).
空字符串轉換為 0。
其他的字符串會轉換為 NaN (不是個數字)。
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
- search() 方法查找
var str = "Visit Runoob!";
var n = str.search("Runoob");- replace() 方法替換
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
JavaScript 嚴格模式(use strict)
JavaScript 嚴格模式（strict mode）即在嚴格的條件下運行。
不允許使用未聲明的變量。
不允許刪除變量或對象。
不允許刪除函數。
不允許變量重名。
不允許使用八進制。
不允許使用轉義字符。
不允許對只讀屬性賦值。
不允許對一個使用getter方法讀取的屬性進行賦值。
不允許刪除一個不允許刪除的屬性。
變量名不能使用 "eval" 字符串。
變量名不能使用 "arguments" 字符串。
禁止this關鍵字指向全局對象。
使用構造函數時，如果忘了加new，this不再指向全局對象，而是報錯。
保留關鍵字
為了向將來Javascript的新版本過渡，嚴格模式新增了一些保留關鍵字：
implements
interface
let
package
private
protected
public
static
yield
常見錯誤
- 在常規的比較中，數據類型是被忽略的，以下 if 條件語句返回 true：
var x = 10;
var y = "10";
if (x == y)- switch 語句會使用恒等計算符(===)進行比較:
以下實例由于類型不一致不會執行 alert 彈窗：
var x = 10;
switch(x) {
case "10": alert("Hello");
}- 所有的編程語言，包括 JavaScript，對浮點型數據的精確度都很難確定：
var x = 0.1;
var y = 0.2;
var z = x + y // z 的結果為 0.3
if (z == 0.3) // 返回 false- 字符串中直接使用回車換行是會報錯的。需要用\符號
- JavaScript 默認是在代碼的最后一行自動結束。
- 使用名字來作為索引的數組稱為關聯數組(或哈希)。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"
//**************不用數字做索引，產生錯誤代碼**************
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。- Undefined 不是 Null。在 JavaScript 中, null 用于對象, undefined 用于變量，屬性和方法。對象只有被定義才有可能為 null，否則為 undefined。
- 程序塊作用域
在每個代碼塊中 JavaScript 不會創建一個新的作用域，一般各個代碼塊的作用域都是全局的。
for (var i = 0; i < 10; i++) {
// some code
}
return i;
JavaScript 表單驗證
HTML 約束驗證
HTML5 新增了 HTML 表單的驗證方式：約束驗證（constraint validation）。約束驗證是表單被提交時瀏覽器用來實現驗證的一種算法。HTML 約束驗證基于：
HTML 輸入屬性
CSS 偽類選擇器
DOM 屬性和方法
- HTML 表單自動驗證
HTML 表單驗證也可以通過瀏覽器來自動完成。如果表單字段 (fname) 的值為空, required 屬性會阻止表單提交：
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>- 必填（或必選）項目
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;
}
}
//************************以下是表單代碼*****************************
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
JavaScript JSON
JSON 是用于存儲和傳輸數據的格式。JSON 通常用于服務端向網頁傳遞數據 。JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文本。文本可以被任何編程語言讀取及作為數據格式傳遞。
什么是 JSON?
- JSON 英文全稱 JavaScript Object Notation
- JSON 是一種輕量級的數據交換格式。
- JSON 易于理解。
以下 JSON 語法定義了 sites 對象: 3 條網站信息（對象）的數組:
{"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]}
JSON 語法規則- 數據為 鍵/值 對。
- 數據由逗號分隔。
- 大括號保存對象
- 方括號保存數組
JSON 字符串轉換為 JavaScript 對象- 首先，創建 JavaScript 字符串，字符串為 JSON 格式的數據：
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';- 然后，使用 JavaScript 內置函數 JSON.parse() 將字符串轉換為 JavaScript 對象:
var obj = JSON.parse(text);- 實例
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
javascript:void(0) 含義
void 是 JavaScript的關鍵字，該操作符指定要計算一個表達式但是不返回值。
語法格式如下：
<head>
<script type="text/javascript">
void func()
javascript:void func()
//**************************或者****************************
void(func())
javascript:void(func())
</script>
</head>
href="#"與href="javascript:void(0)"的區別
<a href="javascript:void(0)">單擊此處什么也不會發生</a>
- # 包含了一個位置信息，默認的錨是#top 也就是網頁的上端。
- 而javascript:void(0), 僅僅表示一個死鏈接。
- 在頁面很長的時候會使用 # 來定位頁面的具體位置，格式為：# + id。
- 如果你要定義一個死鏈接請使用 javascript:void(0) 。
Example:
<a href="javascript:void(0);">點我沒有反應的!</a>
<a href="#pos">點我定位到指定位置!</a>
...
<p id="pos">尾部定位點</p>
