JavaScript簡介與基礎語法

JavaScript簡介與歷史

JavaScript是學習前端開發必需要掌握的三大知識點之一，JavaScript是一種直譯式的腳本語言，是一種動態類型、弱類型、基於對象和事件驅動的語言，而且JavaScript的安全性比較好，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能，因此JavaScript是能夠直接插入HTML中的，JavaScript插入HTML後可由全部的現代瀏覽器執行。

在2016年通過GitHub的統計，JavaScript是2016年度最流行的編程語言，如下是 GitHub根據過去 12 月提交的 PR 數量來排名的，雖然不徹底準確，可是 PR 起碼錶明瞭項目的熱度與歡迎度，仍是值得可信的：

JavaScript歷史：

JavaScript誕生於1995年，現在全世界無數的網頁在依靠它完成各類關鍵任務，JavaScript已經從過去裝飾性的一種腳本語言轉變爲主流的編程語言，能夠用它來開發更大更復雜的程序。在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。由於Netscape與Sun合做，Netscape管理層但願它外觀看起來像Java，所以取名爲JavaScript。但實際上它的語法風格與Self及Scheme較爲接近。

在1992年，Nombas公司開始開發一種叫作C-minus-minus（簡稱Cmm）的嵌入式腳本語言。這個腳本語言捆綁在一個叫作CEnvi的共享軟件產品中，當Netscape Navigator嶄露頭角時，Nombas開發了一個能夠嵌入網頁中的CEnvi的版本。它們表明了第一個在萬維網上使用的客戶端腳本語言，然而Nombas絲毫沒有料到它的理念將會成爲因特網的一塊重要基石。

當網上衝浪愈來愈流行時，對於開發客戶端腳本的需求也逐漸增大。當時工做於Netscape的Brendan Eich，開始着手爲即將在1995年發行的Netscape Navigator 2.0開發一個稱之爲LiveScript的腳本語言，當時的目的是同時在瀏覽器和服務器端使用它。Netscape與Sun公司聯手及時完成LiveScript實現。就在Netscape Navigator 2.0即將正式發佈前，Netscape將其改名爲JavaScript，目的是爲了利用Java這個因特網時髦詞彙（就如同徽記瓜子跟安徽毫無關係，它其實是成都產的）。Netspace的賭注最終獲得回報，JavaScript今後變成了因特網的必備組件。

由於JavaScript1.0如此成功，Netscape在NetscapeNavigator 3.0中發佈了1.1版。恰巧那個時候，微軟決定進軍瀏覽器，發佈了IE 3.0 並搭載了一個JavaScript的克隆版，叫作JScript（這樣命名是爲了不與Netscape潛在的許可糾紛）。微軟步入Web瀏覽器領域的這重要一步雖然令其聲名狼藉，但也成爲JavaScript語言發展過程當中的重要一步（若是沒有微軟的垃圾瀏覽器IE，瀏覽器兼容性問題就不會那麼突出和嚴重）。

在微軟進入後，有3種不一樣的JavaScript版本同時存在：Netscape Navigator 3.0中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。與C和其餘編程語言不一樣的是，JavaScript並無一個標準來統一其語法或特性，而這3種不一樣的版本偏偏突出了這個問題。隨着業界擔憂的增長，這個語言標準化顯然已經勢在必行。1997年，JavaScript 1.1做爲一個草案提交給歐洲計算機制造商協會（ECMA），由來自Netscape、Sun、微軟、Borland和其餘一些對腳本編程感興趣的公司的程序員組成的TC39錘鍊出了ECMA-262，該標準定義了叫作ECMAScript的全新腳本語言。今後，Web瀏覽器就開始努力（雖然有着不一樣程度的成功和失敗）將ECMAScript做爲JavaScript實現的基礎。

