站長獨家研發的新手友善、專案導向教材!
本課程為 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) 準備好的話,讓我們馬上開始吧!
## 課程目標 認識並且能實做 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>` 只是方便隔開元素,方便別人查看元件用的,醜醜的留在畫面上沒關係 --- 做出以上功能,你就完成這次的課程目標了!
## 課程目標 認識並且能實做 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>` 只是方便隔開元素,方便別人查看元件用的,醜醜的留在畫面上沒關係 --- 做出以上功能,你就完成這次的課程目標了!
## 課程目標 認識並且能實做 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>` 只是方便隔開元素,方便別人查看元件用的,醜醜的留在畫面上沒關係 --- 做出以上功能,你就完成這次的課程目標了!
## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證,可以用 alert 跳訊息提醒就好 但因為 alert 視窗,普遍被認為太醜、功能太弱,設計師通常會想要做得更漂亮一點 欄位驗證的 UX 可簡單可複雜,可以在送出表單的時候驗證,也可以在打字輸入的時候就同時驗證 請上網搜尋 `form validation ui`,四處觀摩一下業界常見的設計 ## 課後作業 請使用 https://jsfiddle.net 實做一個「註冊帳戶」表單 欄位有 - 用戶暱稱 - Email 信箱 - 密碼 接著有一個「註冊」按鈕 按下按鈕的時候,如果有欄位空白,就在欄位的下方或者旁邊,顯示紅字提示 各個欄位的驗證檢查條件如下: - 用戶暱稱 -> 不能為空白、必須在40字以內 - Email 信箱 -> 不能為空白、必須包含 `@` 符號 - 密碼 -> 不能為空白、必須在8字以上、必須在100字以內 請稍微加一些 css 屬性,弄得漂亮一點 --- 請搜尋 `javascript 包含字串` `javascript 字串長度`,了解相關用法,才有辦法完成本課作業 --- 做出以上功能,你就完成這次的課程目標了!
## 課程目標 認識並且能實做 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 屬性,弄得漂亮一點 做出以上功能,你就完成這次的課程目標了!
## 課程目標 認識並且能實做 dropdown 元件 ## 課程內容 dropdown 中文叫「下拉式選單」元件 通常用在網站上方的「導覽列」,當導覽列有太多連結的時候,就可以分組、放進下拉式選單 有人會做成點擊後展開選單,有人會做成滑鼠移上去就展開選單。兩種作法都很常見 請上網搜尋 `dropdown menu javascript`,了解如何做到 ## 課後作業 請使用 https://jsfiddle.net 假設正在幫一個創業的朋友,做官方介紹網站。 需要實做一個導覽列,包含 - 首頁 - 全部商品 - 全部品牌 - 關於我們 -> 團隊介紹、企業宗旨、創業故事 請將「關於我們」做成下拉式選單,點下去會顯示額外三個連結 請稍微加一些 css 屬性,弄得漂亮一點 做出以上功能,你就完成這次的課程目標了!
## 課程目標 認識並且能實做 carousel 元件 ## 課程內容 carousel 中文叫「輪播」元件,也有人叫 slideshow 幻燈片 常用在購物網站,用在多張商品圖片要展示時 請上網搜尋 `slideshow js` `carousel javascript`,了解如何做到 ## 課後作業 請使用 https://jsfiddle.net 接著上網尋找五張漂亮圖片。參考圖庫:https://unsplash.com/ 假設正在幫一個攝影師朋友,做個人介紹網站。首頁要有一個輪播元件,顯示漂亮的照片作品 --- 請實做一個照片輪播效果,並且能夠點擊來切換圖片 請稍微加一些 css 屬性,弄得漂亮一點 做出以上功能,你就完成這次的課程目標了!
在這份教材中,實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件,但已能滿足許多網站設計需求 實務上,不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎,接著客製化與修改,例如最知名的 Bootstrap 套件 但是,不論是網頁設計師、前端工程師,在使用現成套件之餘,稍微知道背後的原理,比較好 這樣才能更好地掌握工具,以及在必要的時候能夠親自開發與修改 而到目前為止,我認為,你已經能夠親手製作出設計師要求的大部份靜態&動態設計了! --- 真正在工作的時候,也會很像本次課程這樣,幾乎完全沒人幫你 但或許會有人告訴你關鍵字,或是你覺得好像在哪邊看過某種功能、效果 所以雖然你還不會做、沒有做過,但你有信心,可以找到相關資源、可以做得出來 身為軟體工程師,需要有這種「大致知道自己潛力在哪」的能力與信心,才能不斷樂於接受超出能力的挑戰 要習慣這種感覺。就像在這次的七個 UI 元件練習中,在我完全沒有教學的情況下,你就成功做到了 --- 消化、研究完本課程之後,關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材:JavaScript(四)」開始學習吧! https://codelove.tw/@howtomakeaturn/course/837eq0
你的轉職路上,還缺少一份自學作業包!寫完這幾包,直接拿作品去面試上班!
本論壇另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!