網頁嬰兒自學教材：第3課 ── 親手做一個：互動功能視窗

第3課 課程目標

做出一個會跳出來的視窗，顯示資訊給使用者看。

在這個過程中順便學習更多 JavaScript 與 jQuery 基本知識。

第3課 課程內容

這一課請再多學一點 JavaScript 知識：

• https://www.w3schools.com/js/js_events.asp
• https://www.w3schools.com/js/js_functions.asp

接著了解一下使用 jQuery 和不使用 jQuery（直接寫純 JavaScript）的一些語法小差異：

• https://www.w3schools.com/js/js_jquery_selectors.asp
• https://www.w3schools.com/js/js_jquery_elements.asp
• https://www.w3schools.com/js/js_jquery_css.asp
• https://www.w3schools.com/js/js_jquery_dom.asp

內容不用全部讀懂，只要讀到你覺得能夠做出作業即可。

第3課 作業

這次的作業要做出互動功能視窗，讓網站可以在需要的時候，跳出視窗來給用戶看。

我們來做一個讓用戶可以「訂閱電子報」的功能視窗。

用戶可以點擊「訂閱」按鈕，去打開「訂閱電子報」視窗，裡面有表單可以填 Email 資料。

請參考這份教學，做出基本的畫面蓋板效果：

https://www.w3schools.com/howto/howto_css_overlay.asp

接著請想辦法做出「訂閱按鈕」，並滿足以下4個條件，才算是做完作業：

• 點擊「訂閱」按鈕，會跳出一個視窗
• 視窗裡面顯示「歡迎訂閱電子報」
• 視窗裡面有一個能輸入 Email 的文字欄位、一個 submit 按鈕
• 視窗裡面有一個「關閉」按鈕，按下可以關閉視窗

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