儘管ECMAScript是一個重要的標準，但它並非JavaScript惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的JavaScript實現是由如下3個不一樣部分組成的：核心（ECMAScript）——JavaScript的核心ECMAScript描述了該語言的語法和基本對象；文檔對象模型（DOM）——DOM描述了處理網頁內容的方法和接口；瀏覽器對象模型（BOM）——BOM描述了與瀏覽器進行交互的方法和接口。從這裏不難看出因爲後二者的實現依賴於瀏覽器（一般也將BOM對象和DOM對象成爲瀏覽器宿主對象），所以在開發中也就不可避免的會遇到瀏覽器兼容性問題。

JavaScript功能：

一、動態的文件內容

JavaScript能夠直接輸出HTML標籤，而且使用程序變量更改輸出內容，創建動態文件的內容或圖片

二、更改HTML標籤的樣式和屬性

對於HTML標籤的屬性和CSS樣式，JavaScript能夠得到屬性和樣式值，而且動態更改其內容

三、窗體驗證和發送

JavaScript可以編寫程序代碼，在HTML窗體數據送到服務器錢，驗證用戶輸入的數據是否合理，創建客戶端窗體字段的驗證規則

四、處理網頁或HTML標籤的事件

JavaScript可以創建HTML網頁或各標籤的事件處理程序。例如當HTML文件加載完成，按下按鈕字段或超連接等HTML標籤的事件

五、Web應用程序

JavaScript爲客戶端的Script語言，在Client/Server應用程序中用來創建Client客戶端的應用程序，搭配服務器ASP、ASP.NET或其餘技術的應用程序創建完整的電子商務應用程序。

JavaScript基礎語法

JavaScript代碼須要寫在HTML的script標籤裏，script標籤是用於定義腳本代碼的，也能夠經過src屬性來引用外部的腳本文件。

script標籤能夠寫在任意的位置，標準的寫法是寫在head和body標籤之間。可是有一點要注意：網頁的解析也是從上至下的順序解析的，因此script標籤寫在前面，解析時就會先解析script標籤裏面的腳本代碼，反之，若是script標籤寫在後面，就解析完前面的代碼再解析script標籤裏面的腳本代碼。例如：我把script標籤寫在head和body標籤之間，那麼在解析執行script標籤裏面的腳本代碼時，body裏面的內容是不會被執行的，只有執行到body纔會開始執行body裏面的內容。要記得這種機制，以避免出現一些問題。

在HTML4的時候，還須要在script標籤中使用type或language屬性（不過language屬性不被同意使用）來聲明這個腳本語言的類型（由於腳本語言也是有不少種的，例如：ecmascript、php、c# Script、VBScript等等），在HTML5裏則沒有強制要求，不過儘可能寫上比較好，畢竟是用來定義腳本的 MIME 類型，省得之後出現意外狀況。

代碼示例：

運行結果：

JavaScript的執行結果是交給body去顯示在網頁上的，上面這一段就是一個簡單的打印語句。

簡單的介紹一下上面使用到的document對象，每一個載入瀏覽器的 HTML文檔都會成爲document對象，document對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。

提示：Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問。

至於write方法就是能夠容許腳本代碼向頁面中插入動態生成的內容，因此一個讓咱們能夠對頁面中全部的元素進行訪問，一個容許咱們動態插入內容，因此這樣就實現了一個打印語句。

script標籤是能夠在任意位置聲明多個的，順便演示一下type和language屬性的使用，代碼示例：

運行結果：

咱們能夠在瀏覽器的控制檯中按F12查看網頁元素，如圖能夠看到在瀏覽器上解析完成後的script代碼是交給了body執行：

以上都只是鋪墊，如今開始簡單介紹JavaScript裏的基本語法：

數據類型和變量的聲明方式：

和別的大多數編程語言不同，在JavaScript裏只有一個數據類型：var

