網頁嬰兒自學教材：第1課 ── 親手做一個：訊息提醒框框

第1課 課程目標

做出一個能夠動態顯示成功訊息、錯誤訊息的提醒框框。

你會在這個過程中順便學會：

• 基本的 jQuery 安裝
• 簡單的 JavaScript 程式設計
• 使用 jQuery 顯示、隱藏元素

第1課 課程內容

第一課我們要學習基本的 JavaScript 與 jQuery。

請參考以下教學，學一點 jQuery 的安裝與使用：

• https://www.w3schools.com/jquery/jquery_intro.asp
• https://www.w3schools.com/jquery/jquery_get_started.asp
• https://www.w3schools.com/jquery/jquery_syntax.asp
• https://www.w3schools.com/jquery/jquery_selectors.asp
• https://www.w3schools.com/jquery/jquery_events.asp

接著學三個 jQuery 簡單的動態效果：

• https://www.w3schools.com/jquery/jquery_hide_show.asp
• https://www.w3schools.com/jquery/jquery_fade.asp
• https://www.w3schools.com/jquery/jquery_slide.asp

第1課 作業

這次的作業要做出訊息提醒框框，模擬註冊成功以及失敗後的情境。

訊息框框非常常見，幾乎在任何一個網站都會用到類似的效果。

歡迎用任何方式寫作業。使用 Thimble 是其中一種簡單的方式。

https://thimble.mozilla.org/zh-TW/

請分三個步驟寫這次的作業。

步驟一

請用純 html 與 css 寫出兩個訊息框框。

第一個框框背景是綠色的，文字為「註冊成功！歡迎您的加入。」。

第二個框框背景是紅色的，文字為「註冊失敗！麻煩再次檢查您填寫的資料。」。

步驟二

用 css 將兩個框框隱藏，預設先不顯示。

接著再做出兩個簡單的按鈕。

步驟三

在按鈕加上兩個效果：

按第一個按鈕之後，模擬為註冊成功，顯示註冊成功的訊息框框。

按第二個按鈕之後，模擬為註冊失敗，顯示註冊失敗的訊息框框。

完成這些，你就完成這次的課程目標了！