JavaScript快速入門（一）——JavaScript概覽

時間 2019-11-15

原文原文鏈接

本文不是參考手冊式文章，僅適用於對JS產生一個大體的認知，如需JS的詳細語法與應用請移步w3schooljavascript

JavaScript是什麼？

JavaScript的誕生

在1995年先後，當時世界上的主流帶寬爲28.8Kbps，如今世界平均下載帶寬爲21.9Mbps（數據來源於http://www.netindex.com）。當時的網民，每提交一次表單，都須要等待好久才能收到服務器的迴應，甚至極可能等了幾分鐘收到的倒是說缺乏了某一項。爲了改善用戶體驗，嵌入瀏覽器客戶端的能實現簡單表單判斷的腳本誕生了，這就是JavaScript。

JavaScript最先是工做於Netscape （網景公司）的 Brendan Eich爲即將在1995年發行的NetscapeNavigator 2.0（NN2.0）開發的，當時叫作LiveScript。因爲當時是和很是熱門的Sun公司合做的，爲了遇上當時的潮流——Java語言，這門語言被命名爲JavaScript。

JavaScript跟Java有什麼關係？

這也是外行人聽到JavaScript的第一反應，也是這門語言被詬病最多的問題之一。

嚴格的說，沒有半毛錢關係。若是非要扯上關係，也許就是二者的部分函數相同、面向對象思想、判斷結構、循環語句相同等等等等，但這些顯然不是Java的專利，而是編程語言的共識。

JavaScript的標準化及發展歷史

JavaScript推出時，用戶體驗更好的NN 瀏覽器主宰了瀏覽器市場，而微軟一直在追趕。在推出IE3的時候，微軟發佈了VBScript並以JScript爲名，實際上和Netscape的JavaScript沒有多大區別（用今天的話來說就是山寨）。面對微軟的競爭，Netscape和Sun公司將本身的JavaScript草案提交給ECMA（歐洲計算機制造商協會）對JavaScript進行了標準化，最後造成了ECMAScript 的第一個版本（ECMA-262）。

有意思的是，網景公司在標準化JavaScript以後，內部卻出現了問題，JavaScript的研究停滯，而微軟則趁機趕超，推出了IE4，內置了第一個遵循ECMA規範的JavaScript引擎，比NN提早了一年。再加上微軟系統逐步佔領計算機操做系統市場，其預裝的IE瀏覽器市場份額逐漸加大，NN不斷被擠佔市場。然而，當微軟失去了最大的對手後，它就沒有了發展的動力，IE6~IE8，不管是界面渲染仍是腳本執行，都互不兼容，成爲瀏覽器史上的一朵奇葩，也是前端開發者的噩夢。

v1 1997年06月首版
v2 1998年06月格式修正，以使得其形式與ISO/IEC16262國際標準一致
v3 1999年12月強大的正則表達式，更好的文字鏈處理，新的控制指令，異常處理，錯誤定義更加明確，數輸出的格式化及其它改變
v4 未完成...可能更明確的類的定義，命名空間等等...
v5 2009年12月新增「嚴格模式（strict mode）」，一個子集用做提供更完全的錯誤檢查,以免結構出錯。澄清了許多第3版本的模糊規範,and accommodates behaviour of real-world implementations that differed consistently from that specification。增長了部分新功能,如getters及setters,支持JSON以及在物件屬性上更完整的反射。

****2004年6月歐洲計算機制造商協會發表了ECMA-357標準，它是ECMAScript的一個擴延，它也被稱爲E4X（ECMAScript for XML）。

JavaScript跟ECMAScript有什麼關係？

其實問題應該是JavaScript、JScript、ECMAScript三者有什麼關係。實際上，ECMAScript是總的規範，JavaScript和JScript都是依照這個規範開發的，和ECMAScript相容，但包含了超出ECMAScript的功能。不過，如今不管是哪一種，都通稱爲JavaScript，只因其最先出現，影響力最大，名字流傳至今。

JavaScript能幹什麼？

網頁上面，一切須要邏輯處理的操做均可以由JavaScript來完成。譬如：

表單驗證
動畫效果
網頁遊戲
倒計時
……

還有不少不少種應用，在這裏不贅述，相信你們學會這門語言以後會發現不少應用到的地方。

爲何要學JavaScript？

由於你別無選擇，只有JavaScript能夠控制全部經常使用的瀏覽器，並且JavaScript是世界上最重要的編程語言之一，學習web技術必須學會JavaScript。
JavaScript是一種優美的語言，它很好，因此咱們要學

JavaScript的定位

