## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證，可以用 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...
## 課程目標 學會基本的 Selector API 用法 學會基本的 `.closest()` 的用法 ## 課程內容 課程到目前為止，要存取元素，都是使用 `document.getElementById` `.parentElement` `.children` 然後上...
## 課程目標 能動態在 DOM 樹修改元素的 style 屬性 ## 課程內容 實務上有個功能很常見，就是元素開關（toggle）的效果 點一下讓某元素出現，再點一下讓某元素消失 例如：跳出一張照片顯示、再關閉這張照片；或者顯示提示訊息文字，點擊後關閉文字（不是 al...
## 課程目標 學會 onchange 事件的用法 ## 課程內容 目前為止，應該已經熟悉 `onclick` 事件的用法 接下來，學一個很常用、很好用的新事件 `onchange` ``` <select onchange="show1()"> <option...
## 課程目標 能動態在 DOM 樹存取元素的 class 能動態在 DOM 樹修改元素的 class ## 課程內容 學到現在，應該會發現，DOM 元素，一堆屬性，都可以直接讀取、修改，很方便 連我們設計樣式會用到的 class 也是一樣簡單，很方便 ``` ...
## 課程目標 學習基本的 for 迴圈用法 ## 課程內容 之前的課程中，我們學過陣列＆索引的基本用法 實務上，使用陣列時，通常會需要寫一些 for 迴圈搭配使用 for 的寫法有很多種，我們先學 for of 的寫法就好 ``` var fruits = [...
## 課程目標 能動態加上 onclick 事件屬性 能選取到父元素、子元素 能夠在 DOM 樹進行「移除」 能存取到 onclick 事件發生的元素 ## 課程內容 現在已經會在 DOM 樹增加元素、加入文字了 記得之前寫過的「事件」嗎？ ``` ...
## 課程目標 認識 DOM 樹基本觀念 能夠在 DOM 樹進行「新增」 學會基本的除錯技巧 ## 課程內容 請打開這個網站，用這個網站來練習＆寫作業： https://jsfiddle.net 在學 JavaScript 的時候，你會聽到很多人在講「DOM...
本課程為 JavaScript 基礎課程的第二部份 第一部份的專案練習，已經學習到程式設計的基本觀念 第二部份，將藉由另一個專案，接著學習更多程式設計觀念 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識。 還不會的朋友，請先完成： - [自...
簡單複習一下，在這份教材中，我們學會了 - 宣告變數 - 宣告函式 - 操作 onclick 事件 - 字串操作、數字操作 - 能從網頁元素取得資料 - 能更新網頁元素的內容 - if/else 條件流程控制 - 認識資料型態的差異與轉換 在任何學校、補習班，學習程式設計，...
## 課程目標 學會「數字」資料型態的比較 多學一個 `else if` 條件判斷，進行流程控制 學會巢狀 if/else 條件判斷，進行流程控制 ## 課程內容 前面的課程中，我們有學過比對字串是否相同 ``` var str1 = '星期一'; var s...
## 課程目標 學會「數字」資料型態 學會基本的資料型態轉換 ## 課程內容 在之前的課程中，我們學會了宣告字串、以及字串的連接 ``` var str1 = '新年'; var str2 = '快樂'; var str3 = var1 + str2; aler...
## 課程目標 學會基本的 if/else 條件判斷，進行流程控制 學會基本的字串比較 ## 課程內容 這課來學一點流程控制 ``` var str1 = '星期一'; var str2 = '星期二'; var str3 = '星期三'; var str4 =...
## 課程目標 學會基本的陣列取值 能從 html 元素中，得到用戶選取的內容 ## 課程內容 這課先來學一點陣列觀念 ``` var colors = ['red', 'orange', 'yellow', 'green']; ``` 中括號 `[]` 包起...
## 課程目標 學會動態修改 html 元素中的內容 ## 課程內容 在上一課，我們學會了這樣用 JavaScript 取得用戶輸入到 html 元素的內容 ``` var str = document.getElementById('keyword').value; `...
精選技術文章、免費程式設計資源、以及業界重要新聞！
