JavaScript入門

********JavaScript概述********

****ECMAScript和JavaScript的關係****

1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，
但願這門語言可以成爲國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器
腳本語言的標準，並將這種語言稱爲ECMAScript，這個版本就是1.0版。

該標準一開始就是針對JavaScript語言制定的，可是沒有稱其爲JavaScript，有兩個方面的緣由。
一是商標，JavaScript自己已被Netscape註冊爲商標。而是想體現這門語言的制定者是ECMA，而
不是Netscape，這樣有利於保證這門語言的開發性和中立性。

所以ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現

****ECMAScript的歷史****
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是規範.


年份        名稱                描述
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

注：ES6就是指ECMAScript6.

儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟
一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：

核心（ECMAScript） 
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
簡單地說，ECMAScript 描述了JavaScript語言自己的相關內容。
簡單地說，ECMAScript 描述瞭如下內容：
語法 
類型 
語句 
關鍵字 
保留字 
運算符 
對象 (封裝 繼承 多態) 基於對象的語言.使用對象.

JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。

********JavaScript基礎********

1.****JavaScript引入方式****

**scrip標籤內些代碼**

<script>
  // 在這裏寫你的JS代碼
</script>

**引入額外的JS文件**

<script src="myscript.js"></script>

2.****JavaScript語言規範****

**註釋**

// 這是單行註釋

/*
這是
多行註釋
*/

**結束符**

JavaScript中的語句要以分號（;）爲結束符。

3.****JavaScript語言****

數據類型
number     -----  數值
boolean    -----  布爾值
string     -----  字符串
undefined  -----  undefined
null       -----   null
object     -----  對象

**變量聲明**

JavaScript的變量名可使用_，數字，字母，$組成，不能以數字開頭。
聲明變量使用 var 變量名; 的格式來進行聲明
1.聲明變量時不用聲明變量類型，所有使用var關鍵字 
var a;
a = 3;
2.一行能夠聲明多個變量.而且能夠是不一樣類型

var name="jack", age=20, job="loyal";

注意：
1）變量名是區分大小寫的。
2）推薦使用駝峯式命名規則。
3）保留字不能用作變量名。

補充：
1）ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。
例如：for循環的計數器就很適合使用let命令。

2）ES6新增const用來聲明常量。一旦聲明，其值就不能改變。

3）保留着列表

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile


4.****JavaScript數據類型****

JavaScript擁有動態類型

var x; //此時x是undefined
var x = 1; //此時x是數字
var x = "str" //此時x是字符串

**數值（Number）**

JavaScript不區分整形和浮點型，就只有一種數字類型。

var a = 1.1;
var a = 1;
var a = 1e3;
var q = 1e-2;

還有一種NaN，表示不是一個數字（Not a Number）

經常使用方法：

parseInt("123") //123
parseInt("abc") //NaN
parseInt(111.1) //111
parseInt("11ss") //11
parseInt("ss11") //NaN
parseFloat("11.11") //11.11
parseFloat("11.1ss") //11.1
parseFloat("11.ss") //11
parseFloat("ss11.q") //NaN

**字符串（String）**

是由Unicode字符、數字、標點符號組成的序列；字符串常量首尾由單引號或雙引號括起；JavaScript中沒有
字符類型；經常使用特殊字符在字符串中的表達；
字符串中部分特殊字符必須加上右劃線\；經常使用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右劃線

var a = "Hello"
var b = "word!"
var c = a + c
console.log(c) //Helloword!

經常使用方法：

1）length                （這是一個屬性不是方法，不須要加括號）返回長度
2）trim()                移除字符串左右兩端的空白
3）trimLeft()            移除字符串左邊的空白
4）trimRight()            移除字符串右邊的空白
5）charAt(n)                返回字符串索引爲n的字符
6）concat(value,...)        拼接
7）indexOf(substring, start)返回子串位置，第一個參數爲子串，第二次個參數爲從哪一個位置開始找，
                            若是子串存在返回索引位置，存在沒找到返回-1，不存在報錯
