linux配置js运行环境,解决JavaScript运行环境

javascript栏目介绍其运行环境,才有好的开始。

140534f2dbee6d0afe02c3a35a1c8ec5.png

相关免费学习推荐:javascript(视频)

文章目录文件版本说明

JavaScript运行环境

镶嵌网页

JavaScript文件脚本:.js

JavaScript打印

打印方式

打印级别

编写代码IDE平台:记事本 + 浏览器

调试代码

编写代码IDE平台:Visual Studio Code + Node.js

主程序

调试代码

编写代码IDE平台:Linux

中文支持

文件版本说明版本发布日期修订章节作者0.12018.05.01撰写草稿钟鑫

0.22018.05.05添加js变量定义钟鑫

0.32018.05.05添加js编译环境钟鑫

0.42018.05.11添加js函数钟鑫

0.52018.05.14添加解构赋值钟鑫

0.62018.05.19添加函数定义以及类定义钟鑫

0.72018.05.27添加类的定义钟鑫

0.82018.06.09添加时间定义钟鑫

JavaScript运行环境

镶嵌网页

在一个html中镶嵌JavaScript,镶嵌标签

JsTest.html

ZX test title

function js_test_html(){

alert('alert ZX test');

console.log('console ZX test');

document.write('document ZX test\n');

}

js_test_html();

显示效果如下图所示。

08430becaabbf8e5f6eedafb8fb70d80.png

6175c545b2ea10549616fa86d3024947.png

JavaScript文件脚本:.js将js代码写入一个js文件中,然后通过html调用这个脚本。function js_main(){

alert('main alert ZX test');

console.log('main console ZX test');

document.write('main document ZX test');

}

js_main();

将js文件镶嵌到html文件中

ZX test title

显示效果如下图所示。

84c9ad7992341ba8dba4b7a2f75c917d.png

4cb6c19b03b2fb98b566e78ab1ada850.png

JavaScript打印

JavaScript的调试打印在浏览器中按F12调出,代码中用console对象实现。

打印方式

JavaScript的调试打印有多中方式,包含可以直接打印数字、数组、字符串甚至结构体和类。

源码function js_console_test(){

var strtest = "string";

var chartest = 'A';

var istest = 3;

var fpai = 3.14159;

var arraytest = ["zx",6.626E-34,'B',8];

var stTest = {

siindex: 1,

strname: "ZX Test",

sinum: 2.71828,

functest: function stfunc(){ return true;}

};

console.log(strtest);

console.log(chartest);

console.log(istest);

console.log(fpai);

console.log(arraytest);

console.log(stTest);

}

执行结果

4e4d108c4123be8af18709e1ca39975e.png

打印级别

console对象对调试打印有着打印级别,对应不同的调试环境。

源码function js_console_level(){

console.log("This is log level.");

console.debug("This is debug level.");

console.info("This is info level.");

console.warn("This is warn level.");

console.error("This is error level.");

}

执行结果

7123ae5a866a78e8f9a29f3d09133842.png

点击右边的定位会跳转到代码调试选项

2092161045267a860166bbb3cccd9da3.png

编写代码IDE平台:记事本 + 浏览器

只要安装了浏览器,通过记事本就可以编写js代码。但要使js运行起来,就必须将js镶嵌到html文件中

浏览器打开html文件,就可以执行js脚本。

调试代码

在浏览器按F12调出调试环境,可以在源码上打上断点,单步调试,查看输出。如下图所示。

5547d323d202734d817fd97172d97824.png

edge上调试代码,如下图所示

e483072cf6efa75095f8d7dcd1e75d96.png

9f900fae297fc2a05a8f34416d325c2c.png

编写代码IDE平台:Visual Studio Code + Node.js

用Visual Studio Code轻便,结合Node.js开发可以不用调用浏览器去调试代码。

与浏览器不同的是,js文件可以单独运行而不需嵌入html中,通过Node.js加载运行。

Visual Studio Code下载:https://code.visualstudio.com/

Node.js下载:https://nodejs.org/en/

安装完之后打开指定文件夹,如下图所示

b5c936e65f12acda6294bb17a356be94.png

编码格式选择LF,与linux保持一致,如下图所示

7a8212a3347fe3de6458d5a4a9a0c133.png

主程序

在安装好Node.js之后,配置Visual Studio Code的环境,就可以调试js的代码。如下图所示。

8b475522933003daa4325a3c2edaca5e.png

调试代码

控制调试代码的配置是由文件launch.json进行控制的,可以在添加配置选项中配置调试选项。launch.json文件放置在工程目录的.vscode文件夹下,如下图所示。

e3a421f440cee2f20de9a5403ced44c9.png

编辑界面可以打断点进行调试,在调试控制台可以看到输出信息。变量栏可以时刻观察js变量。如下图所示。

84f24b7057bdf3dd7367a49724c2dc62.png

编写代码IDE平台:Linux

在linux中,支持JavaScript的调试,需要安装nodejssudo apt-get install nodejs-legacy nodejs

$ node -v

v4.2.6

执行JavaScript脚本$ node Jsmain.js

string

A

3

3.14159

[ 'zx', 6.626e-34, 'B', 8 ]

{ siindex: 1,

strname: 'ZX Test',

sinum: 2.71828,

functest: [Function: stfunc] }

中文支持

js文件保存的形式是utf-8模式保存,不然会出现乱码,如下图所示。

aa2a22e3d57f778240e8732d4f771890.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值