我們要想編寫和執行JavaScript指令碼，則需要：JavaScript編輯工具和JavaScript執行測試環境。下面我們分別介紹一下。
JavaScript編輯工具
JavaScript編輯工具最簡單的可以使用一些文字編輯工具，但是它們往往缺少語法提示，有的語法關鍵字還沒有高亮顯示，最重要的是它們大部分不支援除錯。考慮到易用性，以及與Cocos2d-JS遊戲引擎接軌，我們推薦大家使用付費的JavaScript開發工具——WebStorm，WebStorm是jetbrains公司研發的一款JavaScript開發工具，可以編寫HTML5和JavaScript 程式碼，並且可以除錯。jetbrains公司開發的很多工具都好評如潮，其中Java開發工具IntelliJ IDEA被認為是最優秀的。WebStorm與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JavaScript部分的語法提示和執行除錯功能。WebStorm也是Cocos2d-JS遊戲的重要開發工具。
WebStorm可以到網站http://www.jetbrains.com/webstorm/download/下載，如下圖所示，WebStorm有多個不同的平臺版本，我們根據需要下載特定平臺版本檔案。WebStorm軟體可以免費試用15天，如果超過15天需要輸入軟體許可（License key），我們需要購買許可。

WebStorm下載‘
JavaScript執行測試環境
如果讓編寫好的JavaScript檔案執行，還需要配置執行測試環境，這個需要環境主要包含一個JavaScript引擎，WebStorm本身不包含這個執行環境。如果我們編寫的JavaScript檔案嵌入到HTML檔案執行，我們可以安裝瀏覽器Google Chrome、FireFox或Opera，注意IE瀏覽器對JavaScript支援不好。如果只是執行和測試JavaScript檔案可以安裝Node.js。關於安裝瀏覽器我們就不再介紹了，本節我們重點介紹安裝Node.js。
Node.js安裝包括：Node.js執行環境安裝和Node.js模組包管理。我們首先安裝Node.js執行環境，該環境在不同的平臺下安裝檔案也是不同，我們可以在http://nodejs.org/download/頁面找到需要下載的安裝檔案，目前Node.js執行環境支援Windows、Mac OS X、Linux 和SunOS 等系統平臺。由於我的電腦是Windows 8 64系統，所以我下載的是node-v0.10.26-x64.msi檔案，下載完成進行安裝就可以了。
安裝完成後需要確認一下，Node.js的安裝路徑（C:\Program Files\nodejs\）是否新增到系統Path環境變數中，我們需要開啟如圖所示的對話方塊，在系統變數Path中查詢是否有這個路徑。

 系統變數Path配置

HelloJS例項測試
搭建好環境後，我們需要測試一下，我們首先需要使用WebStorm工具建立工程，選擇選單File→New Project，彈出Create New Project對話方塊，如圖所示，在Project name輸入工程名，Location是工程檔案儲存位置，Project type中選中Empty project。

Create New Project對話方塊在Create New Project對話方塊中輸入相關內容後，點選OK按鈕建立工程。然後再選中工程，右鍵選單選中New→JavaScript File，彈出如圖所示New JavaScript file對話方塊，在Name中輸入HelloJS，這是建立的js檔名，Kind中選擇JavaScript file。

New JavaScript file對話方塊在New JavaScript file對話方塊中輸入相關內容後，點選OK按鈕建立HelloJS.js檔案，建立成功WebStorm介面如圖所示。

 WebStorm成功介面

我們在編輯 介面中輸入如下程式碼：

var msg = 'HelloJS!'
console.log(msg);
其中程式碼var msg = 'HelloJS!'是把字串賦值給msg變數，console.log(msg)是將msg變數內容輸出到控制檯。如果要想執行HelloJS.js檔案，選擇HelloJS.js檔案，彈出如下圖所示右鍵選單，選中Run ‘HelloJS.js’執行。執行結果輸入到日誌視窗，如圖所示。

執行HelloJS.js檔案選單


執行結果如果我們想除錯程式，可以設定斷點，如下圖所示，點選行號後面位置，設定斷點。

設定斷點除錯執行過程，如下圖所示右鍵選單中選擇Debug ‘HelloJS.js’執行。如圖所示，程式執行到第6行掛起。

執行到斷點掛起我們在Debugger中的Variables中檢視變數，從中我們可以看到msg變數的內容。在Debugger視窗中有很多除錯工具欄按鈕，這些按鈕的含義說明如下圖所示。

除錯工具欄按鈕

更多內容請關注最新Cocos圖書《Cocos2d-x實戰：JS卷——Cocos2d-JS開發》本書交流討論網站：http://www.cocoagame.net
歡迎加入Cocos2d-x技術討論群：257760386
更多精彩視訊課程請關注智捷課堂Cocos課程：http://v.51work6.com

《Cocos2d-x實戰 JS卷》現已上線，各大商店均已開售：

歡迎關注智捷iOS課堂微信公共平臺，瞭解最新技術文章、圖書、教程資訊