## 課程目標 認識並且能實做 alert 元件 ## 課程內容 alert 中文叫「示警」元件,當有訊息要公告在網站上,就可使用 或者當用戶執行了某些動作,在頁面上要提示、回饋訊息的時候,也可使用 通常要將 alert 做成幾種不同樣式,根據不同使用情境來使用 ...
簡單複習一下,在這份教材中,我們學會了 - 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...
## 課程目標 學會「數字」資料型態的比較 多學一個 `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; `...
## 課程目標 學會基本的變數賦值 學會基本的字串連接 能從 html 元素中,得到用戶輸入的內容 ## 課程內容 在上一課的內容中,我們這樣來顯示訊息視窗 ``` alert('你點擊了按鈕!'); ``` 像這樣單引號包起來的內容 `'你點擊了按鈕!...
## 課程目標 學會定義函數的基本方法 學會呼叫函數的基本方法 學會 onclick 事件的用法 ## 課程內容 請打開這個網站,用這個網站來練習&寫作業: https://jsfiddle.net 在學 html/css 時,我們會給元素一些屬性,例如 i...
## 簡介 CSS 是任何網站設計的重要組成部分,但理解其中一些細微差別觀念可能不容易。其中最重要的觀念之一是 rem 和 em 之間的區別,以及為什麼/何時應該使用它們。 原文出處:https://dev.to/refine/rem-vs-em-everything-you-need-...
# 第3課 課程目標 能夠用 Bootstrap 的網格系統做出多欄式排版、各種排版。 # 第3課 課程內容 業界工程師會去使用 Bootstrap,除了美感之外,通常還有一大理由就是想用它的網格系統。 以網頁設計常見的多欄式設計來說,手寫 html 跟 css 實在有點麻煩...
# 第4課 課程目標 學會使用HTML的table來整理、顯示資料 能夠做出漂亮的表格 # 第4課 課程內容 用jsfiddle來練習: https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊~ 請閱讀這份教材: [HTML Tables]...
向您介紹這個開發人員工具列表。它是一個開源專案,由社群整理。 讓我們開始吧! 🚀 原文出處:https://dev.to/dostonnabotov/ultimate-tools-for-developers-2aj2 --- ## 程式碼編輯器和 IDE 💻 - [V...
每週二晚上《CodeLove Talk》直播! 開放觀眾 Call-in,一起討論軟體開發相關的話題!