JavaScript語言基礎-環境搭建

咱們要想編寫和運行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

智捷課堂現推出Cocos會員，敬請關注：http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0

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

京東：http://item.jd.com/11659698.html

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