一次搞懂JavaScript全端技術：jQuery、Node.js、Express、MongoDB

作者序

隨著網際網路與視覺化呈現的盛行，Web前端技術進步非常快速，許多網路使用者對前端技術有著濃厚的興趣，身為一個剛入門前端技術的初學者，也許會從一些套裝軟體入門(如Dreamweaver)，慢慢的熟悉HTML語法，並從HTML的設計、CSS的排版、jQuery技術運用循序漸進的學習，這也是初學者比較容易入門的前端基礎技術，隨著動態前端網頁的技術進步，JavaScript語法就變成不可或缺的一門技術，也是現今視覺化網頁呈現的基礎。

隨著JavaScript語言的蓬勃發展，JavaScript，簡稱JS，除了能讓前端網頁呈現變得更加生動外，也逐漸發展出可在伺服器端網路環境執行的語言，如Node.js，加上HTML5和CSS3語言的推行，使得JS可應用於遊戲、主機和行動應用程式等眾多領域的開發。此外，當專案規模到達一定程度時，為了提升開發效率，並讓程式碼容易理解與維護，「軟體框架」的概念與工具便油然而生，現今以JavaScript為基礎的軟體框架有許多種，諸如：Angular、React、Vue等，而各家技術百家爭鳴且各擅勝場，無論是選用哪一種框架，無疑地都能為專案的開發帶來效益。然而，在能自由運用各種軟體框架之前，學習JavaScript的語法與觀念是必須具備的基礎。

對網頁前端設計來說，能夠熟悉JavaScript語言的運用是非常重要的能力，許多前端初學者都希望能透過循序漸進的學習進而成為一位前端設計的工程師，然而，網路上有著眾多如何學習JavaScript 的各式各樣內容，由於內容不連貫且深淺不一，初學者無法輕易判斷及理解內容的深淺與適合度，容易陷入混亂的窘境。再者，JavaScript 的發展悠久，且各領域的應用與框架眾多，入門的初學者不容易分辨清楚，更無從開始學習，此外，由JavaScript主導的全端( 從前端連結後端) 網站開發方式也逐漸盛行。

基於此，本書從初學者的角度出發編撰這本書籍，想要讓讀者了解JavaScript發展的來龍去脈，一次搞懂JavaScript全端開發的觀念、程式基礎與專案實作，因此，本書在撰寫的過程中不斷地與初學JavaScript的學生討論，持續修改各章節架構與小案例的設計，務必讓每章節的內容簡易好懂，觀念與觀念彼此間環環相扣，隨著章節的遞增，初學者能輕易理解內容並且循序漸進的學習，開發能力也一層一層的堆疊起來，而章節內容搭配案例的方式，實現『做中學』的學習方式，讓讀者能更輕易的上手，再透過第六章中各個範例實作，複習整本書說明的前後端開發觀念，最後以一個企業形象網站的功能設計與專案開發方式，整合整本書所有的內容。

為了讓讀者更能理解與銜接這本書的內容，建議讀者先閱讀一本以HTML5與CSS3語言為基礎並結合Bootstrap框架的書籍『秒懂行動網頁設計：Sublime+Bootstrap+CSS3+HTML5+Cordova專案實作』，透過紮實的前端基礎觀念打底(HTML5與CSS3)，讀者將更能掌握本書從JavaScript基礎語法、前端設計與後端開發介紹，並提供一系列的單元實作，由淺入深地引導讀者們從環境佈署到網站建立的過程，期許這本書的編排與設計，能夠讓想要學習JavaScript的讀者們有一個依循的學習路徑，逐步的理解及運用JavaScript 語法。

全書分為三大部分：

1. 「教戰守則篇」：為JavaScript基礎概念教學的部分，從JavaScript技術發展過程開始介紹、並循序漸進地描述JavaScript 程式撰寫的基礎語法、邏輯與重要觀念，建立紮實的觀念與基礎。

