## 課程目標 認識並且能實做 dropdown 元件 ## 課程內容 dropdown 中文叫「下拉式選單」元件 通常用在網站上方的「導覽列」,當導覽列有太多連結的時候,就可以分組、放進下拉式選單 有人會做成點擊後展開選單,有人會做成滑鼠移上去就展開選單。兩種作法都很...
## 課程目標 認識並且能實做 collapse 效果 ## 課程內容 collapse 中文叫「折疊」效果,也就是內容可以展開、收起的效果 當頁面上「資訊非常多、多到難以閱讀」的時候,會使用這個效果來精簡資訊 通常用在 FAQ 常見問題集的頁面 一行一行列出各種...
## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證,可以用 alert 跳訊息提醒就好 但因為 alert 視窗,普遍被認為太醜、功能太弱,設計師通常會想要做得更漂亮一點 欄位驗證的 UX 可簡單可複雜,可以在送出表單的時候驗證,也可以在打字輸入的...
## 課程目標 認識並且能實做 modal 元件 ## 課程內容 modal 中文叫「互動視窗」元件,也有人叫「燈箱」或者「視窗」 這是幾乎所有網站都會用到的元件 台灣各大媒體網站常見的「蓋板廣告」,就算是一種「視窗」 各大社群網站,逛一逛就跳出「視窗」強迫你登入...
## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件,就跟烤土司機,烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出,可以讓使用者體驗(User Experience,簡稱 UX)更好 很多網站因為沒有做好適當的 toa...
## 課程目標 認識並且能實做 alert 元件 ## 課程內容 alert 中文叫「示警」元件,當有訊息要公告在網站上,就可使用 或者當用戶執行了某些動作,在頁面上要提示、回饋訊息的時候,也可使用 通常要將 alert 做成幾種不同樣式,根據不同使用情境來使用 ...
本課程為 JavaScript 基礎課程的第三部份 在前兩部份的課程中,已經學會程式設計的基本觀念,以及 DOM 操作的基本方法 在這次的課程,我們將練習製作實務上常用的 UI 元件 藉由這次練習,強化在前兩部份課程學到的知識 --- 身為工程師,常常要做一些沒做過的功...
## 課程目標 學會基本的 Selector API 用法 學會基本的 `.closest()` 的用法 ## 課程內容 課程到目前為止,要存取元素,都是使用 `document.getElementById` `.parentElement` `.children` 然後上...
## 課程目標 能動態在 DOM 樹修改元素的 style 屬性 ## 課程內容 實務上有個功能很常見,就是元素開關(toggle)的效果 點一下讓某元素出現,再點一下讓某元素消失 例如:跳出一張照片顯示、再關閉這張照片;或者顯示提示訊息文字,點擊後關閉文字(不是 al...
## 課程目標 學習基本的 for 迴圈用法 ## 課程內容 之前的課程中,我們學過陣列&索引的基本用法 實務上,使用陣列時,通常會需要寫一些 for 迴圈搭配使用 for 的寫法有很多種,我們先學 for of 的寫法就好 ``` var fruits = [...
## 課程目標 能動態加上 onclick 事件屬性 能選取到父元素、子元素 能夠在 DOM 樹進行「移除」 能存取到 onclick 事件發生的元素 ## 課程內容 現在已經會在 DOM 樹增加元素、加入文字了 記得之前寫過的「事件」嗎? ``` ...
## 課程目標 認識 DOM 樹基本觀念 能夠在 DOM 樹進行「新增」 學會基本的除錯技巧 ## 課程內容 請打開這個網站,用這個網站來練習&寫作業: https://jsfiddle.net 在學 JavaScript 的時候,你會聽到很多人在講「DOM...
本課程為 JavaScript 基礎課程的第二部份 第一部份的專案練習,已經學習到程式設計的基本觀念 第二部份,將藉由另一個專案,接著學習更多程式設計觀念 在開始之前,您需要先具備基本的 HTML、CSS、JavaScript 知識。 還不會的朋友,請先完成: - [自...
## 課程目標 學會基本的陣列取值 能從 html 元素中,得到用戶選取的內容 ## 課程內容 這課先來學一點陣列觀念 ``` var colors = ['red', 'orange', 'yellow', 'green']; ``` 中括號 `[]` 包起...
## 課程目標 學會動態修改 html 元素中的內容 ## 課程內容 在上一課,我們學會了這樣用 JavaScript 取得用戶輸入到 html 元素的內容 ``` var str = document.getElementById('keyword').value; `...
## 課程目標 學會基本的變數賦值 學會基本的字串連接 能從 html 元素中,得到用戶輸入的內容 ## 課程內容 在上一課的內容中,我們這樣來顯示訊息視窗 ``` alert('你點擊了按鈕!'); ``` 像這樣單引號包起來的內容 `'你點擊了按鈕!...
## 課程目標 學會定義函數的基本方法 學會呼叫函數的基本方法 學會 onclick 事件的用法 ## 課程內容 請打開這個網站,用這個網站來練習&寫作業: https://jsfiddle.net 在學 html/css 時,我們會給元素一些屬性,例如 i...
大家好,JavaScript 是業界最常用的程式語言之一 但是對新手來說,常常覺得很難學,原因有兩個: 第一,這語言不斷在變化,很多新語法、新功能,不斷出現,導致學習的時候眼花撩亂 第二,傳統的程式設計教法,從變數、迴圈、邏輯,一個一個開始教。我發現對很多人來說,這種學習法有點無聊...
## 簡介 CSS 是任何網站設計的重要組成部分,但理解其中一些細微差別觀念可能不容易。其中最重要的觀念之一是 rem 和 em 之間的區別,以及為什麼/何時應該使用它們。 原文出處:https://dev.to/refine/rem-vs-em-everything-you-need-...
想要在 2023 年的 **Web 開發** 旅程中一帆風順嗎?參考看看這些免費工具吧! 原文出處:https://dev.to/ruppysuppy/7-free-tools-for-the-modern-web-developers-of-2023-4lhh ## 1. [Omats...
精選技術文章、免費程式設計資源、以及業界重要新聞!