---
# System prepended metadata

title: JavaScript 的誕生
tags: [' JavaScript']

---

JavaScript 的誕生
===

### 什麼是語言
- 計算機是一個由人來控制的機器，人讓他幹嘛，他就得幹嘛。
- 語言就是人和計算機交流的工具，人類通過語言控制、操作計算機。
- 編程語言和中英文本質沒啥區別，只是語法比較特殊。
- 語言的發展：
    1. 紙帶機：機器語言（1010 二進位編碼）
    最底層的語言直接執行。
    3. 彙編語言：符號語言
    通過彙編器，翻譯成機器指令後執行。一條彙編指令，對應一條機器指令。
    5. 現代語言：高級語言（c++、js 等）
    三種執行方式：
    - 編譯執行：程序語句先通過編譯器，將一條語句翻譯成多條機器指令，然後執行。
    - 解釋執行：程序語句逐條被解釋器解釋執行，不需要編譯成機器指令。
    - 編譯和解釋相結合的執行方式：程序先被編譯成字節碼文件，然後字節碼被解釋器解釋執行。

### 起源
- JavaScript 誕生於 1995 年，它的出現主要用於處理網頁的前端驗證。
- 所謂的前端驗證，是指檢查用戶輸入內容是否符合一定規則。
- 比如：用戶名的長度、密碼的長度、郵箱的格式等。

因為當時網速慢，假若在伺服器驗證表單，一來一往之下將會消耗許多時間，JavaScript 便是為了解決此問題而誕生。

使用 JavaScript 可以在瀏覽器驗證表單格式是否正確，由於不需要上傳至伺服器再驗證，因此速度比較快，使用者體驗比較好。

### 設計目標
- 最初版本 (netscape2.0 beta1) 沒有 `<script>` 標籤，而是在表單元素插入 onclick 的形式：

    ```html
    <input type="button" onclick="alert('hello, world!')">
    ```
    現今仍可執行此類 inline-script 方式，直到 beta2 才加入 `<script>` 標籤。

- JavaScript 1.0 的設計目標，是「讓網頁動起來」，讓網頁元素可以透過程式語言操作。

    如果給元素「id」屬性，在網頁解析完成之後，它就會變成全域變數：

    ```js
    <input type="text" id="hello" value="HELLO">

    <script>
        console.log(hello); 
        <!-- <input type="text" id="hello" value="HELLO"> -->
    </script>
    ```
    
    上面這段 code，至今仍能執行，而且完全相容。因為 id 屬性具有唯一性，且會自動變成全域變數，好處是 selector 的效率極佳，但請慎重使用。

### 簡史
- 由網景公司發明，起初命名為 liveScript，後來由於 SUN 公司的介入，更名為 JavaScript。
    - 最初專案取名為 Mocha，後來 Netscape 宣布要在 LiveWire（伺服器端環境）啟用某個程式語言，於是被稱為 LiveScript。
    - 不少特性借鑑當時很紅的 Java，基於行銷考量，高層將這門語言命名為 JavaScript，但不小心將 LiveScript 這個開發者內部訂定的名字公開。
    - 直到同年 12 月，Netscape 與 Sun 發布聲明，正式啟用 JavaScript 這個名字。
- 1996 年微軟公司在其最新的 IE3 瀏覽器引入自己對 JavaScript 的實現 JScript。
    - 由於 JavaScript 的發行獲得成功，使得微軟也開始加入腳本語言的支援，分別是 VBScript 與 JScript。
    - VBScript 可以看作是 VB 語言的簡化版，長久以來只有 IE 可以執行，但自 IE11 起已不再支援 VBScript。
    - JScript 類似於 JavaScript。微軟考量到相容性與市場 ( 開發者不願意為不同的瀏覽器寫好幾份 code，而當時 Netscape 市佔比 IE 高 )，於是微軟漸漸與網景的網頁標準靠攏。
- 於是市面上存在兩個版本的 JavaScript，網景公司的 JavaScript、微軟的 JScript。
    - 早期會有  `<script language="javascript">` 和 `<script language="jscript">`，現在 `<script>` 無須加入 language 屬性。