8）substring(from, to)    根據索引獲取子序列（後者小交換後拿，若是後者會負數，交換後負數變爲0拿）
9）slice(start, end)        切片（存在負索引，找不返回空字符串）
10）toLowerCase()        大寫字母變小寫
11）toUpperCase()        小寫字母變大寫
12）split()                分割（若是不寫任何參數，原樣輸出，若是參數爲「」（空字符串，那麼會將每一個字符都切割出來））

注：拼接字符串通常使用「+」

~~slice和substring的區別~~
string.slice(start, stop)和string.substring(start, stop)：

二者的相同點：
若是start等於end，返回空字符串
若是stop參數省略，則取到字符串末
若是某個參數超過string的長度，這個參數會被替換爲string的長度

substirng()的特色：
若是 start > stop ，start和stop將被交換
若是參數是負數或者不是數字，將會被0替換

silce()的特色：
若是 start > stop 不會交換二者
若是start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
若是stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)


補充：

ES6中引入了模板字符串。模板字符串（template string）是加強版的字符串，用反引號（`）標識。
它能夠當作普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

// 普通字符串
`這是普通字符串！`
// 多行文本
`這是多行的
文本`
// 字符串中嵌入變量
var name = "Jack", time = "today";
`Hello ${name}, how are you ${time}?`

注意：
若是模板字符串中須要使用反引號，則在其面前要用反斜槓轉義。
JSHint啓用ES6語法支持:/* jshint esversion: 6 */

**布爾值（Boolean）**

Boolean類型僅有兩個值：true和false，也表明1和0，實際運算中true=1,false=0
布爾值也能夠看做on/off、yes/no、1/0對應true/false

var = true;
var = false;

""(空字符串)、0、null、undefined、NaN都是false

**null和undefined**

0.null表示值是空，通常在須要指定或清空一個變量時才使用，如 name = null;

1.Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。

2.當函數無明確返回值時，返回的也是值 "undefined";

3.null表示變量的值是空，undefined則表示只聲明瞭變量，可是沒有賦值。

**對象（Object）**

JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。

JavaScript 提供多個內建對象，好比 String、Date、Array 等等。

對象只是帶有屬性和方法的特殊數據類型。

**數組

數組對象的做用是：使用單獨的變量來存儲一系列的值。

var a = [1, 2, 'abc'];
console.log(a[1]); //輸出2

經常使用方法：
length                (屬性，不須要加括號)數組大小
push(ele)            尾部追加元素
pop()                獲取尾部元素
unshift(ele)        頭部插入元素
shift()                頭部移除元素
slice(start, end)    切片
reverse()            反轉
join(sup)            將數組元素鏈接成字符串
concat(val,...)        鏈接數組
sort()                排序
forEach()            將數組的每個元素傳遞給回調函數
splice()            刪除元素，並向數組添加新元素
map()                返回一個數組元素調用函數處理後的值得新數組

關於sort()須要注意：

若是調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，
是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（若有必要），
以便進行比較。

若是想按照其餘標準進行排序，就須要提供比較函數，該函數要比較兩個值，而後返回一個用於說明
這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：

若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。                
            
例子：
function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

**forEach()**

語法：
forEach(function(currentValue, index, arr), thisValue)


參數                                            描述
function(currentValue, index, arr)            必需。 數組中每一個元素須要調用的函數。
                                            函數參數:
                                            參數                描述
                                            currentValue    必需。當前元素
                                            index    可選。當前元素的索引值。
                                            arr    可選。當前元素所屬的數組對象。
thisValue                                    可選。傳遞給函數的值通常用 "this" 值。
                                            若是這個參數爲空， "undefined" 會傳遞給 "this" 值

**splice()**
語法：splice(index,howmany,item1,.....,itemX)

參數                            描述
index                        必需。規定從何處添加/刪除元素。
                            該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。
howmany                        必需。規定應該刪除多少元素。必須是數字，但能夠是 "0"。
                            若是未規定此參數，則刪除從 index 開始到原數組結尾的全部元素。
item1, ..., itemX            可選。要添加到數組的新元素


**map**

語法：
map(function(currentValue,index,arr), thisValue)

參數                                    描述
function(currentValue, index,arr)    必須。函數，數組中的每一個元素都會執行這個函數
                                    函數參數:
                                    參數                描述
                                    currentValue    必須。當前元素的值
                                    index            可選。當期元素的索引值
                                    arr                可選。當期元素屬於的數組對象
thisValue                            可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。
                                    若是省略了 thisValue ，"this" 的值爲 "undefined"

補充：

ES6新引入了一種新的原始數據類型（Symbol），表示獨一無二的值。它是JavaScript語言的第7種數據類型。


**類型查詢**

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。

對變量或值調用 typeof 運算符將返回下列值之一：

undefined - 若是變量是 Undefined 類型的
boolean - 若是變量是 Boolean 類型的
number - 若是變量是 Number 類型的
string - 若是變量是 String 類型的
object - 若是變量是一種引用類型或 Null 類型的


**運算符**

1.運算符分類

算術運算符：
    +   -    *    /     %       ++        -- 

比較運算符：
    >   >=   <    <=    !=    ==    ===   !==

邏輯運算符：
     &&   ||   ！

賦值運算符：
    =  +=   -=  *=   /=

字符串運算符：
    +  鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算


2.算術運算符：自增，自減

++i:先計算後賦值
i++：先賦值後計算


3.js是一門弱語言類型
可以進行數據轉換的叫作弱類型
console.log('1'==1)  //True
console.log('1'===1)  //False
  
強類型
print(1='1') //False

強類型與弱類型

靜態類型語言
一種在編譯期間就肯定數據類型的語言。大多數靜態類型語言是經過要求在使用任一變量以前聲明其數據類型來保證這一點的。Java 和 C 是靜態類型語言。 
動態類型語言
一種在運行期間纔去肯定數據類型的語言，與靜態類型相反。VBScript 和 Python 是動態類型的，由於它們肯定一個變量的類型是在您第一次給它賦值的時候。 
強類型語言
一種老是強制類型定義的語言。Java 和 Python 是強制類型定義的。您有一個整數，若是不明確地進行轉換 ，不能將把它當成一個字符串去應用。 
弱類型語言
一種類型能夠被忽略的語言，與強類型相反。JS 是弱類型的。在JS中，能夠將字符串 '12' 和整數 3 進行鏈接獲得字符串'123'，而後能夠把它當作整數 123 ，全部這些都不須要任何的顯示轉換。 
因此說 Python 既是動態類型語言 (由於它不使用顯示數據類型聲明)，又是強類型語言 (由於只要一個變量得到了一個數據類型，它實際上就一直是這個類型了)。


4.NaN

var d="Tom";
    d=+d;
    alert(d);//NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會獲得一個NaN數據
    alert(typeof(d));//Number

    //NaN特色:
    
    var n=NaN;
    
    alert(n>3);//false
    alert(n<3);//false
    alert(n==3);//false
    alert(n==NaN);//false
    
    alert(n!=NaN);//NaN參與的全部的運算都是false,除了!=

5.比較運算符：

等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所作的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。

  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碼,若是最高位相等,繼續取第二位比較.

6.邏輯運算符：

console.log(1&&3); //3  兩個爲真才爲真（0爲假，其餘的數字都表明真）
console.log(0&&3); //0  只要有一個爲假則爲假
console.log(0||3); //3  
console.log(2||3); //2

7.三元運算符

var a = 1;
var b = 2;
var c = a > b ? a : b

**流程控制**

順序結構(從上向下順序執行)
分支結構
循環結構

*分支結構*

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比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')