2. 「觀念養成篇」：從JavaScript前端設計循序漸進的介紹到後端系統開發，完整描述與講解所有核心觀念與實用程式技巧，各章節透過淺顯易懂的圖文說明，搭配小型範例練習的方式，協助讀者加深先前描述的觀念，並透過範例練習更清楚掌握書本的內容。

3. 「實作練習篇」：以完整的範例演繹前面章節提到的觀念，並詳細解釋每行程式碼，採用逐步引導的方式帶領讀者一步步完成範例，第六章的整合實作練習，如會員、投票、個人相簿、論壇等，讀者可藉由範例複習來貫穿整本書所要表達的觀念，第七章的形象網站建置，強化讀者從觀念理解到實作執行的能力，進而能獨力完成網站的建構。

這本書是由學生團隊和指導老師們合力完成的書籍，章節中的範例都是學生學習後的成果，範例程式也都經過學生們再三確認無誤，在此，非常感謝吳其聯、王柏皓願意將本身的知識與學習經驗分享，透過一次又一次地討論與修改，由淺入深的編排整個JS全端設計的重要觀念，並輔以小型範例程式的實作說明。為了更了解初學者的需求與角度，與實驗室學弟妹們的互動與回饋更是不可或缺的寶貴意見。最後特別感謝董子瑜與蔡侑倫對於書本內容的細心校稿、程式碼的測試與學習過程的建議，讓這本書的內容與編排能更臻完善，更貼近初學者的角度，而璟誼的封面設計，更為整本書增色不少，再次強調學生們才是這本書的真正作者。

姜琇森 蕭國倫

撰寫於 國立臺中科技大學資訊管理系

------------------------------------------------------------------------------------

團隊成員序

在網路發展迅速的時代，人們每天透過網路學習、購物或娛樂的行為，都是必須經過的網頁來與大家溝通，而構成現今網頁的要素之一，便是本書要介紹的JavaScript，它讓整個網頁可以更有互動性及動態的呈現，因此成為網頁開發者必備的技能。而近期JavaScript 也被廣泛應用在不同的領域，例如網頁後端、遊戲及行動等開發，更有許多人以JavaScript為基礎來開發各種應用，這讓JavaScript 在程式語言中占有一席之地。

本團隊初期接觸JavaScript時，也像大部份的程式初學者一樣，碰到了許多問題，除了要熟悉JavaScript的語法之外，當遇到開發錯誤的問題時，一切只能靠自行摸索、上網查詢資料或是到論壇發問等等，但這些尋找解決辦法的過程中，時常造成開發進度的延後，讓時間成本大幅的提升，因此，本團隊便希望下一個JavaScript 初學者在學習時，可以減少這些碰壁時間，所以秉持著教學的精神，將所學的資源匯集成冊，於是有了撰寫此書的計畫。

目前在網路及市面上雖然已存在許多JavaScript應用的教學，但內容大多較繁雜，且難易度不一致，對於實務應用的著墨卻是少之又少，導致許多初學者在初期學習時，直接接觸龐大又沒有適當分類的資訊，而無法有效吸收知識，同時在開發時，遇到瓶頸也會無法快速找出解決辦法。因此本團隊希望藉由本書，針對初學者，讓其熟悉JavaScript 並教導基本的程式開發，由淺入深，使其快速的學習上手，並搭配完整的實作範例，作為教學主軸，讓讀者可以更輕鬆的擁有網頁前後端的開發技術。

此外，完成本書的過程中，需要感激許多人的幫助，才有今天的成果。

首先要感謝的是，本團隊兩位指導老師—姜琇森老師及蕭國倫老師，表達誠摯的謝意，在過程中，也不斷地給予大家關心，替我們規劃學習進度，當有問題時，就算老師們再忙，也會抽出時間陪伴學生解決問題，並不吝嗇給予正面的指導及建議，讓我們能夠學習進步。

