進入到 JavaScript 基礎課程的第四部份 你已經算是有了初步的前端開發與設計能力了 實務上，我們在專案中大部份的功能、元件，都會去找找看「現成的」、「開源專案」來使用 也就是如果已經有人做過了、有人分享過了，如果堪用，基本上就不會自己重做一個 因為成本差太多，什麼都自己做實在太花時間、花金錢 這一課我們稍微認識一下開源生態系，用用看這些現成套件 這些東西，我們叫：「第三方套件」，或者插件、外掛，都可以 我會分享幾個我自己在滿多專案都會用的套件，順便在這過程學習一些知識 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
在這份教材中，實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件，但已能滿足許多網站設計需求 實務上，不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎，接著客製化與修改，例如最知名的 Bootstrap 套件 但是，不論是網頁設計師、前端工程師，在使用現成套件之餘，稍微知道背後的原理，比較好 這樣才能更好地掌握工具，以及在必要的時候能夠親自開發與修改 而到目前為止，我認為，你已經能夠親手製作出設計師要求的大部份靜態＆動態設計了！ --- 真正在工作的時候，也會很像本次課程這樣，幾乎完全沒人幫你 但或許會有人告訴你關鍵字，或是你覺得好像在哪邊看過某種功能、效果 所以雖然你還不會做、沒有做過，但你有信心，可以找到相關資源、可以做得出來 身為軟體工程師，需要有這種「大致知道自己潛力在哪」的能力與信心，才能不斷樂於接受超出能力的挑戰 要習慣這種感覺。就像在這次的七個 UI 元件練習中，在我完全沒有教學的情況下，你就成功做到了 --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（四）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/837eq0
## 課程目標 認識並且能實做 carousel 元件 ## 課程內容 carousel 中文叫「輪播」元件，也有人叫 slideshow 幻燈片 常用在購物網站，用在多張商品圖片要展示時 請上網搜尋 `slideshow js` `carousel javascript`，了解如何做到 ## 課後作業 請使用 https://jsfiddle.net 接著上網尋找五張漂亮圖片。參考圖庫：https://unsplash.com/ 假設正在幫一個攝影師朋友，做個人介紹網站。首頁要有一個輪播元件，顯示漂亮的照片作品 --- 請實做一個照片輪播效果，並且能夠點擊來切換圖片 請稍微加一些 css 屬性，弄得漂亮一點 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做 dropdown 元件 ## 課程內容 dropdown 中文叫「下拉式選單」元件 通常用在網站上方的「導覽列」，當導覽列有太多連結的時候，就可以分組、放進下拉式選單 有人會做成點擊後展開選單，有人會做成滑鼠移上去就展開選單。兩種作法都很常見 請上網搜尋 `dropdown menu javascript`，了解如何做到 ## 課後作業 請使用 https://jsfiddle.net 假設正在幫一個創業的朋友，做官方介紹網站。 需要實做一個導覽列，包含 - 首頁 - 全部商品 - 全部品牌 - 關於我們 -> 團隊介紹、企業宗旨、創業故事 請將「關於我們」做成下拉式選單，點下去會顯示額外三個連結 請稍微加一些 css 屬性，弄得漂亮一點 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做 collapse 效果 ## 課程內容 collapse 中文叫「折疊」效果，也就是內容可以展開、收起的效果 當頁面上「資訊非常多、多到難以閱讀」的時候，會使用這個效果來精簡資訊 通常用在 FAQ 常見問題集的頁面 一行一行列出各種常見問題，點擊問題旁邊的「＋」符號，會在下面展開詳細回答，此時再次點擊問題，就可收起問題 請上網搜尋 `collapse item css`，四處觀摩一下業界常見的設計 --- 展開、收起的效果，通常會做成「滑下來、滑上去」，或者「淡入、淡出」，比較漂亮 關鍵字為 `slide down css` `slide up css` `fade in css` `fade out css` 請上網搜尋了解如何做到。不過，若是做不出來，就直接顯示、消失，也是沒關係 ## 課後作業 請使用 https://jsfiddle.net 假設正在幫一間電子商務公司，實做一個「FAQ」頁面 列出下列五個問題，點擊每個問題，會用 collapse 效果顯示出答案。再次點擊可以收起答案 - 如何辦理退換貨？ -> 請參考退貨服務頁面。 - 退款方式及退款時間？ -> 約7-8個工作天完成退款作業。 - 未退回的退款，是否可直接折抵新訂單？ -> 很抱歉，重新訂購時無法直接於新訂單扣抵。 - 發票遺失是否仍能辦理退換貨？ -> 很抱歉，需要有發票才能辦理退換貨。 - 什麼情況無法辦理退換貨？ -> 超過7天退貨期限，就無法辦理。 請稍微加一些 css 屬性，弄得漂亮一點 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證，可以用 alert 跳訊息提醒就好 但因為 alert 視窗，普遍被認為太醜、功能太弱，設計師通常會想要做得更漂亮一點 欄位驗證的 UX 可簡單可複雜，可以在送出表單的時候驗證，也可以在打字輸入的時候就同時驗證 請上網搜尋 `form validation ui`，四處觀摩一下業界常見的設計 ## 課後作業 請使用 https://jsfiddle.net 實做一個「註冊帳戶」表單 欄位有 - 用戶暱稱 - Email 信箱 - 密碼 接著有一個「註冊」按鈕 按下按鈕的時候，如果有欄位空白，就在欄位的下方或者旁邊，顯示紅字提示 各個欄位的驗證檢查條件如下： - 用戶暱稱 -> 不能為空白、必須在40字以內 - Email 信箱 -> 不能為空白、必須包含 `@` 符號 - 密碼 -> 不能為空白、必須在8字以上、必須在100字以內 請稍微加一些 css 屬性，弄得漂亮一點 --- 請搜尋 `javascript 包含字串` `javascript 字串長度`，了解相關用法，才有辦法完成本課作業 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做 modal 元件 ## 課程內容 modal 中文叫「互動視窗」元件，也有人叫「燈箱」或者「視窗」 這是幾乎所有網站都會用到的元件 台灣各大媒體網站常見的「蓋板廣告」，就算是一種「視窗」 各大社群網站，逛一逛就跳出「視窗」強迫你登入 點擊照片或者貼文，以前常常會開啟新網頁，現在常常設計成打開「視窗」直接就可以看內容 modal 跳出時，通常會將整個背景變成半透明黑色或白色，來讓視窗內容更顯眼 並且 modal 會有按鈕可以關閉 請上網搜尋 `popup modal ui` `lightbox ui`，四處觀摩一下業界常見的設計 --- 要寫出這種視窗的效果，其實 css 的部份還比 js 的部份難一些 請上網搜尋 `燈箱 css` `popup modal css` `popup modal css` 了解各種不同的寫法與技巧 半透明背景遮罩的英文術語叫 `black overlay` 請上網搜尋 `css 黑色半透明遮罩` `full page black overlay css` 了解各種如何做到此效果。不過，若是做不出來，這個效果也是可以省略不做 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），接著寫出 css 與 js 的部份 ``` <button onclick="loginModal()">點我登入帳號</button> <hr> <button onclick="postModal()">點我新增貼文</button> <div class="modal" id="login-modal"> <div>帳號：<input type="text"></div> <div>密碼：<input type="password"></div> <hr> <button class="btn-close">關閉</button> </div> <div class="modal" id="post-modal"> <div>標題：<input type="text"></div> <div>內文：<textarea></textarea></div> <hr> <button class="btn-close">關閉</button> </div> ``` --- 這邊共有兩個按鈕，模擬兩種使用情境 兩個視窗元件，一開始預設是隱藏的，不會在畫面上看到 點擊登入按鈕，會跳出登入視窗。可以點擊視窗內的關閉按鈕，來將視窗關閉 點擊貼文按鈕，會跳出貼文視窗。可以點擊視窗內的關閉按鈕，來將視窗關閉 --- 請稍微加一些 css 屬性，弄得漂亮一點 `<hr>` 只是方便隔開元素，方便別人查看元件用的，醜醜的留在畫面上沒關係 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件，就跟烤土司機，烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出，可以讓使用者體驗（User Experience，簡稱 UX）更好 很多網站因為沒有做好適當的 toast 元件，使用者在操作時常常覺得「表單到底有沒有送出？」「網站當機了是不是？」 通常要將 toast 做成幾種不同樣式，根據不同使用情境來使用 由於 toast 通常會直接蓋在網站的上方正中央（或者右上角、左下角，不一定） 會蓋到網頁畫面，所以通常會做成「顯示幾秒之後自動關閉」 請上網搜尋 `toast ui` `toast component`，四處觀摩一下業界常見的設計 --- 要在倒數幾秒之後執行任務，你需要 `setTimeout` 這個函式。請自行上網搜尋一下，了解這個函式的用法 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），接著寫出 css 與 js 的部份 ``` <button onclick="toastSuccess()">成功訂購商品</button> <hr> <button onclick="toastError()">訂購商品失敗</button> <div class="toast toast-success"> 訂購成功！可以查看 Email 確認訂單細節！ </div> <div class="toast toast-error"> 抱歉，訂購失敗！請稍後重新嘗試 </div> ``` --- 這邊共有兩個按鈕，模擬兩種使用情境 兩個吐司元件，一開始預設是隱藏的，不會在畫面上看到 請寫出 `toastSuccess` 函式的內容，在點擊按鈕後，將「成功吐司」顯示在畫面上 5 秒鐘，之後自動消失 請寫出 `toastError` 函式的內容，在點擊按鈕後，將「錯誤吐司」顯示在畫面上 5 秒鐘，之後自動消失 成功吐司請做成綠色 錯誤吐司請做成紅色 這個顏色變化，可以是邊框、背景顏色、字體顏色、影子顏色，都可以，你自由決定 --- 請稍微加一些 css 屬性，弄得漂亮一點 `<hr>` 只是方便隔開元素，方便別人查看元件用的，醜醜的留在畫面上沒關係 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做 alert 元件 ## 課程內容 alert 中文叫「示警」元件，當有訊息要公告在網站上，就可使用 或者當用戶執行了某些動作，在頁面上要提示、回饋訊息的時候，也可使用 通常要將 alert 做成幾種不同樣式，根據不同使用情境來使用 由於 alert 可能會佔據網頁上方、或下方，一整塊長條區域 會有點佔空間，所以通常會多做「關閉」按鈕，方便用戶保持畫面整潔 請上網搜尋 `alert ui` `alert component`，四處觀摩一下業界常見的設計 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），接著寫出 css 與 js 的部份 ``` <div class="alert alert-primary"> 歡迎您點擊「抖內」按鈕，以實際行動支持我們。 <button class="btn-close">×</button> </div> <hr> <div class="alert alert-success"> 您已成功下訂單！以下為您的訂單詳細資訊。 <button class="btn-close">×</button> </div> <hr> <div class="alert alert-danger"> 抱歉，系統發生錯誤，請稍後重新嘗試。 <button class="btn-close">×</button> </div> <hr> <div class="alert alert-warning"> 請注意，以下內容包含「劇透」爆雷資訊。 <button class="btn-close">×</button> </div> ``` --- 這邊共有四個 alert 元件，各自有不同樣式 primary 用在主要公告事項，呈現藍色 success 用來傳遞讓人安心的成功訊息，呈現綠色 danger 用來提示錯誤訊息，呈現紅色 warning 用來呈現敏感注意事項，呈現橘色 這個顏色變化，可以是邊框、背景顏色、字體顏色、影子顏色，都可以，你自由決定 --- 訊息的旁邊，有一個關閉按鈕，點擊按鈕，要能關閉整個 alert 元件 --- 請稍微加一些 css 屬性，弄得漂亮一點 `<hr>` 只是方便隔開元素，方便別人查看元件用的，醜醜的留在畫面上沒關係 --- 做出以上功能，你就完成這次的課程目標了！
本課程為 JavaScript 基礎課程的第三部份 在前兩部份的課程中，已經學會程式設計的基本觀念，以及 DOM 操作的基本方法 在這次的課程，我們將練習製作實務上常用的 UI 元件 藉由這次練習，強化在前兩部份課程學到的知識 --- 身為工程師，常常要做一些沒做過的功能 這時，就需要足夠的自學、研究能力，以及敢於面對未知的信心 也就是雖然功能看起來沒做過，但你有把握稍微研究之後，就能做得出來 所以這次的課程，我只會提供簡單介紹＆關鍵字 接著就直接提出作業規格，你需要自行研究如何完成作業 --- 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材：JavaScript（一）—— 幫衣服工廠做個好用表單](https://codelove.tw/@howtomakeaturn/course/l3j5xk) - [自學網頁の嬰兒教材：JavaScript（二）—— 親手做個待辦事項小工具](https://codelove.tw/@howtomakeaturn/course/vx8gqZ) 準備好的話，讓我們馬上開始吧！
簡單複習一下，在這份教材中，我們學會了 - DOM 樹基本觀念 - DOM 樹新增、刪除 - DOM 樹找到元素的方法 - 基本的除錯技巧 - 動態加上 onclick 事件 - 操作 onchange 事件 - 基本的 for 迴圈用法 - 在 DOM 樹存取、修改元素的 class - 在 DOM 樹存取、修改元素的 style - 學會 `.querySelector()` `.querySelectorAll()` 的用法（Selector API） - 學會 `.closest()` 的用法 - 初步認識「重構」的觀念 利用本課程學到的技巧，你已能夠對 DOM 樹進行很多操作，也能夠處理工作上很多功能需求！ DOM 的操作函式有非常多，本課只教了最基本的幾個，實務上你會看到超多尋找 DOM 元素的函式 你就隨便找、隨便用，都可以，能順利找到、處理元素就好！ --- 觀察本課內容，你會發現完全沒有用到第三方套件，通通是寫原生 JavaScript 本課所學內容，其實就是所有前端框架的基礎。不管你用了任何複雜的工具或框架，它們的背後，其實就只是這樣操作 DOM 而已，並沒有很難 本課內容所教的開發方法，大概是西元 2000 - 2010 年代的開發方式，很傳統，現在比較少這樣寫 實務上，現代前端工程師，工作時主要在使用「框架」來開發，例如 Vue 或者 React 因此，坊間補習班，大多是直接從「現代前端框架」開始教 然而，我觀察到，大多數畢業學生，因此對於 DOM 基本觀念一知半解、覺得框架很黑箱，並且基本功非常不好 所以我課程設計先從老方法開始教，讓大家基本功比較好，接著再學工具與框架，會更有踏實的感覺 --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（三）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/gqveaW
## 課程目標 學會基本的 Selector API 用法 學會基本的 `.closest()` 的用法 ## 課程內容 課程到目前為止，要存取元素，都是使用 `document.getElementById` `.parentElement` `.children` 然後上上下下到處爬來爬去、找到目標元素 在網頁結構簡單的時候還好，一旦內容複雜起來，你會發現這樣寫，有點麻煩 其實，在學習 css 的時候，就有一套指定元素的方法了，如果能直接用 css 那套設定樣式的方法，來找到元素，那不是很方便嗎？ ``` <div> <div id="wrapper"> 我想跟您說： <p> Hi, <span id="target">早上好</span> </p> <p> Hi, <span>中午好</span> </p> <p> Hi, <span>晚上好</span> </p> </div> </div> ``` ``` document.querySelector('#wrapper p span').style.color = 'red'; ``` 在 jsfiddle 試試看，會發現「早上好」變成紅字了 使用 `.querySelector()` 可以很方便的找到元素！如果找到多個元素，只會回傳第一個元素 接著試試這樣 ``` var spans = document.querySelectorAll('#wrapper p span'); for (span of spans) { span.style.color = 'red'; } ``` 在 jsfiddle 試試看，會發現三塊文字，都變成紅字了 使用 `.querySelectorAll()` 可以很方便的找到多個元素！接著就用陣列來處理即可！ 以上兩種用法，是不是比之前的老方法方便許多呢？ --- 有件事要提一下，老方法的 `.getElementById()` 只能用在 `document` 物件上 新方法的 `.querySelector()` `.querySelectorAll()` 除了可以用在 `document` 之外，還能用在一般 DOM 元素上喔！ ``` var wrapper = document.querySelector('#wrapper') wrapper.querySelector('p span').style.color = 'red'; ``` 所以這樣寫也可以！是不是覺得更彈性、更強大、更好用了呢？ 有了這些，可以完全取代 `document.getElementById` 與 `children` 的寫法！ --- 接著來看看有什麼新方法可以取代 `.parentElement` 吧 ``` var target = document.querySelector('#target') target.closest('span').style.color = 'red'; ``` ``` var target = document.querySelector('#target') target.closest('p').style.color = 'red'; ``` ``` var target = document.querySelector('#target') target.closest('div').style.color = 'red'; ``` 在 jsfiddle 分別試試看，這三種程式碼，會讓哪些文字變紅色吧！ `.closest()` 會回傳第一個找到的「祖先元素」 也就是順序為父元素、祖父元素、曾祖父元素，依此類推，不斷往上尋找，到找到第一個為止 實務上這個函式非常好用，可以完全取代 `.parentElement` 的寫法！ ## 課後作業 接續前一課的作業，現在要來重構（refactor）程式碼 所謂的「重構」程式碼，就是程式的功能完全不變，但是讓程式碼更好讀、好維護 --- 請把作業中出現的 `.getElementById()` `.parentElement` `.children` 全部拿掉 通通使用本課教導的函式來改寫 改寫完之後，你會發現，原本的程式碼，如果不看 html，只看 JavaScript，只會看到 parentElement、children、跟一堆索引，到處爬，不知道在幹嘛 而在改寫之後，至少看起來比較像在寫 css 樣式的時候，會用 `span` `li` `button` 這些元素名稱來上下查找元素 光看 JavaScript 程式碼，會比原本好讀一些些！ 單看這次作業，可能感覺還好。但在專案很大的時候，你不會想在程式碼看到全是 parentElement、children、跟一堆索引，你會希望有更多額外資訊 你會希望程式碼能更清楚表達：「目前到底是在找什麼元素」。所以實務上都是以新寫法為主的 不過呢，這依然是主觀問題。如果你喜歡整個職業生涯都用老寫法來做，應該也可以。高興就好囉！ --- 完成這次重構，你就完成這次的課程目標了！
## 課程目標 能動態在 DOM 樹修改元素的 style 屬性 ## 課程內容 實務上有個功能很常見，就是元素開關（toggle）的效果 點一下讓某元素出現，再點一下讓某元素消失 例如：跳出一張照片顯示、再關閉這張照片；或者顯示提示訊息文字，點擊後關閉文字（不是 alert 那種喔，是更漂亮、用 html/css 實做的那種漂亮小框框訊息） 讓元素開開關關出現的情境有很多，該怎麼做到呢？其實，修改元素的 css 屬性 `display` 就可以了 ``` <button onclick="myFunction()">點我開開關關</button> <div id="myDIV"> 我會一下出現一下消失 </div> ``` ``` function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } ``` 如果你不知道 css 的 display 是什麼，以及有哪些值可用，請去查詢一下 最簡單、常用的基本上是 ``` display: none; display: inline; display: block; display: inline-block; ``` 修改這個值，就能做到開關顯示元素的效果了 --- 目前為止，你應該發現，能用 JavaScript 動態修改 class，也能動態修改 style 感覺好像網頁上任何東西、html、css，都可以用 JavaScript 動態修改？ 你猜得沒錯！在前端工程領域，就是幾乎什麼東西都能用 JavaScript 來操作，所以現代的各種網頁，才會那麼強大、那麼多功能！ 如果有個東西你不知道怎麼改，但感覺應該能用 JavaScript 做到，那就上網搜尋一下，一定會找到屬性或者函式可以用的！ ## 課後作業 接續前一課的作業，現在要進一步加強清單功能 你發現有些事項，完成之後，你不想要刪除掉，你想要留著，比較有成就感 但又需要知道哪些已完成，所以要有能備註完成與否的方法 --- 請在每個事項後面，加上 `（已完成）` 的文字，但是 display 為 none 所以先不顯示 然後在這文字後面，再加上「標示為已完成」的按鈕，點下去才顯示 `（已完成）` 文字 舉例來說，建立了三則待辦事項之後，看起來像這樣 ``` - 倒垃圾 [標示為已完成][刪除] - 繳電話費 [標示為已完成][刪除] - 採買本週食材 [標示為已完成][刪除] ``` 如果倒完垃圾了，就可以點擊按鈕，來備註已完成，這時才顯示 `（已完成）` 文字 ``` - 倒垃圾（已完成）[標示為未完成][刪除] - 繳電話費 [標示為已完成][刪除] - 採買本週食材 [標示為已完成][刪除] ``` 這時後面的按鈕就變成「標示為未完成」了 所以這個完成與否按鈕，就是一個開關（toggle），可以開開關關的 做出這個功能，你就完成這次的課程目標了！
## 課程目標 學會 onchange 事件的用法 ## 課程內容 目前為止，應該已經熟悉 `onclick` 事件的用法 接下來，學一個很常用、很好用的新事件 `onchange` ``` <select onchange="show1()"> <option value="apple">蘋果</option> <option value="banana">香蕉</option> </select> <label> <input type="radio" name="gender" value="male" onchange="show2()"> 男生 </label> <label> <input type="radio" name="gender" value="female" onchange="show2()"> 女生 </label> ``` ``` function show1() { alert(event.target.options[event.target.selectedIndex].value) } function show2() { alert(event.target.value) } ``` 到 jsfiddle 試試看，就會清楚實際效果囉！ --- 不同的 html 元素，對於觸發 `onchange` 的定義有點不同，取得「變化後的新值」的方式也有點不同 上面簡單示範兩種。實務上，如果一直觸發不了，或是抓不到值的話，就多上網查查範例 然後一直嘗試 alert 或者 console.log 看看到底抓到什麼變數、到底變數內容是什麼 多實驗、多練習，習慣之後就會上手了 ## 課後作業 接續前一課的作業，現在要讓清單看起來更「花俏一點」 你希望選擇任務急迫性之後，輸入文字的框框，能跟著有樣式變化 --- 目前的 select 選單 選單內有「一般」、「重要」、「緊急」三種選項 請在選單加上 onchange 事件，讓選項改變的時候，輸入文字的框框，能跟著有樣式變化 請讓文字輸入框框，在選單為「重要」時，顯示為「橘色」；在選單為「緊急」時，顯示為「紅色」 這個顏色變化，可以是邊框、背景顏色、字體顏色、影子顏色，都可以，你自由決定 目的只是讓用戶有更多「視覺回饋」，讓用戶可以預期，新事項在清單內會變色而已 請在 `<input>` 或者在它父元素，加上不同的 class，用不同 class 顯示的不同顏色，來做到這點 做出這個功能，你就完成這次的課程目標了！
## 課程目標 能動態在 DOM 樹存取元素的 class 能動態在 DOM 樹修改元素的 class ## 課程內容 學到現在，應該會發現，DOM 元素，一堆屬性，都可以直接讀取、修改，很方便 連我們設計樣式會用到的 class 也是一樣簡單，很方便 ``` <div id="div1" class="greeting"> hello </div> <div id="div2" class="greeting big-font"> hey </div> ``` ``` var div1 = document.getElementById('div1') var div2 = document.getElementById('div2') alert(div1.className) alert(div2.className) ``` 你可能會想，為何要叫 `className` 而不是 `class` 就好？ 其實是因為，`class` 在大部份程式語言，都是「宣告類別、支援物件導向程式設計」的關鍵字。看不懂沒關係，反正 `class` 基本上不能隨便用就對了 就跟宣告變數的 `var` 一樣，是重要的關鍵字，所以保留起來，避免混淆 --- 讀取 class 很簡單，其實修改也一樣簡單 ``` var div1 = document.getElementById('div1') var div2 = document.getElementById('div2') div1.className = div1.className + " border"; div2.className = div2.className + " border"; alert(div1.className) alert(div2.className) ``` 直接修改屬性 `.className` 的值就可以了 到 jsfiddle 試試看，就會清楚實際效果囉！ ## 課後作業 接續前一課的作業，現在要加強清單的功能 你希望可以將任務按照急迫性分類 --- 在現有的文字輸入框、新增按鈕之外，多增加一個 select 選單 選單內有「一般」、「重要」、「緊急」三種選項 新增之後，重要的事項會顯示為「橘色」，緊急的事項會顯示為「紅色」 這個顏色變化，可以是邊框、背景顏色、字體顏色、影子顏色，都可以，你自由決定 請在 `<li>` 或者 `<span>` 加上不同的 class，用不同 class 顯示的不同顏色，來做到這點 --- 除此之外，還要更新「匯出為純文字」的功能 根據事項，如果是重要事項，請用星號包起來 `*重要任務*`，如果是緊急事項，請用雙星號包起來 `**緊急任務**` 舉例來說，按下匯出按鈕之後，就用 alert 跳出訊息「`今日待辦：1. 洗衣服 2. *買文具* 3. **去健身房**`」 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 學習基本的 for 迴圈用法 ## 課程內容 之前的課程中，我們學過陣列＆索引的基本用法 實務上，使用陣列時，通常會需要寫一些 for 迴圈搭配使用 for 的寫法有很多種，我們先學 for of 的寫法就好 ``` var fruits = ["Apple", "Banana", "Orange"]; var text = ""; for (var x of fruits) { text = text + x; } alert(text); ``` 像這樣，就能依序存取到陣列內的每個內容 for 迴圈後面是大括號 `{}` 把任務包起來 就跟 if 一樣，裡面當然也可以放多行程式碼 ``` var fruits = ["Apple", "Banana", "Orange"]; var num = 1; var text = ""; for (var x of fruits) { alert(num.toString() + ') ' + x ); text = text + x; num = num + 1; } alert(text); ``` 在上面的範例，也同時示範了，如果想要同時知道「當前內容在陣列內的順序」 只要宣告一個整數的變數，每次迴圈內都幫它 +1 即可 到 jsfiddle 試試看，就會清楚實際效果囉！ ## 課後作業 接續前一課的作業，現在待辦清單基本功能有了 你希望可以把清單內容自動轉變為純文字，方便貼到 LINE 群組之類的地方，分享給別人看 這次要來實作「匯出為純文字」的功能 --- 請在清單的下方，新增一個「匯出為純文字」的按鈕 假設清單內目前有三個事項「洗衣服」、「買文具」、「去健身房」 按下匯出按鈕之後，就用 alert 跳出訊息「今日待辦：1. 洗衣服 2. 買文具 3. 去健身房」 alert 的內容，滑鼠移上去，應該是可以選取＆複製的（如果您的瀏覽器不支援，也沒關係，反正就是 alert 出來就對了） 請稍微替這個匯出按鈕加一點 css 屬性，弄得漂亮一點，看起來才專業 做出這個功能，你就完成這次的課程目標了！
## 課程目標 能動態加上 onclick 事件屬性 能選取到父元素、子元素 能夠在 DOM 樹進行「移除」 能存取到 onclick 事件發生的元素 ## 課程內容 現在已經會在 DOM 樹增加元素、加入文字了 記得之前寫過的「事件」嗎？ ``` <button onclick="myFunction()">Click me</button> ``` ``` function myFunction() { alert('你點擊了按鈕！'); } ``` 這當然也能用 JavaScript 動態加上去 ``` <button id="my-btn">Click me</button> ``` ``` function myFunction() { alert('你點擊了按鈕！'); } var btn = document.getElementById('my-btn'); btn.onclick = myFunction; ``` 在 JavaScript 裡面，像這樣定義的「函式」，它的「名稱」其實也會是一個「變數」 所以可以直接指派給 `.onclick` 屬性 覺得有點怪，沒關係，先知道可以這樣設定「事件屬性」就好 這種「把函式設定到事件屬性」的行為，我們叫「綁定」 因為在事件發生的時候，要固定執行任務，就像是綁定任務給你，固定由你來負責的感覺 --- 接著多談一下元素的父子關係 ``` <div id="app"> 這是簡介 <h1>這是標題</h1> <p id="para">這是段落文字</p> </div> ``` ``` var app = document.getElementById('app'); alert(app.children[0].textContent) alert(app.children[1].textContent) ``` 到 jsfiddle 執行看看，有看懂了嗎？ 元素的 `.children` 屬性可以存取到子元素，以陣列的形式出現 別忘記陣列的索引是從 0 開始喔 接著試試這樣 ``` var para = document.getElementById('para'); alert(para.parentElement.textContent) ``` 元素的 `.parentElement` 屬性可以存取到父元素 這邊把父元素的整個內容跳出來看，像這樣跳一堆字，實務上沒什麼用 重點是，可以存取到父元素、子元素，就可以在整個 DOM 上上下下跑來跑去，用上一課教的 `.append()` 來到處新增元素啦！ --- 接著，來學學如何刪除元素吧 繼續上面的範例，請在 jsfiddle 試試這段 ``` var para = document.getElementById('para'); para.remove(); ``` 然後試試這樣 ``` var app = document.getElementById('app'); app.remove(); ``` 很簡單、直觀吧！ --- 最後，來學習怎麼抓到事件發生當下的元素 記得之前有學過一個 `document` 物件嗎？ 這是一個 JavaScript 在瀏覽器中內建的「物件」，這個物件代表網頁「當下的狀態」，有很多資料、函數可以呼叫使用 現在來學另一個 `event` 物件，這個物件代表網頁「當下正在發生的事件」，也有很多資料、函數可以呼叫使用 ``` <button onclick="hello()">蘋果</button> <button onclick="hello()">香蕉</button> <button onclick="hello()">西瓜</button> ``` ``` function hello() { alert(event.target.textContent) } ``` 綁定函式到事件屬性之後，可以利用 `event.target` 來找到當前發生事件的元素 找到元素之後，就可以自由的存取元素屬性、或者對元素做任何你想做的事情囉！ ## 課後作業 接續前一課的作業，這次要來實作「刪除事項」的功能 --- 請在事項的旁邊，加上刪除按鈕，請使用這樣的結構 ``` <ul> <li> <span>倒垃圾</span> <button>刪除</button> </li> <li> <span>繳電話費</span> <button>刪除</button> </li> <li> <span>採買本週食材</span> <button>刪除</button> </li> </ul> ``` 點擊「刪除」按鈕，會將事項刪除不見 如此一來，你的清單小程式，就可以新增事項、也可以刪除事項囉 請稍微替這個「刪除」按鈕加一點 css 屬性，弄得漂亮一點，看起來才專業 做出這個功能，你就完成這次的課程目標了！
## 課程目標 認識 DOM 樹基本觀念 能夠在 DOM 樹進行「新增」 學會基本的除錯技巧 ## 課程內容 請打開這個網站，用這個網站來練習＆寫作業： https://jsfiddle.net 在學 JavaScript 的時候，你會聽到很多人在講「DOM 樹」這個名詞 什麼是「DOM 樹」？ 其實只是，你在網頁上看到的東西，瀏覽器會在背後的 JavaScript 環境，維持一個對應的「DOM 樹」 比如說，當你寫這樣的 html（這邊先省略內容，只留結構） ``` <html> <head> <script></script> </head> <body> <div> <h1></h1> <p></p> </div> </body> </html ``` 瀏覽器會在背後創造一個這樣的資料結構 ``` document └── html ├── head │ └── script └── body └── div ├── h1 └── p ``` 很像是樹吧？這就是「DOM 樹」 記得之前用過的 `document.getElementById` 嗎？ 這就是 DOM 最上面的 document 物件 所謂的「DOM 樹」其實就是一個「巢狀物件」。 「巢狀物件」的意思是，物件的屬性，又是另一個物件，然後這物件的屬性，又可以是另一個物件 用 JavaScript 來表示的話，類似這樣（只是概念喔，真實的物件不只是這樣，而是有一堆內建函式與屬性可以用） ``` var document = { name: 'document', children: [ { name: 'html', children: [ { name: 'head', children: [ { name: 'script', children: [] } ] }, { name: 'body', children: [ { name: 'div', children: [ { name: 'h1', children: [] }, { name: 'p', children: [] } ] } ] } ] } ] } ``` 在 DOM 中，被包起來的元素，稱為子元素；把別人包起來的元素，稱為父元素。就跟學 html 時的稱呼一樣 瀏覽器會確保用戶介面（User Interface，簡稱 UI）上看到的，跟環境中實際運行的 DOM 長得一模一樣 也就是說，你修改 UI 的內容，DOM 物件就會自動更新；你用 JavaScript 修改 DOM 物件的內容，UI 就會自動更新 --- 來學學怎麼用 JavaScript 操作 DOM 樹吧！ 如果原本 html 長這樣 ``` <div id="app"></div> ``` 只要加入這段程式碼 ``` var heading = document.createElement('h1'); heading.textContent = '這是標題'; var para = document.createElement('p'); para.textContent = '這是段落文字'; var app = document.getElementById('app'); app.append(heading); app.append(para); ``` 利用 document 的內建函數 `createElement` 來動態創造新的元素 修改元素的屬性 `.textContent` 來設定文字內容 接著用 `.append()` 函數來讓元素吃下別的元素，也就是「把另一個元素收為子元素」，就跟收養子女一樣！ 最後 html 就會變成這樣 ``` <div id="app"> <h1>這是標題</h1> <p>這是段落文字</p> </div> ``` 馬上貼到 jsfiddle 試試看，實驗一下、玩玩看！ --- 在寫 html 的時候，出現巢狀結構是很常見的 操作 DOM 時，當然也可以自由創造巢狀結構 ``` var elem1 = document.createElement('div'); elem1.textContent = 'level 1'; var elem2 = document.createElement('div'); elem2.textContent = 'level 2'; var elem3 = document.createElement('div'); elem3.textContent = 'level 3'; var app = document.getElementById('app'); app.append(elem1); elem1.append(elem2); elem2.append(elem3); ``` 到 jsfiddle 試試看，就會清楚實際效果囉！ --- 在開發的過程中，基本上會不斷打錯字、寫錯用法。程式跑不出結果，很正常 這種時候，有兩個常用的除錯方法，我們叫「debug 的方法」 第一個方法是 `alert`，你就把不確定的內容，給 alert 出來看看就對了，到處寫 alert 看一下變數內容，確定內容跟預期一樣，再接著繼續寫 第二個方法是 `console.log()`，把參數傳進去，接著打開瀏覽器的「開發者工具」，就會看到結果，通常會比 alert 內容更詳細、更方便除錯 除此之外，JavaScript 相關的各種錯誤訊息，都會在「開發者工具」出現。請去研究你所使用的瀏覽器，如何打開這個工具 ``` var x = 123; var y = 'hello'; var z = document.createElement('div'); console.log(x) console.log(y) console.log(z) ``` 請打開瀏覽器的開發者工具，實際看一下上述範例的結果。 ## 課後作業 假設你是一個健忘的人，你決定寫一個「待辦事項管理」應用程式，來幫助自己 這一課，先實作「新增事項」的功能 --- 在上面，做一個文字輸入框，旁邊有一個「新增」按鈕 在下面，做一個展示待辦事項的清單，請使用這樣的結構，id 跟 css 之類的你可以自由決定 ``` <ul> <li> <span>倒垃圾</span> </li> <li> <span>繳電話費</span> </li> <li> <span>採買本週食材</span> </li> </ul> ``` 點擊「新增」按鈕，會將新事項插入到清單最底部 請稍微替這個清單工具加一點 css 屬性，弄得漂亮一點，這樣的工具才讓人想用 --- 除此之外，請練習一下 `console.log` 的用法，不然之後遇到錯誤，幾乎沒辦法除錯 請把作業內容中，出現的變數，隨便挑三個，用 `console.log` 印到開發者工具中，然後用瀏覽器看一下內容 --- 做出以上功能，你就完成這次的課程目標了！
本課程為 JavaScript 基礎課程的第二部份 第一部份的專案練習，已經學習到程式設計的基本觀念 第二部份，將藉由另一個專案，接著學習更多程式設計觀念 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識。 還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材：JavaScript（一）—— 幫衣服工廠做個好用表單](https://codelove.tw/@howtomakeaturn/course/l3j5xk) 準備好的話，讓我們馬上開始吧！
簡單複習一下，在這份教材中，我們學會了 - 宣告變數 - 宣告函式 - 操作 onclick 事件 - 字串操作、數字操作 - 能從網頁元素取得資料 - 能更新網頁元素的內容 - if/else 條件流程控制 - 認識資料型態的差異與轉換 在任何學校、補習班，學習程式設計，不論程式語言，不論領域，有很多通用的基本觀念要學 本課程的內容，已讓你學會了其中的一大部份 我鼓勵你針對其中有興趣的部份，搜尋關鍵字，自行研究一下，有更多好用、有趣的東西可以學 --- 在程式設計中，一樣的任務，有多種寫法可以完成 在網頁開發中，更是如此。上網研究時，你會發現，在 JavaScript 中有很多函式、屬性，看起來根本目的重複了 為何會有這麼多種寫法？哪種是對的？ 有人會說Ａ才是正確做法；有人會說Ｂ才是正確做法 我個人建議是：通通都可以！隨便寫，你高興就好，能完成任務就好 各種做法的優劣之處，更有經驗之後，才能分得出差別 很多時候，根本就只是主觀偏好而已，沒有優劣之分 更多時候，都只是出於歷史因素： 「當年為了ＸＸＸ的苦衷，設計成這樣。後來大環境改變，有了新的設計。但是要兼具新舊相容性，於是並存，導致各種用法看起來有點亂」 所以，你就隨便寫吧！能搞定、東西能跑，就對了！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（二）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/vx8gqZ
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
