給中小學生的JavaScript：在樂趣中學程式設計

適合10歲以上孩子(及其父母)閱讀

把真正的程式設計變得簡單
JavaScript是主流的Web程式開發語言，是建立令人驚訝的互動式網頁應用程式和線上遊戲的祕密武器。本書用輕鬆愉快的方式，透過按部就班的範例，以及充滿趣味的圖示，幫助讀者輕鬆地學習程式設計的基礎知識。
本書帶領讀者從基礎知識開始，例如處理字串、陣列以及迴圈，然後繼續學習一些進階主題，例如使用jQuery建構互動性，以及使用畫布繪圖。
透過閱讀本書，你將實際撰寫出諸如Find the Buried Treasure、Hangman和Snake這樣的遊戲。透過彈跳球、蜜蜂動畫、賽車這樣的視覺化範例，你將真正地看到自己所編寫的程式。每→一章都建構於前一章的基礎之上，每一章末尾的「程式設計挑戰」將擴展你的思路，並激發出屬於你自己的、令人驚訝的程式。今天，就用JavaScript 設計一些很酷的東西吧！

在本書中，你將學到：
●建立函式以組織和重複使用程式碼
●編寫和修改HTML以建立動態的Web頁面
●應用DOM和jQuery Web頁面來回應使用者的輸入
●使用canvas元素繪製圖形並產生動畫
●編寫真正的、使用者控制的遊戲，具備碰撞偵測和分數記錄的功能

作者簡介

Nick Morgan
是社群媒體X的一名前端工程師。熱愛程式設計，並且特別關注JavaScript。Nick和未婚妻，以及他們的絨毛犬Pancake，居住在舊金山。他的部落格網址是 skildrick.co.uk。

第1部分 基礎知識
第1章 什麼是JavaScript?
第2章 資料類別和變數
第3章 陣列
第4章 物件
第5章 HTML的基礎知識
第6章 條件與迴圈
第7章 建立Hangman遊戲
第8章 函式

第2部分 進階JavaScript
第9章 DOM與jQuery
第10章 互動性程式設計
第11章 尋找埋藏的寶藏
第12章 物件導向程式設計

第3部分 Canvas
第13章 Canvas元素
第14章 在畫布上讓物體移動
第15章 用鍵盤控制動畫
第16章 開發貪吃蛇遊戲:第1部分
第17章 開發貪吃蛇遊戲:第2部分

術語表
後記 繼續學習之路

第1部分 基礎知識

第1章 什麼是 JavaScript？

電腦是功能強大到令人難以置信的機器，它能夠執行很多驚人的功能，例如：下西洋棋、提供數以千計的 Web網頁瀏覽服務，或者在數秒鐘之內執行數百萬次複雜的計
算。但是深入去看，你會發現電腦實際上是很笨的，電腦只能夠執行人類要它做的事情。我們使用電腦程式告訴電腦採取什麼動作，而程式就是命令電腦遵從的指令的集合。
沒有程式的話，電腦什麼也做不了！

1.1　認識 JavaScript
更糟的是，電腦不能理解英語或任何人類的語言。電腦程式是使用像JavaScript 這樣的程式語言來編寫的。你之前可能沒有聽說過JavaScript，但是，你一定已經用過它了。JavaScript 語言用來編寫在 Web 網頁中執行的程式。 JavaScript可以控制一個Web 網頁的外觀，並且當瀏覽者點擊按鈕或移動滑鼠時，它讓網頁做出回應。
諸如Gmail、Facebook 和Twitter 等網站都使用JavaScript，使得發送郵件、發布評論或瀏覽網站更加容易。例如：當你在Twitter上閱讀@nostarch 發布的tweets 的時候，隨著網頁滾動，你會在網頁的底部看到更多的tweets，這就是JavaScript做的。
要搞清楚JavaScript 為何如此令人興奮，你只需要造訪幾個Web 網站。
•JavaScript 可以播放音樂並創造驚人的視覺效果。例如：你可以欣賞由 HelloEnjoy為Ellie Goulding所做的歌曲“Lights”所建立的一個互動式音樂影片（http://lights.helloenjoy.com/），如圖1-1所示。

•JavaScript 使你能為其他人建構工具，以便用來創作音樂藝術。Patatap（http://www.patatap.com/）是一個虛擬的「鼓聲音源器」，可以創作各種很酷的聲音以及伴隨聲音的很酷的動畫，如圖 1-2 所示。

•JavaScript 讓你玩有趣的遊戲。 CubeSlam（https://www.cubeslam.com/）是經典遊戲Pong 的一個3D復刻版本，它看上去就像是桌上冰球。你可以和朋友對打，也可以和電腦所產生的一隻熊來對打，如圖1-3 所示。

1.2　為何要學習JavaScript
JavaScript 並非唯一的程式語言，實際上，這世上還有數以百計的程式語言。學習JavaScript 的理由有很多。首先，它比很多其他的語言更容易學習（而且更有樂趣）。但可能還有一個最好的理由，就是要編寫和執行JavaScript 程式，你只需要像Internet
Explorer、Mozilla Firefox 或Google Chrome 這樣的一個 Web 瀏覽器就夠了。每個Web 瀏覽器都內含JavaScript 直譯器，它可以理解如何閱讀JavaScript 程式。
一旦你編寫了JavaScript 程式，就可以將該程式的連結發送給別人，並且，他們可以在自己的電腦上的Web 瀏覽器中執行程式（參見本書後記中的「使用JSFiddle分享你的程式碼」部分）。

1.3　編寫JavaScript
讓我們在Google Chrome（Google 網頁瀏覽器，以下簡稱Chrome，可在http://www.google.com/chrome/ 免費下載）中編寫一什麼是些簡單的JavaScript。在你的電腦上安裝Chrome（如果還沒有安裝的話），然後，打開Chrome 並且在位址欄輸入about:blank。現在，按下Enter 鍵，你將會看到一個空白網頁，如圖1-4 所示。
我們透過在Chrome 的JavaScript 控制台編寫程式開始，這是程式設計師測試JavaScript 程式的一種祕密方式。在MicrosoftWindows 或Linux 上，按下Ctrl 鍵和Shift 鍵，並且按下J鍵。
在Mac OS 上，按下Command 鍵和Option 鍵，並且按下J 鍵。如果你正確地完成了所有的事情，應該會看到一個空白頁，但是在其下面有一個大於符號（>），後面跟著一個閃爍的游標（|），如圖1-4 所示。這是將要編寫 JavaScript 的位置。

NOTE:Chrome 控制台將會以彩色顯示你的程式碼文字，例如：你輸入的文字是藍色的，輸出將會根據其類型而顯示不同顏色。在本書中，我們對程式碼文字採用和控制台所使用的類似的顏色。

1.4　JavaScript 程式的結構
讓我們建立一個看上去有點笨的JavaScript 程式，它輸出如下所示的一系列貓臉：
和加法程式不同，這個JavaScript程式需要幾行程式碼。要將該程式輸入到控制台，你必須在每一行程式碼的末尾同時按Shift 鍵和Enter 鍵，以便增加新的程式碼行。（如果只是按Enter 鍵的話， Chrome將會試圖執行你所編寫的內容，並且程式不會像期望的那樣工作。我警告過你，電腦是很笨的。）