自學系列 | Full Stack Web | 網頁全端入門學習筆記 2
第二部分：Javascript / DOM / jQuery
前言
前一篇提到最近因為工作需要，我開始找網頁全端的入門線上課程，種種因素考量下，我最後是看 Udemy 的 The Web Developer Bootcamp 這堂課，邊看邊學之餘，就順便把筆記整理成系列文章。
第一部分：HTML / CSS / Bootstrap（關於前端）
第二部分：Javascript / DOM / jQuery (就是這篇！)
第三部分：Node.js / Database (關於後端，產出中…)
第二部分：Javascript / DOM / jQuery
第一部分我們學到
- HTML 是網站的骨架，決定網站有哪些文字、圖片、按鈕等等
- CSS 是網站的化妝師，決定每個元件的排版、顏色、大小
然而，這些都是靜態的資訊呈現而已，如果我們要讓網站可以根據使用者行為做出一些「反應」，例如點下按鈕後顏色改變、按下 enter 時發出聲音…
那就需要具備「邏輯」的程式語言來幫忙了，而這個語言就是 Javascript。
那 DOM 跟 jQuery 又是什麼呢？以「點下按鈕後顏色改變」這個行為來說，我們需要先「選取」HTML 架構中的按鈕元件，然後用程式語言(Javascript)去「設定/操作」顏色的變化，其中讓我們容易選取與操作的「架構」就是 DOM (Document Object Model)。
jQuery 則是讓上述整件事情變簡單的一種 Javascript 函式庫，可能原本要寫十行程式碼，但因為別人已經把程式碼寫在 jQuery 裡面，所以我們直接拿 jQuery 來用時，變成只要寫兩行。
底下我會寫在這三個主題中，我們會學到哪些東西，以及有能力做出怎樣的網站/遊戲。
Javascript
Udemy 線上課在 Javascript 這部分花了相當多篇幅，主要是講最基本、最常用的程式語言概念，不管學哪個語言都用得到，例如 variable、function、array、if-else、for loop、object…等等。
線上課有充分的練習題，對完全沒學過程式語言的初學者很 friendly，但因為我之前已經有熟悉的程式語言了(Swift、Python)，看完影片後覺得太花時間，所以建議非程式新手者，直接找文字版本的 Javascript Tutorial 比較快。
DOM (Document Object Model)
關於 DOM 章節教的東西，一言以敝之，就是學習各種方法去「select HTML element, and use Javascript to manipulate it」。
- 幾種選取(select)的方法：
// 以選取 <p id="first" class="special">Hello</p> 為例
var p = document.getElementById("first");
var p = document.getElementsByClassName("special");
var p = document.getElementsByTagName("p");
var p = document.querySelector("#first"); // " "裡面是 CSS 格式
var p = document.querySelectorAll(".special"); - 幾種操作(manipulate)的方法：
// 操作「Style」
p.style.border = "1px dashed orange";// 操作「文字」
p.textContent = "Sentence changed by me."
p.innerHTML = "Sentence <strong>changed</strong> by me."// 操作「屬性」（例如：link, image...）
var link = document.querySelector("a");
link.getAttribute("href");
link.setAttribute("href", "https://medium.com/")// 操作「觸發事件(event)」(例如：click, mouseover...)
p.addEventListener("click", function() {
this.style.color = "pink";
});// 將 CSS 跟 Javascript 分離使用
// 先在 CSS 中定義一個 “another-class”
p.classList.add("another-class"); // 開啟
p.classList.remove("another-class"); // 關閉
p.classList.toggle("another-class"); // 開關
練習一：RGB 視覺測驗遊戲
學完上面的東西後，可以做出底下的 RGB 視覺測驗遊戲，蠻值得跟著做的，因為可以複習之前學的 HTML、CSS，也把 DOM 熟練許多。
jQuery : a DOM manipulation library
前面提到 jQuery 只是一個讓我們寫程式更省力的函式庫，所有 jQuery 能做到的功能，都可以不透過 jQuery 來做，使用/不使用 jQuery 變成了兩個派別，各有支持者。
「要用派」認為 jQuery 可以讓程式碼變短、好上手、而且很多人在使用，所以遇到問題在網路上容易得到解答。「不用派」認為 jQuery 是一個不必要的依賴(dependency)，而且 DOM 現在也很好用了，沒有 jQuery 還是可以做所有事情。線上課的講師則認為，先學 DOM 再學 jQuery 的話，概念會清楚很多。
jQuery 單元基本上就是把 DOM 單元做的事，重新用 jQuery 再做一遍，一開始覺得 jQuery 真的沒什麼用，省不到幾個力氣，直到開始做底下練習二的網頁時，才發現 jQuery 簡潔的驚人威力。
練習二：Todo List
練習三：做出類似 Patatap 的鍵盤音樂網站
練習三的重點是學會如何在專案中使用其他 Javascript library、看 library 的文件。練習三會碰到的 Library 有：用於視覺、動畫效果的 Paper.js，以及用於聲音效果的 howler.js。
題外話：這麼多種 Javascript Framework，我要學哪一種？
雖然 Udemy 這堂課完全沒提到 Javascript framework，但因為太常看到各種 .js 結尾的東西，就查了一下，發現 .js 的世界真是五花八門。
註：關於 Library 跟 Framework 的差別，這篇寫的很好，可以去看看。
後來我找到一個影片，它從「熱門程度、就業市場、學習難度、文件的完整性、前景」五個面向分析 Angular.js、React.js、Ember.js、Vue.js 這四種 Framework 的優劣，看完可以根據自己的需求再做選擇，我覺得蠻值得看的，推薦給大家。
如果喜歡這樣的自學系列，請幫我拍拍手 👏另外，我把之前寫的程式學習相關文章集結在底下的列表，有閒來坐 🤗
