讓我總結說明一下，老方法、新方法的關鍵思維差異： - 在老方法中，工程師眼中主要關心 html，開發過程會一直去思考 html 結構，因為「應用程式的狀態（資料）」就存在 html 之中，html 同時是狀態、也是 UI - 在新方法中，工程師眼中主要關心 data model，通常就是一個 JSON 物件。這個物件的各個屬性，足以表達目前應用程式的狀態。至於狀態要怎麼呈現為 UI，則視為另一個獨立任務，可以另外處理。像這樣把兩件事分開來思考，對頭腦的負擔也比較小 --- 同樣的待辦清單小工具，原本的寫法，與現在的新寫法，請你比較一下程式碼 有沒有覺得變得易讀、好維護許多呢？ 在課程中，我多次說過以下這段描述： > 原本那種寫法，我稱之為「在各處胡亂更新各處 DOM」的寫法 > 新的那種寫法，只有在寫 render 時，腦中要思考 DOM > 在應用程式的其他地方，腦中都是思考 data model 就好 現在你懂我描述的感覺了嗎？ 在這個小工具的例子中，改善的程度可能不夠明顯 但在中型以上的網站、具有高互動性的複雜網頁，一定是用新寫法比較好 --- 這次的課程，讓你的能力從「前端設計」進入到「前端工程」了 之所以叫「工程」，是因為有時候需要建立中型、大型應用程式，這時就需要工程素養 原本那種「在各處胡亂更新各處 DOM」的寫法，絕對無法建立出大型軟體 就跟蓋房子一樣，隨便蓋的小房子臨時居住一下還可以，真的要蓋出厲害的高樓，當然需要足夠的工程技法、素養 --- 寫本課程作業時，render function 的內容會變很多 在實務上，render function 的任務會由框架或者某種模板引擎（template engine）套件完成 所以開發起來會省力很多，不像本課程作業寫起來那樣吃力 你未來使用任何工具只要知道：這些工具的背後，大概就是做了類似這樣 data model + render function 的事情即可！ --- 本課所教的 data model + render function 的寫法 是我為了教學方便，設計出來的一種「手工」開發方法 實務上，中型以上專案，幾乎都會使用 React 或者 Vue 框架 我留意到坊間許多課程、補習班，很快就進入框架的教學 我認為許多學員在結業之後，還是一知半解，甚至分不清哪些是 JavaScript 觀念，哪些是框架獨有的觀念 所以我才在這邊，教導這套手工、但很簡單的開發方法 寫過這種開發方法，接著再去學前端框架，我認為可以大幅改善那種「框架後面很黑箱」的感覺 所以你之後挑選任何框架學習，關於 `application state` 與 `render 出 UI` 這兩者的關係，就大致有個底了 --- 最後，老話一句，視網頁的需要，如果只是簡單頁面、小小 UI 工具，那麼就用老方法隨便寫即可。何況還有 data attribute 可以使用來管理狀態，簡單又方便。很多實務情境下，這樣也很夠了 如果真的有工程等級的需要，則可以使用本課程技巧，管理好「應用程式的狀態」，或者直接挑選框架使用 這行業有一句話叫做：No Silver Bullet（沒有萬用解法） 在開發手法的選擇上，也是一樣，請綜合權衡之後，選擇當下適合的方法吧！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（七）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/AqJGxd
## 課程目標 繼續熟悉 data model 的觀念 ## 課程內容 有了 data model 與 render function 之後 除了在更新資料時，腦中一律只要想著 data model 就好 就連在撈資料時，也一樣只要思考 data model 就好，非常方便 反觀，原本的原始寫法，需要從 UI 結構中，分析出當前的資料狀態，麻煩得多 ## 課後作業 接續上一課作業，這次來實作「匯出」按鈕 請加入類似這樣的按鈕 ``` <button onclick="export()">匯出</button> ``` 接著請將 `export` 函式完成，過程中不能去讀取 DOM，只能去讀取 data model ``` function export() { // 請寫出此函式內容 } ``` 匯出時用 alert 跳出訊息「今日待辦：1. 洗衣服 2. 買文具 3. 去健身房」 根據事項，如果是重要事項，請用星號包起來 `*重要任務*`，如果是緊急事項，請用雙星號包起來 `**緊急任務**` 舉例來說，按下匯出按鈕之後，就用 alert 跳出訊息「`今日待辦：1. 洗衣服 2. *買文具* 3. **去健身房**`」 做出以上功能，你就完成這次的課程目標了！
## 課程目標 能夠在陣列更新元素 繼續熟悉 anonymous function 的觀念 ## 課程內容 這課先介紹一種資料型態：布林（boolean） 這種資料型態，幾乎所有程式語言都有，是一種寫程式必備的基本資料型態 ``` var x = true; var y = false; if (x) { alert('hello x'); } if (y) { alert('hello y'); } ``` 布林值只有 `true` 跟 `false` 兩種，在 if/else 條件流程控制中，會影響程式流程 這種型態，也是建造 data model 時一定會用到的型態 --- 在 JavaScript 更新陣列元素的方法，一樣有非常多種 這邊介紹一種根據索引更新的方法 ``` var fruits = ['apple', 'banana', 'orange']; fruits[2] = 'lemon'; console.log(fruits) ``` 老話一句，就是實務上，你就根據情況，隨便找一個能用的方式，來操作陣列就對了 ## 課後作業 接續上一課作業，這次來實作「已完成」按鈕 data model 的結構請更新成這樣 ``` var todos = [ { title: "倒垃圾", category: "normal", isCompleted: false }, { title: "繳電話費", category: "important", isCompleted: false }, { title: "採買本週食材", category: "urgent", isCompleted: false }, ]; ``` 請更新 `render` 函式，讓 UI 看起來像這樣 ``` - 倒垃圾 [標示為已完成][刪除] - 繳電話費 [標示為已完成][刪除] - 採買本週食材 [標示為已完成][刪除] ``` 如果倒完垃圾了，就可以點擊按鈕，來備註已完成，這時才顯示 （已完成） 文字 ``` - 倒垃圾（已完成）[標示為未完成][刪除] - 繳電話費 [標示為已完成][刪除] - 採買本週食材 [標示為已完成][刪除] ``` 然後在 render 過程中，動態產生 button 的時候，將 `.onclick` 屬性設定為一個 arrow function 這個 arrow function 不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM ``` toggleBtn.onclick = () => { // 請寫出此 arrow function 內容（更新 todos 陣列） render(); }; ``` 做出以上功能，你就完成這次的課程目標了！
## 課程目標 繼續熟悉 render function 的觀念 ## 課程內容 render function 雖然只是將 data model 轉換成 UI 呈現在 root 裡面 但是根據資料內容的不同，render function 當然也可以有各種條件判斷、巢狀結構等等，較複雜的邏輯 ``` <div id="root"> </div> ``` ``` var products = [ { name: "冬季外套", category: "women", }, { name: "男士大衣", category: "men", }, ] render(); function render() { var root = document.querySelector('#root'); root.textContent = ""; for (product of products) { var name = document.createElement('div'); name.textContent = '商品名稱：' + product.name; if (product.category == 'men') { name.style.color = 'blue'; } else if (product.category == 'women') { name.style.color = 'red'; } root.append(name); } } ``` 別忘了 render function 肩負呈現 UI 的重責大任 所以 `render` 會看起來比較複雜 但是，除了 `render` 以外的函式，通通都變簡單了 ## 課後作業 接續上一課作業，這次來實作「急迫性分類」 data model 的結構請更新成這樣 ``` var todos = [ { title: "倒垃圾", category: "normal" }, { title: "繳電話費", category: "important" }, { title: "採買本週食材", category: "urgent" }, ]; ``` 然後 html 的部份會變成像這樣 ``` <input type="text"> <button onclick="add()">新增</button> <select> <option value="normal">一般</option> <option value="important">重要</option> <option value="urgent">緊急</option> </select> <div id="root"> </div> ``` 請更新 `render` 函式，將重要事項顯示為「橘色」，緊急事項顯示為「紅色」 做出以上功能，你就完成這次的課程目標了！
## 課程目標 能夠從陣列刪除元素 認識 for in 迴圈寫法 認識匿名函式（anonymous function） ## 課程內容 在 JavaScript 中，刪除陣列元素的方法，有超多種 這邊介紹一種根據索引刪除的方法 ``` var fruits = ["apple", "banana", "orange"]; var index = 1; var num = 1; fruits.splice(index, num) console.log(fruits) ``` `.splice()` 函式第一個傳索引，第二個傳要刪的數量，通常就傳 1 就好了（一次刪一個即可） 實務上，你就根據情況，隨便找一個能用的方式，來操作陣列就對了 --- 之前我們介紹過 for of 的寫法，很簡單好用 ``` var fruits = ["apple", "banana", "orange"]; for (const fruit of fruits) { console.log(fruit) } ``` 這邊多介紹一個 for in 的寫法，需要索引時可以用 ``` var fruits = ["apple", "banana", "orange"]; for (const index in fruits) { const fruit = fruits[index]; console.log(index); console.log(fruit); } ``` --- 最後來介紹匿名函式（anonymous function） 聽起來很玄，但其實就只是沒有名字的函式而已 以下是有名字的函式 ``` function hello1() { alert("hello1"); } var hello2 = () => { alert("hello2"); } ``` 以下是沒有名字的函式 ``` <button> hello </button> ``` ``` var button = document.querySelector('button'); button.onclick = () => { alert(123) }; ``` 動態宣告一個函式，然後直接指派、使用，就是匿名函式 在 JavaScript 中，很多時候，有些小任務，需要宣告新函式來用，但又懶得去設計命名那些的 這時候就可以用匿名函式來節省時間 雖然看起來有點不習慣、有點奇怪 但在實務上，非常多地方，其實都會用到匿名函式，算是 JavaScript 非常好用的一個功能、特性 ## 課後作業 接續上一課作業，這次來實作「刪除事項」 請更新 `render` 函式，讓 UI 看起來像這樣 ``` <ul> <li> <span>倒垃圾</span> <button>刪除</button> </li> <li> <span>繳電話費</span> <button>刪除</button> </li> <li> <span>採買本週食材</span> <button>刪除</button> </li> </ul> ``` 然後在過程中，動態產生 button 的時候，將 `.onclick` 屬性設定為一個 arrow function 這個 arrow function 不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM ``` deleteBtn.onclick = () => { // 請寫出此 arrow function 內容（更新 todos 陣列） render(); }; ``` --- 提示：由於 javascript 中 hoisting 的特性，for loop 拿到的索引，在裡面的 arrow function 中使用，很容易抓錯 關於索引一直拿不到的問題，請參閱這邊我跟 birdie 同學的討論 https://codelove.tw/@birdie2019/post/2anbka --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 能夠新增元素到陣列 ## 課程內容 因為我們不再使用「在各處胡亂更新各處 DOM」的寫法 現在要認真開始學習，如何在 JavaScript 中，用各種變數、資料型別，建立出 data model 這一課來學學新增元素到陣列的方法 ``` <button onclick="more()"> more </button> ``` ``` var fruits = ["apple", "banana"]; function more() { fruits.push("orange"); console.log(fruits); } ``` 非常簡單，使用陣列的 `.push()` 函式就可以 在 JavaScript 中，陣列相關操作的函式、寫法，有非常多種 我的建議是，各種寫法都可以，如果你有查到，隨便挑你喜歡的用就可以了 ## 課後作業 接續上一課作業，這次來實作「新增事項」 請在 html 的部份加入「輸入資料的 UI」，大概類似這樣 ``` <input type="text"> <button onclick="add()">新增</button> <div id="root"> </div> ``` 接著請將 `add` 函式完成，過程中不能直接更新 DOM，而是先去更新 data model，接著 render，用這種方式間接更新 DOM ``` function add() { // 請寫出此函式內容（更新 todos 陣列） render(); } ``` 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識 data model 的觀念 認識 render function 的觀念 ## 課程內容 如果電商網站上有這樣的內容 ``` <div> 商品名稱：<span id="name">冬季外套</span> 價格：<span id="price">$1,990</span> 分類：<span id="category">女裝</span> 剩餘數量：<span id="remain">5</span> </div> ``` 在網站上的任何操作，菜鳥工程師會覺得就直接去更新 DOM 就好了 在程式還小的時候，這樣開發沒問題 但是當專案變大之後，這樣的開發會遇到問題，程式碼會越來越難維護 這種很難維護的寫法，我稱之為「在各處胡亂更新各處 DOM」的寫法 --- 有經驗的工程師在開發的時候，會習慣將應用程式的「狀態」與程式的其他部份分開來 這個「狀態」我們叫 state 或者 model 或者 data model 實務上，這三種名詞都很常看到，我在文章中也會混雜著交互使用 同樣的電商頁面，資深工程師會覺得看到了以下 data model ``` var product = { name: "冬季外套", price: 1990, category: "women", remain: 5 } ``` 而在開發各種功能的時候，資深工程師會覺得，一律先更新 data model，再接著拿 data model 來呈現出 UI 比較好 這樣在開發複雜應用程式的時候，相關函式一律只要關心 data model 就好，不用管 UI 在思考的時候，腦子的負擔會小很多，因為你變得只要想著應用程式的「狀態」就好 --- 那麽只更新 data model，那何時更新 UI 呢？ 這邊介紹一個簡單的方法，叫做 render function 就是放一個 root 元素，作為程式 UI 的容器 接著寫一個 render 函式，來根據 data model，畫出全部 UI 到 root 裡面 這個 render 函式有三個注意事項 - 第一行要先清空 UI - 在所有跟「狀態」有關操作的最後一行，都要呼叫這個函式 - 所有 DOM 操作一律由 render 函式處理（其他全部函式，通通禁止更新 DOM） 請在 jsfiddle 嘗試以下範例 ``` <div id="root"> </div> <button onclick="decrease()">decrese</button> <button onclick="increase()">increase</button> ``` ``` var product = { name: "冬季外套", price: 1990, category: "women", remain: 5 }; render(); function render() { var root = document.querySelector('#root'); root.textContent = ""; var name = document.createElement('div'); name.textContent = '商品名稱：' + product.name; var price = document.createElement('div'); price.textContent = '價格：' + product.price; var category = document.createElement('div'); category.textContent = '分類：' + product.category; var remain = document.createElement('div'); remain.textContent = '剩餘數量：' + product.remain; root.append(name); root.append(price); root.append(category); root.append(remain); } function decrease() { product.remain = product.remain - 1; render(); } function increase() { product.remain = product.remain + 1; render(); } ``` 這樣的寫法，很神奇地，關於 DOM 的操作通通放在 `render` 即可 雖然 `render` 函式變得很多行、很大、寫起來比較麻煩 但是除了 `render` 以外的函式，通通都變簡單了 這是「短期麻煩，長期方便」的一個明顯例子 ## 課後作業 在之前的課程，你開發過一個「待辦事項小工具」，甚至還加上了 local storage 儲存功能 在開發的過程中，我相信你有感覺到，程式碼越來越大團了，新功能雖然寫得出來，但越來越難寫了 回頭看看當初的程式碼，你會發現讀起來不容易，要再維護、擴充功能，也都不太容易 讓我們使用新方法，重新開發一次這個小工具 請使用 https://jsfiddle.net 並且建立一份新的 fiddle --- 這一課，不開發任何功能，先實作把 data model 給 render 出來的效果 請使用以下 html 作為 root 元素 ``` <div id="root"> </div> ``` 然後複製以下 js 使用，將 `render` 函式完成 ``` var todos = [ { title: "倒垃圾" }, { title: "繳電話費" }, { title: "採買本週食材" }, ]; function render() { // 請寫出此函式內容 } render(); ``` 在這段 js 中，`todos` 陣列，就是我們的 data model 最後，在畫面上，應該會出現以下內容 ``` <div id="root"> <ul> <li> <span>倒垃圾</span> </li> <li> <span>繳電話費</span> </li> <li> <span>採買本週食材</span> </li> </ul> </div> ``` 做出以上功能，你就完成這次的課程目標了！
身為前端新手學習者，雖然你已經知道怎麼寫 UI 小元件、怎麼寫簡單小工具 但是看著自己每天在用的那些網站、大型科技公司開發的 web application（網路應用程式） 你一定常常心想：這也太華麗了，畫面上 DOM 的變化很複雜、很頻繁，我好像寫不出來呀？ 別擔心，這是因為你目前為止的技能與開發方法，大概只接近 2010 年以前的業界工程師 你目前為止的能力還是比較接近「能把東西設計出來、做出來」而已，還不能夠「帶著工程思維去建造應用程式」 --- 這一門課程，會教你現代前端工程師，開發應用程式的方法與技巧 雖說是現代技巧，但完全不會用到 React 或者 Vue 這種框架 但在學完之後，你將可以比別人更懂，各種框架背後的基礎原理 這些內容非常有趣，將會大幅提升你的「工程素養」，讓你具備遠超過一般新手的基本功！ 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
## 課程目標 認識 AJAX 錯誤處理 ## 課程內容 在前一課，我們說過以下的話 > 有些任務現在還不會立刻執行，但我先把要執行的任務交待清楚，時間點到的時候，就執行 > 以 UI 動作來說，時間點就是 `onclick` 之時、`onchange` 之時 > 以 AJAX 動作來說，時間點就是 `拿到主機回應` 之時 實際上，AJAX 的時間點，除了 `拿到主機回應` 之時，還有一個，就是 `發現主機回應失敗` 之時 把原本的範例 ``` fetch('https://fakestoreapi.com/users/1') .then(res=>res.json()) .then(json=>console.log(json)) ``` 故意打錯字試試看，然後加上錯誤處理機制 ``` fetch('https://fakestoreapi.com/users1') .then(res=>res.json()) .then(json=>console.log(json)) .catch(error => { alert(error); }) ``` 就跟 `.then()` 函式把任務傳進去類似，`.catch()` 一樣是把任務傳進去，只是改傳「AJAX 失敗的時候要執行的任務」 --- 這邊只是舉例，才故意打錯字 實務上，AJAX 失敗可能是 - 主機故障、或者過度忙碌無法回應 - 呼叫 API 時，登入驗證資訊過期 - API 設計成有額度限制，用戶額度耗完了，被主機拒絕 - 用戶自己的網路斷線了（網頁打開時正常，但發送 AJAX 時已斷線） 等等很多可能，要看 API 主機是如何設計的 --- 實務上，`.catch()` 內要提醒使用者，剛才的動作失敗，請他重新嘗試 我個人通常就用 alert 跳一個訊息「抱歉，系統出現錯誤，請稍後重新嘗試。若持續出錯，請聯絡客服信箱」就結束了 但在公司的大型專案，需要更好 UX 的話，請與設計師討論後決定如何優雅地處理錯誤情境 ## 課後作業 接續前一課的作業，請加上錯誤處理機制 用 alert 跳出 `抱歉，請稍後重新嘗試。` 就好了 接著，請把電腦的 wifi 或有線網路，斷線 然後點擊「Load Products」按鈕，應該會看到錯誤提示訊息 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識基本的 AJAX 原理 ## 課程內容 這一課來認識大名鼎鼎的 AJAX 觀念 AJAX 全名 Asynchronous JavaScript and XML 簡單來說，就是「非同步從主機取得資料來更新網頁內容」的技術 舊式的網頁，都是瀏覽器向主機發送 HTTP 請求 -> 主機回應一大坨 html 內容 -> 瀏覽器顯示漂亮網頁給用戶看 因為是一次拿到一大坨 html 內容，我們說「網頁上全部內容都是同步取得」 現代的網頁，也是有很多頁面是這樣直接取得，但有更多功能，是依靠非同步取得資料之後來更新的 - 滑動到網頁下方，動態載入了更多貼文 - 對內容按讚，按讚成功網頁出現了小變化 - 聊天室與別人聊天，網頁也是一段一段文字更新 這些都是使用 AJAX 技術的例子 也就是先載入基本網頁內容，再接著根據需求，於不同時間點發送 HTTP 請求取得部份內容，所以叫做非同步 實務上，我們會說「這邊要發一個 AJAX 跟主機要資料」 --- 讓我們拿一個「模擬線上購物網站 API」來當作例子 https://fakestoreapi.com/ 發一個 AJAX 取得 ID 為 1 的用戶資料 ``` fetch('https://fakestoreapi.com/users/1') .then(res=>res.json()) .then(json=>console.log(json)) ``` 請在 jsfiddle 試試，看看結果 會看到一個包含信箱、ID、姓名、電話等等欄位的用戶個資，以物件的形式呈現 這邊使用了內建的 fetch 函式，參數放入要呼叫的 API 網址 接著使用 `.then()` 函式，由於是直接寫在後面，這相當於把 `fetch()` 回傳的東西，直接當成物件再接著呼叫 `.then()` 函式，然後再把結果當成物件再呼叫 `.then()` 一次 也就是跟這段一模一樣 ``` var result1 = fetch('https://fakestoreapi.com/users/1'); var result2 = result1.then(res=>res.json()); var result3 = result2.then(json=>console.log(json)); alert(result1) alert(result2) alert(result3) ``` 請在 jsfiddle 試試，會發現 console 顯示的個資一樣，這邊用三個 alert 觀察過程中的東西 會發現顯示三次 `[object Promise]`，這個 Promise 是一個進階觀念，這邊不細談，簡單講就是處理非同步請求的一種資料格式 `.then()` 參數傳進一個箭頭函式，這是省略大括號 `{}` 的箭頭函式寫法，其實就只是會自動回傳結果的函式寫法而已 但參數放了個函式，看起來有點怪，為何要這樣寫？ --- 記得我們之前寫過的動態綁定 onclick 事件嗎？ ``` <button id="my-btn">Click me</button> ``` ``` // 第一種寫法 function myFunction() { alert('你點擊了按鈕！'); } var btn = document.getElementById('my-btn'); btn.onclick = myFunction; ``` 網頁元素的事件處理，也是一種「非同步」程式設計 也就是我不確定「點擊」事件何時會發生，但我先「綁定」好事件發生時要做的任務，綁完就讓網頁正常呈現就好 上面的程式碼，可以改寫成這樣 ``` // 第二種寫法 var btn = document.getElementById('my-btn'); btn.onclick = () => { alert('你點擊了按鈕！'); } ``` 如果使用 jQuery，那還可以這樣改寫 ``` // 第三種寫法 $('#my-btn').click(() => { alert('你點擊了按鈕！'); }) ``` 第一種寫法，看起來像是：我先定義好函式，接著把函式名稱當作變數，綁定到 onclick 屬性 第二種寫法，看起來像是：onclick 這邊現場寫一個箭頭函式，把要執行的任務，當場交待清楚 第三種寫法，看起來像是：jQuery 提供的 `.click()` 函式，會負責把事件綁好，參數傳任務進去就對了 以上三種寫法，效果是完全一模一樣的！ 所以你早就接觸過「非同步」程式設計了 也就是「有些任務現在還不會立刻執行，但我先把要執行的任務交待清楚，時間點到的時候，就執行」 以 UI 動作來說，時間點就是 `onclick` 之時、`onchange` 之時 以 AJAX 動作來說，時間點就是 `拿到主機回應` 之時 像這種不是馬上執行的動作，在 JavaScript 領域，我們習慣用「寫一段函式定義當作參數傳進去」來表達！ --- 回頭看一下我們的範例 ``` fetch('https://fakestoreapi.com/users/1') .then(res=>res.json()) .then(json=>console.log(json)) ``` 因為 fetch 第一個回傳的結果，代表的是一個 `HTTP 回應物件`，這個回應物件的 HTTP body 是實際的 JSON 內容，可以用 `.json()` 函式取得內容 所以第二個 `.then()` 的參數，才是我們真正想做的事情 看不懂沒關係，我們多看幾個例子吧 取得全部用戶個資的 AJAX。觀察 console 結果，會看到一個陣列，內含大量個資物件 ``` fetch('https://fakestoreapi.com/users') .then(res=>res.json()) .then(json=>console.log(json)) ``` 取得五筆用戶個資，也是拿到陣列 ``` fetch('https://fakestoreapi.com/users?limit=5') .then(res=>res.json()) .then(json=>console.log(json)) ``` 以上內容，全部通通看不懂沒關係，畢竟，需要多了解一些 HTTP 協定與術語，比較好理解 你就先照做就好：要發 AJAX，就用 `fetch()` 函式，接著第一個 `then()` 要執行 `.json()` 函式，然後第二個函式才是你真正要執行的任務！ ## 課後作業 請使用 https://jsfiddle.net/ 請使用「模擬線上購物網站 API」 https://fakestoreapi.com/ 假設正在開發一個讀取全部商品資料的頁面 用以下 html 為基礎 ``` <button>Load Products</button> <hr> <ul></ul> ``` 點擊按鈕，發送 AJAX 到 https://fakestoreapi.com/products 請求全部商品資料 拿到資料之後，將每筆資料用以下格式呈現，塞進 `<ul>` 元素裡面 ``` <li> <span>xxx</span> <button>Details</button> </li> ``` xxx 是商品名稱。點擊 Details 按鈕，連續跳出三個 alert，分別顯示 `id` `category` `description` --- 請注意，在 for 迴圈裡面綁定 onclick 事件的時候，for 迴圈的參數請加上 `const` 舉例來說，請這樣寫 ``` for (const product of json) { ``` 請「不要」這樣寫 ``` for (product of json) { ``` 否則，在迴圈裡面的 onclick 事件，執行起來會有 bug 原因跟上一課提到的 Hoisting 現象有關 我認為這是 JavaScript 的設計失敗，所以詳細原因我不想說明 這是屬於上個世代 JS 工程師的痛苦回憶，這一代的 JS 工程師不需要經歷 現在就用 ES6 語法，宣告變數一律記得加上 `const` 或 `let` 就對了 --- 做出以上功能，你就完成這次的課程目標了！
框架背後有什麼必學觀念的？這篇文章簡單整理如下 原文出處：https://dev.to/lexlohr/concepts-behind-modern-frameworks-4m1g --- 很多初學者會問“我應該學哪個框架？”和“學一個框架之前需要學多少JS或TS？” - 無數自以為是的文章都在宣傳作者首選框架或庫的優勢，而不是向讀者展示其背後的概念、教他們如何做出明智的決定。讓我們先解決第二個問題： ## “在學習框架之前要學多少 JS/TS？” 盡可能多地理解它們的基本概念。您將需要了解基本資料類型、函數、基本運算符和文檔對像模型 (DOM)，這是 HTML 和 CSS 在 JS 中的基礎。雖然先學一點當然沒關係，但沒必要先精通框架或庫。 如果您是一個完全的初學者，[JS for cats](http://jsforcats.com/) 可能是您第一步的好資源。繼續前進，直到您感到自信為止，然後繼續前進，直到您開始感到自信不足。那就是你了解足夠的 JS/TS 並可以開始學框架的時間。其餘的你可以邊走邊學。 ## “你指的是什麼概念？” - 狀態 - 效果 - 記憶化 - 模板和渲染 所有現代框架都從這些概念中衍伸出它們的功能。 ### 狀態 狀態只是讓您的應用程式跑起來的資料。它可能在全局級別上，適用於應用程式的較大部分，或適用於單個元件。讓我們以一個簡單的計數器為例。它保留的計數是狀態。我們可以讀取狀態並寫入狀態以增加計數。 最簡單的表示通常是一個變數，其中包含我們的狀態所包含的資料： ``` let count = 0; const increment = () => { count++; }; const button = document.createElement('button'); button.textContent = count; button.addEventListener('click', increment); document.body.appendChild(button); ``` 但是這段程式碼有一個問題：對 count 的更改，就像對 increment 所做的更改一樣，不會更新按鈕的文本內容。我們可以手動更新所有內容，但這對於更複雜的用例來說並不能很好地擴展。 `count` 更新其用戶的能力稱為*反應性*。這是通過訂閱並重新執行應用程式的訂閱部分來更新的。 幾乎每個現代前端框架和庫都有一種響應式管理狀態的方法。解決方案分為三部分，至少採用其中之一或混合使用： - Observables / Signals - Reconciliation of immutable updates - Transpilation #### Observables / Signals Observables 基本上是允許藉由訂閱閱讀器的函數來進行讀取的結構。然後訂閱者在更新時重新執行： ``` const state = (initialValue) => ({ _value: initialValue, get: function() { /* subscribe */; return this._value; }, set: function(value) { this._value = value; /* re-run subscribers */; } }); ``` 這個概念的第一個用途之一是在 [knockout](https://knockoutjs.com/) 中，它使用相同的函數，帶和不帶參數進行寫/讀存取。 這種模式目前正在以「信號」的形式復興，例如在 [Solid.js](https://www.solidjs.com/docs/latest/api#createsignal) 和 [preact signals](https://preactjs.com /guide/v10/signals/)，但在 [Vue](https://vuejs.org/) 和 [Svelte](https://svelte.dev/) 的底層使用了相同的模式。 [RxJS](https://rxjs.dev/) 為 [Angular](https://angular.io/) 的反應層提供動力，是這一原則的延伸，超越了簡單狀態，但有人可能會爭辯說它模擬複雜性的能力可能反而綁手綁腳。 [Solid.js](https://www.solidjs.com/) 還以儲存（可以通過 setter 操作的物件）和可變（可以像平常一樣使用的物件）的形式進一步抽象這些信號 JS 物件或 [Vue](https://vuejs.org/) 中的狀態來處理巢狀狀態物件。 #### Reconciliation of immutable states 不變性意味著如果一個物件的屬性發生變化，整個物件引用必須改變，所以簡單的引用比較可以很容易地檢測到是否有變化，這就是協調器所做的。 ``` const state1 = { todos: [{ text: 'understand immutability', complete: false }], currentText: '' }; // updating the current text: const state2 = { todos: state1.todos, currentText: 'understand reconciliation' }; // adding a to-do: const state3 = { todos: [ state.todos[0], { text: 'understand reconciliation', complete: true } ], currentText: '' }; // this breaks immutability: state3.currentText = 'I am not immutable!'; ``` 如您所見，未更改專案的引用被重新使用。如果協調器檢測到不同的物件引用，它會再次使用狀態（props, memos, effects, context）來重跑所有元件。由於讀取存取是被動的，這需要手動指定對反應值的依賴性。 顯然，您不是以這種方式定義狀態。您可以從現有屬性建置它，也可以使用所謂的 reducer。reducer 是一個函數，它接受一個狀態並返回另一個狀態。 [react](https://reactjs.org/) 和 [preact](https://preactjs.com/) 使用此模式。它適合與 vDOM 一起使用，我們將在稍後描述模板時探討它。 並非每個框架都使用其 vDOM 來使狀態完全響應。 例如 [Mithril.JS](https://mithril.js.org/components.html#state)，元件會在設置的事件後變化後更新狀態；否則你必須手動觸發 `m.redraw()`。 #### Transpilation Transpilation 是一個建置步驟，它重寫我們的程式碼以使其在舊瀏覽器上執行或賦予它額外的能力；在這種情況下，該技術用於將簡單變數更改為反應系統的一部分。 [Svelte](https://svelte.dev/) 基於一個轉譯器，該轉譯器還通過看似簡單的變數宣告和存取為其反應式系統提供動力。 順便說一句，[Solid.js](https://solidjs.com) 使用轉譯，但不是針對它的狀態，只是針對模板。 ### 效果 在大多數情況下，我們需要對反應狀態做更多的事情，而不是從中衍伸並渲染到 DOM 中。我們必須管理副作用，這些都是由於視圖更新之外的狀態更改而發生的所有事情（儘管 [Solid.js](https://solidjs.com) 等一些框架也將視圖更改視為效果）。 還記得第一個例子中，訂閱處理被故意遺漏的狀態嗎？讓我們完成這個處理效果，來作為對更新的反應： ``` const context = []; const state = (initialValue) => ({ _subscribers: new Set(), _value: initialValue, get: function() { const current = context.at(-1); if (current) { this._subscribers.add(current); } return this._value; }, set: function(value) { if (this._value === value) { return; } this._value = value; this._subscribers.forEach(sub => sub()); } }); const effect = (fn) => { const execute = () => { context.push(execute); try { fn(); } finally { context.pop(); } }; execute(); }; ``` 這基本上是 [preact signals](https://preactjs.com/guide/v10/signals/) 或 [Solid.js](https://solidjs.com) 中反應狀態的簡化，沒有錯誤處理和狀態突變模式（使用接收前一個值並返回下一個值的函數），但這很容易加入。 它允許我們使前面的範例具有反應性： ``` const count = state(0); const increment = () => count.set(count.get() + 1); const button = document.createElement('button'); effect(() => { button.textContent = count.get(); }); button.addEventListener('click', increment); document.body.appendChild(button); ``` > ☝ 使用您的開發人員工具在 [空白頁面](about:blank) 中嘗試上述兩個程式碼塊。 在大多數情況下，框架允許不同的時間安排，讓效果在渲染 DOM 之前、期間或之後執行。 ### 記憶化 Memoization 意味著緩存從狀態計算的值，它會從狀態衍伸的變化更新時更新。它基本上是一種回傳衍伸狀態的效果。 在重新執行元件功能的框架中，例如 [react](https://reactjs.org/) 和 [preact](https://preactjs.com/)，這讓某些複雜計算不需要每次都重複計算。 對於其他框架，情況恰恰相反：它允許您選擇部分組件進行響應式更新，同時緩存之前的計算。 對於我們簡單的反應式系統，memo 看起來像這樣： ``` const memo = (fn) => { let memoized; effect(() => { if (memoized) { memoized.set(fn()); } else { memoized = state(fn()); } }); return memoized.get; }; ``` ### 模板化和渲染 現在我們有了純的、衍伸的和緩存形式的狀態，我們想把它展示給用戶。在我們的範例中，我們直接使用 DOM 來加入按鈕並更新其文本內容。 為了對開發人員更加友好，幾乎所有現代框架都支持一些特定領域的語言來編寫類似於程式碼中所需輸出的內容。儘管有不同的風格，比如 `.jsx`、`.vue` 或 `.svelte` 文件，但它們都歸結為用類似於 HTML 的程式碼表示 DOM，因此基本上 ``` <div>Hello, World</div> // in your JS // becomes in your HTML: <div>Hello, World</div> ``` 你可能會問“我要把狀態放在哪裡？”。很好的問題。在大多數情況下，`{}` 用於表示屬性和節點周圍的動態內容。 最常用的 JS 模板語言擴展無疑是 JSX。對於 [react](https://reactjs.org)，它被編譯為純 JavaScript，其方式允許它建立 DOM 的虛擬表示，一種稱為虛擬文檔對像模型或簡稱 vDOM 的內部視圖狀態。 這樣設計的原因是：建立物件比存取 DOM 快得多，所以如果你能用當前的替換後者，你可以節省時間。但是，如果您在任何情況下都有大量 DOM 更改或建立無數物件而沒有更改，則此解決方案的優點就變成必須通過「記憶化」來規避的缺點。 ``` // original code <div>Hello, {name}</div> // transpiled to js createElement("div", null, "Hello, ", name); // executed js { "$$typeof": Symbol(react.element), "type": "div", "key": null, "ref": null, "props": { "children": "Hello, World" }, "_owner": null } // rendered vdom /* HTMLDivElement */<div>Hello, World</div> ``` 不過，JSX 不僅限於 react。例如，Solid 使用其轉譯器更徹底地更改程式碼： ``` // 1. original code <div>Hello, {name()}</div> // 2. transpiled to js const _tmpl$ = /*#__PURE__*/_$template(`<div>Hello, </div>`, 2); (() => { const _el$ = _tmpl$.cloneNode(true), _el$2 = _el$.firstChild; _$insert(_el$, name, null); return _el$; })(); // 3. executed js code /* HTMLDivElement */<div>Hello, World</div> ``` 雖然轉譯後的程式碼乍看可能令人望而生畏，但解釋這裡發生的事情卻相當簡單。首先，建立包含所有靜態部分的模板，然後複製它以建立其內容的新實體，並加入動態部分並連接以根據狀態更改進行更新。 Svelte 走得更遠，不僅可以轉換模板，還可以轉換狀態。 ``` // 1. original code <script> let name = 'World'; setTimeout(() => { name = 'you'; }, 1000); </script> <div>Hello, {name}</div> // 2. transpiled to js /* generated by Svelte v3.55.0 */ import { SvelteComponent, append, detach, element, init, insert, noop, safe_not_equal, set_data, text } from "svelte/internal"; function create_fragment(ctx) { let div; let t0; let t1; return { c() { div = element("div"); t0 = text("Hello, "); t1 = text(/*name*/ ctx[0]); }, m(target, anchor) { insert(target, div, anchor); append(div, t0); append(div, t1); }, p(ctx, [dirty]) { if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]); }, i: noop, o: noop, d(detaching) { if (detaching) detach(div); } }; } function instance($$self, $$props, $$invalidate) { let name = 'World'; setTimeout( () => { $$invalidate(0, name = 'you'); }, 1000 ); return [name]; } class Component extends SvelteComponent { constructor(options) { super(); init(this, options, instance, create_fragment, safe_not_equal, {}); } } export default Component; // 3. executed JS code /* HTMLDivElement */<div>Hello, World</div> ``` 也有例外。例如，在 [Mithril.js](https://mithril.js.org/) 中，雖然可以使用 JSX，但我們鼓勵您編寫 JS： ``` // 1. original JS code const Hello = { name: 'World', oninit: () => setTimeout(() => { Hello.name = 'you'; m.redraw(); }, 1000), view: () => m('div', 'Hello, ' + Hello.name + '!') }; // 2. executed JS code /* HTMLDivElement */<div>Hello, World</div> ``` 雖然大多數人會發現開發人員缺乏經驗，但其他人更喜歡完全控制他們的程式碼。根據他們主要想解決的問題，缺少轉譯步驟甚至可能是有益的。 儘管很少有人這樣推薦，許多其他框架都允許在不進行轉譯的情況下使用。 ## “我現在應該學習什麼框架或庫？” 我有一些好訊息和一些壞訊息要告訴你。 壞訊息是：沒有萬靈丹。沒有哪個框架在每個方面都比其他框架好得多。他們每個人都有自己的優勢和妥協。 [React](https://reactjs.org/) 有它的鉤子規則，[Angular](https://angular.io/) 缺乏簡單的信號，[Vue](https://vuejs.org/)缺乏向後兼容性，[Svelte](https://svelte.dev/) 不能很好地擴展，[Solid.js](https://www.solidjs.com/) 禁止解構，[Mithril.js]( https://mithril.js.org/) 並不是真正的反應式，僅舉幾例。 好訊息是：沒有錯誤的選擇——至少，除非專案的要求真的很有限，無論是在 bundle 大小還是性能方面。每個框架都會完成它的工作。有些人可能需要配合團隊的設計決策，這可能會使您的速度變慢，但無論如何您都應該能夠獲得可行的結果。 話雖這麼說，沒有框架也可能是一個可行的選擇。許多專案都被過度使用 JavaScript 破壞了。其實帶有一些互動性的靜態頁面就可以完成這項工作。 現在您已經了解了這些框架和庫應用的概念，請選擇最適合您當前任務的概念。不要害怕在下一個專案中切換框架。沒有必要學習所有這些。 如果你嘗試一個新的框架，我發現最有幫助的事情之一就是跟它的社群有所連結，無論是在社群媒體、discord、github 還是其他地方。他們可以告訴您哪些方法適合他們的框架，這將幫助您更快地獲得更好的解決方案。 ## “拜託，你*總是*有個人喜好吧！” 如果你的主要目標是就業，我建議學習 [react](https://reactjs.org/)。如果您想要輕鬆的性能和控制體驗，請嘗試 [Solid.js](https://solidjs.com)；你可能會在 Solid 的 [Discord](https://discord.com/invite/solidjs) 上見到我。 但請記住，所有其他選擇都同樣有效。你不應該因為我這麼說就選擇一個框架，而應該使用最適合你的框架。
## 課程目標 認識並且能使用 jQuery 套件 ## 課程內容 這一課要教的東西比較有爭議 jQuery 是 2006 - 2015 年代，前端網頁開發的王者 當時的瀏覽器廠商眾多，網頁規格 API 支援方式不同、不完整（尤其是 IE 一堆奇怪的 API） 當時的前端工程師，非常痛苦，要為了 IE 多改很多寫法 加上當時很多瀏覽器沒有支援 `.querySelector` `.querySelectorAll` 這些 Selector API 所以 jQuery 的出現，強大的選擇器語法，以及眾多方便的功能，大幅降低了前端開發的成本 不過，時至今日，jQuery 的大部份功能，都已在瀏覽器 JavaScript 語法中原生支援了 再加上開發大型應用程式，DOM 的管理一旦複雜起來，就會直接使用 React 或者 Vue 這種框架來管理 DOM，不會再手動去操作 DOM （前端框架會處理完 DOM 互動的部份。此時如果再手動操作 DOM，那程式碼就會一團混亂） 也就是說，小型專案，「不需要」用 jQuery；大型專案，「不可以」用 jQuery 除此之外，jQuery 套件本身檔案不小，引入此套件會影響網頁載入速度，影響 UX，同時會影響搜尋引擎 SEO 排名 --- 因為上述種種原因，在今天，前端工程師普遍鄙視 jQuery，避之惟恐不及 我個人的建議是：團隊在開發複雜的前端應用時，的確不要再用 jQuery 了！ 但是，當只是做小網站，接小案子賺錢，或者做個人的業餘專案（side project），只是希望快速做完某些功能時，jQuery 還是非常好用！ 原因有兩個 第一，jQuery 選擇器寫起來很短，可以少打很多字，開發很快速 第二，jQuery 外掛生態系存在已久，很多強大的 UI 元件會用到 jQuery，適合的話，實在沒道理全面放棄不用 而且，並不是所有網站，都需要直接導入 React 跟 Vue 這種大型框架！沒必要！ 除此之外，維護一大堆現有的程式碼，難免已經用到 jQuery，還是能看懂 API 比較好 所以，還是稍微教大家一些 jQuery 的用法。至於什麼場合要使用，你就自行判斷吧 --- 官網 https://jquery.com/ API 用法 https://api.jquery.com/ CDN 連結 https://releases.jquery.com/ 請自行逛一逛，大概知道 jQuery 有哪些 API 就好，不用花太多時間學習 jQuery 你應該會發現，一大堆功能，你自己就寫得出來，而且寫起來也不複雜，例如 `.hide()` `.show()`，你之前的作業就寫過，根本不需要用 jQuery 剩下的一大堆功能，目前看不懂沒關係、覺得自己做不出來沒關係，未來的課程會教你 --- 簡單地說，jQuery 選擇器就是使用金錢符號來呼叫函示 `$()` 其實是 `jQuery()` 的簡寫而已 ``` <h1 class="title"> Hide me </h1> <p class="para"> Hide me </p> <p class="para"> Hide me </p> <p class="para"> Hide me </p> ``` ``` document.querySelector('.title').style.display = 'none'; for (var p of document.querySelectorAll('.para')) { p.style.display = 'none'; } ``` 像這樣的程式，隱藏了畫面上多個元素 使用 jQuery 的寫法會變成 ``` $('.title').hide(); $('.para').hide(); ``` 很多人覺得，jQuery 只剩一些少打字的功能，卻讓網頁多載入整個 jQuery 套件，很沒意義、不值得 我倒是覺得，還是滿方便的。快速開發時，少打很多字。而且 jQuery 可以自動處理多個元素，可以少寫 for 迴圈 當然了，上面的程式碼，跟下面這段是完全一樣的 ``` jQuery('.title').hide(); jQuery('.para').hide(); ``` jQuery 基本上就這樣而已，你喜歡嗎？ 實務上，使用時，如果翻文件，還是不知怎麼寫，就去搜尋引擎找關鍵字 `jquery 改變顏色` `jquery change color` 之類的 別忘了，軟體工程師在工作時，會花很多時間在翻文件、上網到處看文章、搜尋範例程式碼，所以要習慣這件事 --- 坊間很多課程，會在一開始就教 jQuery。這跟直接教前端框架的問題一樣：學生的基本功，因此變得很差 但是本課程已讓你知道最基本的原生 DOM 寫法，所以你在用 jQuery 時，會知道背後發生什麼事，也知道刪掉 jQuery 的話，要怎麼用原生語法改寫 所以，我認為在本課程的安排下，jQuery 並不會耽誤你的學習旅程 喜歡 jQuery 的話，就把 API 網頁，多逛一逛，工作上想用的話，就大方使用吧！ ## 課後作業 請使用 https://jsfiddle.net 這次的作業要交兩份 請建立兩份 jsfiddle，並使用以下 html ``` <h1 class="title"> Make me green </h1> <p class="para"> Make me red </p> <p class="para"> Me red too </p> <p class="para"> Also me </p> ``` 在第一份，不使用 jQuery，把 h1 文字變為綠色，p 文字變為紅色 在第二份，請使用 jQuery，把 h1 文字變為綠色，p 文字變為紅色 寫完之後，你自行比較一下，網頁多加一個肥大的套件，但是可以少打這些字，你覺得值得嗎？ 這是一個主觀問題，你就根據情況決定你的答案吧！ 做出以上功能，你就完成這次的課程目標了！
在這份教材中，實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件，但已能滿足許多網站設計需求 實務上，不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎，接著客製化與修改，例如最知名的 Bootstrap 套件 但是，不論是網頁設計師、前端工程師，在使用現成套件之餘，稍微知道背後的原理，比較好 這樣才能更好地掌握工具，以及在必要的時候能夠親自開發與修改 而到目前為止，我認為，你已經能夠親手製作出設計師要求的大部份靜態＆動態設計了！ --- 真正在工作的時候，也會很像本次課程這樣，幾乎完全沒人幫你 但或許會有人告訴你關鍵字，或是你覺得好像在哪邊看過某種功能、效果 所以雖然你還不會做、沒有做過，但你有信心，可以找到相關資源、可以做得出來 身為軟體工程師，需要有這種「大致知道自己潛力在哪」的能力與信心，才能不斷樂於接受超出能力的挑戰 要習慣這種感覺。就像在這次的七個 UI 元件練習中，在我完全沒有教學的情況下，你就成功做到了 --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（四）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/837eq0
## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證，可以用 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) 準備好的話，讓我們馬上開始吧！
## 課程目標 學習基本的 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 屬性，弄得漂亮一點，看起來才專業 做出這個功能，你就完成這次的課程目標了！
## 課程目標 認識 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` 印到開發者工具中，然後用瀏覽器看一下內容 --- 做出以上功能，你就完成這次的課程目標了！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
