我最近有蒐集不少問題 這是其中之一 比較小的項目 我的主要疑問是 YT的字幕其實是不斷重新誕生新的span 所以我抓到他的span改了樣式後 下一個又等於跳回去 勢必我必須要setinterval不斷的去馬上改成我要的字體 不過經由測試 就算是50的毫秒也是有發現從原字體變成新字體的更動 視覺上會很不舒服 目前我在想 有兩種解法 第一個是用我不知道的方法 想辦法改 第二是退而求其次 我直接不開字幕 然後直接重新把字幕加回去 難道只能用第二種招式了嗎 ##若如此 我也有想到延伸的問題 也就是說 1.豈不是必須先下載字幕 那麼似乎會必須有等待時間 2.添加字幕如果用html原生的方法不知是否可行 又者要自己寫一個針對撥放秒數判斷字幕的 那難度似乎又是另一個等級
## 課程目標 認識 AJAX 與不同的 HTTP 請求方法 ## 課程內容 HTTP 協定中，HTTP Request 有多種不同的方法 前面幾課的寫法，都是 HTTP GET 類型，這一課來接著談談更多不同的請求方法 繼續使用模擬電商網站的範例 API ### 使用 HTTP POST 新增一筆用戶資料 ``` fetch('https://fakestoreapi.com/users', { method: "POST", body: JSON.stringify({ email: '[email protected]', username: 'johnd', password: 'm38rmF$', name: { firstname: 'John', lastname: 'Doe' }, address: { city: 'kilcoole', street: '7835 new road', number: 3, zipcode: '12926-3874', geolocation: { lat: '-37.3159', long: '81.1496' } }, phone: '1-570-236-7033' }) }) .then(res => res.json()) .then(json => console.log(json)) ``` 在這個範例中，`fetch()` 函式的第二個參數是一個物件，把 method 屬性設定好，然後 body 代表 HTTP body 的內容 必須是字串，所以用 `JSON.stringify()` 把物件轉換成 JSON 字串 整段看不太懂沒關係，需要了解 HTTP 協定的細節才比較看得懂，現在就先照做即可 要注意我們是用模擬電商 API，一切都是模擬的 最後主機會回應一個新的用戶 ID，看起來是新增成功了，但實際上並沒有東西新增到資料庫喔～ ### 使用 HTTP PUT 更新一筆用戶資料 ``` fetch('https://fakestoreapi.com/users/7', { method: "PUT", body: JSON.stringify({ email: '[email protected]', username: 'johnd', password: 'm38rmF$', name: { firstname: 'John', lastname: 'Doe' }, address: { city: 'kilcoole', street: '7835 new road', number: 3, zipcode: '12926-3874', geolocation: { lat: '-37.3159', long: '81.1496' } }, phone: '1-570-236-7033' }) }) .then(res => res.json()) .then(json => console.log(json)) ``` 在這個範例中，去更新用戶 ID 為 7 的使用者資料 方法設定為 PUT，body 一樣放整個 JSON 字串 ### 使用 HTTP DELETE 刪除一筆用戶資料 ``` fetch('https://fakestoreapi.com/users/6', { method: "DELETE" }) .then(res => res.json()) .then(json => console.log(json)) ``` 在這個範例中，去刪除用戶 ID 為 6 的使用者資料 方法設定為 DELETE，不需要提供 body --- 實務上，API 設計時，有人偏好這種 GET POST PUT DELETE 都用到的寫法 有人則偏好只使用 GET 與 POST 撈資料一律都用 GET，除此之外，會更新到資料庫內容的動作，通通都用 POST 這屬於主觀偏好，沒有對錯問題，團隊討論後有共識即可 --- 上面的範例，用戶參數都是在網址最後加上 `/{ID}` 這種格式帶入 實務上，GET 參數也可能用 `?id={ID}` 這種格式 而在 POST 或其他類型的請求中，用戶參數也可能直接加在 `body: JSON.stringify({` 裡面的屬性之中 各種做法，都可以，一樣屬於主觀偏好，沒有對錯問題，團隊討論後有共識即可 ## 課後作業 接續上一課的作業，加上刪除按鈕 請翻閱 API 文件說明 https://fakestoreapi.com/docs 找出「刪除商品」的 API 把每個商品的 html 改成 ``` <li> <span>xxx</span> <button>Details</button> <button>Delete</button> </li> ``` 點擊 Delete 按鈕，就發送 API 出去 - 主機回應成功的話，就把整個 `<li>` 元素刪掉 - 主機回應失敗的話，就跳 alert 提醒用戶稍後再試 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識變數作用域 認識函式的不同寫法與特性 ## 課程內容 來認識一些程式語言觀念與名詞 ``` <button onclick="action1()"> global scope </button> <button onclick="action2()"> local scope </button> ``` ``` var counterA = 0; function action1() { counterA = counterA + 1; alert(counterA); } function action2() { var counterB = 0; counterB = counterB + 1; alert(counterB); } ``` 到 jsfiddle 跑跑看，會發現第一個計數器會不斷 +1 疊加上去；第二個計數器卻永遠顯示 1 這就是變數作用域的區別：變數宣告在很外面的，會在很大的範圍內都可使用這變數；變數宣告在很裡面的，只在裡面的範圍內才可使用這變數 宣告在最外面的稱為全域變數（global），反之則稱為區域變數（local） 目前為止的作業，其實你已經到處在寫 global 與 local 變數了，這觀念還算簡單、直觀 --- 用精確的技術名詞來說明的話 在 ES6 (2015) 之前，JavaScript 中的變數作用域只有 Global Scope 跟 Function Scope 兩種 並且，在使用 `var` 關鍵字時，要留意一種名為 Hoisting 的現象，這是一種會讓人搞錯變數作用域的現象 在 ES6 之後，有了 `const` 與 `let` 兩種新關鍵字，宣告的變數為 Block Scope 使用這兩種關鍵字，就不會出現 Hoisting 的現象 --- 我個人認為，Hoisting 是一個設計失敗的程式語言特性 應該要讓 JavaScript 引擎直接報錯、程式直接壞掉比較好 一般程式語言沒有 Hoisting 這種現象，此為 JavaScript 獨有特性 這是當年 Netscape 瀏覽器公司，為了衝市占率、歡迎大家亂寫 JS 程式碼的產物 我不想細談 Hoisting，反正改天你真的遇到問題，大概知道要往這方向研究就是了 --- 實務上，現在大家都寫 `const` 與 `let`，比較不寫 `var` 了 所以 Function Scope 跟 Block Scope 的差別在哪？ 簡單來說，這樣的程式碼，x 正常顯示，y 會報錯 ``` if (true) { var x = 1; const y = 2; } alert(x); alert(y); ``` `var` 會覺得變數作用域，只有 `function 函式` 內、外的差別，內就是同樣 local，外就是 global `const` `let` 會覺得變數作用域，每次遇到 `大括號 {}` 都算一次內、外的差別，大括號裡面就是 local，裡面的裡面就是 local 中的 local 看不太懂沒關係，總之，變數宣告時，遇到 bug，就往前面找大括號，把變數搬來搬去，試試看，會慢慢搞懂的 本課先教你區分 global 與 local 兩種概念就好，這在大多數程式語言都是通用概念 在本系列教材內容以及作業中，`const` `let` `var` 隨便混著用，都可以 大概知道當前變數是 global 還是 local 就好 反正改天你真的遇到問題，大概知道要往這方向研究就是了 --- 接下來談一談 JavaScript 中的函式 之前的課程中，有過這樣的範例 ``` <button id="my-btn">Click me</button> ``` ``` function myFunction() { alert('你點擊了按鈕！'); } var btn = document.getElementById('my-btn'); btn.onclick = myFunction; ``` `myFunction` 被當成變數一樣，被指派給一個物件的屬性了 在很多程式語言中，函式是不能這樣使用的！函式永遠只能單獨加上小括號去執行 `myFunction()` 這個差別有點像是，其他程式語言認為變數是「名詞」，函式是「動詞」。那些語言認為這樣才能溝通、描述世界 而 JavaScript 認為變數是「名詞」，函式是「動詞」也是「動名詞」，也就是認為函式也是一種「名詞」。JavaScript 認為這樣才能溝通、描述世界 中文說「我開車」跟「開車很好玩」，沒有在管「開車」是動詞還是名詞，中文使用者就是習慣這樣溝通 英文說「I drive」跟「Driving is fun」，句子裡面主詞的部份一定要是名詞，如果想放動詞，就先改寫成 +ing 動名詞，英文使用者就是習慣這樣溝通 上面通通看不懂沒關係，反正知道各種程式語言，都是設計者與社群的主觀偏好，然後都能完成任務、各有不同長處短處就好 --- 最後，跟大家談一下函式的不同寫法 ``` function func1() { alert(1); } var func2 = () => { alert(2); } func1(); func2(); ``` ES6 之後有所謂的箭頭函式 他跟傳統寫法的主要差別，在於對於 `this` 關鍵字的認定 在工程師主流推崇 OOP（物件導向程式設計）的年代，`this` 的使用很巧妙、也很讓人困惑 實務上現在寫前端，比較少用 OOP 寫法，稍微偏向 FP（函數式程式設計）多一點，所以 `this` 問題變比較小 我不想細談 `this` 以及兩種函式寫法的差別，在本系列教材內容以及作業中，隨便混著用，都可以 反正改天你真的遇到問題，大概知道要往這方向研究就是了 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），id 跟 class 之類的你可以自由決定 ``` simple counter: <button>-</button> <button>+</button> <hr> simple calculator: <input type="text" /> <input type="text" /> <button>加/減/乘/除</button> ``` 這邊有兩個小型應用程式 第一個應用程式，是簡單的計數器 - 第一次點擊 + 號按鈕，會用 alert 跳出 1 - 第二次點擊 + 號按鈕，會用 alert 跳出 2 - 依此類推，每次點 + 都會遞增，每次點 - 都會遞減 - 你會宣告一個全域變數，記錄這個累積的值，才能完成此功能 第二個應用程式，是簡單的計算機 - 有兩個欄位可以輸入數字 - 點擊按鈕，連續跳出四個 alert，分別顯示「加/減/乘/除」的計算結果 - 例如：輸入 6 與 2 -> alert 顯示 8 -> alert 顯示 4 -> alert 顯示 12 -> alert 顯示 3 - 你會宣告兩個區域變數，分別記錄兩個輸入的值，接著用來進行四種計算，才能完成此功能 --- 做出以上功能，你就完成這次的課程目標了！
如果你是網頁設計師，或者開發的網站以公司介紹、形象網站為主 那麼目前為止的課程，已讓你具備相當的動態網頁開發能力 各種特效與視覺效果，你都做得出來 甚至更複雜的動態效果，直接上網找現成的套件，也都不是問題，你都能夠自行研究＆導入了 不過，如果需要開發與伺服器互動的應用程式，例如電子商務網站 或者是更多功能的工具類型網站，例如各種生產力工具 那麼就需要學習本課程的內容，包含 Cookie、Local Storage、與 Ajax 的說明 這些內容非常有趣，能讓你開發出各種多功能的前端應用程式，讓工程師的創造力有更多發揮空間 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
Hooks 是 React 最強大的功能之一。 它們使我們能夠輕鬆地在應用程式的元件中重用功能。掛鉤的最大優點在於它們的可重用性——您可以跨元件和專案重用掛鉤。 以下是我在每個 React 專案中重複使用的七個最重要的鉤子。今天就試一試，看看它們在建置您自己的 React 應用程式時是否有幫助吧。 原文出處：https://dev.to/webdevhero-com/7-react-hooks-for-every-project-1jdo --- 在我們開始之前，要先澄清一下：並非每個自定義 React 鉤子都需要由您編寫。事實上，我將提到的所有鉤子都來自一個庫“@mantine/hooks”。 Mantine 是一個很棒的第三方庫，其中包含這些鉤子等等。他們將為您的 React 應用程式加入您能想到的幾乎所有重要功能。 您可以在 [mantine.dev](https://mantine.dev) 查看“@mantine/hooks”的文件。 ## `useIntersection` 鉤子 當用戶在您的應用程式中向下滾動頁面時，您可能想知道某個元素何時對他們可見。 例如，您可能希望僅在用戶看到特定元素時才啟動動畫。或者，您可能希望在他們向下滾動頁面一定程度後，顯示或隱藏元素。  要獲取有關元素是否可見的訊息，我們可以使用 **Intersection Observer API。**這是瀏覽器中內建的 JavaScript API。 我們可以使用純 JavaScript 單獨使用 API，但要知道有關特定元素是否在其滾動容器內，有個好方法是使用 useIntersection 掛鉤。 ``` import { useRef } from 'react'; import { useIntersection } from '@mantine/hooks'; function Demo() { const containerRef = useRef(); const { ref, entry } = useIntersection({ root: containerRef.current, threshold: 1, }); return ( <main ref={containerRef} style={{ overflowY: 'scroll', height: 300 }}> <div ref={ref}> <span> {entry?.isIntersecting ? 'Fully visible' : 'Obscured'} </span> </div> </main> ); } ``` 要使用它，我們需要做的就是在我們的元件中呼叫鉤子，並提供一個根元素。 Root 是滾動容器，可以使用 useRef 掛鉤將其作為 ref 提供。 `useIntersection` 回傳一個我們傳遞給目標元素的 ref，我們想要觀察其在滾動容器中的交集。 一旦我們有了對元素的引用，我們就可以追蹤元素是否相交。在上面的範例中，我們可以根據 entry.isIntersecting 的值查看元素何時被遮擋或何時完全可見。 您可以傳遞其他參數，這些參數允許您配置與目標可見百分比相關的**閾值**。 ## `useScrollLock` 鉤子 另一個與滾動相關的鉤子是 useScrollLock 鉤子。這個鉤子非常簡單：它使您能夠鎖定 body 元素上的任何滾動。 我發現當您想在當前頁面上顯示疊加層或跳出視窗，並且不想讓用戶在後台頁面上上下滾動時，它會很有幫助。這使您可以將注意力集中在視窗上，或允許在其自己的滾動容器內滾動。 ``` import { useScrollLock } from '@mantine/hooks'; import { Button, Group } from '@mantine/core'; import { IconLock, IconLockOpen } from '@tabler/icons'; function Demo() { const [scrollLocked, setScrollLocked] = useScrollLock(); return ( <Group position="center"> <Button onClick={() => setScrollLocked((c) => !c)} variant="outline" leftIcon={scrollLocked ? <IconLock size={16} /> : <IconLockOpen size={16} />} > {scrollLocked ? 'Unlock scroll' : 'Lock scroll'} </Button> </Group> ); } ``` `useScrollLock` 將用戶的滾動鎖定在頁面上的當前位置。該函數回傳一個陣列，它可以被解構，如上面的程式碼所示。 第二個值是一個允許我們鎖定滾動的函數。另一方面，第一個解構值是一個布林值，它告訴我們滾動條是否已被鎖定。 這個值很有用，例如，如果你想在滾動鎖定時顯示某些內容或告訴用戶它已被鎖定。您可以在下面的示例中看到，當滾動條被鎖定或解鎖時，我們會在我們的按鈕中進行指示。  ## `useClipboard` 鉤子 在許多情況下，您希望提供一個按鈕，允許用戶將內容複製到他們的剪貼板，這是存儲複製文本的地方。 一個很好的例子是，如果您的網站上有一個程式碼片段，並且您希望用戶輕鬆複製它。為此，我們可以使用另一個 Web API——**剪貼板 API**。 `@mantine/hooks` 為我們提供了一個方便的 `useClipboard` 鉤子，它回傳幾個屬性：`copied`，它是一個布林值，告訴我們是否已使用鉤子將值複製到剪貼板，以及` copy` 函數，我們可以將我們喜歡的任何字串值傳遞給它以進行複制。 在我們的範例中，我們想複製一個程式碼片段，供我們的用戶粘貼到他們喜歡的地方，如下面的影片所示：  ## useClipboard demo 當他們點擊我們指定的複制按鈕時，我們呼叫我們的 `copy` 函數，將程式碼片段傳遞給它，然後顯示一個小複選標記或向他們表明文本已被複製的東西。 巧妙的是 `useClipboard` 掛鉤帶有 **超時值**。在給定的超時時間（以毫秒為單位）之後，複製的狀態將被重置，向用戶顯示他們可以再次復製文本。 ## `useDebouncedValue` 鉤子 如果您的應用程式中有搜尋輸入，下一個鉤子“useDebouncedValue”是必不可少的。 每當用戶使用輸入執行搜尋時，搜尋操作通常涉及對 API 的 HTTP 請求。 您將遇到的一個典型問題是每次擊鍵都會執行查詢（請求），尤其是如果您希望用戶在鍵入時接收搜尋結果。即使對於一個簡單的搜尋查詢，也不需要在用戶完成輸入他們想要的內容之前執行這麼多請求。 這是 useDebounceValue 掛鉤的一個很好的用例，它對傳遞給它的文本應用「防抖」功能。 ``` import { useState } from 'react'; import { useDebouncedValue } from '@mantine/hooks'; import { getResults } from 'api'; function Demo() { const [value, setValue] = useState(''); const [results, setResults] = useState([]) const [debounced] = useDebouncedValue(value, 200); // wait time of 200 ms useEffect(() => { if (debounced) { handleGetResults() } async function handleGetResults() { const results = await getResults(debounced) setResults(results) } }, [debounced]) return ( <> <input label="Enter search query" value={value} style={{ flex: 1 }} onChange={(event) => setValue(event.currentTarget.value)} /> <ul>{results.map(result => <li>{result}</li>}</ul> </> ); } ``` 您使用 useState 將輸入的文本儲存在一個狀態中，並將狀態變數傳遞給 useDebouncedValue 。 作為該掛鉤的第二個參數，您可以提供一個等待時間，即值被「反抖」的時間段。反抖使我們能夠執行更少的查詢。 您可以在下面的影片中看到結果，用戶在其中鍵入內容，並且僅在 200 毫秒後，我們才能看到去抖值。  ## `useMediaQuery` 鉤子 我一直使用的另一個非常有用的鉤子是 useMediaQuery 鉤子。 Media Queries 在純 CSS 中使用，`useMediaQuery` 鉤子允許我們訂閱我們傳遞給鉤子的任何媒體查詢。 例如，在我們的元件中，假設我們想要顯示一些文本或根據特定螢幕寬度（例如 900 像素）更改元件的樣式。我們像在 CSS 中一樣提供媒體查詢，並且 useMediaQuery 回傳給我們一個 true 或 false 的 matches 值。 ``` import { useMediaQuery } from '@mantine/hooks'; function Demo() { const matches = useMediaQuery('(min-width: 900px)'); return ( <div style={{ color: matches ? 'teal' : 'red' }}> {matches ? 'I am teal' : 'I am red'} </div> ); } ``` 它用 JavaScript 告訴我們媒體查詢的結果，這在我們想要使用 `style` 屬性在 JSX 中直接更改樣式時特別有用，例如。  簡而言之，對於少數無法使用 CSS 處理媒體查詢的情況，這是一個必不可少的鉤子。 ## `useClickOutside` 鉤子 下一個掛鉤 - `useClickOutside` - 可能看起來很奇怪，但當您真正需要它時，您會發現它的重要性。 當你開發一個下拉菜單，或者在頁面內容前面彈出，並且之後需要關閉的東西時，這個鉤子是必不可少的。通過單擊按鈕打開這些類型的元件之一非常容易。關閉這些元件有點困難。 為了遵循良好的 UX 實踐，我們希望任何阻礙用戶視圖的東西都可以通過單擊元素外部輕鬆關閉。這正是 useClickOutside 掛鉤讓我們做的。 當我們呼叫 useClickOutside 時，它會返回一個 ref，我們必須將其傳遞給我們想要檢測點擊的外部元素。通常該元素將由一個布林狀態片段控制，例如我們在下面的示例中的狀態（即值“opened”）。 ``` import { useState } from 'react'; import { useClickOutside } from '@mantine/hooks'; function Demo() { const [opened, setOpened] = useState(false); const ref = useClickOutside(() => setOpened(false)); return ( <> <button onClick={() => setOpened(true)}>Open dropdown</button> {opened && ( <div ref={ref} shadow="sm"> <span>Click outside to close</span> </div> )} </> ); } ``` `useClickOutside` 接受一個回調函數，該函數控制當您實際單擊該元素外部時發生的情況。 在大多數情況下，我們想做一些非常簡單的事情，就是關閉它。為此，您可能需要一個狀態設置器（如 `setOpened`）並向其傳遞一個 false 值，然後隱藏您覆蓋的內容。  ## `useForm` 鉤子 在這個列表中，我最喜歡和最有用的鉤子是 `useForm` 鉤子。 這個鉤子專門來自 Mantine，涉及從庫中安裝一個特定的包：`@mantine/form`。它會為您提供在 React 中建立表單所需的一切，包括驗證輸入、顯示錯誤訊息以及在提交表單之前確保輸入值正確的能力。 `useForm` 接受一些初始值，這些初始值對應於您在表單中的任何輸入。 ``` import { TextInput, Button } from '@mantine/core'; import { useForm } from '@mantine/form'; function Demo() { const form = useForm({ initialValues: { email: '' }, validate: { email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'), }, }); return ( <div> <form onSubmit={form.onSubmit((values) => console.log(values))}> <TextInput withAsterisk label="Email" placeholder="[email protected]" {...form.getInputProps('email')} /> <Button type="submit">Submit</Button> </form> </div> ); } ``` `useForm` 的最大好處是它的助手，例如 `validate` 函數，它接收輸入到每個輸入的值，然後允許您建立驗證規則。 例如，如果您有一個電子郵件輸入，您可能有一個正則表達式來確定它實際上是否是一個有效的電子郵件（如您在上面的程式碼中所見）。如果沒有，那麼您可以顯示一條錯誤訊息並阻止提交表單。  您如何獲取已輸入到表單中的值？ Mantine 提供了一個非常方便的助手，叫做“getInputProps”，你只需提供你正在使用的輸入的名稱（比如電子郵件），它就會自動設置一個 onChange 來追蹤你在表單中輸入的值. 此外，為了處理表單提交，並在其值未通過驗證規則時阻止送出，它有一個特殊的 `onSubmit` 函數，您可以將其包裹在常規的 onSubmit 函數中。除了應用驗證規則之外，它還會負責在表單事件上呼叫 `preventDefault()`，這樣您就不必手動執行此操作。 我只用了這個鉤子的基本功能，但我強烈建議您在下一個專案中使用它。傳統上，表單很難正常工作，尤其是需要驗證和可見錯誤訊息的表單。 `useForm` 讓它變得異常簡單！ --- 以上，簡單分享，希望對您有幫助。
框架背後有什麼必學觀念的？這篇文章簡單整理如下 原文出處：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) 上見到我。 但請記住，所有其他選擇都同樣有效。你不應該因為我這麼說就選擇一個框架，而應該使用最適合你的框架。
軟體工程師寫部落格，對於職業生涯很有幫助，有很多好處。這篇文章的作者簡單分享心得。 原文出處：https://dev.to/nasirovelchin/every-software-developer-should-write-a-blog-4622 --- 作為一名軟體工程師，我常常打算明天、下週甚至下個月，就要開始寫部落格。但幾年過去了，我還沒有寫過一篇文章。我沒有開始的原因是，我覺得，我不是專家、不是名人、也不擅長寫作，只是一個普通的軟體工程師。因此，為什麼我要花時間寫一篇文章，根本沒有人會讀。這總是阻止我開始寫。但最近，在我閱讀了幾篇軟體工程師的文章後，我改變了主意，決定開始寫。 有很多理由開始寫文章，而且，我認為每個軟體開發人員都應該擁有部落格。理由大致如下： **更快地學習並提高您的技術技能** 當我試圖解釋或教別人時，我自己也學得更快。我從大學的電腦科學課的小組作業專案中了解到這一點。我仍然記得我試圖向其他小組成員解釋和展示的一切。解釋會促使你更多地了解這個主題，這不僅對你的讀者有好處，對你自己也有好處。開設技術部落格與教學非常相似，因為在您的部落格中，您將向世界教授寫程式和電腦科學。 **推銷自己並開始你的職業生涯** 您的部落格將為您可能無法找到的各種網絡和商業機會打開大門。通過部落格，您可以得到很多機會成為自由工作者和接案者。舉個真實的例子，我的一個朋友，他開始學習 Java 程式語言，並在他的部落格上分享他的進度，有招聘人員向他發送了他從未申請過的工作機會，他們發現他在網上分享的文章。而且，他甚至在完成 Java 課程之前就開始了他的軟體工程師生涯。 **記錄您的回饋進度** 您每周有多少次找到完美的 StackOverflow 文章來解決您的問題並節省您數小時的頭撞牆？有多少次您花費數小時解決問題，但沒有其他人從您的解決方案中獲益？ 即使你不時地、每週寫一篇文章，你也可以展示你面臨什麼樣的挑戰，你是如何解決它們的，你使用了哪些方法和技術，你避免了哪些。一年後，當您回顧時，您會發現您的文件對別人幫助很大，這些有用的見解，以及解決問題的方法，都很有幫助。 此外，與經驗豐富的軟體工程師相比，寫程式經驗很少的人可以更好地展示他們如何在某些主題上掙扎，陷阱和不明顯的部分在哪裡。因此，閱讀您貼文的人不會陷入您所寫內容的陷阱。 **學習如何交流和表達你的想法** 信不信由你，但您的軟體職業生涯在很大程度上取決於您溝通和表達想法的能力。即使你是一個優秀的軟體工程師，如果沒有良好的溝通和展示自己的能力，你的軟體生涯也不會大放異彩，而且會受到限制。此外，許多軟體工程師都說寫文章也能幫助他們寫出更好的程式碼。 **消除你的壓力** 脫離日常的寫程式生活，給自己一些自由，隨心所欲地寫一些你想分享的東西，分享你自己的觀點，寫下來並發表。這些都會讓你感到放鬆。 總的來說，作為軟體開發人員，寫部落格是提升個人風格的絕佳方式。寫部落格可以促進您所做或計劃做的任何事情。它打開了您意想不到的大門。值得一試，看看會發生什麼好事吧。
## 課程目標 認識並且能使用 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 文字變為紅色 寫完之後，你自行比較一下，網頁多加一個肥大的套件，但是可以少打這些字，你覺得值得嗎？ 這是一個主觀問題，你就根據情況決定你的答案吧！ 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能使用 autosize 套件 ## 課程內容 這次的套件是 https://github.com/jackmoore/autosize 文件與 demo 在 https://www.jacklmoore.com/autosize/ 這是一個讓 `<textarea>` 的 UX（User Experience 使用者體驗）瞬間升級的好用套件 ``` // from a NodeList autosize(document.querySelectorAll('textarea')); // from a single Node autosize(document.querySelector('textarea')); ``` 使用起來非常簡單，把 DOM 元素找到，當成參數傳給 autosize 函式，就可以了 在設計各種第三方套件給別人的時候，通常都會設計成這樣，很簡單、易用吧 程式的使用方法，我們叫 API（Application Programming Interface，應用程式介面） 實務上，我們會跟同事說：「去查一下這個套件的 API」，也就是去看一下這套件的使用方法。可以理解成「產品規格」 --- 在上網搜尋套件的時候，第一個要先看這個專案的星星數量，至少要有幾百顆以上吧 如果是太冷門的套件，代表可能不夠成熟、文件不完整、潛在 bug 會很多 第二個要看的是最近更新日期，也就是 last commit 的時間，至少兩年內有更新過吧 太久沒更新的專案，可能有點過時，會跟最新的瀏覽器或者其他工具有衝突 不過，如果只是用在網站上的小小地方，真的出問題，再換掉的成本也不大，那就先導入也沒關係 --- 要使用第三方套件，除了直接下載然後使用 `<script>` 引入之外，還有一個常用的懶人方法 就是搜尋 `套件名稱 CDN`，直接找現成的 CDN 連結來用 CDN 全名 Content Distribution Network，內容傳遞網路。這是大型企業讓資源在全球加速載入用的 看不懂沒關係，反正搜尋 `套件名稱 CDN`，通常會有現成 `<script>` 可用 搜尋 `autosize cdn` 看看搜尋結果，就會知道了 （要注意這是一個懶人方法，工作上直接這樣用，網站可能會載入的有點慢） ## 課後作業 請使用 https://jsfiddle.net 假設你正在開發一個留言功能 有暱稱欄位、留言欄位、以及一個送出按鈕 留言的區塊，`textarea` 預設只有三行的高度 使用者在輸入時，輸入越多行，輸入區塊會自動變高，而不會出現捲軸 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做 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 屬性，弄得漂亮一點 做出以上功能，你就完成這次的課程目標了！
## 課程目標 認識並且能實做 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>` 只是方便隔開元素，方便別人查看元件用的，醜醜的留在畫面上沒關係 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 學會基本的 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、跟一堆索引，你會希望有更多額外資訊 你會希望程式碼能更清楚表達：「目前到底是在找什麼元素」。所以實務上都是以新寫法為主的 不過呢，這依然是主觀問題。如果你喜歡整個職業生涯都用老寫法來做，應該也可以。高興就好囉！ --- 完成這次重構，你就完成這次的課程目標了！
## 課程目標 能動態加上 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` 印到開發者工具中，然後用瀏覽器看一下內容 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 學會「數字」資料型態的比較 多學一個 `else if` 條件判斷，進行流程控制 學會巢狀 if/else 條件判斷，進行流程控制 ## 課程內容 前面的課程中，我們有學過比對字串是否相同 ``` var str1 = '星期一'; var str2 = '星期二'; if (str1 == str2) { alert('同一天'); } else { alert('不同天'); } ``` 同樣的寫法，也能用來比較數字 ``` var x = 100; var y = 50 + 50; if (x == y) { alert('同樣大小'); } else { alert('不同大小'); } ``` 除了比較等於 `==` 之外，還有其它基本比較，分別是 - `!=` 不等於 - `>` 大於 - `<` 小於 - `>=` 大於等於 - `<=` 小於等於 用法一樣，放在 if 後面小括號之中即可。這些比較都很常用到！ --- 之前的課程，有學過 if/else 語句，這次再多學一個，叫做 `else if` 語句 當 if 條件不成立，就會進到 else if 條件檢查，如果還是不成立，最終才會進到 else ``` var x = 10; var y = 20; if (x > y) { alert('x 比較大'); } else if (x == y) { alert('x 跟 y 一樣大'); } else { alert('y 比較大'); } ``` 上述範例，在 jsfiddle 跑跑看，把 `x` `y` 的值隨意調整一下，就會知道 if / else if / else 的運作方法！ 除此之外，`else if ` 語句可以有多個，不只有一個，如果寫多個 else if 的話，就會逐個逐個檢查是否成立 如果不成立，就進到下一個條件檢查；如果成立，就執行當前大括號裡面的內容 ``` var height = 170; if (height >= 190) { alert('您非常高喔！'); } else if (height >= 180) { alert('您的身高挺不錯！'); } else if (height >= 175) { alert('您高於平均身高！'); } else if (height >= 170) { alert('您是標準身高呢！'); } else { alert('加油！可以多喝牛奶！'); } ``` 上述範例，在 jsfiddle 跑跑看，把 `height` 調整一下，玩玩看吧！ --- 最後來學一下巢狀條件判斷 開始之前，先學一個數學運算，叫做「餘數」，寫法是 `%` 跟加減乘除類似，餘數會將數學上的餘數計算出來，`alert(10 % 3)` 會顯示 1，`alert(10 % 2)` 會顯示 0 如果你忘記餘數是什麼，請去翻一下小學數學課本，或者網路搜尋一下 ``` var x = 35; if (x % 2 == 1) { if (x > 100) { alert('這數字很大，而且是奇數。') } else { alert('這數字不大，而且是奇數。') } } else { if (x > 100) { alert('這數字很大，而且是偶數。') } else { alert('這數字不大，而且是偶數。') } } ``` 上述範例，在 jsfiddle 跑跑看，把 `x` 調整一下，玩玩看吧！ 巢狀結構，就是進行完條件檢查之後，在裡面又遇到一個條件檢查 乍看之下很亂，但也只是多一層，習慣一下，其實也還好 其實，巢狀結構可以有很多層，也就是 if 裡面有 if 然後裡面又有 if，可以不斷寫下去 但實務上會避免這樣寫，因為會讓程式碼非常難讀。可能的話，同樣邏輯，試著改用別的寫法，會比較好讀 比方說使用 `&&` 來改寫，這是數學邏輯上的「且」的意思 ``` var x = 35; if (x % 2 == 1 && x > 100) { alert('這數字很大，而且是奇數。') } else if (x % 2 == 1 && x <= 100) { alert('這數字不大，而且是奇數。') } else if (x % 2 == 0 && x > 100) { alert('這數字很大，而且是偶數。') } else { alert('這數字不大，而且是偶數。') } ``` 這段程式，跟上一段程式，邏輯上是完全一模一樣的喔！ 至於哪種寫法比較漂亮呢？這純粹是主觀問題，都可以。 程式設計之中，很多事情都是主觀問題，不用被困擾太久。先能跑就好了，你就先用就對了 ## 課後作業 接續前一課的作業，目前的導購＆促銷流程，效果還不錯 但你發現有些人不懂批發工廠的運作，下單數量太少，或者太多 常常要在電話中解釋，有點浪費時間，你希望在網頁上能有提示改善 這次的作業，要做業界所謂的「表單驗證」功能 --- 這次驗證，需要驗證「顧客名稱」與「訂購數量」這兩個欄位 如果顧客名稱是空白沒填，點擊訂購按鈕請用 alert 跳出訊息「煩請填寫您的大名。」 如果訂購數量沒填，請用 alert 跳出訊息「煩請輸入訂購數量。」 如果訂購數量有填，但是數量小於 100，請用 alert 跳出訊息「抱歉，我們工廠的最低出貨量是 100 件。」 如果訂購數量有填，但是數量大於 5,000，請用 alert 跳出訊息「抱歉，我們工廠的最高出貨量是 5,000 件。」 如果以上表單欄位驗證，通通沒問題，就進入正常流程 1. 跳出招呼訊息 2. 顯示訂單詳細內容 做出以上功能，你就完成這次的課程目標了！
## 課程目標 學會「數字」資料型態 學會基本的資料型態轉換 ## 課程內容 在之前的課程中，我們學會了宣告字串、以及字串的連接 ``` var str1 = '新年'; var str2 = '快樂'; var str3 = var1 + str2; alert(str3); ``` 這課我們要學「數字」這種資料型態以及一些基本操作 ``` var x = 30; var y = 5; var z1 = x + y; var z2 = x - y; var z3 = x * y; var z4 = x / y; alert(z1); alert(z2); alert(z3); alert(z4); ``` 以上是加減乘除的範例，很簡單吧！ 要注意的是，長得像數字的字串，其實依然是字串 ``` var a1 = '100'; var a2 = 100; ``` 上面的 `a1` `a2` 兩個變數，看起來很像，但資料型態不一樣 雖然直接進行字串連接或者加減乘除，程式不會出問題，但那其實是 JavaScript 引擎知道你懶惰，「猜測」你需要型態轉換，自動幫你轉換 但其實手動把型態轉換清楚比較好，比較不會有誤會 比方說，上面的 `a1 + a2` 如果都當成數字，會是 `200`；如果都當成字串，那字串連接會是 `'100100'` 這種情況就很容易造成出錯，所以要養成習慣，把型態轉換清楚 要把數字轉成字串，可以使用「數字」這種資料型態內建的 `.toString()` 函式 ``` var a1 = '100'; var a2 = 100; var a3 = a1 + a2.toString(); alert(a3); ``` 要把字串轉成數字，也有一個內建函式 `parseInt()` 可以使用 ``` var a1 = '100'; var a2 = 100; var a3 = parseInt(a1) + a2; alert(a3); ``` 這些範例都去 jsfiddle 跑跑看，就會很清楚了！ --- 使用函式的時候，有時像在直接呼叫一個「函式」，例如 `alert()` `parseInt(a1)` 有時又像在呼叫「物件」的「函式」，例如 `document.getElementById()` `a2.toString()` 你或許會覺得，怎麼不設計成 `a1.toInt()` 跟 `parseString(a2)` 呢？ 這些其實是程式語言設計者的主觀喜好、偏好、習慣而已，不重要，反正能跑就好了，你就先用就對了 --- 有件事要提一下，前面的課程，有說到如何取得用戶輸入的內容 ``` var str = document.getElementById('keyword').value; ``` 在 JavaScript 之中，用戶在 html 元素輸入的內容，一律都會是「字串」 就算用戶是輸入阿拉伯數字，在 JavaScript 中拿到值之後，如果需要數學計算的話，要記得把型態轉成數字 ## 課後作業 接續前一課的作業，雖然詳細的報價，你希望在電話中跟對方談，因為要了解客製化細節，才能報價 但是你覺得先在網頁上，顯示初步的報價，可以節省一些時間，比較有效率 這次的作業要用簡單的數學，來初步顯示報價 --- 目前的欄位有顧客名稱、服裝分類、服裝類型 請再增加一個文字輸入欄位，讓客戶能輸入「訂購數量」 為了簡單起見，男裝不論類型，一件都報 600 元；女裝不論類型，一件都報 500 元 在點擊訂購按鈕之後，訂單細節裡面，顯示「初步估價」給客戶看，類似這樣： ``` －－－－－－－－－－ ｜您的訂單 ｜ ｜顧客姓名：ＸＸＸ｜ ｜服裝分類：ＸＸＸ｜ ｜服裝類型：ＸＸＸ｜ ｜訂購數量：ＸＸＸ｜ ｜初步估價：ＸＸＸ｜ －－－－－－－－－－ ``` 做出以上功能，你就完成這次的課程目標了！
## 課程目標 學會動態修改 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 屬性，弄得漂亮一點 做出以上功能，你就完成這次的課程目標了！
## 簡介 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 單位在某些情況下會有所幫助，但重要的是要仔細考慮它們的潛在缺點以及它們是否是您專案的最佳選擇。
身邊很多朋友工作幾年之後，從非本科轉職寫程式 主要方法大概三種：報名實體課程、報名線上課程、買線上課程自學 ## 報名實體課程 資策會、程式補習班，都屬於此類 需要本人實際到教室，由老師上課 這種課程通常需要耗時數個月，費用會在新台幣十萬上下 好處是有同學一起、有同儕壓力、有問題可以當面問老師、厲害的老師可以現場掌握全班學習狀況 壞處是每個人學習速度不同，有人跟不上、有人覺得教太慢 這種學習法，需要碰運氣，如果遇到優秀的老師，學習氛圍、效果，都會非常好 但是，就我觀察課表，以「全端工程」為主打的課程，進度通常非常倉促，能真正消化的學生非常少數 多數人只是糊裡糊塗把功課、專案做完，畢業後其實還是很沒信心、一頭霧水 （只專注在特定領域開發的課程，狀況比較好一點） 主因是基礎知識還不夠熟，就開始大量學習工具用法 我建議這種狀況，不要對自己起太多懷疑，保持耐心，養成做紀錄的習慣 覺得一知半解的地方就把問題記錄一下，每天都整理出一些問題 整理出一張問題清單，找時間請教別人、或是上網慢慢研究 多數回答，聽完之後應該還是聽不懂，沒關係，先放著 有搞懂的問題就劃掉，一段時間之後，會更清楚程式設計整體觀念，也會更有信心 重點是要知道自己具體是哪些細節不了解、一知半解，才有補充＆複習＆研究的方向 ## 報名線上課程 坊間許多業者提供這類服務，會有大量教學影片，個人自己找時間看完即可 並且會幫大家分組、需要一起做專案、會有助教指導 好處是每個人可以自行抓節奏，並且費用便宜許多，通常不到實體課程四分之一 如果是組合式的課程商品，就更好了，可以先購買一些基礎課程，滿意才買更多 壞處是需要紀律，督促自己去學習，需要積極、主動一點 通常我是推薦朋友，去買這種課程，因為財務、時間風險，比實體課程小很多 真的找不到相關業者提供課程、有找到政府補助、有找到特別優秀的實體課程名師，才去找實體課程 ## 買線上課程自學 不分學期、沒有分組專案、沒有助教 基本上就是找一些影片自己來看 這種課程國外比較多，需要英文能力好 好處是費用非常便宜，通常幾百元～幾千元就有很不錯的內容 甚至有 freeCodeCamp 這種完全免費的課程 壞處是需要英文能力，並且很多只是小課程，不是完整的一套多課程規劃，會不確定自己的進度到哪了 如果有親戚朋友是業界軟體工程師，比較好，因為可以跟他請教、確認自身進度、以及確認自己求職條件如何 ## 結論 半路出家不容易，我鼓勵大家把學習想成是一個「逐漸清晰」的過程 看過電腦讀取大張高清圖片的樣子嗎？先是模模糊糊的馬賽克，接著一塊一塊慢慢變清晰，最後才是變成完整的美麗圖片 學習會有點類似這樣，一開始到處模模糊糊的沒關係，保持耐心，逐步提高各處的解析度即可 只要先有一整張模糊的圖片即可。不需要執著在圖片一個角落，覺得這塊不清楚，就不能往下走 更千萬不要因為圖片模糊，就覺得「我果然不適合寫程式，放棄好了」，這絕對是搞錯重點 以上，簡單建議分享，希望對你有幫助！ --- 您在坊間補習班的學習經驗如何呢？歡迎在留言處跟大家分享您的個人學習經驗！
# 第1課 課程目標 認識 RWD (Responsive Web Design) 的意思。能利用瀏覽器觀察 RWD 網站的變化。 # 第1課 課程內容 RWD 全名 Responsive Web Design，是現在智慧型手機普及的年代，最廣泛被採用的設計方法之一。 乍聽之下很酷炫，其實實作起來非常簡單，主要是在不同的螢幕大小上，顯示不同的排版。 電腦的螢幕上以多欄式排版為主，縮小到平板、手機螢幕時，則將各區塊堆疊起來，方便使用者從上到下瀏覽。 請參考這個連結，認識基本的 RWD 原理： https://www.w3schools.com/html/html_responsive.asp 大致看懂內容即可，不需要全部讀懂沒關係。 如果你在電腦上寫了一個網頁，要如何知道從平板、手機上瀏覽，網頁看起來是什麼樣子呢？ 有兩種方法。 第一種，用滑鼠拖拉瀏覽器，把視窗慢慢縮小，你應該會看到網頁畫面有慢慢變化。 第二種，使用瀏覽器的開發者功能，直接幫你把螢幕調整成平板與手機的大小。 請參考以下連結： https://developers.google.com/web/tools/chrome-devtools/device-mode/?hl=zh-tw https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports?hl=zh-tw 不須讀完全部內容，知道怎麼模擬手機與平板螢幕的大小來瀏覽網頁即可。 # 第1課 作業 請打開美國時代雜誌的網站首頁： http://time.com 並且回答以下三個問題： 1. 在手機、平板、電腦三種裝置上看，你認為網站排版的主要差異是什麼？ 2. 在手機、平板、電腦三種裝置上看，有些元素只會在特定裝置上顯示，你看得出是什麼嗎？ 3. 在手機、平板、電腦三種裝置上看，有些元素在不同裝置上的顯示順序是不同的，你看得出是什麼嗎？ 能夠回答以上三個問題，你就完成這次的課程目標了！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
