要想编写和运行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/下载,如图2-1所示。WebStorm有多个不同的平台版本,可以根据需要下载特定平台版本文件。WebStorm软件可以免费试用15天,如果超过15天,则需要输入软件许可(License key),此时需要购买许可。
图2-1 WebStorm下载
如果让编写好的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环境变量中,打开如图2-2所示的对话框,在系统变量Path中查找是否有这个路径。
图2-2 系统变量Path配置
搭建好环境后,需要测试一下。首先需要使用WebStorm工具创建工程,选择File→New Project命令,弹出Create New Project对话框,如图2-3所示,在Project name文本框中输入工程名,Location是工程文件保存位置,在Project type列表框中选择Empty project。
图2-3 Create New Project对话框
在Create New Project对话框中输入相关内容后,单击OK按钮创建工程。然后再选中工程,从右击弹出的快捷菜单中选择New→JavaScript file命令,弹出如图2-4所示New JavaScript file对话框,在Name文本框中输入HelloJS,这是创建的js文件名,在Kind列表框中选择JavaScript file。
图2-4 New JavaScript file对话框
在New JavaScript file对话框中输入相关内容后,单击OK按钮创建HelloJS.js文件。创建成功WebStorm界面如图2-5所示。
图2-5 WebStorm成功界面
在编辑界面中输入如下代码:
var msg='HelloJS!' console.log(msg);
其中,代码var msg='HelloJS!'是把字符串赋值给msg变量,console.log(msg)是将msg变量内容输出到控制台。如果要想运行HelloJS.js文件,选择HelloJS.js文件,右击,弹出如图2-6所示快捷菜单,选择Run ‘HelloJS.js’命令运行。运行结果输入到日志窗口,如图2-7所示。
图2-6 运行HelloJS.js文件菜单
图2-7 运行结果
如果想调试程序,可以设置断点,如图2-8所示,单击行号后面位置,设置断点。
图2-8 设置断点
调试运行过程,如图2-6所示,从右击弹出的快捷菜单中选择Debug ‘HelloJS.js’命令运行。如图2-9所示,程序运行到第6行挂起。
图2-9 运行到断点挂起
在Debugger选项卡的Variables中查看变量,从中可以看到msg变量的内容。在Debugger窗口中有很多调试工具栏按钮,这些按钮的含义说明如图2-10所示。
图2-10 调试工具栏按钮