解决JavaScript运行环境

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

解决JavaScript运行环境

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

文章目录

文件版本说明JavaScript运行环境镶嵌网页JavaScript文件脚本:.jsJavaScript打印打印方式打印级别编写代码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');}  js_test_html();

登录后复制

显示效果如下图所示。
在这里插入图片描述
在这里插入图片描述

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文件中

立即学习“Java免费学习笔记(深入)”;

 ZX test title  

登录后复制

显示效果如下图所示。

在这里插入图片描述
在这里插入图片描述

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);}

登录后复制

执行结果
在这里插入图片描述

打印级别

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.");}

登录后复制

执行结果
在这里插入图片描述

点击右边的定位会跳转到代码调试选项
在这里插入图片描述

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

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

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

调试代码

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

edge上调试代码,如下图所示
在这里插入图片描述
在这里插入图片描述

编写代码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/

安装完之后打开指定文件夹,如下图所示
在这里插入图片描述

编码格式选择LF,与linux保持一致,如下图所示
在这里插入图片描述

主程序

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

调试代码

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

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

编写代码IDE平台:Linux

在linux中,支持JavaScript的调试,需要安装nodejs

sudo apt-get install nodejs-legacy nodejs$ node -vv4.2.6

登录后复制

执行JavaScript脚本

$ node Jsmain.js stringA33.14159[ 'zx', 6.626e-34, 'B', 8 ]{ siindex: 1,  strname: 'ZX Test',  sinum: 2.71828,  functest: [Function: stfunc] }

登录后复制

中文支持

js文件保存的形式是utf-8模式保存,不然会出现乱码,如下图所示。
在这里插入图片描述

以上就是解决JavaScript运行环境的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2721409.html

(0)
上一篇 2025年3月7日 22:45:27
下一篇 2025年3月7日 22:45:39

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论