第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/），如圖11所示。

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

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

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 鍵，你將會看到一個空白網頁，如圖14 所示。

我們透過在Chrome 的JavaScript 控制台編寫程式開始，這是程式設計師測試JavaScript 程式的一種祕密方式。在MicrosoftWindows 或Linux 上，按下Ctrl 鍵和Shift 鍵，並且按下J鍵。

在Mac OS 上，按下Command 鍵和Option 鍵，並且按下J 鍵。如果你正確地完成了所有的事情，應該會看到一個空白頁，但是在其下面有一個大於符號（>），後面跟著一個閃爍的游標（|），如圖14 所示。這是將要編寫 JavaScript 的位置。

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

1.4　JavaScript 程式的結構

讓我們建立一個看上去有點笨的JavaScript 程式，它輸出如下所示的一系列貓臉：

和加法程式不同，這個JavaScript程式需要幾行程式碼。要將該程式輸入到控制台，你必須在每一行程式碼的末尾同時按Shift 鍵和Enter 鍵，以便增加新的程式碼行。（如果只是按Enter 鍵的話， Chrome將會試圖執行你所編寫的內容，並且程式不會像期望的那樣工作。我警告過你，電腦是很笨的。）

第1部分 基礎知識

第1章 什麼是 JavaScript？

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

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

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

1.1　認識 JavaScript

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

第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部分

術語表
後記 繼續學習之路