前端之JavaScript：JS簡單介紹 JavaScript（JS）之簡單介紹
一、JavaScript的歷史
-
1992年Nombas開發出C-minus-minus(C--)的嵌入式指令碼語言(最初繫結在CEnvi軟體中).後將其改名ScriptEase.(客戶端執行的語言)
-
Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的指令碼語言.Sun和Netscape共同完成.後改名叫Javascript
-
微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.
-
為了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規範.
二、ECMAScript
儘管 ECMAScript 是一個重要的標準，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：
- 核心（ECMAScript）
- 文件物件模型（DOM） Document object model (整合js，css，html)
- 瀏覽器物件模型（BOM） Broswer object model（整合js和瀏覽器）
- Javascript 在開發中絕大多數情況是基於物件的.也是面向物件的.
簡單地說，ECMAScript 描述了以下內容：
- 語法
- 型別
- 語句
- 關鍵字
- 保留字
- 運算子
- 物件 (封裝 繼承 多型) 基於物件的語言.使用物件.
三、JavaScript基礎
1.JS的引入方式
1 直接編寫
<script>
alert('hello yuan') </script> 2 匯入檔案 <script src="hello.js"></script>
2.JS的變數、
1.宣告變數時不用宣告變數型別，全部使用var關鍵字
var a;<br>a=3;
2.一行可以宣告多個變數.並且可以是不同型別
var name="yuan", age=20, job="lecturer";
3.一行可以宣告多個變數.並且可以是不同型別
4.變數命名,首字元只能是字母,下劃線,$美元符 三選一，餘下的字元可以是下劃線、美元符號或任何字母或數字字元且區分大小寫，x與X是兩個變數
1 Camel 標記法
2 首字母是小寫的，接下來的字母都以大寫字元開頭。例如：
3 var myTestValue = 0, mySecondValue = "hi";
4 Pascal 標記法
5 首字母是大寫的，接下來的字母都以大寫字元開頭。例如：
6 Var MyTestValue = 0, MySecondValue = "hi"; 7 匈牙利型別標記法 8 在以 Pascal 標記法命名的變數前附加一個小寫字母（或小寫字母序列），說明該變數的型別。例如，i 表示整數，s 表示字串，如下所示“ 9 Var iMyTestValue = 0, sMySecondValue = "hi";
3.常量和識別符號
常量 ：直接在程式中出現的資料值
識別符號：
- 由不以數字開頭的字母、數字、下劃線(_)、美元符號($)組成
- 常用於表示函式、變數等的名稱
- 例如：_abc,$abc,abc,abc123是識別符號，而1abc不是
- JavaScript語言中代表特定含義的詞稱為保留字，不允許程式再定義為識別符號
關鍵字：
4.JS的資料型別
資料型別有：
number ----- 數值
boolean ----- 布林值
string ----- 字串
undefined ----- undefined
null ----- null
數字型別：
- 不區分整型數值和浮點型數值;
字串型別（string）:
是由Unicode字元、數字、標點符號組成的序列；字串常量首尾由單引號或雙引號括起；JavaScript中沒有字元型別；常用特殊字元在字串中的表達；
字串中部分特殊字元必須加上右劃線\；常用的轉義字元 \n:換行 \':單引號 \":雙引號 \\:右劃線
布林型別（bolean）:
Boolean型別僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0
布林值也可以看作on/off、yes/no、1/0對應true/false
Boolean值主要用於JavaScript的控制語句，例如：
if (x==1){
y=y+1;
}else{
y=y-1;
}
Null 和 Undefined型別
Undefined型別
1.Undefined 型別只有一個值，即 undefined。當宣告的變數未初始化時，該變數的預設值是 undefined。
2.當函式無明確返回值時，返回的也是值 "undefined";
Null型別
另一種只有一個值的型別是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。
儘管這兩個值相等，但它們的含義不同。undefined 是聲明瞭變數但未對其初始化時賦予該變數的值，null 則用於表示尚未存在的物件（在討論 typeof 運算子時，簡單地介紹過這一點）。如果函式或方法要返回的是物件，那麼找不到該物件時，返回的通常是 null。
四、運算子
運算子分類
算術運算子：
+ - * / % ++ --
比較運算子：
> >= < <= != == === !==
邏輯運算子：
&& || ！
賦值運算子：
= += -= *= /=
字串運算子：
+ 連線，兩邊運算元有一個或兩個是字串就做連線運算
算術運算子：自增，自減
++i:先計算後賦值
i++：先賦值後計算
假如x=2，那麼x++表示式執行後的值為3，x--表示式執行後的值為1；i++相當於i=i+1，i--相當於i=i-1；
js不同於python，是一門弱型別語言
能夠進行資料轉換的叫做弱型別
console.log('1'==1) //True
console.log('1'===1) //False
強型別
print(1='1') //False
1 靜態型別語言
2 一種在編譯期間就確定資料型別的語言。大多數靜態型別語言是通過要求在使用任一變數之前宣告其資料型別來保證這一點的。Java 和 C 是靜態型別語言。
3 動態型別語言
4 一種在執行期間才去確定資料型別的語言，與靜態型別相反。VBScript 和 Python 是動態型別的，因為它們確定一個變數的型別是在您第一次給它賦值的時候。
5 強型別語言
6 一種總是強制型別定義的語言。Java 和 Python 是強制型別定義的。您有一個整數，如果不明確地進行轉換 ，不能將把它當成一個字串去應用。 7 弱型別語言 8 一種型別可以被忽略的語言，與強型別相反。JS 是弱型別的。在JS中，可以將字串 '12' 和整數 3 進行連線得到字串'123'，然後可以把它看成整數 123 ，所有這些都不需要任何的顯示轉換。 9 所以說 Python 既是動態型別語言 (因為它不使用顯示資料型別宣告)，又是強型別語言 (因為只要一個變數獲得了一個數據型別，它實際上就一直是這個型別了)。
注意3: NaN
var d="yuan";
d=+d;
alert(d);//NaN:屬於Number型別的一個特殊值,當遇到將字串轉成數字無效時,就會得到一個NaN資料
alert(typeof(d));//Number
//NaN特點:
var n=NaN;
alert(n>3);
alert(n<3);
alert(n==3);
alert(n==NaN);
alert(n!=NaN);//NaN參與的所有的運算都是false,除了!=
比較運算子
> >= < <= != == === !==
等號和非等號的同類運算子是全等號和非全等號。這兩個運算子所做的與等號和非等號相同，只是它們在檢查相等性前，不執行型別轉換。
console.log(2==2); //true
console.log(2=='2'); //true 因為js是弱型別的，所以返回true
console.log(2==='2'); //false (===判斷的是型別，型別不一樣就為false了)
console.log(2!=='2'); //true ！==和===是相反的
注意：
var bResult = "Blue" < "alpha"; alert(bResult); //輸出 true 在上面的例子中，字串 "Blue" 小於 "alpha"，因為字母 B 的字元程式碼是 66，字母 a 的字元程式碼是 97。 比較數字和字串 另一種棘手的狀況發生在比較兩個字串形式的數字時，比如： var bResult = "25" < "3"; alert(bResult); //輸出 "true" 上面這段程式碼比較的是字串 "25" 和 "3"。兩個運算數都是字串，所以比較的是它們的字元程式碼（"2" 的字元程式碼是 50，"3" 的字元程式碼是 51）。 不過，如果把某個運算數該為數字，那麼結果就有趣了： var bResult = "25" < 3; alert(bResult); //輸出 "false" 這裡，字串 "25" 將被轉換成數字 25，然後與數字 3 進行比較，結果不出所料。 總結： 比較運算子兩側如果一個是數字型別,一個是其他型別,會將其型別轉換成數字型別. 比較運算子兩側如果都是字串型別,比較的是最高位的asc碼,如果最高位相等,繼續取第二位比較.
邏輯運算子
console.log(1&&3); //3 兩個為真才為真（0為假，其他的數字都代表真）
console.log(0&&3); //0 只要有一個為假則為假
console.log(0||3); //3
console.log(2||3); //2
五、流程控制
- 順序結構(從上向下順序執行)
- 分支結構
- 迴圈結構
分支結構：
1. if.....else結構：
if (表示式1) {
語句1;
}else if (表示式2){
語句2;
}else if (表示式3){
語句3;
} else{
語句4;
}
2.switch-case結構
switch基本格式
switch (表示式) {
case 值1:語句1;break;
case 值2:語句2;break;
case 值3:語句3;break;
default:語句4;
}
示例
switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定義";
}
switch比else if結構更加簡潔清晰，使程式可讀性更強,效率更高。
迴圈語句
for迴圈：（推薦使用）
語法規則：
for(初始表示式;條件表示式;自增或自減)
{
執行語句
……
}
for迴圈的另一種形式：
for( 變數 in 陣列或物件)
{
執行語句
……
}
while迴圈：
語法規則：
while (條件){
語句1；
...
}
六、異常處理
try {
//這段程式碼從上往下執行，其中任何一個語句丟擲異常該程式碼塊就結束執行
}
catch (e) {
// 如果try程式碼塊中丟擲了異常，catch程式碼塊中的程式碼就會被執行。
//e是一個區域性變數，用來指向Error物件或者其他丟擲的物件
}
finally {
//無論try中程式碼是否有異常丟擲（甚至是try程式碼塊中有return語句），finally程式碼塊中始終會被執行。
}
注：主動丟擲異常 throw Error('xxxx')
一、JavaScript的歷史
-
1992年Nombas開發出C-minus-minus(C--)的嵌入式指令碼語言(最初繫結在CEnvi軟體中).後將其改名ScriptEase.(客戶端執行的語言)
-
Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的指令碼語言.Sun和Netscape共同完成.後改名叫Javascript
-
微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.
-
為了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規範.
二、ECMAScript
儘管 ECMAScript 是一個重要的標準，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：
- 核心（ECMAScript）
- 文件物件模型（DOM） Document object model (整合js，css，html)
- 瀏覽器物件模型（BOM） Broswer object model（整合js和瀏覽器）
- Javascript 在開發中絕大多數情況是基於物件的.也是面向物件的.
簡單地說，ECMAScript 描述了以下內容：
- 語法
- 型別
- 語句
- 關鍵字
- 保留字
- 運算子
- 物件 (封裝 繼承 多型) 基於物件的語言.使用物件.
三、JavaScript基礎
1.JS的引入方式
1 直接編寫
<script>
alert('hello yuan') </script> 2 匯入檔案 <script src="hello.js"></script>
2.JS的變數、
1.宣告變數時不用宣告變數型別，全部使用var關鍵字
var a;<br>a=3;
2.一行可以宣告多個變數.並且可以是不同型別
var name="yuan", age=20, job="lecturer";
3.一行可以宣告多個變數.並且可以是不同型別
4.變數命名,首字元只能是字母,下劃線,$美元符 三選一，餘下的字元可以是下劃線、美元符號或任何字母或數字字元且區分大小寫，x與X是兩個變數
1 Camel 標記法
2 首字母是小寫的，接下來的字母都以大寫字元開頭。例如：
3 var myTestValue = 0, mySecondValue = "hi";
4 Pascal 標記法
5 首字母是大寫的，接下來的字母都以大寫字元開頭。例如：
6 Var MyTestValue = 0, MySecondValue = "hi"; 7 匈牙利型別標記法 8 在以 Pascal 標記法命名的變數前附加一個小寫字母（或小寫字母序列），說明該變數的型別。例如，i 表示整數，s 表示字串，如下所示“ 9 Var iMyTestValue = 0, sMySecondValue = "hi";
3.常量和識別符號
常量 ：直接在程式中出現的資料值
識別符號：
- 由不以數字開頭的字母、數字、下劃線(_)、美元符號($)組成
- 常用於表示函式、變數等的名稱
- 例如：_abc,$abc,abc,abc123是識別符號，而1abc不是
- JavaScript語言中代表特定含義的詞稱為保留字，不允許程式再定義為識別符號
關鍵字：
4.JS的資料型別
資料型別有：
number ----- 數值
boolean ----- 布林值
string ----- 字串
undefined ----- undefined
null ----- null
數字型別：
- 不區分整型數值和浮點型數值;
字串型別（string）:
是由Unicode字元、數字、標點符號組成的序列；字串常量首尾由單引號或雙引號括起；JavaScript中沒有字元型別；常用特殊字元在字串中的表達；
字串中部分特殊字元必須加上右劃線\；常用的轉義字元 \n:換行 \':單引號 \":雙引號 \\:右劃線
布林型別（bolean）:
Boolean型別僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0
布林值也可以看作on/off、yes/no、1/0對應true/false
Boolean值主要用於JavaScript的控制語句，例如：
if (x==1){
y=y+1;
}else{
y=y-1;
}
Null 和 Undefined型別
Undefined型別
1.Undefined 型別只有一個值，即 undefined。當宣告的變數未初始化時，該變數的預設值是 undefined。
2.當函式無明確返回值時，返回的也是值 "undefined";
Null型別
另一種只有一個值的型別是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。
儘管這兩個值相等，但它們的含義不同。undefined 是聲明瞭變數但未對其初始化時賦予該變數的值，null 則用於表示尚未存在的物件（在討論 typeof 運算子時，簡單地介紹過這一點）。如果函式或方法要返回的是物件，那麼找不到該物件時，返回的通常是 null。
四、運算子
運算子分類
算術運算子：
+ - * / % ++ --
比較運算子：
> >= < <= != == === !==
邏輯運算子：
&& || ！
賦值運算子：
= += -= *= /=
字串運算子：
+ 連線，兩邊運算元有一個或兩個是字串就做連線運算
算術運算子：自增，自減
++i:先計算後賦值
i++：先賦值後計算
假如x=2，那麼x++表示式執行後的值為3，x--表示式執行後的值為1；i++相當於i=i+1，i--相當於i=i-1；
js不同於python，是一門弱型別語言
能夠進行資料轉換的叫做弱型別
console.log('1'==1) //True
console.log('1'===1) //False
強型別
print(1='1') //False
1 靜態型別語言
2 一種在編譯期間就確定資料型別的語言。大多數靜態型別語言是通過要求在使用任一變數之前宣告其資料型別來保證這一點的。Java 和 C 是靜態型別語言。
3 動態型別語言
4 一種在執行期間才去確定資料型別的語言，與靜態型別相反。VBScript 和 Python 是動態型別的，因為它們確定一個變數的型別是在您第一次給它賦值的時候。
5 強型別語言
6 一種總是強制型別定義的語言。Java 和 Python 是強制型別定義的。您有一個整數，如果不明確地進行轉換 ，不能將把它當成一個字串去應用。 7 弱型別語言 8 一種型別可以被忽略的語言，與強型別相反。JS 是弱型別的。在JS中，可以將字串 '12' 和整數 3 進行連線得到字串'123'，然後可以把它看成整數 123 ，所有這些都不需要任何的顯示轉換。 9 所以說 Python 既是動態型別語言 (因為它不使用顯示資料型別宣告)，又是強型別語言 (因為只要一個變數獲得了一個數據型別，它實際上就一直是這個型別了)。
注意3: NaN
var d="yuan";
d=+d;
alert(d);//NaN:屬於Number型別的一個特殊值,當遇到將字串轉成數字無效時,就會得到一個NaN資料
alert(typeof(d));//Number
//NaN特點:
var n=NaN;
alert(n>3);
alert(n<3);
alert(n==3);
alert(n==NaN);
alert(n!=NaN);//NaN參與的所有的運算都是false,除了!=
比較運算子
> >= < <= != == === !==
等號和非等號的同類運算子是全等號和非全等號。這兩個運算子所做的與等號和非等號相同，只是它們在檢查相等性前，不執行型別轉換。
console.log(2==2); //true
console.log(2=='2'); //true 因為js是弱型別的，所以返回true
console.log(2==='2'); //false (===判斷的是型別，型別不一樣就為false了)
console.log(2!=='2'); //true ！==和===是相反的
注意：
var bResult = "Blue" < "alpha"; alert(bResult); //輸出 true 在上面的例子中，字串 "Blue" 小於 "alpha"，因為字母 B 的字元程式碼是 66，字母 a 的字元程式碼是 97。 比較數字和字串 另一種棘手的狀況發生在比較兩個字串形式的數字時，比如： var bResult = "25" < "3"; alert(bResult); //輸出 "true" 上面這段程式碼比較的是字串 "25" 和 "3"。兩個運算數都是字串，所以比較的是它們的字元程式碼（"2" 的字元程式碼是 50，"3" 的字元程式碼是 51）。 不過，如果把某個運算數該為數字，那麼結果就有趣了： var bResult = "25" < 3; alert(bResult); //輸出 "false" 這裡，字串 "25" 將被轉換成數字 25，然後與數字 3 進行比較，結果不出所料。 總結： 比較運算子兩側如果一個是數字型別,一個是其他型別,會將其型別轉換成數字型別. 比較運算子兩側如果都是字串型別,比較的是最高位的asc碼,如果最高位相等,繼續取第二位比較.
邏輯運算子
console.log(1&&3); //3 兩個為真才為真（0為假，其他的數字都代表真）
console.log(0&&3); //0 只要有一個為假則為假
console.log(0||3); //3
console.log(2||3); //2
五、流程控制
- 順序結構(從上向下順序執行)
- 分支結構
- 迴圈結構
分支結構：
1. if.....else結構：
if (表示式1) {
語句1;
}else if (表示式2){
語句2;
}else if (表示式3){
語句3;
} else{
語句4;
}
2.switch-case結構
switch基本格式
switch (表示式) {
case 值1:語句1;break;
case 值2:語句2;break;
case 值3:語句3;break;
default:語句4;
}
示例
switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定義";
}
switch比else if結構更加簡潔清晰，使程式可讀性更強,效率更高。
迴圈語句
for迴圈：（推薦使用）
語法規則：
for(初始表示式;條件表示式;自增或自減)
{
執行語句
……
}
for迴圈的另一種形式：
for( 變數 in 陣列或物件)
{
執行語句
……
}
while迴圈：
語法規則：
while (條件){
語句1；
...
}
六、異常處理
try {
//這段程式碼從上往下執行，其中任何一個語句丟擲異常該程式碼塊就結束執行
}
catch (e) {
// 如果try程式碼塊中丟擲了異常，catch程式碼塊中的程式碼就會被執行。
//e是一個區域性變數，用來指向Error物件或者其他丟擲的物件
}
finally {
//無論try中程式碼是否有異常丟擲（甚至是try程式碼塊中有return語句），finally程式碼塊中始終會被執行。
}
注：主動丟擲異常 throw Error('xxxx')