## 課程目標 認識並且能使用 kenwheeler/slick 套件 ## 課程內容 介紹下一個成熟的 jQuery 生態系套件 輪播、幻燈片這種套件,業界實作有非常多,乍看之下寫起來不難 但是,要在手機上支援拖曳滑動、向左向右、下方有小點提示順序等等,其實要讓 UX...
## 課程目標 認識並且能使用 xdan/datetimepicker 套件 ## 課程內容 我在上一課說過,jQuery 生態系很多成熟套件,不用可惜 這就是其中一個! datetimepicker 就是時間日期選擇器,超多網站需要用到 業界實作有非常多套,這套...
## 課程目標 認識並且能使用 jQuery 套件 ## 課程內容 這一課要教的東西比較有爭議 jQuery 是 2006 - 2015 年代,前端網頁開發的王者 當時的瀏覽器廠商眾多,網頁規格 API 支援方式不同、不完整(尤其是 IE 一堆奇怪的 API) 當...
## 課程目標 認識並且能使用 Chart.js 套件 ## 課程內容 這次的套件是 https://github.com/chartjs/Chart.js 文件與 demo 在 https://www.chartjs.org/ 這是一個畫圖表、報表的工具,而且非常漂亮...
## 課程目標 認識並且能使用 vanilla-lazyload 套件 ## 課程內容 這次的套件是 https://github.com/verlok/vanilla-lazyload 文件與 demo 在 https://www.andreaverlicchi.eu/va...
## 課程目標 認識並且能使用 autosize 套件 ## 課程內容 這次的套件是 https://github.com/jackmoore/autosize 文件與 demo 在 https://www.jacklmoore.com/autosize/ 這是一個讓 ...
進入到 JavaScript 基礎課程的第四部份 你已經算是有了初步的前端開發與設計能力了 實務上,我們在專案中大部份的功能、元件,都會去找找看「現成的」、「開源專案」來使用 也就是如果已經有人做過了、有人分享過了,如果堪用,基本上就不會自己重做一個 因為成本差太多,什麼都自...
最後,謝謝你耐心的完成這整套課程! 進階的 RWD 技巧,以及 RWD 背後深入的 css 原理,會在別門課程提到。 但是目前所學的基本技巧,應該已經很足夠使用!
建議您將自己完成的網站分享給您的朋友,讓大家看看您最新學會的技能! 完成這些,你就完成這次的課程目標了! 想成為網頁設計師的朋友,之後可以開始找更多資源學習CSS的進階技術。 想成為前端工程師的朋友,之後可以開始找 JavaScript 的資源學習。 想成為後端工程師的朋友,...
### 第1課 ── 基本的函數操作、onclick 事件 https://jsfiddle.net/j80d9gao/17/ --- ### 第2課 ── 基本的變數操作、從 html 取得內容 https://jsfiddle.net/09v5oadu/23/ --- ### 第...
在這份教材中,實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件,但已能滿足許多網站設計需求 實務上,不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎,接著客製化與修改,例如最知名的 Bootstrap 套件 但是,不論是網頁設計師、前端工程師,在使用現成...
## 課程目標 認識並且能實做 carousel 元件 ## 課程內容 carousel 中文叫「輪播」元件,也有人叫 slideshow 幻燈片 常用在購物網站,用在多張商品圖片要展示時 請上網搜尋 `slideshow js` `carousel javascrip...
## 課程目標 認識並且能實做 dropdown 元件 ## 課程內容 dropdown 中文叫「下拉式選單」元件 通常用在網站上方的「導覽列」,當導覽列有太多連結的時候,就可以分組、放進下拉式選單 有人會做成點擊後展開選單,有人會做成滑鼠移上去就展開選單。兩種作法都很...
## 課程目標 認識並且能實做 collapse 效果 ## 課程內容 collapse 中文叫「折疊」效果,也就是內容可以展開、收起的效果 當頁面上「資訊非常多、多到難以閱讀」的時候,會使用這個效果來精簡資訊 通常用在 FAQ 常見問題集的頁面 一行一行列出各種...
## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證,可以用 alert 跳訊息提醒就好 但因為 alert 視窗,普遍被認為太醜、功能太弱,設計師通常會想要做得更漂亮一點 欄位驗證的 UX 可簡單可複雜,可以在送出表單的時候驗證,也可以在打字輸入的...
## 課程目標 認識並且能實做 modal 元件 ## 課程內容 modal 中文叫「互動視窗」元件,也有人叫「燈箱」或者「視窗」 這是幾乎所有網站都會用到的元件 台灣各大媒體網站常見的「蓋板廣告」,就算是一種「視窗」 各大社群網站,逛一逛就跳出「視窗」強迫你登入...
## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件,就跟烤土司機,烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出,可以讓使用者體驗(User Experience,簡稱 UX)更好 很多網站因為沒有做好適當的 toa...
## 課程目標 認識並且能實做 alert 元件 ## 課程內容 alert 中文叫「示警」元件,當有訊息要公告在網站上,就可使用 或者當用戶執行了某些動作,在頁面上要提示、回饋訊息的時候,也可使用 通常要將 alert 做成幾種不同樣式,根據不同使用情境來使用 ...
本課程為 JavaScript 基礎課程的第三部份 在前兩部份的課程中,已經學會程式設計的基本觀念,以及 DOM 操作的基本方法 在這次的課程,我們將練習製作實務上常用的 UI 元件 藉由這次練習,強化在前兩部份課程學到的知識 --- 身為工程師,常常要做一些沒做過的功...
簡單複習一下,在這份教材中,我們學會了 - DOM 樹基本觀念 - DOM 樹新增、刪除 - DOM 樹找到元素的方法 - 基本的除錯技巧 - 動態加上 onclick 事件 - 操作 onchange 事件 - 基本的 for 迴圈用法 - 在 DOM 樹存取、修改元素的 c...
精選技術文章、免費程式設計資源、以及業界重要新聞!