## 課程目標 學習基本的 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...
# 第6課 課程目標 運用目前所學到的技巧,完成一個完整的 RWD 網頁。 # 第6課 課程內容 這門課到目前為止所教的技巧,只有運用 Bootstrap 快速、方便的做出網頁排版。 我們並沒有深入去研究背後 css 原理以及太多進階 css 技巧。 很棒的是,光是這些...
# 第5課 課程目標 讓圖片在各種裝置上都能順利顯示。 # 第5課 課程內容 請參考:https://www.w3schools.com/howto/howto_css_image_responsive.asp # 第5課 作業 承接前一課的作業。 ![](htt...
# 第4課 課程目標 能夠讓元素在不同裝置上面,以不同的順序顯示。 # 第4課 課程內容 請參考:https://getbootstrap.com/docs/5.3/layout/columns/#order-classes # 第4課 作業 承接前一課的作業。 ...
# 第3課 課程目標 能夠將元素只顯示在特定裝置上面。例如有些東西只在電腦顯示,有些東西只在手機顯示。 # 第3課 課程內容 請參考: https://getbootstrap.com/docs/5.3/utilities/display/ # 第3課 作業 承接...
# 第2課 課程目標 能夠使用 Bootstrap 網格系統來打造適應各種螢幕大小的排版。 # 第2課 課程內容 這一課要學習使用 Bootstrap 的網格系統。 請參考這幾份教學: - https://www.w3schools.com/css/css_rwd_in...
# 第1課 課程目標 認識 RWD (Responsive Web Design) 的意思。能利用瀏覽器觀察 RWD 網站的變化。 # 第1課 課程內容 RWD 全名 Responsive Web Design,是現在智慧型手機普及的年代,最廣泛被採用的設計方法之一。 乍聽之...
大家好,有沒有想學寫網站的朋友呢? 隨著智慧型手機的普及,現在的網站畫面必須同時滿足電腦、手機螢幕,甚至是平板電腦的需求。 要如何做出能在各種寬度的螢幕都 OK 的網頁呢? 聰明的設計師們發明了一種稱為「Responsive Web Design」的畫面設計方法。 實作起來非...
# 第7課 課程目標 學會使用 bootstrap 視窗元件。學會在毫無指引的情況下,自己想辦法解決問題。 # 第7課 課程內容 終於來到最後一課囉。相信你有發現,目前為止其實只用到了 bootstrap 全部功能的一小部份。 其實 bootstrap 還有很多元件與功能,這...
# 第6課 課程目標 學會如何套用 bootstrap 的表格、表單與與按鈕樣式。 # 第6課 課程內容 表格、表單與按鈕是網頁最基本的元素之一,就算不使用 bootstrap,html 原生就有這些元素的樣式。 不過,套用 bootstrap 樣式之後,會馬上讓這些元素好看...
# 第5課 課程目標 學會使用 Bootstrap 的訊息框框元件。 # 第5課 課程內容 訊息框框在所有網站都會有,在需要顯示歡迎訊息、提醒訊息、公告事項等等的時候,都可以使用。 這一課要學習使用它。 請閱讀入門教學: https://www.w3schools...
精選技術文章、免費程式設計資源、以及業界重要新聞!