var在JavaScript裏充當一個萬能的角色，由於僅有一個數據類型，因此這個數據類型可以存儲任意類型的數據，例如能夠存儲：數值類型、字符串類型、布爾類型、浮點類型、數組類型、對象類型等等。總之任何類型均可以存，因此var就有點相似於Java裏Object類型的味道。

變量的聲明方式則和Java是同樣的都是用「=」等於號來賦值，用「；」分號來結束。

在JavaScript也可使用「+」來鏈接字符串，例如鏈接」<br>」換行符。

代碼示例：

運行結果：

若是我br沒有使用引號引住就會在控制檯裏報錯，並不會把錯誤信息顯示在頁面上，因此咱們要在控制檯中查看錯誤信息，在瀏覽器中按F12就能夠進入控制檯：

運算符：

JavaScript的運算符和大多數的語言是同樣的，在這裏介紹一下主要的運算符：

1. 賦值運算符：=

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

3. 自增自減運算符：++  --

4. 複合運算符：+=  -=  *=  /=  %=

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

6. 邏輯運算符：&& || !

7. 位運算符：<<  >>  >>>  &  |  ~  ^

算術運算符代碼示例：

運行結果：

自增自減運算符代碼示例：

運行結果：

複合運算符代碼示例：

運行結果：

錯誤示例：

運行結果：

比較運算符與邏輯運算符代碼示例：

比較運算符與邏輯運算符都不能去鏈接字符串，否則的話結果就會是錯誤的，由於鏈接字符串後會把比較的數據類型轉換成字符串類型，例如：兩個數值類型的數據進行比較，其中一個數據鏈接字符串後就會自動轉換成字符串類型，這時天然會顯示結果爲false：

運行結果：

位運算符代碼示例：

位運算符也不可以鏈接字符串，否則也會轉換爲字符串類型，而且會結合在一塊兒，例如：1  >>  1 +  」<br>」 就會等於1  >>  」1<br>」

運行結果：

在JavaScript裏有個typeof運算符，這是一個比較運算符，用於比較數據的類型是什麼，typeof會返回一個字符串的結果。若是比較的數據類型是數值類型，那麼就會返回number，若是比較的數據類型是數值類型，那麼就會返回String，以此類推。

代碼示例：

運行結果：

思惟導圖：

流程控制語句：

條件分支語句：

1.三元運算符，和Java的寫法同樣：

代碼示例：

運行結果：

2.if else條件分支語句：

代碼示例：

運行結果：

3.switch條件分支語句：

代碼示例：

運行結果：

循環語句：

for循環：

代碼示例：

運行結果：

while循環：

代碼示例：

運行結果：

do while循環：

do while循環是先按照循環條件去執行完do裏面的內容，而後再執行while裏面的內容：

代碼示例：

運行結果：

for in循環：

for in循環是用來遍歷取數組下標的，相似於Java的for each，只不過for each取的是數組裏的值，而for in是取數組的下標。

代碼示例：

運行結果：

循環語句會用到的break和continue，JavaScript裏也有：

break能夠結束整個循環。

continue則是僅結束本次循環，而後進行下一次循環。

思惟導圖：

數組：

在上面的循環中也使用到了數組做爲for in的演示，JavaScript中的數組比較特別，這個數組沒有大小和類型的限制，長度能夠自動伸縮，能夠存儲任意類型，就像Java的Object類型的集合同樣，因此當作一個Object類型的集合去使用就能夠了。

經常使用的數組的聲明方式：

1. var s=new Array();

實例化一個數組對象，賦值給變量，這個變量就存儲了數組對象了，這個變量就是一個數組類型了。

2. var s=new Array(3);

在實例化數組對象的時候定義好數組長度，可是沒有用處，同樣能夠存儲超過這個長度的數據。

3. var s=new Array("a","v","d","2","1");

在實例化對象的時候，就賦予初始值。

4. var s=["1","d","f","h"];

雖然這個沒有實例化數組對象，可是這是聲明數組的方式之一，使用[ ]來表示這是一個數組，而且能夠在聲明時賦予初始值。

