iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
6
Modern Web

重新認識 JavaScript系列 第 2

重新認識 JavaScript: Day 02 JavaScript 簡介

本系列文章已重新編修,並在加入部分 ES6 新篇章後集結成書,有興趣的朋友可至天瓏書局選購,感謝大家支持。

購書連結 https://www.tenlong.com.tw/products/9789864344130

讓我們再次重新認識 JavaScript!


JavaScript 是一門既簡單又複雜的程式語言,為什麼這麼說呢,簡單是因為它容易上手,打開編輯器敲敲鍵盤,到瀏覽器一刷新頁面,馬上就可以看到結果了; 說它複雜,是因為若是想要真正掌握這門語言的特性 (a.k.a 坑) ,不花時間研究是不可能的。

想要真正掌握 JavaScript,也許該從這門語言如何從最初的表單基本驗證器,發展至今成為 Web 領域不可或缺的存在,也許可以從它的歷史去理解這門語言的沿革與發展。

豆知識:JavaScript 昨天 (12/04) 剛過 22 歲生日!
http://tech-insider.org/java/research/1995/1204.html


JavaScript 的誕生與設計目標

早期那個 Web 還沒有 JavaScript 的年代,大部分的使用者都還在透過 28.8 kbit/s 的速率上網,但網頁的內容與複雜度日漸增加。那個時期,網頁的表單驗證完全依賴伺服器端的語言來驗證,如果只是打錯字,送出檢查後再被踢回來,來來回回也許就要花掉幾分鐘。

於是,Netscape (網景公司,當時知名瀏覽器廠商) 就決定著手開發一門在瀏覽器上執行的語言系統,專門用來處理這類簡單的驗證。這門語言就是 JavaScript 的前身,由 Brendan Eich 負責設計實作,據說第一個版本只花了十天時間。

最初的版本 (netscape2.0 beta1) 並沒有 <script> 標籤的設定,而是在表單元素中插入 onclick 的形式:

<input type="button" onclick="alert('hello, world!')">

這類現今仍可執行的 inline-script 方式,直到 beta2 開始才加入了 <script> 標籤的設定。

JavaScript 1.0 的設計目標,說穿了就是「讓網頁動起來」,最主要目的是讓網頁的元素可以透過程式語言來操作它們。所以像是表單之類的元素,如果你給它一個「id」屬性,那麼在網頁解析完成之後,它就會變成一個全域變數了:

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

<script>
 // "hello" reference to <input type="text" id="hello" value="HELLO">
 console.log(hello);
</script>

像上面這段 code,直到今日依然可以執行,而且完全相容,所以說因為 HTML 內的 id 屬性具有唯一性,且會自動變成全域變數,好處是 selector 的效率極佳,但請慎重使用。


JavaScript 的名字由來

這門剛誕生的程式語言,最初的名字其實並不是 JavaScript。

最初這個語言的專案名稱被取名叫「Mocha」,後來 Netscape 宣布要在 LiveWire (伺服器端環境) 啟用某個程式語言,於是這門程式語言就被叫做「LiveScript」,也就是我們後來所熟知的「JavaScript」。

但有趣的是,早在命名叫「LiveScript」之前,由於當時 Netscape 與 Sun (昇陽) 合作密切,且新誕生的這門程式語言其實有不少特性是由當時很火紅的 Java 借鑑而來,基於行銷考量,當時的 Netscape 高層其實早已決定要把這門語言命名叫「JavaScript」,但卻不小心把「LiveScript」這個開發者內部所訂定的名字公開了。直到同年 12 月,Netscape 與 Sun 發布聲明,正式啟用了「JavaScript」這個名字,就此沿用至今。

所以,Java 跟 JavaScript 到底有沒有關係?
大概就像是「臘腸」跟「臘腸狗」的關係吧,只是兩者的樣子有「一點點」類似,就把名字借來用了。


為何成為瀏覽器唯一指定內建程式語言?

由於 JavaScript 的發行獲得了成功,使得微軟在 1996 年發布 IE 3.0 的時候,也開始加入了腳本語言的支援,分別是 VBScript 與 JScript。

VBScript 是微軟自家開發的腳本型程式語言,可以把它看作是 VB 語言的簡化版,長久以來都只有 IE 可以執行,但自 IE11 起已不再支援 VBScript 了。

