Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！
這篇文章專給…
- 彷彿聽過，對JS 似曾相似，但從來沒有真正了解
- 愛用Google analytics & inbound marketing (Hubspot) 的行銷人
- 覺得跟前端工程師錯頻，想了解一下他們星球的語言
- 想學互動式網頁設計，創建屬於自己的第一個網頁天堂
📌 首先，我們先來談談什麼是 DOM 和 Javascript ＆DOM 之間的關係吧！
DOM 的中文全名為文件物件模型 (英文：Document Object Model)，它可以被理解成網頁的標準程式介面 (API)，也可以被想像成一張族譜，裡頭的樹狀結構表示著一層又一層的物件。
根據 W3C （全球資訊網協會），DOM 的定義：
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
簡言之，DOM 就是個被完整定義的介面，以便檔案的日後動態修改和更新。
深入解釋：DOM所管理的每一筆資料都是一個節點(Node)，節點有分為元素節點、文字節點和屬性節點，而每一個物件導向的節點都擁有各自的屬性 (property) 以及方法 (method)，我們也可以透過 DOM 的屬性與方法來進一步改變網頁內容、架構和風格。
下圖為 DOM 的樹狀結構，由圖可見，層級結構嚴謹、隸屬明確（上層為父、下層為子、左右為手足節點），因此之後當瀏覽器載入網頁時，Javascript 需要存取檔案或是增減、搜尋網頁中的元素也相對輕鬆容易。
DOM 最常用於 HTML 模組中，這裡直接來舉個例：
<!DOCTYPE html> <html> <head> <title>Welcome to Paradise!</title> </head> <body> <section> <a href="https://blog.happycoding.today/javascript-%e5%ad%b8%e7%bf%92%e6%97%a5%e8%a8%98%ef%bd%9ciris-%e7%a8%8b%e5%bc%8f%e5%b0%8f%e7%99%bd-%ef%bc%834/">Blog</a> </section> </body> </html>
如果有寫過 HTML 的程式白白們應該會知道基本寫法，像是有<html>、<head>、<body>、<section> 等等標籤（標籤需有對稱的前後兩組，用以包夾文字或是代碼）。以上舉的例子則是最基礎簡潔的幾行程式碼，有慧根的白白應該有發現這幾行程式碼暗藏的 DOM 層級概念。最上層為 <html>，緊接著是 <head> 和 <body>。在 <head> 底下有 <title>，<title> 底下有文字：Welcome to Paradise!；另外一邊則是在 <body> 之下先是一個分區 <section> ，分區下有個超連結 <a>，<a> 裡頭附著一段網址：（不要懷疑～就是我的部落格連結！）😝
最後，<a> 之下再有一層文字：Blog。螢幕上你將會看到如以下的顯示結果👇
註🖋：一個大標：Welcome to Paradise! ，下一行跟著超連結化的 Blog 文字，而此超連結連結至我的第四章日記！
白白們要注意的是，我們初學需要特別著墨 DOM 架構的原因無它，就是要清楚整體資料節點的邏輯架構，以優化我們未來撰寫程式的流暢度、加深我們對於 JS 的了解和協助我們更不容易在層級方面出 bug。
📌 你有聽過 Javascript ES6 嗎？如果有，那你知道 ES6 確切是什麼嗎～ES6 和 Javascript 之間究竟有什麼關聯？
這就讓我娓娓道來😎 坐穩不要跟丟嘍！
ES6 其實是我們口頭上的簡稱，這樣的說法並不精確。正確來說， ES6 僅為泛稱，指的是ES5.1 版以後的新一代 JavaScript 語言標準，其中涵蓋了 ES2015, ES2016, ES2017 等等。
ES20✕✕ 才為正式稱號，英文：ECMAScript 20✕✕ (✕ edition)，專指某年度發佈的語言標準。譬如常見的 ES6，指的是 ES2015，全名為 ECMAScript 6，為 JavaScript 語言新一代的「標準」，於 2015 年 6 月正式發佈。
小結：
- ES6 = ES2015; ES7 = ES2016… 以此類推
- ES✕ 是泛稱、是標準，並非程式語言
關於 ES…
ES （或是 ECMAScript ）和 Javascript 相似，都是都是一種通用程式語言(general-purpose programming language)。之前於日記第一篇有提及， Javascript 是由一個叫做 Eich 的科技學家創建，創建後的隔年網景公司就把 Javascript 提交給 Ecma International 做標準化。標準化內容由TC39 委員審核公佈後，記錄於「ECMA-262 規範書」中，其中包括了對於 ECMAScript 語法、介面、特性等等的規範與限制。
到現在 2020 年，ECMA-262 已經出到了第 11 版的更新，過程中經歷了第四版的廢棄、第五版的「嚴格模式」(strict mode) 翻新，可謂風風雨雨… 不容易呀！但這些為的都是能夠讓 Javascript 的使用者和開發者能夠安心、無後顧之憂地順暢寫程式💪
🏋♀ 歷史小惡補 part 1： Ecma International 是一個旨在制訂國際性資訊和電信標準制度的非營利組織，不同於其他國際性制度訂定團體，Ecma 採會員制，並引入市場機制，使標準制定上能夠符合效率、公平、公開三原則。截至目前為止，Ecma 已經公開發佈了超過 400 份標準和超過 200 份科技報告，亦廣泛被市場接受。
🏋♀ 歷史小惡補 part 2：Ecma International 於 1994年，因為組織日漸國際化和資訊活動日益頻繁等因素，改名為今日我們所認識的全小寫 Ecma（不是縮寫唷！）。在這個大改變之前 Ecma 可是 ECMA，為「歐洲電腦製造商協會」（European Computer Manufacturers Association）之簡稱。
📌 講完歷史典故，回到現實來看看 ES6 語法如何使 JavaScript 變得更完美吧！
以是小白🙆♀我整理的三大 ES6 特性，我也會負責一一介紹，一起看下去吧～
1. let & const 的使用
首先，為什麼已經有 var（給變數）功能還要用 let 或是 const 呢？
因為 var 有個獨特的功能，就是在賦值後仍能任意更改（弱型別語言），即可重複定義。因此當我們在撰寫時容易在不知覺的情況下覆蓋到原資料，造成資料的遺失。
這時改版就加上了 let 和 const 功能，讓我們能在花括號 { } 中自由擺放變數，而不影響到整個大範圍程式碼。
var weight = 100; var weight = 50; console.log(weight); // 50
由此可見，在 var 定義下變數的值能夠輕易改變，印證上頭我所提及的 var 特性。再來我將用兩組例子來進一步闡明 var 和 let ＆ const 之間的差異
function getWeight() {
var weight = 100;
console.log(weight);
} // 100function getWeight() {
var weight = 100;
}
console.log(weight); // ReferenceError: weight is not defined我們從以上兩組程式碼能看出，當我們把 console.log 擺在全局和函式內部的差異。由此可知 var 的作用範圍僅限 function 內部，不會另外對於整體變數做定義。
🦖 恐龍君小補充：兩個 `（反引號）之中可嵌入字串，${…} 中可嵌入變數，如此寫法有利於撰寫上的簡潔！
var weight = 100; // kg
var height = 200; // cm
if (weight > 50) {
var BMI = weight / (height/100 * height/100);
console.log(`My secret is ` + BMI);
}var weight = 100;
var height = 200;
if (weight > 50) {
const secret = weight / (height/100 * height/100);
console.log(`My secret is ` + secret);
}第二組程式碼的比較之下，我們不難發現唯一的差別即是 var 和 const，單單從結果論，上下兩個解法是沒有太大的差異，但是，當我們要寫大量程式碼時，養成在區域中使用 let 和 const 就格外重要。如此一來，該放在函式中定義的變數就使用 var，該有區域性的變數就用 let 和 const 定義，就會大大降低出錯率，也會使不同人在交接程式碼時原先的變數免於因為一時疏忽而被更動。
總結：var 屬於 function scope（函式作用域）； let 和 const 屬於 block scope （塊值作用域） 。當把 var 放進函式後，var 即被鎖在函式之中；換句話說，函式之外的區域都不會有 var 的蹤跡。因此，若我們想短暫定義一個值（使用「臨時變量」），又不想動到全局變量時， let 和 const 就會是我們的好幫手，幫助我們自由在花括號 { } 之中定義我們的變數而不影響其餘變數的值。
2. 箭頭函式 Arrow Functions
就我看來，箭頭函數實在是個造福懶人的寫法（懶人舉手🙋♀
從ES6 開始，寫函式不再需要寫 function，直接使用 => 即可，可謂簡潔、簡潔、再簡潔！
來看看示範吧！
var shrink= function (a,b) {
return a / b;
}var shrink = (a,b) => a / b;
仔細比對上下，箭頭函數除了取代 function，更隱藏了 return。這樣寫起來是不是很省力呀！
但如果你覺得如此爾爾，箭頭函數綁定 this 的功能會讓你帶開眼界，以下例證：
在 ES6 之前當我們遇到以下狀況：
一個獨立運行的函式如果無特別操作，會指向 window ，所以才會有 undefined 的錯誤結果。
function Iris() {
this.weight = 10;
setInterval(function growWeight() {
// 這邊的 this 會指向 window（window 也是物件），造成程式錯誤
this.weight++;
}, 87);
}
var I = new Iris();我們以往的解法：
多定義一個 self，讓 this 指向變數 self。 如此 this 就會改指向 Iris 了
function Iris() {
// 先將正確的 this reference 存到一個變數中
var self = this;
self.weight = 10;
setInterval(function growWeight() {
// self 變數會正確的指向 Iris 物件
self.weight++;
}, 87);
}在 ES6 出現後我們的新解：（顯示結果在以下console版）
箭頭函式直接取代 function，綁定 this。this自然而然指向對的物件
function Iris() {
this.weight = 10;
// 定義該 Arrow Functions 時的環境，是在 Iris 物件中
setInterval(() => {
// this 才會正確指向 Iris 物件
this.weight++;
}, 87);
}
var I = new Iris();
3. 陣列的分開賦值 Array Destructuring
const weights = [55,48,65]; const iris = weights[0]; const dora = weights[1]; const olivia = weights[2]; console.log(iris,dora,olivia); // 55,48,65
以往我們對於陣列快速賦值的方式大多採用以上做法，先給予 weights 一串陣列值，緊接著定義三個不同變數（iris、dora、olivia），分別對應到 weights 變數陣列值串的不同相對位置。
🦖 恐龍君小補充：陣列從零開始編號！
如果換成 ES6 情況就簡化許多了，可使用解構賦植請看以下
const [iris,dora,olivia] = [55,48,65]; console.log(iris,dora,olivia); // 55,48,65
作法：直觀性地把陣列對印到要賦予的值串
在寫程式如果能用較簡潔的方式表達，我們通常會選用簡潔但一樣清楚的表示法，這也是 ES6 出現的原因～
🧠 知識惡補站 🧠 你知道 Coding 和 Programming 的差異嗎？
中文上，Coding 譯作編碼；Programming 譯作編程。定義上，Coding 是將自然語言(natural language) 藉由中介程式語言將指令翻譯成機器能懂的語言 (machine language) 的過程，簡單來說，編碼就是利用個機器能懂的程式語言來發出指令，讓電腦能夠對應執行。Programming 則是開發一套完整能夠運作的軟體解決方法的過程，當中需要的是邏輯思考、分析推演、識別問題癥結等能力。因此， Programming 不僅僅限於對程式語法的了解，更需要的是和具體化想法的判斷、思考力。
文字不夠清楚，就讓我們看圖說故事吧吧 👀
🔥下集預告🔥
這次終於有機會和大家聊到 JS ES6 的部分（好興奮呀～）下集小白🙆♀我將為大家帶來 React 入門相關知識😍 敬請期待唷！
怕你們上次沒聽清楚～所以在和你們說一次我的恩師Glove😏
如果對於 ReactJS 有興趣，或是想增進 JS 技能的人（或深入了解），這裡連結我會放上 Glove 的部落格，歡迎和我一樣自認上進的人上去翻翻
Glove 另外也有在 Udemy 上開設 JS 課程 和 React課程歐，想快速練功的人很適合唷😎！（中文教學）
上次推過Codcaedemy後，這次來跟大家介紹 W3Schools，上面資源豐富（應有盡有），重點是大部分免費唷（不過是英文網站，有關 language barriar 的部分在這裡就不為大家解惑嘍）！
希望以上心得筆記和資訊有助於大家更了解JS的運作～ 如果覺得獲益良多歡迎繼續關注我！
有任何問題都不吝指教（底下留言💬），大家一起學習、一起進步喲🗣
那～我們下禮拜見嘍！👋👋👋
如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。
references 參考資料：
- https://en.wikipedia.org/wiki/ECMAScript
- https://www.w3schools.com/js/js_htmldom.asp
- https://www.fooish.com/javascript/ES6/array-and-object-destructuring.html
- https://medium.com/change-or-die/javascript%E5%88%9D%E5%AD%B8-dom%E5%B8%B8%E7%94%A8%E5%B1%AC%E6%80%A7%E8%88%87%E6%96%B9%E6%B3%95-ef851afdb65a
- https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/%E7%89%A9%E4%BB%B6%E7%9A%84%E6%93%8D%E4%BD%9C%E8%AA%9E%E6%B3%95
- https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/module_system.html
- https://pjchender.blogspot.com/2017/01/es6-array-destructuring.html
