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

第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將會試圖執行你所編寫的內容，並且程式不會像期望的那樣工作。我警告過你，電腦是很笨的。）

第1部分 基礎知識

第1章 什麼是 JavaScript？

電腦是功能強大到令人難以置信的機器，它能夠執行很多驚人的功能，例如：下西洋棋、提供數以千計的 Web網頁瀏覽服務，或者在數秒鐘之內執行數百萬次複雜的計

算。但是深入去看，你會發現電腦實際上是很笨的，電腦只能夠執行人類要它做的事情。我們使用電腦程式告訴電腦採取什麼動作，而程式就是命令電腦遵從的指令的集合。

沒有程式的話，電腦什麼也做不了！

1.1　認識 JavaScript

更糟的是，電腦不能理解英語或任何人類的語言。電腦程式是使用像JavaScript 這樣的程式語言來編寫的...

歡迎閱讀本書！在本書中，你將學習用一種網頁程式語言（JavaScript）來編寫程式。但是，更重要的是，你將成為一名程式設計師，亦即不僅會使用電腦而且會控制電腦的人。一旦學會了程式設計，你將可以讓電腦遵從你的意願去做你想做的任何事情。

JavaScript 是一門不錯的程式語言，值得學習，因為它隨處可用。諸如Chrome、Firefox 和Internet Explorer 這樣的網頁瀏覽器，都使用JavaScript。借助JavaScript 的強大功能，網頁程式設計師可以將Web 頁面從簡單的文字檔變換為功能完備的互動式應用程式和遊戲。

但是，它並不僅限於建構Web 頁面。JavaScript 可以在網站伺服器上運行，以建立整個Web 網站，甚至用於控制機器人和其他的硬體。

本書的目標讀者

本書適合任何想要學習JavaScript 或初次接觸程式設計的人。

本書為兒童量身定做，但是，它也適合作為不同年齡的初學者的第一本程式設計圖書。

透過本書，你可以逐漸建構和累積自己的JavaScript 知識，從JavaScript 的單一資料型別開始，然後繼續了解複雜的類型、控制結構和函式。然後，你將學習如何編寫程式碼對使用者移動滑鼠或者按下鍵盤上的按鍵做出回應。最後，學習有關canvas 元素的知

識， canvas 允許使用JavaScript 來繪製所能想像到的任何東西並將它變成動畫。

一路下來，你將建立幾個遊戲來擴展自己的程式設計技能，並且將所學的知識付諸應用。

如何閱讀本書

首先，請按照順序閱讀。這聽起來似乎很簡單，但是，確實有很多人想要直接跳到比較有趣的內容，例如：開發遊戲。但是，每一章都是建構於前面各章所介紹的知識之上的，因此，如果你從頭開始閱讀，那麼在遇到遊戲的時候也不會有什麼困難。

程式語言就像是口說語言一樣：你必須學習語法和詞彙，這要花一些時間。唯一進步的方法就是編寫（並閱讀）大量的程式碼。

隨著你編寫越來越多的JavaScript 程式，你將會發現該語言的某些部分已經變成第二天性，最終你會變成一名熟練的JavaScript 程式設計師。

在閱讀本書的時候，我鼓勵你用鍵盤輸入並測試本書中的範例程式碼。如果你沒有完全理解其含義，可以嘗試做一些小的修改，看看有什麼效果。如果這些修改沒有達到你預期的效果，看看能否找出其中的原因。

最重要的，要練習「試試看」和「程式設計挑戰」部分。輸入本書中出現的程式碼只是第一步，但是，當你開始編寫自己的程式碼的時候，你將會從更深的層次理解程式設計。如果你發現某個挑戰很有趣，那麼，去嘗試它！甚至可以提出自己的挑戰，在已經編寫的程式上建構更多功能。

透過http://nostarch.com/javascriptforkids/ 可以找到程式設計挑戰的示例解決方案。當你解決了一個挑戰之後，嘗試看一下解決方案，以便將自己的方法和我的方法進行比較。或者，如果你遇到困難，可以查看解決方案以得到提示。但是記住，這只是一個示例解決方案。用JavaScript 完成相同的任務可以有很多不同的方法，因此，如果你最終使用了一個和我完全不同的解決方案，也不必為此擔心。

如果你遇到一個術語而又不理解其含義，那麼可以查閱本書末尾的術語表。這個術語表包含了你將會在本書中遇到的很多程式設計術語的定義。

歡迎閱讀本書！在本書中，你將學習用一種網頁程式語言（JavaScript）來編寫程式。但是，更重要的是，你將成為一名程式設計師，亦即不僅會使用電腦而且會控制電腦的人。一旦學會了程式設計，你將可以讓電腦遵從你的意願去做你想做的任何事情。

JavaScript 是一門不錯的程式語言，值得學習，因為它隨處可用。諸如Chrome、Firefox 和Internet Explorer 這樣的網頁瀏覽器，都使用JavaScript。借助JavaScript 的強大功能，網頁程式設計師可以將Web 頁面從簡單的文字檔變換為功能完備的互動式應用程式和遊戲。

但是，它並不僅限於建構Web 頁面...

第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?
第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部分
術語表
後記-繼續學習之路