而 JScript 雖然同樣是由微軟自家開發,類似於 JavaScript。
早期的 JScript 可以當作是微軟想要與 Netscape 的 JavaScript 打對台的產品,但考量到相容性與市場 (開發者不會願意為不同的瀏覽器寫好幾份 code,而當時 Netscape 市佔比 IE 高),於是微軟、網景雙方(就網頁標準上)漸漸靠攏。

所以早期 如果你有看過類似網站建置百寶箱之類的網站 你可能會看到 <script language="javascript"><script language="jscript"> 不同版本,但現在 <script> 其實都無需再加入 language 屬性。

由於 Netscape 在 1996 年對 JavaScript 提出了標準化,第一個標準化版本 ECMA-262 在 1997 年就此誕生,也因為 Java 名稱上具有商標問題,ECMA-262 採用了 ECMAScript 作為語言名稱,JavaScript 此後成為了 ECMA-262 標準的實作語言,也變成瀏覽器唯一指定內建程式語言。

https://ithelp.ithome.com.tw/upload/images/20171205/200655042ZWPkmsmCo.jpg

至於微軟與網景的第一次瀏覽器大戰,與網景的沒落又是後話了

註:實際上在 IE 執行的 JavaScript 仍為 JScript,只是實作上依循 ECMAScript 標準。
註2:網站建置百寶箱 ( http://dob.tnc.edu.tw ) 現今已關站,算是我孩童時代的啟蒙網站之一。

https://ithelp.ithome.com.tw/upload/images/20171205/20065504m6XUZkEE9z.png
網站建置百寶箱


ECMAScript 與 JavaScript 的關係

https://ithelp.ithome.com.tw/upload/images/20171205/20065504iBJMZGtLL3.jpg

剛剛提到 ECMAScript 是 Javascript 的標準,換成通俗點的說法,ECMA-262 標準是規格書,而 JavaScript、JScript 這類語言,就是依循這份規格書所實作出來的產品了。

ECMA-262 標準在 1997 年提出第一個版本,而目前最廣為人知的應該是 1999 年底所提出的 ECMA-262 第三版,現在的瀏覽器,幾乎都能支援這個版本,又稱 ECMAScript 3,對應的實作為 JavaScript 1.5。

由於各方對 ECMAScript 第四版意見發生嚴重分岐,後來決定終止開發,只針對原有規範中一小部份的現有功能作改進,並發布為 ECMAScript 3.1,後來乾脆改名為 ECMAScript 5。

而那些爭議與比較激進的功能,則被加入一個叫 Harmony (和諧) 的專案中之後再議。
看來老外也挺懂和諧之道

2009 年 ECMAScript 5 正式發佈。
代號 Harmony 的專案被一分為二,將可行性較高的部分定名為「ES Next」繼續開發,後來演變成現在的 ECMAScript 6。 而另一個部分則定為「ES Next」的 next ,也許在未來的某天會有機會實作加入標準。

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

目前最新的版本是 ECMAScript 2017,在 2017 年的六月發佈。

註:已知唯一將 ECMAScript 第四版草案實作的程式語言是 Adobe 的 ActionScript 3.0。
註2:關於 ECMAScript v4 的八卦其實還滿精彩的,有機會也許可以寫一篇聊聊


講古時間就到此為止,下一篇開始正式來介紹 Javascript 基礎 (1): 「變數、型別、值與運算子」。


上一篇
重新認識 JavaScript: Day 01 前言
下一篇
重新認識 JavaScript: Day 03 變數與資料型別
系列文
重新認識 JavaScript37

2 則留言

0
konekoya
iT邦新手 5 級 ‧ 2017-12-06 07:52:49

寫的很好a,加油,期待接下來的文章 /images/emoticon/emoticon12.gif

Kuro Hsu iT邦新手 4 級 ‧ 2017-12-07 00:13:55 檢舉

/images/emoticon/emoticon08.gif

0
ShawnGood
iT邦新手 5 級 ‧ 2019-02-23 12:07:44

大概就像是「好人」跟「好男人」的關係吧 /images/emoticon/emoticon02.gif

我要留言

立即登入留言