Web Development

Async/Await 其實就是 Promise，不過是另一種寫法。它的誕生就是要把非同步的事件處理寫成跟一般逐行執行的程式碼一樣，增加可讀性！

Promise 是 Javascript 用來處理非同步事件的方法。如果只用 Callback 來處理非同步，當程式變得複雜並且有多層非同步事件需要處理時，程式架構會變的不好維護。Pormise 被介紹出來之後，很好的提升了非同步事件的管理與執行。除此之外也增加了程式碼的可讀性。

非同步是 Javascript 裡很重要的一個環節，非同步的意思是你的網站可以在同一時間內執行多項任務。想像如果今天網站一次只能執行一件事，光是處理用戶的一個按鈕點擊事件就會讓整個網站卡住；或是在加載某個圖片或影片內容時，網站無法做其他事只能等到加載完成。

Callback 是 Javascript 的一個特色。簡單來說就是把一個 function 當作另一個 function 的參數傳進去。其他的程式語言也有類似的方法，但在 Javascript 裡應該是使用最多的。我想原因應該是來自於其使用的場景，Javascript 原先就是用來開發網頁的，需要監聽來自於使用者的各種操作並作出即時的響應，非同步搭配 Callback 的設計能很好的執行任務。

Javascript 是一種程式語言，其核心觀念跟其他程式語言是大同小異。語言的核心元素包含了變數 variable、函式 function、判斷式 if else 以及迴圈 for loop。利用以上的觀念做排列組合可以達成一連串的邏輯處理。

開發網站其中一項最主要的功能就是偵測網頁上元素的各種事件並對其作出響應。比如說你按了一下網頁中的某的按鈕，然後發現網站上的一些內容因為你的點擊而改變了，這個行為就需要 Javascript 來幫忙達成。

Javascript 可以說是網頁設計裡的靈魂，網頁設計裡面唯一可以被稱作程式語言的就是它。如果你做網站的目的是為了為你的品牌做形象，或是你為了介紹某個活動做介紹頁，那你可能只需要用一點的 Javascript，然後用 Html 與 CSS 畫皮就可以。如果你想要做像是 Facebook 這種需要發文留言等大量用戶互動的現代網頁平台，那你就需要大量使用 Javascript。

這篇文章會用 Open Sandbox 做出一個有 CSS 樣式的網站範例。裡面會使用到 Flexbox 佈局並且用前幾篇文章提到的 CSS 語法。除此之外會介紹瀏覽器上的使用者開發工具，善用開發工具能幫助你加速開發你的網站！

CSS 除了給你的文字、物件上色調整大小、間距之外，還有另一個就是佈局。我們可以用 CSS 去指定什麼樣的內容要放在怎麼樣的位置。比如說一個置頂的選單；左邊有類別可以選；右邊是內容等等。以下會介紹一下佈局相關的知識像是 Block vs Inline、Position 以及 Flexbox 等。

CSS 也是網站開發裡最重要的元素之一，它負責的就是網頁的外觀。範圍涵蓋字體大小、顏色、背景、色調、佈局、甚至動畫等等，你的網站是否能賞心悅目、淺顯易懂，就靠你使用 CSS 的設計功底了。

HTML 是網站開發裡最重要的元素之一。它定義了我們的頁面裡有哪些內容，譬如一個標題、一段文字、一個連結、一張圖片等等。瀏覽器會依據其內容去解析然後把結果顯示在網頁上。