Solve the JavaScript runtime environment

The

javascript column introduces its operating environment to get a good start.

Related free learning recommendations: javascript(Video)

Article directory

• File version description
• JavaScript running environment
• ##Inlaid web page
  • JavaScript file script ：.js
  • JavaScript printing
  • Print method
    • Print level
  Writing code IDE platform: Notepad browser
  • Debugging code
  Writing code IDE platform: Visual Studio Code Node.js
  • Main program
    • Debugging code
  Writing code IDE platform: Linux
  • Chinese support

File Version Description

VersionPublished DateRevised ChapterAuthor0.12018.05.01Writing draftZhong Xin0.22018.05.05Add js variable definitionZhong Xin0.32018.05 .05Add js compilation environmentZhong Xin0.42018.05.11Add js FunctionZhong Xin0.52018.05.14Add destructuring assignmentZhong Xin0.62018.05.19Add function definition and class definitionZhong Xin0.72018.05.27Add class definitionZhong Xin0.82018.06 .09Add time definitionZhong Xin

JavaScript running environment

Inlay web page

Inlay JavaScript in an html, and the inlay tag
JsTest.html

	
		<title> ZX test title </title>
		<script>

		function js_test_html(){  
			alert(&#39;alert ZX test&#39;);
			console.log(&#39;console ZX test&#39;);
			document.write(&#39;document ZX test\n&#39;);
		}  

		js_test_html();

		</script>
	
	
	

displays the effect as shown below.

JavaScript file script: .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();

Insert the js file into the html file

	
		<title> ZX test title </title>
		<script> </script>
	
	
	

The display effect is as follows shown.

JavaScript printing

JavaScript debugging printing is called out by pressing F12 in the browser, and is implemented using the console object in the code.

Print methods

There are many ways to debug and print JavaScript, including directly printing numbers, arrays, strings, and even structures and classes.
Source code

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

Execution result

Print level

The console object has a printing level for debugging printing, corresponding to different debugging environments.

Source code

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

Execution results

Clicking the position on the right will jump to the code debugging options

Writing code IDE platform: Notepad browser

As long as the browser is installed, you can write js code through Notepad. But to make js run, you must embed js into the html file

When the browser opens the html file, you can execute the js script.

Debugging code

Press F12 in the browser to bring up the debugging environment. You can put breakpoints on the source code, single-step debugging, and view the output. As shown below.

Debug the code on edge, as shown below

Writing code IDE platform: Visual Studio Code Node.js

Using Visual Studio Code is lightweight, and combined with Node.js development, you don’t need to call the browser to debug the code.
Different from browsers, js files can be run independently without being embedded in html, and can be loaded and run through Node.js.

Visual Studio Code download: https://code.visualstudio.com/
Node.js download: https://nodejs.org/en/

After installation, open the specified Folder, as shown in the figure below

Select LF as the encoding format, consistent with Linux, as shown in the figure below

Main program

After installing Node.js, configure the Visual Studio Code environment to debug js code. As shown below.

Debugging code

Controlling the configuration of the debugging code is controlled by the file launch.json. You can configure debugging options in adding configuration options. The launch.json file is placed in the .vscode folder of the project directory, as shown in the figure below.

The editing interface can break points for debugging, and the output information can be seen in the debugging console. The variable bar allows you to observe js variables at all times. As shown below.

Writing code IDE platform: Linux

In Linux, JavaScript debugging is supported and nodejs needs to be installed

sudo apt-get install nodejs-legacy nodejs

$ node -v
v4.2.6

Execute JavaScript script

$ 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] }

Chinese support

The js file is saved in utf-8 mode, otherwise garbled characters will appear, as shown in the figure below.

The above is the detailed content of Solve the JavaScript runtime environment. For more information, please follow other related articles on the PHP Chinese website!