Abstract: Java Script (hereinafter referred to as js) is a scripting language. For beginners, you should first learn how to actually run js code. This article will start by installing visual studio code, create a simple js program, and run it in the 360 browser throughout the process, and introduce how to edit in the visual studio code environment and how to run it in the 360 browser. The key is to install the Open In Browser plug-in method.
table of Contents
2.1 Download and install Visual Studio Code
2.2 Create a new file and enter the js source code.
2.3 Save the file as an html file
2.4 Problems encountered when running the code
2.5 How to install the plug-in, which plug-in to install.
2.6 How to use plugins to run js code
5.1. What is Visual Studio Code?
5.2. What are the advantages of Java Script?
5.3. What is javascript and what is the difference between it and html and css?
View In Browser/Open in Browser of VSCode plug-in'View in the browser'
1. Experiment purpose:
Start from 0, write a javascript program, and then run it successfully.
Programming environment: win7 x64, visual studio code v1.45.1, 360 browser v12.2.1564.0
The running effect is shown in the figure below,
2. Experimental steps:
2.1 Download and install Visual Studio Code
The most convenient way is to download and install through the 360 software manager
Need to click next several times
After the installation is complete, the first run interface
2.2 Create a new file and enter the js source code.
Note that the name of the newly created file is untitled-1, which is in txt format by default.
The source code is shown in the figure below. This article only explains the operation steps and does not introduce the js syntax. If you need it, please search by yourself.
<!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 Save the file as an html file
Everyone knows that txt files cannot be run directly and need to be converted to html format. Although it can be modified directly by modifying the suffix name, it is more convenient to modify vs code. The operation method is to select the menu file-->save as.
After the storage is successful, it becomes this interface
2.4 Problems encountered when running the code
If you are installing the vs code software for the first time, you cannot run the js program directly. You may see in the js tutorial video that the teacher's right-click operation is very envious, and at the same time, you are also very confused about why your software can't do this. Let me tell you why.
You will definitely encounter this problem, choose to run, or press F5. You will be prompted to select the operating environment, prompt "select Environment", and then pull down the "Node.js" and "More" options. Then the desired interface did not appear.
If you select "Node.js", a dialog box will pop up and it will not run.
Why is this? It is because the operating environment is not set up properly. Visual Studio Code supports many languages, many kinds of hardware, and the power of compatibility comes from various supported plug-ins. js is the same. There are many ways to support it. We want to implement 360 browser to run it. Then install the corresponding plug-in.
2.5 How to install the plug-in, which plug-in to install.
There are multiple solutions found on the Internet, including setting plug-ins, modifying json, and so on. I will not list them all here, but the idea of realization is the same, and all roads lead to Rome.
First click the F5 shortcut key, and then select "More".
Enter "open" in the input box that pops up in the upper left corner of the interface
In the pop-up list, choose to install the open in browser plugin "install". This supports opening in the browser.
2.6 How to use plugins to run js code
After installing the plug-in, right-click on the blank space of the source code --> open in default browser, you can run it. The premise is that the 360 browser is the default browser.
3. Experimental results
After running, the page displays the following interface, the source code of this interface is
<script>
window.alert(5 + 6);
</script>This is the effect of the picture below. When a new page is opened in the 360 browser, "This page shows 11", the number 11 is the result of 5+6.
After clicking the OK button, the words "My First Page" and "My First Paragraph" are displayed in the upper left corner of a page.
The corresponding code is
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
4. Summary
The huge number of users of java script is not without reason, and the convenience of vs code is obvious to all. From a simple example, this article introduces the steps to build and operate the basic environment for learning js. Hope to help students in need.
5. Further reading:
5.1. What is 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. What are the advantages of Java Script?
Please search the Internet by yourself. But what I like most is that it is small (a little over 200M), fast (really fast), easy to debug (other IDE debugging methods, it has), supports embedded (such as arduino), interface Beautiful (line number, font, color).
5.3. What is javascript and what is the difference between it and html and css?
The most vivid description is that the HTML shown in the figure below is the basic structure and content, CSS specifies the appearance, and JS specifies the action.
6. Thanks:
In the process of writing this article, refer to the article of the CSDN blogger, the link is as follows: