【JS幼幼班】Step.01 學習，從「不要害怕」開始

本人是設計科班出身的，工作2X年來都是在商業設計和遊戲美術相關領域打滾，在近10年正式轉職網頁設計師，專長是繪圖、切版、撰寫HTML、CSS，因為之前待的公司在網頁上分工較細，一直都沒機會接觸到動態網頁，頂多都是繪圖和切版而已。直到後期開始需要用到大量的動態效果，但由於對程式並不理解，只能去找很多網路免費 jQuery 或 JavaScript 特效模板，來拼拼湊湊出想要的網站效果，也常常因為是別人撰寫好的特效樣板，當如果要改為自己或客戶需求的方式，打開原始碼只會一陣慘叫，根本不知從何下手。

在不想被社會淘汰的前提下，於是硬著頭皮捏著覽啪，開始自學了幾個月的 jQuery 和 JS。從免費學習資源 freeCodeCamp、Codecademy、iT邦幫忙大神們的鐵人賽文，加上便宜-百元左右(Udemy、Lidemy鋰學院)或不怎便宜-上千上萬元(六角學院、HiSKIO、Hahow)的付費線上課程，內容從初階到進階，甚至新的ES6語法等都學習完了，jQuery 倒是比較直覺簡單好撰寫，也足以應付網頁上大多需求。

但學習 JavaScript 卻一直都是我的痛點。老實說對它依然一知半解，尤其遇到測驗題就是腦子一片空白，更別說怎麼拆解問題。所以每次看到一堆網路大神說自己曾是零經驗小白，在自學了幾個月之後就變成可上線實戰的工程師，只覺得神屌。或許是我對程式語言的理解力太低，不然就是邏輯或組織架構能力不足，即使實作測驗頂多也只是跟著影片或題目Coding，沒有真正的吸收到如何實際有效運用。

從入門到超想放棄，JavaScript 之所以能夠勸退一堆新手不是沒有道理的。也許我用了不對的方法學習，所以我決定讓自己重新歸0，一邊當作是為自己累積實作經驗，一邊當作是教學相長，希望能給你我帶來一些學習上的助益。

-- 本文正式開始 --

JavaScript

歷史

肇始於網景公司(Netscape)，由網景工程師 Brendan Eich 在 1995年所發明，據說當初僅花了10天就完成(當然也就造就了不少奇妙的Bug)。最初命名為 Mocha，同年9月改名為 LiveScript，12月又被重新命名為 JavaScript。名字之所以變來變去，是當時網景與昇陽組成的開發聯盟，行銷策略原因只是為了讓這門語言搭上 Java 這個程式語言「熱詞」，才臨時改名為JavaScript，日後這也成為大眾對這門語言有諸多誤解的原因之一。(就像「狗和熱狗」，或「太陽和太陽餅」根本毫無關係，有沒有被騙了很久的感覺...)

翻白眼

JavaScript 是什麼？(以下簡稱JS)

早期網頁都是靜態顯示，為了讓網頁更加生動活潑，於是便誕生了 JavaScript。
JS 是一種程式語言，以純文件形式提供「腳本」(即程式內容)。腳本可以直接寫在 html 裡面，或在頁面引用外部連結，並在加載的時候自動執行。

現今的 JS 在瀏覽器、服務端或在有搭載任意 JS 引擎(或稱為「JS 虛擬機」)的設備中皆可執行。

JavaScript 引擎：
它就是理解並執行　JavaScript 程式碼的解釋器，有點像人對語言的處理。

目前市面上主要網頁瀏覽器的 JS 引擎整理如下：

JS 引擎代號	瀏覽器/執行環境	瀏覽器版本	說明
V8	Google Chrome	v1.0～v3.0	用C++編寫，開放原始碼
V8	TrifleJS、Node.js...等
SpiderMonkey	Mozilla Firefox	1.0～3.0	第一款JS引擎
TraceMonkey	Mozilla Firefox	3.5～3.6	基於實時編譯的引擎，其中部份代碼取自Tamarin引擎
JaegerMonkey	Mozilla Firefox	4.0以上	結合追踪和組合碼技術大幅提高性能，部分技術借鑿了V8、JavaScriptCore、WebKit
Chakra (JScript引擎)	Microsoft Internet Explorer	9 (32bit)、10、11	用C++編寫，開放原始碼
Chakra (JavaScript引擎)	Microsoft Edge		用C++編寫，開放原始碼
Rhino	HTMLUnit		用Java編寫，開放原始碼
JavaScriptCore	Apple Safari		開放原始碼，用於webkit型瀏覽器
Nitro	Apple Safari	4	JavaScriptCore 被改寫為SquirrelFish，升級版本為QuirrelFish Extreme，也叫做Nitro
Linear A	Opera	4.0～6.1
Linear B	Opera	7.0～9.2
Futhark	Opera	9.5～10.2
Carakan	Opera	10.50以上
KJS，KDE的ECMAScript／JavaScript引擎	Konqueror		最初由哈里波頓開發，用於KDE專案瀏覽器

簡介

JavaScript 是當前網路上最流行，也是唯一被各家瀏覽器所共同支援的程式語言，同時亦是一種跨平台、輕量級、直譯式、物件導向、動態型別、弱型別的腳本語言。這門語言可用於 HTML 和 Web，更可廣泛用於伺服器、桌上型電腦、筆記本電腦、平板電腦和手機等設備。由於它不提供對內存或 CPU 的底層訪問，所以也被稱為一種安全的程式語言。

雖然作為獨立語言並不實用，但它可是為了能簡單嵌入其他產品和應用程式而設計。若寄宿在主體環境時，可以與環境中的物件相連，並以程式控制這些物件。雖然初期是用在網頁互動上，但它已不止局限在瀏覽器，也能應用在伺服端(如node.js)、手機app開發、遊戲開發、互動藝術等等。

版本

JavaScript 是 1996 年創造的，於隔年 1997 年被網景公司提交給 Ecma 國際制定為標準。而 ECMAScript 簡稱 ES，是一種通用的程式語言，由 Ecma 國際在 ECMA-262 進行標準化。從 IE 3.0 開始，很多瀏覽器開始使用 ECMAScript。

所以簡單來說 ES 是 JS 的標準，目的是讓不同瀏覽器之間能根據 spec 版本來實作。類似市面上的電腦鍵盤，上面的字母、符號、方向鍵等，順序排列幾乎都是相同的位置，只是差在外型各有區別，這是因為各廠商皆遵守了相同的標準規範。而 JS 只是其中一種實作和擴充的程式語言，雖然 JS 相容於 ES 規範，但 JS 還提供 ES 未定義的特性。

當 ECMAScript 發布第三版(即 ES3)之後，便成為當時所有瀏覽器支援的程式語言，ES 後面的數字是版本號碼。從 2015 年起，改為以年份命名（如：ECMAScript 2015、ECMAScript 2016、ECMAScript 2017...），而因目前瀏覽器兼容性已漸漸提高，舊的瀏覽器也幾乎快被淘汰，因此最廣泛被使用的版本為改革幅度最大的 ES6 版。

儘管瀏覽器的 JS 引擎都能理解 JS，但有些瀏覽器的理解能力更強，對它的支持度亦不一樣。因此每當新的 ES 發布，JS 並沒有一次性支援所有新特性，這取決於引擎開發者是否有陸續開放新的支援。

ECMAScript Spec 版本演化表：

版本簡稱	版本官方名稱	說明
ES1	ECMAScript 1 (1997)	第一版
ES2	ECMAScript 2 (1998)	編輯更改
ES3	ECMAScript 3 (1999)	新增「正規表達式」、try、catch、switch、do-while
ES4	ECMAScript 4	從未發布
ES5	ECMAScript 5 (2009)	支持 JSON、新增「嚴格模式」、String.trim()、Array.isArray()、數組迭代等方法、允許對象文字的尾隨逗號
ES6	ECMAScript 2015	新增 let 和 const、默認參數值、Array.find()、Array.findIndex()
ES7	ECMAScript 2016	新增「指數運算符」、Array.includes()
ES8	ECMAScript 2017	新增「字串填充」、Object.entries()、Object.values()、異步函數、共享內存
ES9	ECMAScript 2018	新增 rest、spread、異步迭代、Promise.finally()、在迴圈中使用await、更多「正規表達式」
ES10	ECMAScript 2019	新的數據類型 BigInt，更友好的JSON.stringify、新增Array的flat()和flatMap()、String的trimStart()和trimEnd()、Object.fromEntries()、簡化try、catch，修改catch綁定...等
ES11	ECMAScript 2020	新增 Promise.allSettled、可選鏈「?」、空值合併運算「??」、動態載入dynamic-import、globalThis
ES12	ECMAScript 2021	結合邏輯運算符和賦值表達式，新增「數字分隔符」、replaceAll、Promise.any、弱引用WeakRefs、Finalizers、FinalizationRegistry

ES6 對各瀏覽器的支持度：

和網頁的關聯性

網頁的基礎語言架構為 HTML、CSS、JS。看下方圖表就知道了，他們各司其職卻又互相牽動，就像人體構造一樣，少一個都不行。

網頁結構

名稱	語言類別	負責項目	主要功能
HTML	標記語言	網頁「結構」(類似骨骼)	網頁的「靜態」內容
CSS	樣式規則語言	網頁「樣式」(類似皮膚外觀)	「美化」網頁
JavaScript	腳本語言	網頁「行為」(類似中樞神經)	網頁的「動態」內容

可以做的事？

瀏覽器中的 JS 可以做與網頁操作、用戶交互回應及 Web 伺服器相關的所有事情。

在網頁中新增新的 html 頁面。
修改網頁原有內容(html)和網頁的樣式(css)。
回應用戶行為，如滑鼠游標的點擊，指針的移動，按下按鍵...等。
向遠端伺服器發送請求，下載和上傳文件(AJAX 和 COMET 技術)。
獲取或設置 cookie，向網頁訪問者提出問題或發送訊息。
記住客戶端的數據。
用於行動裝置(取決於用戶使用何種裝置)。
將一些處理從伺服端改到客戶端，降低伺服器負載....等

不能做的事？

基於使用者的個資或訊息安全，在瀏覽器中的 JS 能力是受限的。目的是防止惡意網頁擷取用戶私人訊息或損害用戶數據。限制如下：

網頁中的 JS 不能讀、寫、複製和執行你硬碟上的任何檔案或文件，因為它沒有直接訪問操作系統的功能。
瀏覽器允許 JS 做硬碟文件相關的操作，但這些操作是受到限制的。只有當用戶做出特定行為時，JS 才能操作這個文件。如：把硬碟中的文件「拖曳」到瀏覽器中，或者通過 <input> 標籤選擇了硬碟中的文件等。
許多需要用到相機或麥克風來進行的功能，都必須獲得用戶的明確許可，才可以繼續執行。所以啟用含有 JS 的網頁，並不會偷偷地啟動網路攝影機觀察你，甚至把你的資訊發送到國家安全機構、或政府單位、或任何有心人士...。
網頁中不同的標籤頁或分頁之間通常互不相關。但有時候也會有聯繫。如：某標籤頁可透過 JS 打開另一個標籤頁(還在同一網站內)，但如果兩個標籤頁打開的不是同一個網站（域名、協議或者端口任一不相同的網站），它們之間都不能相互通信，這就是「同源策略」。為了解決這個問題，兩個標籤頁必須都包含一些處理這個問題的特定 JS程式碼，並均允許數據交換，而這個限制也是為了用戶的信息安全。
JS 可以輕鬆地通過網路與當前頁面所在的伺服器進行通信，但是從其他網站(或網域)的伺服器中接收數據的能力被削弱了。儘管可以，也需要來自遠端伺服器的明確協議(在HTTP header中)，這動作也是為了用戶的訊息安全。

網頁中的運作模式(瀏覽器渲染)

網頁的加載性能，與瀏覽器的渲染機制關係密不可分，身為前端開發人員，必須先搞清楚瀏覽器背後的渲染機制，才能在開發中進行性能優化，所以我們就來了解一下瀏覽器是如何渲染頁面的吧：

首先是我們要讀取一個網站，必須先有它的網址(URL)，然後在你的瀏覽器(如：Google Chrome)上打上這段長長的網址。
接著瀏覽器就會進行域名解析，並向服務器發起請求，並得到這個網址內的 HTML、CSS、images、JavaScript等。
然後你的瀏覽器在得到資料後，便會開始解析 html 並構建 DOM(DOM樹)，且由上而下依序讀取顯示。
讀到 CSS 資料的時候，就會開始構建 CSSOM(CSS樹)，並和 DOM 一起生成 Render Tree(渲染樹)，計算出每個節點在螢幕中的位置，然後根據渲染樹對頁面進行渲染。
當讀到 JS 檔案時，網頁渲染會暫停，這時瀏覽器會先把 JS 腳本先執行完，再渲染後面的內容。所以 JS 腳本或檔案要放在 HTML 的最後 </body> 結束標籤之前，才不會導致頁面被中斷讀取過久而影響使用者體驗。(很重要，考試會考)
最後解譯器可以透過它的 JS 引擎幫我們編譯，並且即時顯示出效果，並透過顯卡把完整的頁面顯示到螢幕上，也就是我們打開網頁讀個幾秒後看到的樣子。