聲明數組與遍歷數組代碼示例：

運行結果：

思惟導圖：

函數（方法）：

JavaScript的函數聲明方式也有點特別，沒有權限修飾符，函數的靜態與實例區分在因而否用對象或者this關鍵字來聲明，函數即使有返回值也不用聲明返回值類型，直接return返回便可，由於JavaScript的數據類型只有一個還聲明什麼，一樣的參數都不須要聲明類型，直接寫參數名稱在括號裏就好了。

在JavaScript裏使用function來聲明方法，function是一個關鍵字，實際聲明函數就是在建立一個function對象，具備function對象的全部屬性和方法，因此在JavaScript中每一個函數實際上都是一個function對象。

JavaScript裏主要有三種函數聲明方式：

1. 函數聲明，這樣聲明方式須要有函數名稱，一個被函數聲明建立的函數是一個 Function 對象，具備 Function 對象的全部屬性、方法和行爲：

function 函數名稱(參數，參數){}

代碼示例：

運行結果：

2. 構造函數聲明方式，這種方式是建立一個新的Function對象，須要用變量去接收它，並且這種方式在代碼調用中是最爲低效，由於使用Function構造器生成的Function對象是在函數建立時解析的，這種函數只能執行return，這種方式最爲少用：

new Function([arg1[, arg2[, ...argN]],] functionBody);

代碼示例：

運行結果：

3. 函數表達式聲明方式，這種方式相似於第一種聲明方式，語法幾乎相同，函數表達式與函數聲明的最主要區別是函數名稱，在函數表達式中可忽略函數名稱，從而建立匿名的函數，這種聲明方式就須要用一個變量存儲它，實際存儲的也是一個Function對象。

代碼示例：

運行結果：

在JavaScript 的函數聲明中有一個概念叫作函數聲明提高。

JavaScript 中的函數聲明被提高到了函數定義。你能夠在函數聲明以前使用、調用該函數。

要注意的是：函數表達式和構造函數也就是第一種和第二種函數聲明方式不支持函數聲明提高，惟有函數聲明也就是第一種函數聲明方式支持函數聲明提高：

代碼示例：

運行結果：

思惟導圖：

面向對象：

JavaScript 的對象設計也比較特別，並非像Java那樣建立一個class類，而後在裏面聲明對象的屬性和行爲。JavaScript 是沒有class來聲明這是個類的，要設計一個類須要經過function 去設計。

JavaScript有三種設計對象的方式：

1. 經過實例化Object去獲得一個對象，並存放到變量裏，而後經過這個變量去設計對象：

代碼示例：

運行結果：

2.經過function聲明，和函數聲明差很少。並且同時至關因而個構造器，因此既能夠用於設計對象又能夠做爲函數聲明，在這種方式中須要使用this關鍵字來聲明實例的屬性和函數：

代碼示例：

運行結果：

3.這種設計方式比較簡單，只須要聲明一個var變量，而後在{ }裏寫上內容就能夠了，這種方式比new Object實例化的速度要快一些：

代碼示例：

運行結果：

異常捕獲：

JavaScript裏的異常捕獲的聲明方式和Java差很少，都是try catch，而且也有finally和throw。

代碼示例：

運行結果：

throw代碼示例：

運行結果：

另一種彈出窗口式的打印方式：

上面爲了方便演示因此都是使用在頁面上打印的方式進行打印數據，除了頁面上打印和控制檯中打印數據外，還有一種彈窗式的打印方式，當你打開頁面的時候就會彈出來一個窗口：

代碼示例：

運行結果：

以上JavaScript的基本語法就介紹這麼多，由於我是以有Java編程基礎的前提下去介紹的，因此並無介紹得那麼深刻，若是想對某個知識點了解得更加深刻些，或學習更多的JavaScript知識點，能夠參考如下兩個網站：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

http://www.w3school.com.cn/b.asp