使用vs code调用360浏览器运行java script(js)程序--View In Browser Open In Browser插件的使用方法

摘要:Java Script(下称js)是一种脚本语言,对于初学者,首先应该学会如何真正运行一下js代码。本文将从安装visual studio code开始,新建一个简单的js程序,然后在360浏览器运行它整个过程,介绍如何在visual studio code环境下进行编辑,以及怎么样在360浏览器里面运行。关键是安装Open In Browser插件的方法。

目录

1.实验目的:

2.实验步骤:

2.1 下载并安装Visual Studio Code

2.2新建一个文件,并输入js源代码。

2.3将文件另存为html文件

2.4运行代码时候会遇到的问题

2.5怎么安装插件,安装哪个插件。

2.6怎么使用插件来运行js代码

3.实验效果

4.小结

5.延伸阅读:

5.1.啥是Visual Studio Code?

Visual Studio Code

5.2.Java Script有哪些优势?

5.3.什么是java script,它跟html,css的区别是什么?

6.致谢:

VSCode插件之View In Browser/Open in Browser‘在浏览器中查看’


1.实验目的:

从0开始,编写一段java script程序,然后成功运行一下。

编程环境:win7 x64,visual studio code v1.45.1,360浏览器v12.2.1564.0

运行效果如下图所示,

2.实验步骤:

2.1 下载并安装Visual Studio Code

最便捷的方式是通过360软件管理器下载并安装

需要点击下一步若干次

安装完成之后,初次运行的界面

2.2新建一个文件,并输入js源代码。

注意新建的文件名字叫做untitled-1,默认是txt格式的。

源代码如下图所示,本文只讲解操作步骤,不介绍js语法,有需要的同学请自行搜索。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
	
</body>
</html>

2.3将文件另存为html文件

大家都知道,txt文件是不能直接运行的,需要转换为html格式。尽管可以通过修改后缀名直接修改,但是vs code修改起来更加方便。操作方法是选择菜单file-->save as。

存储成功后,就成了这个界面

2.4运行代码时候会遇到的问题

如果您是初次安装vs code软件,是不能直接运行js程序的。您可能会看到js教程视频上,老师的右键运行操作很羡慕,同时也会很疑惑为何自己的软件不能这样操作。我来告诉您为什么。

您肯定会遇到这个问题,选择运行,或者按下F5键。就会提示让您选择运行环境,提示“select Environment”,然后下拉“Node.js”和“More"选项。然后并没有出现想要的界面。

如果您选择”Node.js“,将会弹出对话框,也不能运行。

这是为什么呢?是因为运行环境没有搭建好。Visual Studio Code支持很多种语言,很多种硬件,兼容并包的底气来自于各种支持的插件。js也是一样,要想支持它运行,有很多种方式,我们想实现360浏览器运行它。那么也要安装相应的插件。

2.5怎么安装插件,安装哪个插件。

从网络上查到的有多种解决方法,包括设置插件、修改json等等。这里不一一列举,实现的思路是一致的,条条大路通罗马。

首先点击F5快捷键,然后选择”More“。

在界面左上角弹出的输入框内输入”open"

在弹出的列表中,选择安装“install"这个open in browser插件。这样就支持在浏览器打开了。

2.6怎么使用插件来运行js代码

安装完插件之后,在源代码的空白处右键-->open in default browser,即可运行了。前提是360浏览器是默认的浏览器。

3.实验效果

运行之后页面显示下图界面,这个界面对应的源代码是

<script>
window.alert(5 + 6);
</script>

就是下图的效果,在360浏览器新打开一个页面,”此网页显示11“,数字11就是5+6的结果。

点击确定按钮之后,一个页面的左上角显示“我的第一个页面”和“我的第一个段落”字样。

对应的代码是

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

4.小结

java script的用户量巨大不是没有理由的,vs code的方便性也是有目共睹的。本文从一个简单的例子,介绍了一下学习js基本环境的搭建和操作步骤。希望能够帮助到有需要的同学。

5.延伸阅读:

5.1.啥是Visual Studio Code?

Visual Studio Code

Visual Studio Code is one of the Top Open Source Projects on GitHub that you can download for free. In this particular project, there has been a total of 22,606 commits which were done in 66 branches with 77 release(s) by 360 contributor(s). The project has been named as vscode by its amazing community.

5.2.Java Script有哪些优势?

请自行网络搜索。不过我自己感觉最喜欢的是它很小(200M多一点),速度快(真的很快),调试方便(其他IDE有的调试方式,它都有),支持嵌入式(比如arduino),界面美观(行号,字体,颜色)。

5.3.什么是java script,它跟html,css的区别是什么?

看到最形象的描述是下图所示HTML是基本的结构和内容,CSS规定了模样,JS规定了动作。

6.致谢:

本文写作过程中,参考了CSDN博主的文章,链接如下:

VSCode插件之View In Browser/Open in Browser‘在浏览器中查看’

猜你喜欢

转载自blog.csdn.net/youngwah292/article/details/109399431
今日推荐