JavaScript语言基础-环境搭建

我们要想编写和执行JavaScript脚本,则须要:JavaScript编辑工具和JavaScript执行測试环境。以下我们分别介绍一下。


JavaScript编辑工具
JavaScript编辑工具最简单的能够使用一些文本编辑工具,可是它们往往缺少语法提示,有的语法keyword还没有高亮显示,最重要的是它们大部分不支持调试。

考虑到易用性,以及与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 odejs)是否加入到系统Path环境变量中。我们须要打开如图所看到的的对话框。在系统变量Path中查找是否有这个路径。



 系统变量Path配置


HelloJS实例測试
搭建好环境后,我们须要測试一下,我们首先须要使用WebStorm工具创建project。选择菜单File→New Project。弹出Create New Project对话框,如图所看到的。在Project name输入project名。Location是project文件保存位置,Project type中选中Empty project。



Create New Project对话框
在Create New Project对话框中输入相关内容后,点击OKbutton创建project。然后再选中project。右键菜单选中New→JavaScript File。弹出如图所看到的New JavaScript file对话框,在Name中输入HelloJS。这是创建的js文件名称,Kind中选择JavaScript file。

New JavaScript file对话框
在New JavaScript file对话框中输入相关内容后。点击OKbutton创建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窗体中有非常多调试工具栏button,这些button的含义说明例如以下图所看到的。



调试工具栏button


很多其它内容请关注最新Cocos图书《Cocos2d-x实战:JS卷——Cocos2d-JS开发
本书交流讨论站点:http://www.cocoagame.net
欢迎加入Cocos2d-x技术讨论群:257760386
很多其它精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com

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

京东:http://item.jd.com/11659698.html

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

原文地址:https://www.cnblogs.com/bhlsheji/p/5266856.html