天天看点

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),我们需要购买许可。

JavaScript语言基础-环境搭建

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中查找是否有这个路径。

JavaScript语言基础-环境搭建

 系统变量path配置

hellojs实例测试

搭建好环境后,我们需要测试一下,我们首先需要使用webstorm工具创建工程,选择菜单file→new project,弹出create new project对话框,如图所示,在project name输入工程名,location是工程文件保存位置,project type中选中empty project。

JavaScript语言基础-环境搭建

create new project对话框在create new project对话框中输入相关内容后,点击ok按钮创建工程。然后再选中工程,右键菜单选中new→javascript file,弹出如图所示new javascript file对话框,在name中输入hellojs,这是创建的js文件名,kind中选择javascript file。

JavaScript语言基础-环境搭建

new javascript file对话框在new javascript file对话框中输入相关内容后,点击ok按钮创建hellojs.js文件,创建成功webstorm界面如图所示。

JavaScript语言基础-环境搭建

 webstorm成功界面

我们在编辑 界面中输入如下代码:

var msg = 'hellojs!'

console.log(msg);

其中代码var msg = 'hellojs!'是把字符串赋值给msg变量,console.log(msg)是将msg变量内容输出到控制台。如果要想运行hellojs.js文件,选择hellojs.js文件,弹出如下图所示右键菜单,选中run ‘hellojs.js’运行。运行结果输入到日志窗口,如图所示。

JavaScript语言基础-环境搭建

运行hellojs.js文件菜单

JavaScript语言基础-环境搭建

运行结果如果我们想调试程序,可以设置断点,如下图所示,点击行号后面位置,设置断点。

JavaScript语言基础-环境搭建

设置断点调试运行过程,如下图所示右键菜单中选择debug ‘hellojs.js’运行。如图所示,程序运行到第6行挂起。

JavaScript语言基础-环境搭建

运行到断点挂起我们在debugger中的variables中查看变量,从中我们可以看到msg变量的内容。在debugger窗口中有很多调试工具栏按钮,这些按钮的含义说明如下图所示。

JavaScript语言基础-环境搭建

调试工具栏按钮

更多内容请关注最新cocos图书《cocos2d-x实战:js卷——cocos2d-js开发》

欢迎加入cocos2d-x技术讨论群:257760386

《cocos2d-x实战 js卷》现已上线,各大商店均已开售:

欢迎关注智捷ios课堂微信公共平台,了解最新技术文章、图书、教程信息

JavaScript语言基础-环境搭建

继续阅读