- 為了確保不同瀏覽器運行的 JS 標準一致，所以幾個公司共同訂製 JS 的標準命名為 ECMAScript。
    - Netscape 在 1996 年對 JavaScript 提出標準化，第一個標準化版本 ECMA-262 在 1997 年誕生。
    - 因為 Java 名稱具有商標問題，ECMA-262 採用 ECMAScript 作為語言名稱，JavaScript 成為 ECMA-262 標準的實作語言，也變成瀏覽器唯一指定內建程式語言。
    - 在 IE 執行的 JavaScript 仍為 JScript，只是實作上依循 ECMAScript 標準。

由於網景敵不過微軟，索性將自己的 JavaScript 開源，交付給歐洲電腦製造商協會（現為 Ecma國際），並由該協會制定標準，為 ECMAScript（ES）。

### 時間表
- 1995 年，網景公司開發 JavaScript
- 1996 年，微軟發布和 JavaScript 兼容的 JScript
- 1997 年，ECMAScript　第一版（ECMA-262） 
- 1998 年，ECMAScript　第二版
- 1998 年，DOM Level1 的制定
- 1998 年，新型語言 DHTML 登場
- 1999 年，ECMAScript　第三版
- 2000 年，DOM Level2 的制定
- 2002 年，ISO / IEC 16262:2002 的確立
- 2004 年，DOM Level3 的制定
- 2005 年，新型語言 AJAX 登場
- 2009 年，ECMAScript　第五版
- 2009 年，新型語言 HTML5 登場

### ECMAScript
ECMAScript 是 Javascript 的標準。通俗說法，ECMA-262 標準是規格書，而 JavaScript、JScript 這類語言，是依循這份規格書實作出來的產品。

目前最廣為人知的是 1999 年底提出的 ECMA-262 第三版，又稱 ECMAScript 3，對應的實作為 JavaScript 1.5。

由於各方對 ECMAScript 第四版發生意見分岐，後來決定終止開發，只針對原有規範修改，並發布為 ECMAScript 3.1，後來改名為 ECMAScript 5。而那些爭議與比較激進的功能，則被加入 Harmony (和諧) 專案日後再議。

2009 年，代號 Harmony 的專案被一分為二，可行性較高的部分定名為「ES Next」繼續開發，也是現在的 ECMAScript 6。另一部分則定為「ES Next」的 next ，也許在未來的某天有機會實作加入標準。

自 ECMAScript 6 開始，ECMAScript 標準委員會 (TC39) 決定將新標準改為一年一修。因此包括 ES6 開始，往後的版本都定為 ECMAScript 2015 (ES6)、ECMAScript 2016、ECMAScript 2017 持續下去。

### 實現
- ECMAScript 是一個標準，而這個標準需要由各個廠商去實現。
- 不同瀏覽器廠商對該標準會有不同的實現。

| Internet Explorer | Safari |  Carakan |
| -------- | -------- |-------- |
| JScript / Chakra | JavaScriptCore | Carakan |

| FireFox | Chrome |
| -------- | -------- |
| SpiderMonkey | v8 |
| 與網景公司有比較深的淵源 <br> 前身是網景公司的 Navigator（航海家）瀏覽器 | v8 引擎速度最快 |

- ECMAScript 是 JavaScript 的標準，通常情況視為同義詞。
- 但是，JavaScript 的涵義卻要更大一些。
- [完整的 JavaScript](https://hackmd.io/4wlwkbnpScOFCSDjE3stXg?view) 應由下圖三部分構成：
    ![](https://i.imgur.com/JNQgR7c.png)

### 特點
- 解釋型語言
    - 計算機只認識 1010 二進位，常規語言（JAVA）需要編譯成 1010 二進位。
    - 但是，JS 寫完直接運行，不需要額外編譯。
- 類似於 C 和 Java 的語法結構
    - 所有語言的語法結構與 C 類似。
- 動態語言
    - 變量的值比較任意，可以保存任意類型的數據。
- 基於原型的面向對象

### 參考資料
- [JavaScript 簡介](https://ithelp.ithome.com.tw/articles/10190685)
- [JavaScript入門系列：BOM和DOM筆記](https://www.happycoding.today/posts/43)