JavaScript是一門輕量級的腳本語言，不須要編譯，由JavaScript解析引擎解析運行（通常指瀏覽器，固然不排除node之類的解析器）
JavaScript擁有非函數式語言特性、函數式語言特性和動態語言特性，它的語法很是靈活
JavaScript是一門面向對象的編程語言，在JavaScript界有一句話：萬物皆對象。其繼承是基於原型的繼承（我以前已經專門寫了一篇闡述原型繼承的文章）
JavaScript是一門類C語言，因此只要學過C的人都很容易上手JavaScript
JavaScript的編寫不須要編譯器，而只須要文本編輯器（記事本就免了，這裏強烈推薦sublime text）

JavaScript有什麼？

如今你們用的JavaScript包含了三大部分：DOM、BOM、ECMAScript（或稱core js）。

DOM

這裏默認你們對HTML、CSS至少有所瞭解，若是是直接跳過HTML、CSS來看本文的話，先看此處。

DOM，文檔對象模型（document object model）

咱們知道，XHTML要求標籤必須閉合，嵌套必須正確。而標籤的嵌套，就產生了父子關係（或者說，祖先-後代關係）。而DOM，提供了大量的API，讓咱們能夠輕鬆操做DOM樹。後面我會開一篇文章專門講JS DOM。

使用DOM，咱們能動態修改頁面內容，調整樣式等等，這也是JS多樣化的一個體現。

BOM

BOM，瀏覽器對象模型（brower object model）

和DOM相似，只不過主體變成了瀏覽器。瀏覽器一樣提供了大量的API，其中部分對JS開放，爲咱們提供了操做瀏覽器窗口的方法。

常見用處：

彈出新瀏覽器窗口的能力；
移動、關閉和更改瀏覽器窗口大小的能力；
可提供WEB瀏覽器詳細信息的導航對象；
可提供瀏覽器載入頁面詳細信息的本地對象；
可提供用戶屏幕分辨率詳細信息的屏幕對象；
支持Cookies；
Internet Explorer對BOM進行擴展以包括ActiveX對象類，能夠經過JavaScript來實現ActiveX對象。

ECMAScript core

也叫JS core，隨便怎麼叫，意思同樣，都是表示JS這門語言的核心組成，包括變量定義，垃圾回收，語法，做用域等等。和上面提到的DOM和BOM不一樣，它們只要求咱們能使用這些API，而ECMAScript core則是這門語言的精髓所在，須要不斷鑽研。下一章將進一步講JS的語法。

JavaScript的使用

行內式

行內式即寫在標籤中的JavaScrip，例如咱們在HTML中寫入：

<button onclick="alert('be clicked');">點擊</button>

當咱們點擊按鈕時，將會彈框顯示"be clicked"。

但注意，強烈不建議這麼作，由於這樣會給維護帶來巨大的麻煩，每次須要更改事件咱們都須要先找到該元素，而後修改其javascript內容，並且這些javascript代碼也沒法複用。

另外，寫在標籤中的事件須要帶'on'，並且標籤內只能經過事件引入js，而不能寫簡單的js表達式

內嵌式

內嵌式即在html的script標籤中寫js代碼，作法是在HTML中新增一個script標籤，而後在標籤中間插入你的任意js代碼，以下：

<html>
    <body>
        <button id="btn">點擊</button>
    </body>
    <script>
        <span style="font-family: Arial, Helvetica, sans-serif;">var btn = document.getElementById("btn");</span><pre name="code" class="javascript">        btn.onclick = function() {
            alert("be clicked");
        }

</script></html>

用內嵌式的話，就比行內式自由不少，能夠寫更多的代碼，也能夠避免引號的轉義問題，維護也變得更輕鬆。但問題也是存在的，這些代碼只能適用於這個頁面，而沒法被其餘頁面使用。

外聯式

外聯式把以上兩種形式的缺點所有解決了。作法以下：

先新建一個文件，把後綴改成.js。例如，咱們新建一個click.js文件，而後把剛纔寫的內嵌式裏面的js代碼拷貝進去（注意不包括script標籤）

var btn = document.getElementById("btn");
btn.onclick = function() {
     alert("be clicked");
}

而後在HTML中經過script標籤引入

<html>
    <body>
        <button id="btn">點擊</button>
    </body>
    <script src="click.js"></script>
</html>

這樣的好處在於一樣的js代碼能夠被多個HTML頁面共享，壞處是增長了文件數，增大了請求所需時間，因此應加強代碼的複用性，而且最後要合併js文件（把不一樣的js文件合併成一個js文件）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。