再者，要感謝吳其聯學長、王柏皓學長，透過實務上的經驗，給予我們書籍流程及編排的建議，增加本書的實用性，同時也在遇到開發上的問題時，替我們解決各種疑難雜症，以及董子瑜學姊、蔡侑倫學長、陳郁弦學姊，對本書內容的細心校稿、操作流程的測試，與學習過程的貼心建議，讓這本書的內容與編寫能更臻完善，落實知識的傳遞，也更貼近初學者的角度，最後，也非常謝謝陳璟誼學妹，用心的替我們設計了書的封面，讓本書更加的完整。

因為各種機緣，有了團隊成員們，彼此互相支援、配合，並一次又一次的討論與修改，由淺入深的編排JavaScript 的教學及操作，並輔以實踐範例說明，提高初學者對操作教學的理解程度，而有了這些過程，才能夠成功地完成這本書，最後再次鄭重感謝這麼用心指導我們的師長及學長姐，藉由此序文，再次表達我們難以言喻的感恩之情。

許瑋芩、陳怡君、黃豊凱、何彥儒

撰寫於 國立臺中科技大學資訊管理系

作者序

隨著網際網路與視覺化呈現的盛行，Web前端技術進步非常快速，許多網路使用者對前端技術有著濃厚的興趣，身為一個剛入門前端技術的初學者，也許會從一些套裝軟體入門(如Dreamweaver)，慢慢的熟悉HTML語法，並從HTML的設計、CSS的排版、jQuery技術運用循序漸進的學習，這也是初學者比較容易入門的前端基礎技術，隨著動態前端網頁的技術進步，JavaScript語法就變成不可或缺的一門技術，也是現今視覺化網頁呈現的基礎。

隨著JavaScript語言的蓬勃發展，JavaScript，簡稱JS，除了能讓前端網頁呈現變得更加生動外，也逐漸發展出可在伺服...

CHAPTER 01 JavaScript概述
1-1 JavaScript概述
1-2 JavaScript發展
1-3 什麼是JavaScript全端開發

CHAPTER 02 JavaScript入門
2-1 撰寫風格
2-2 型別與變數
2-3 運算子與運算式
2-4 陳述式
2-5 陣列
2-6 函數
2-7 物件
2-8 內建函式
2-9 錯誤處理機制

CHAPTER 03 JavaScript前端
3-1 瀏覽器裡的JavaScript
3-2 JavaScript函式庫－jQuery
3-3 TodoList範例

CHAPTER 04 JavaScript後端
4-1 什麼是Node.js
4-2 建立開發環境
4-3 Express基礎觀念
4-4 模組機制
4-5 路由與參數
4-6 TodoList範例-串接後端

CHAPTER 05 資料庫
5-1 概述
5-2 MongoDB
5-3 MongoDB操作
5-4 TodoList範例-串接資料庫

CHAPTER 06 整合實作練習
6-1 前置作業
6-2 會員系統
6-3 投票系統
6-4 相簿系統
6-5 論壇系統

CHAPTER 07 形象網站實作
7-1 專案規劃
7-2 首頁
7-3 公司介紹
7-4 身分驗證
7-5 輪播圖管理
7-6 公司介紹管理
7-7 成果展示管理
7-8 團隊成員管理
7-9 活動記錄管理
7-10 連絡我們管理

APPENDIX A Visual Studio Code安裝
APPENDIX B Postman介紹

CHAPTER 01 JavaScript概述
1-1 JavaScript概述
1-2 JavaScript發展
1-3 什麼是JavaScript全端開發

CHAPTER 02 JavaScript入門
2-1 撰寫風格
2-2 型別與變數
2-3 運算子與運算式
2-4 陳述式
2-5 陣列
2-6 函數
2-7 物件
2-8 內建函式
2-9 錯誤處理機制

CHAPTER 03 JavaScript前端
3-1 瀏覽器裡的JavaScript
3-2 JavaScript函式庫－jQuery
3-3 TodoList範例

CHAPTER 04 JavaScript後端
4-1 什麼是Node.js
4-2 建立開發環境
4-3 Express基礎觀念
4-4 模組機制
4-5 路由與參數
4-6 TodoList範例-串接後端

C...