Jeff的隨手筆記

前一篇我們講了Promise ，今天來把剩下的async function/await 講完。

這一篇我想來學習一下Promise。

為什麼說是學習呢？因為我發現我無法跟人解釋這個東西，因此才決定重新學習Promise以及他後續延伸出來的async/await

今天要講的 Event Loop，看到網路上很多文章都有提到，這是 JS 最獨特的地方，幾乎沒有其他語言有這個特性。

今天這份文章會以Philip Roberts 在 JS Conf 的演講影片 What the heck is the event loop anyway，為主要架構，在搭配其他文章內容，如有說錯還請大家指教！

之所以選這部影片，是因為我第一次接觸 Event Loop就是看這支影片，因為當時ＡＣ的作業要寫這篇的心得並發到部落格，當時真的有看沒有懂XDD

在正式進入之前，我們先來看一段code：

1
2
3
4
5
6
7
8
9
10

function greet(whattosay) {

   return function(name) {
       console.log(whattosay + ' ' + name);
   }

}

greet('Hi')('Tony')
// 輸出會是：Hi Tony

再繼續往下走之前我們先來認識一下什麼是IIFE?

第一次看到這個詞的時候，是在看youtube看**深入淺出 Javascript30** 的解說影片上得知的，但當時並不在意，想說課堂上沒教應該不是什麼重要的，誰知道現在又在**JavaScript: Understanding the Weird Part**上看到在教這個，看來是要來好好了解一下

JavaScript 是一個事件驅動 (Event-driven) 的程式語言，當瀏覽器載入網頁開始讀取後，雖然馬上會讀取 JavaScript 事件相關的程式碼，但是必須等到「事件」被觸發(如使用者點擊、按下鍵盤等)後，才會再進行對應程式的執行。

我們先來看一張DOM Tree的圖

上一篇提到DOM 是一種樹狀結構，而樹狀結構特別擅長查找資料。

因此這篇章就是要來認識「查找 DOM 元素」的相關語法。

查找 DOM 元素有兩種途徑：

• 直接選出一個節點 (select) - 要在樹狀結構裡查找資料，至少要先選出第一個元素
• 從一個特定節點，查找到週邊的節點 - 選出一個元素後，就可以順著結構找出父元素、子元素 、甚至同一層的兄弟元素，這種行為稱為「遍歷 (traverse)」。
  Read more »

昨天我們解釋了什麼是DOM跟BOM，今天我們繼續來認識DOM Tree 和 DOM Node

接下來這幾篇我想來複習JavaScript的DOM。

但要講DOM前，我們要先來了解JavaScript在網頁裡到底是負責什麼。