網頁嬰兒自學教材：第5課 ── 親手做一個：聊天室對話介面

第5課 課程目標

做出一個網路聊天室的介面。

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

第5課 課程內容

多學習一點關於「網頁事件」的觀念：

• https://www.w3schools.com/jsref/dom_obj_event.asp
• https://www.w3schools.com/jsref/obj_events.asp
• https://www.w3schools.com/jsref/obj_keyboardevent.asp
• https://www.w3schools.com/jsref/event_onkeyup.asp

直接寫純 JavaScript 操作事件有一點點麻煩，學一下用 jQuery 包好的方式來寫：

• https://www.w3schools.com/jquery/event_keyup.asp
• https://stackoverflow.com/a/7060774/851687

第5課 作業

聊天室是很多網站都有的功能。比如說：

• https://slack.com
• https://messenger.com/

真正上線的聊天室需要串接伺服器、資料庫，我們這次只做介面開發的練習。

請實作一個簡單的聊天室介面，並且需要滿足規格如下：

• 有一個顯示對話內容的框框。新的訊息在最下面
• 有一個輸入訊息的欄位。按下 enter 鍵會直接送出訊息，新增進對話內容裡面

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

這門課到目前為止所教的技巧，只有運用一些基本的 JavaScript 與 jQuery 觀念去做出網頁功能。

並沒有深入認識底層原理以及程式語言觀念。

不過，光是這些基本觀念與知識，就足以應付實務上的許多需求了！

進階的 JavaScript 與 jQuery 知識與觀念，會在別門課程提到。

但是目前所學的基本技巧，應該已經很足夠使用！

最後，謝謝你耐心的完成這整套課程！