## 課程目標 能動態在 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），可以開開關關的 做出這個功能，你就完成這次的課程目標了！
## 課程目標 學習基本的 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) 準備好的話，讓我們馬上開始吧！
## 課程目標 學會基本的陣列取值 能從 html 元素中，得到用戶選取的內容 ## 課程內容 這課先來學一點陣列觀念 ``` var colors = ['red', 'orange', 'yellow', 'green']; ``` 中括號 `[]` 包起來就是宣告一個陣列，並記錄到 `colors` 變數中。此陣列內容是四個字串。 陣列索引從 0~3，因為在程式設計中，索引通常是從 0 開始而不是從 1 開始。 在陣列後方，使用中括號加上索引，就可取得陣列內容的值 ``` alert(colors[0]); alert(colors[1]); ``` 這兩個 alert 會顯示出陣列中第一個元素、第二個元素，馬上到 jsfiddle 試試看就會清楚了！ --- 在前幾課，我們學會了取得 `<input type="text" />` 這種元素內容的方法 文字輸入框是最常用到的網頁功能，除此之外，下拉式選單也很常用 ``` <select id="my-colors"> <option value="red">鮮豔的紅色</option> <option value="orange">美麗的橘色</option> <option value="yellow">亮眼的黃色</option> </select> <button onclick="showColor()">Click me</button> ``` 像這樣的選單，如何取得用戶選取的值呢？ ``` function showColor() { var menu = document.getElementById("my-colors"); var index = menu.selectedIndex; alert(index); var value = menu.options[index].value; var text = menu.options[index].text; alert(value); alert(text); } ``` 首先一樣用 `document.getElementById` 找到我們的選單元素 選單元素這種物件，會有 `.selectedIndex` 屬性來代表目前選中的索引 我們用 alert 先把索引跳出來看一下 同時，選單元素這種物件，會有 `.options` 屬性來代表其中的 `<option>` 元素，並且會是一個陣列 這個陣列裡面，通通都是物件，一個物件代表一個 `<option>` 元素 每個 `option` 物件，又有 `.value` 屬性可供存取，以及 `.text` 屬性可供存取 工程師可以根據需要選擇 `.value` 或 `.text` 來使用 我們在寫 html select 元素時，通常會在 value 放英文單字，然後 text 放清楚的中文說明 請在 jsfiddle 試試看上面的範例，實驗一下、玩玩看，就會清楚了！ ## 課後作業 接續前一課的作業，你的「線上下單」頁面，目前會顯示訂單資訊，方便顧客確認 除了顧客名稱之外，這課的作業要加強下單功能、顯示更多訂單資訊 --- 除了輸入客戶名字的欄位之外，請用 `select` 元素加上一個選單，讓用戶可以選擇服裝的分類：男裝、女裝 接著再用 `select` 元素多做一個選單，讓用戶可以選擇服裝的類型：外套、上衣、下身 這樣顧客就知道這間「成衣批發工廠」，有提供哪些商品批發了！ 接著要將顧客選擇的內容，顯示在訂單資訊裡面 類似這樣： ``` －－－－－－－－－－ ｜您的訂單 ｜ ｜顧客姓名：ＸＸＸ｜ ｜服裝分類：ＸＸＸ｜ ｜服裝類型：ＸＸＸ｜ －－－－－－－－－－ ``` ＸＸＸ的地方預設是空白，在點擊訂購按鈕之後，跳出招呼訊息之後，就把ＸＸＸ改為顧客輸入、選擇的內容 請替這個訂單資訊區塊加一些 css 屬性，弄得漂亮一點 做出以上功能，你就完成這次的課程目標了！
## 課程目標 學會動態修改 html 元素中的內容 ## 課程內容 在上一課，我們學會了這樣用 JavaScript 取得用戶輸入到 html 元素的內容 ``` var str = document.getElementById('keyword').value; ``` 那麼針對 `h1`, `h2`, `p` 這些用來顯示文字的元素，要如何用 JavaScript 修改其中的文字呢？ 其實做法非常類似，這樣就可以了 ``` <p id="welcome">歡迎光臨</p> ``` ``` document.getElementById('welcome').textContent = '謝謝光臨'; ``` 一樣先去找出網頁中 id 為 `welcome` 的元素，接著去修改 `textContent` 這個屬性的內容 跟上一課把資料記錄在變數中類似，這邊把資料記錄在此「元素」的「屬性」之中，等於是在修改屬性內容 如前一課所說，各種 html 元素，在 JavaScript 中是一種物件 而在畫面上顯示的文字，在 JavaScript 中會將這些文字存放在物件的 `textContent` 這屬性之中 `h1`, `h2`, `p` 等等元素都可以這樣修改內容，連 `div`, `span` 這些元素也可以這樣修改內容 除了直接賦值為字串之外，使用「變數」來賦值也沒問題 ``` var str = '萬事順利'; document.getElementById('welcome').textContent = str; ``` 請在 jsfiddle 試試看上面的範例，把元素寫在 html 區塊，把修改屬性寫在 JavaScript 區塊，實驗一下、玩玩看！ ## 課後作業 接續前一課的作業，你的「線上下單」頁面，目前只有簡單的招呼訊息 你希望在畫面上顯示簡單的訂單資訊，讓顧客聯絡你之前，能看著螢幕再確認一次，減少顧客下單之後又反悔的機率 這課的作業要做這個訂單資訊，先只做「顧客姓名」就好 --- 請在訂購按鈕的下方，寫一個區塊顯示訂單資訊 看起來類似這樣： ``` [我要訂購] －－－－－－－－－－ ｜您的訂單 ｜ ｜顧客姓名：ＸＸＸ｜ －－－－－－－－－－ ``` ＸＸＸ的地方預設是空白，在點擊訂購按鈕之後，跳出招呼訊息之後，就把ＸＸＸ改為顧客輸入的名稱 請替這個訂單資訊區塊加一些 css 屬性，弄得漂亮一點 做出以上功能，你就完成這次的課程目標了！
## 課程目標 學會基本的變數賦值 學會基本的字串連接 能從 html 元素中，得到用戶輸入的內容 ## 課程內容 在上一課的內容中，我們這樣來顯示訊息視窗 ``` alert('你點擊了按鈕！'); ``` 像這樣單引號包起來的內容 `'你點擊了按鈕！'` 我們叫「字串」，是一種資料類型 除了直接把字串當參數傳給函數之外，還可以先把字串紀錄在「變數」之中，方便重複使用 ``` var message = '你點擊了按鈕！'; alert(message); ``` 就跟函數名稱一樣，變數名稱是隨便命名的，取一個自己看得懂的名稱就行了 記錄到變數之後，就可以到處重複使用，不用每次手寫整段資料內容 不論是字串或者變數，都可以連接起來使用 ``` var text1 = '恭喜'; var text2 = '發財'; alert(text1 + text2); alert('萬事' + '如意'); ``` 除了「字串」這種資料類型之外，還有「數字」等等其他類型，之後課程會提到 --- 不論是購物網站、社群網站、各種網站，一定會經常需要用戶輸入的內容 有一個簡單的方法可以取得用戶輸入內容 ``` <input id="keyword" type="text" /> <button onclick="myFunction()">Click me</button> ``` ``` function myFunction() { var str = document.getElementById('keyword').value; alert(str); } ``` 函數中的 `document` 是一個 JavaScript 在瀏覽器中內建的「物件」，這個物件代表網頁當下的狀態，有很多資料、函數可以呼叫使用 後面的 `.` 代表去呼叫這個「物件」的「函數」，或者去存取這個「物件」的「屬性」 這邊的 `document.getElementById('keyword')` 代表以 `'keyword'` 為參數去呼叫 `getElementById`函數 這函數會去找出網頁中 id 為 `keyword` 的元素，元素在 JavaScript 中也是一種物件 後面的 `.value` 就是去存取元素的 value 屬性。各種輸入相關的元素，都會把用戶的輸入內容存在 `value` 這屬性之中 使用以上的幾段程式碼，可以輕鬆地取得用戶輸入的內容 請在 jsfiddle 試試看上面的範例，把輸入欄位與按鈕寫在 html 區塊，把函數定義寫在 JavaScript 區塊，實驗一下、玩玩看！ ## 課後作業 接續第一課的作業，你的「線上下單」頁面，目前有個訂購按鈕 你對按下按鈕的導購訊息，不太滿意，你希望能顯示客戶的名字，看起來更專業 這課的作業要來改善這個「線上下單」頁面的功能 --- 請使用 jsfiddle，多加一個文字輸入欄位，讓客戶能輸入名字 在客戶點擊訂購按鈕之後，跳出的訊息會顯示： 「ＸＸＸ您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！」 請稍微替這個輸入客戶名字的欄位加一些 css 屬性，弄得漂亮一點才專業 做出以上功能，你就完成這次的課程目標了！
## 課程目標 學會定義函數的基本方法 學會呼叫函數的基本方法 學會 onclick 事件的用法 ## 課程內容 請打開這個網站，用這個網站來練習＆寫作業： https://jsfiddle.net 在學 html/css 時，我們會給元素一些屬性，例如 id 與 class 屬性，連結的 href 屬性，圖片的 src 屬性 同樣的語法，還可以用來做一些互動式效果、功能 例如，可以這樣在按鈕上做出「點擊後」觸發的效果 ``` <button onclick="myFunction()">Click me</button> ``` onclick 我們叫「事件屬性」。也是屬性的一種，語法跟一般屬性相同 屬性內容是去執行 `myFunction`，後面的小括號 `()` 代表執行的意思 這邊的 `myFunction` 是所謂的「函數」。名稱是隨便命名的。根據互動的內容，取一個自己看得懂的名稱就行了 小括號裡面可以傳參數，這邊我們沒用到參數，所以直接小括號包起來 `()` 就可以 如何定義 `myFunction` 函數的內容呢？這樣即可 ``` function myFunction() { alert('你點擊了按鈕！'); alert('這是很好的開始！'); } ``` 這個函數中，使用了 JavaScript 在瀏覽器中內建的 `alert` 函數。這函數會根據參數，跳出小視窗，把參數顯示在畫面上 在 JavaScript 中，一段動作的結尾都會加上分號 `;` 用來代表這段結束 分號其實可以省略不寫，程式一樣會正常執行，但加上分號，看起來更清楚一點點 有點像寫文章時結尾的「句點」，有人習慣寫，有人經常不寫，但加了比較清楚 請在 jsfiddle 試試看上面的範例，把按鈕寫在 html 區塊，把函數定義寫在 JavaScript 區塊，實驗一下、玩玩看！ ## 課後作業 假設你家裡是開成衣批發工廠的，你用 html/css 寫了一個工廠的介紹網頁 在「線上下單」頁面，你希望引導客戶聯絡你，你親口介紹、聊過才報價、提高成交率 你不想把商品報價、聯絡方式直接顯示在畫面上，你希望是點擊按鈕之後，才顯示聯絡資訊 這次作業，需要你實作這個功能。 --- 請使用 jsfiddle，做一個「我要訂購」按鈕 點擊這個按鈕，會跳出 alert 訊息顯示「謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！」 接著做一個「認識工廠」按鈕 點擊這個按鈕，會跳出 alert 訊息顯示「我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！」 請稍微替這兩個按鈕加一點 css 屬性，弄得漂亮一點，漂亮的按鈕，會讓客戶更想點 做出這兩個按鈕，你就完成這次的課程目標了！
大家好，JavaScript 是業界最常用的程式語言之一 但是對新手來說，常常覺得很難學，原因有兩個： 第一，這語言不斷在變化，很多新語法、新功能，不斷出現，導致學習的時候眼花撩亂 第二，傳統的程式設計教法，從變數、迴圈、邏輯，一個一個開始教。我發現對很多人來說，這種學習法有點無聊，也無法培養興趣＆信心 所以我決定換個方法教教看，設計了一套課程，不斷實作一些「實務上常見的功能」。什麼都不教，直接要求大家開始寫「小專案」 也就是從第一課就開始做小專案、每一課都做小專案，然後在過程中，順便吸收會用到的、必備的、相關程式設計觀念 如果您是對程式設計零基礎、想找一份有趣的教材試試，歡迎閱讀這份教材！ 在開始之前，您需要先具備基本的 HTML、CSS 知識。 還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) 準備好的話，讓我們馬上開始吧！
## 簡介 CSS 是任何網站設計的重要組成部分，但理解其中一些細微差別觀念可能不容易。其中最重要的觀念之一是 rem 和 em 之間的區別，以及為什麼/何時應該使用它們。 原文出處：https://dev.to/refine/rem-vs-em-everything-you-need-to-know-5342 --- ## 預備知識 本文希望讀者對 CSS 有紮實的掌握。雖然你不必成為 CSS 大神，但如果基本的 CSS 術語你都清楚，那會好讀很多。 ## CSS 中的 em 和 rem 單位 在尋找在 CSS 中設定長度的方法時，有太多方法了。 CSS 中指定長度的所有單位都屬於兩類。 絕對長度：顧名思義，就是絕對的；它們是固定的，不會對任何事物做出反應。這意味著無論發生什麼，它們的大小都是一樣的。絕對長度包括 cm、mm、in、px、pts 和 pc。 相對長度：是指定相對於另一個單位的長度的單位，即，它們根據其他指定單位或元素做出響應。包括 %、vmax、vmin、vh、vw、ch、ex，以及我們將要討論的單位 em 和 rem。 如果您想了解更多關於這些單位的訊息，可以現在先去查一查。現在讓我們看看這兩個單位。 ## 什麼是 CSS em 就像我上面說的，CSS 中的 em 單位是用於調整網頁元素大小的相對測量單位，主要是字體大小。因為是相對於父元素的，所以1em等於父元素中設置的font-size。 這意味著如果您將父 div 中的字體大小設置為 20px，並將子 div 中的字體大小設置為 2em，則子 div 中的字體大小將等於 40px。這是一個例子。 首先，讓我們編寫 HTML ``` <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> I'm parent div set to 20px <div class="child"> I'm the child div set to 2em, i.e 40px. </div> </div> </body> </html> ``` Next, the CSS. ``` .parent{ font-size: 20px; } .child{ font-size: 2em; } p { font-size: 1.5em; } ``` 那會給我們這個。  em 單位很有用，因為它允許您根據先前宣告的元素的字體大小調整頁面上元素的大小，這有助於建立一致的視覺層次結構。這對於建立易於視障用戶閱讀的可存取網站非常有用。 需要注意的是，如果不指定父元素的值，則以瀏覽器的預設值作為父元素。 ``` p { font-size: 1.5em; } ``` 在此範例中，字體大小屬性設置為 1.5em，這意味著如果沒有直接父元素，`<p>` 元素中的文本大小將是瀏覽器預設字體大小大小的 1.5 倍。 由於大多數瀏覽器根據螢幕大小縮放其預設字體大小，這使您可以建立靈活且響應迅速的佈局，以適應不同的螢幕和字體大小。 使用適當的 CSS 屬性，em 單位也可用於設置其他元素的大小，例如邊距、填充和邊框。 ## 什麼是 CSS rem 現在我們知道 em 是什麼，讓我們看看 rem。 rem 是 CSS 中另一個測量長度的單位，代表“root em”。由於我們知道一個 em 等於當前字體大小的數值，因此我們可以推斷出“根 em”指的是根元素的字體大小，通常是 `<html>` 元素。 很困惑嗎？讓我們進一步拆解它。 與 em 一樣，rem 從父元素繼承其大小，但 rem 查看的父元素不是它上面的 div 或部分，而是包圍它的第一個元素，即 html 元素。讓我們用前面的程式碼做一個例子。相同的 html 程式碼，只是多了一個 div。 ``` <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> I'm parent div set to 20px <div class="child"> I'm the child div set to 2em, i.e 40px. </div> <div class="child-2"> I'm the child div set to 2em, i.e 60px. </div> </div> </body> </html> ``` 接下來，我們將以下 CSS 程式碼加入到我們的 CSS 文件中。 ``` html{ font-size: 30px; } .child-2{ font-size: 2rem; } ``` 結果會是這樣。  如您所見，儘管 child-2 div 在另一個 div 中，但它會一直往上找到 html 元素以繼承其字體大小。 使用“rem”單位允許以更具可擴展性和靈活性的方式來調整頁面上的元素大小，因為如果您更改根元素的字體大小，所有使用“rem”單位調整大小的元素將自動更新以保持它們的相對大小尺寸。 ## em 和 rem 單位的區別 到目前為止，您已經知道 em 和 rem 之間的區別，但為了清楚起見，我想重申一下這兩個值之間的區別。 在 CSS 中，rem 單位僅相對於文檔的根元素，而 em 單位僅相對於目標元素的直接父元素。這意味著 em 大小繼承自父元素，而 rem 大小僅繼承自根元素。 ## 何時在 CSS 中使用 em 和 rem 單位 對字體大小、邊距和填充等全局值使用 rem 單位是一個好主意，特別是如果你想為整個文檔指定一個字體大小並讓它統一縮放而不是受字體影響父元素的大小。 em 更適合特定於特定元素及其子元素的值。這使您可以建立一致且靈活的佈局，以適應不同的螢幕尺寸和字體大小。 ## 在 CSS 中使用 em 和 rem 單位的潛在問題 em 和 rem 是目前指定長度時使用的最佳單位，但就像生活中的所有事物一樣，它們並不完美。以下是您在使用 em 和 rem 時可能會遇到的幾個問題： - **複雜的計算：**使用 em 和 rem 單位會導致複雜的計算，尤其是當涉及嵌套元素時。這會使準確預測和控制頁面上元素的大小變得困難。 - **繼承問題：** 因為 em 單位是相對於其父元素的字體大小的，所以很難理解和控制如何在頁面上繼承大小。這可能會導致意外結果，需要額外除錯才能解決。 - **性能問題：**在極少數情況下，使用 em 和 rem 單位會對性能產生負面影響，尤其是在與復雜計算結合使用或在頁面上過度使用時。 總的來說，雖然 em 和 rem 單位在某些情況下會有所幫助，但重要的是要仔細考慮它們的潛在缺點以及它們是否是您專案的最佳選擇。
想要在 2023 年的 **Web 開發** 旅程中一帆風順嗎？參考看看這些免費工具吧！ 原文出處：https://dev.to/ruppysuppy/7-free-tools-for-the-modern-web-developers-of-2023-4lhh ## 1. [Omatsuri](https://omatsuri.app/) 一個**開源 Web 應用程式**，有 **12 個令人難以置信的前端工具**，供日常開發使用。包含的工具有： 1. 三角形生成器 2. 顏色陰影生成器 3. 梯度產生器 4. 分頁器 5. SVG壓縮器 6. SVG → JSX 轉換器 7. base64編碼 8. 假資料生成器 9. 符號收錄 10. 假文字生成器 11. CSS 游標 12. 鍵盤事件程式碼  ## 2. [Coolers](https://coolors.co/) **Coolers** 是為您的網站生成 **調色板** 的最佳工具。  ## 3. [Keyframes](https://keyframes.app/) 就跟名字一樣，它是： > 基於瀏覽器的、適合手機的、可以讓 **CSS** 變得不那麼糟糕的工具。 它有幾個工具，例如**動畫**、**陰影**和**顏色生成器**。  ## 4. [Roadmap.sh](https://roadmap.sh/) **Roadmap**是一系列職涯路線圖，涵蓋了**前端**、**後端**、**區塊鏈**、**網路安全**等多個路徑。 他們也有**相關資源的連結**可供學習！  ## 5. [FreeCodeCamp](https://www.freecodecamp.org/) **FreeCodeCamp** 是一個**非營利組織**，由**互動式學習網路平台**、**線上社群論壇**、**聊天室**、**線上出版物**、 **本地組織**組成，旨在讓任何人都可以學習 Web 開發。  ## 6. [Postman](https://www.postman.com/) **Postman** 是一個用於建置和使用 **API** 的 **API 平台**。它是**後端工程師**工具庫中的必備工具，對**前端開發人員**也非常有用  ## 7. [CSS Layout](https://csslayout.io/) 它是**數百個元件**的集合，您可以將其複製貼上到您的專案中，並根據您的需要進行客製化！  --- **以上供您參考！**
# 第6課 課程目標 運用目前所學到的技巧，完成一個完整的 RWD 網頁。 # 第6課 課程內容 這門課到目前為止所教的技巧，只有運用 Bootstrap 快速、方便的做出網頁排版。 我們並沒有深入去研究背後 css 原理以及太多進階 css 技巧。 很棒的是，光是這些基本 Bootstrap 應用以及 css，就足以應付實務上的許多需求了！ 這次要試著用你在這門課學到的技巧，試著做出一個完整的 RWD 網頁。 # 第6課 作業 請打開美國時代雜誌的網站首頁： http://time.com  在之前的作業，我們只做了藍色圈起來的部份。 這一課的作業，我們要把整個時代雜誌首頁做出來！ 你的作業需要滿足下列三個要求： - 在電腦上能順利瀏覽 - 在平板上能順利瀏覽 - 在手機上能順利瀏覽 時代雜誌的首頁有幾個進階的元素，例如影片、投影片元素。這些進階的元素可以省略不做。 除此之外，單純文字與圖片的部份，請儘可能的重現出來。 完成這些，你就完成這次的課程目標了！
# 第5課 課程目標 讓圖片在各種裝置上都能順利顯示。 # 第5課 課程內容 請參考：https://www.w3schools.com/howto/howto_css_image_responsive.asp # 第5課 作業 承接前一課的作業。  之前的作業我們只有放入文字，省略了圖片。 這一次請將圖片給加進去。並且圖片需要在各種裝置都能順利顯示。 不能過大、破版，讓圖片漂亮的顯示在網頁上。 完成這些，你就完成這次的課程目標了！
# 第2課 課程目標 能夠使用 Bootstrap 網格系統來打造適應各種螢幕大小的排版。 # 第2課 課程內容 這一課要學習使用 Bootstrap 的網格系統。 請參考這幾份教學： - https://www.w3schools.com/css/css_rwd_intro.asp - https://www.w3schools.com/css/css_rwd_viewport.asp - https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_stacked_to_horizontal.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_xsmall.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_small.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_medium.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_large.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_xlarge.php - https://www.w3schools.com/bootstrap5/bootstrap_grid_examples.php 以及官方文件： https://getbootstrap.com/docs/5.3/layout/grid/ 內容不用全讀，只要讀到你覺得能夠做出作業即可。 # 第2課 作業 請打開美國時代雜誌網站首頁 http://time.com 接著打開 Glitch，用 Glitch 來寫這次的作業。 https://glitch.com/ 你應該會在時代雜誌首頁看到這樣的畫面  這次作業要做藍色線條圈起來的部份。 請利用 Bootstrap 的網格系統，把藍色這部份做出來。 有以下2個條件需要滿足，才算是做完作業： - 在電腦上是 1-2-1 比例的多欄式佈局 - 在手機上是上下堆疊的佈局 除此之外，只要有放入文字就可以了，圖片可以省略。 做完之後，你應該會發現，你做的網頁在手機或電腦螢幕上看都 OK，畫面不會破掉、跑版。 完成這些，你就完成這次的課程目標了！
大家好，有沒有想學寫網站的朋友呢？ 隨著智慧型手機的普及，現在的網站畫面必須同時滿足電腦、手機螢幕，甚至是平板電腦的需求。 要如何做出能在各種寬度的螢幕都 OK 的網頁呢？ 聰明的設計師們發明了一種稱為「Responsive Web Design」的畫面設計方法。 實作起來非常簡單，利用一些簡單的畫面分割原理，就能滿足各螢幕的需求。 我整理了一份有趣的 RWD 自學教材，每堂課附有一個小作業。 會帶領大家在作業中，以美國時代雜誌的網站為範例，一步一步利用 Bootstrap 做出一個 RWD 網頁。 剛入門網頁設計的朋友，非常適合接著把 RWD 原理學起來！ 開始之前，您需要先具備基本的 HTML、CSS、Bootstrap 知識。 還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材：Bootstrap](https://codelove.tw/@howtomakeaturn/course/YqZQav) 準備好的話，讓我們馬上開始吧！
# 第6課 課程目標 學會如何套用 bootstrap 的表格、表單與與按鈕樣式。 # 第6課 課程內容 表格、表單與按鈕是網頁最基本的元素之一，就算不使用 bootstrap，html 原生就有這些元素的樣式。 不過，套用 bootstrap 樣式之後，會馬上讓這些元素好看起來，這一課要學習如何套用它們。 請閱讀入門教學： https://www.w3schools.com/bootstrap5/bootstrap_tables.php https://www.w3schools.com/bootstrap5/bootstrap_forms.php https://www.w3schools.com/bootstrap5/bootstrap_buttons.php 並參考官方說明文件： https://getbootstrap.com/docs/5.3/content/tables/ https://getbootstrap.com/docs/5.3/forms/overview/ https://getbootstrap.com/docs/5.3/components/buttons/ # 第6課 作業 這一課的作業有兩個，我們先不使用 bootstrap，把畫面做出來，接著再套用 bootstrap，讓畫面變漂亮。 作業一：請將「自學網頁の嬰兒教材：HTML與CSS」的第四課作業完成，並接著將 bootstrap table 套用進去 https://codelove.tw/@howtomakeaturn/post/l3j253 作業二：請將「自學網頁の嬰兒教材：HTML與CSS」的第五課作業完成，並接著將 bootstrap form、input 與 button 套用進去 https://codelove.tw/@howtomakeaturn/post/vx8Lgx 完成這些，你就完成這次的課程目標了！
# 第3課 課程目標 能夠用 Bootstrap 的網格系統做出多欄式排版、各種排版。 # 第3課 課程內容 業界工程師會去使用 Bootstrap，除了美感之外，通常還有一大理由就是想用它的網格系統。 以網頁設計常見的多欄式設計來說，手寫 html 跟 css 實在有點麻煩： [CSS DIV 兩欄式網頁排版](http://www.wibibi.com/info.php?tid=406) [CSS DIV 三欄式網頁排版設計](http://www.wibibi.com/info.php?tid=407) 所以來學習簡單好用的網格系統吧！ 請閱讀以下教學的內容： https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php https://www.w3schools.com/bootstrap5/bootstrap_grid_examples.php https://getbootstrap.com/docs/5.3/layout/grid/ 內容不用全部讀完，也不用全部讀懂，把其中的程式碼貼一貼，把玩一下，能做出基本的多欄式網頁佈局即可。 # 第3課 作業 繼續承接之前的作業。我們在前幾課做出了 Yahoo 的新聞頁以及導覽列，這一課的作業有兩個。 ## 作業一 請繼續修改之前的作業，除了新聞內容與導覽列之外，請接著利用 Bootstrap 網格系統將整個頁面都做出來。 請至少將側邊推薦其他新聞的區塊做出來，其餘的可以省略。 ## 作業二 請再開一份 Glitch 專案，我們要做 Yahoo 新聞的首頁： https://tw.news.yahoo.com 我們要用 Yahoo 新聞首頁來練習多欄式排版。 請利用 Bootstrap 網格系統，將整個首頁的排版都切出來。 各個區塊的內容盡量省略、簡化，利用純文字或是 `<ul>、<li>` 清單元素，只放標題跟一些文字即可。 完成以上兩份作業，你就完成這次的課程目標了！
# 第2課 課程目標 學會使用 Bootstrap 的 Navbar 元件。 # 第2課 課程內容 本課內容非常非常簡單，只要能在網頁上做出導覽列就可以了。 請參考： https://www.w3schools.com/bootstrap5/bootstrap_navbar.php https://getbootstrap.com/docs/5.3/components/navbar/ 內容不用全部讀完，也不用全部讀懂，把其中的程式碼貼一貼，把玩一下，能做出一個最簡單的導覽列即可。 # 第2課 作業 上一課的作業，我們模仿 Yahoo 新聞的內容，做了一個簡單的新聞文章頁面。 請繼續修改這份作業，將 Yahoo 新聞上方的導覽列做出來。 你將會發現，使用 Bootstrap 能夠快速做出導覽列，比自己用手寫 html、css 方便且快速多了！ 完成這些，你就完成這次的課程目標了！
# 第1課 課程目標 學會安裝 Bootstrap。 # 第1課 課程內容 第一課只要學會如何安裝 Bootstrap 就可以了。 Bootstrap 安裝好之後，瀏覽器預設的 h1, h2, h3, p 等等基本元素的樣式就會被覆蓋。 會變成 Bootstrap 的預設樣式，會更漂亮。 在網頁中引入 Bootstrap 的 css 與 js 檔的方式有很多，其中最簡單的是直接引入 BootstrapCDN 的線上檔案，連下載檔案都不用。 請閱讀一些 Bootstrap 基本觀念： https://www.w3schools.com/bootstrap5/bootstrap_get_started.php https://www.w3schools.com/bootstrap5/bootstrap_typography.php 然後參考官網的 BootstrapCDN 段落： https://getbootstrap.com/docs/5.3/getting-started/download/ --- 對於引入外部檔案的觀念不熟悉的話，請參考這份的「External Style Sheet」段落： https://www.w3schools.com/css/css_howto.asp 以及這份的「JavaScript in External File」段落： https://www.tutorialspoint.com/javascript/javascript_placement.htm # 第1課 作業 請打開：[Yahoo奇摩新聞](https://tw.news.yahoo.com) 找一篇你喜歡的新聞，把新聞內容打出來。 接著打開 [Glitch](https://glitch.com/)，用 Glitch 來寫這次的作業。 只要打出文章標題與內容就好，上方的導覽列、旁邊的新聞頭條那些區塊都不用。 做完之後，你會發現，雖然只用了 h1、p、br 等等基本元素，但是套用 Bootstrap 之後，整個畫面自動變漂亮了！ 完成這些，你就完成這次的課程目標了！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
