JavaScript编程用法——JavaScript运行环境

刺骨的言语ヽ痛彻心扉 2022-05-09 12:28 391阅读 0赞

### 文章目录 ###

*  文件版本说明
 *  JavaScript运行环境
 *   *  镶嵌网页
     *  JavaScript文件脚本：.js
     *  JavaScript打印
     *   *  打印方式
         *  打印级别
     *  编写代码IDE平台:记事本 + 浏览器
     *   *  调试代码
     *  编写代码IDE平台：Visual Studio Code + Node.js
     *   *  主程序
         *  调试代码
     *  编写代码IDE平台：Linux
     *  中文支持

# 文件版本说明 #

<table> 
 <thead> 
  <tr> 
   <th>版本</th> 
   <th>发布日期</th> 
   <th>修订章节</th> 
   <th>作者</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0.1</td> 
   <td>2018.05.01</td> 
   <td>撰写草稿</td> 
   <td>钟鑫</td> 
  </tr> 
  <tr> 
   <td>0.2</td> 
   <td>2018.05.05</td> 
   <td>添加js变量定义</td> 
   <td>钟鑫</td> 
  </tr> 
  <tr> 
   <td>0.3</td> 
   <td>2018.05.05</td> 
   <td>添加js编译环境</td> 
   <td>钟鑫</td> 
  </tr> 
  <tr> 
   <td>0.4</td> 
   <td>2018.05.11</td> 
   <td>添加js函数</td> 
   <td>钟鑫</td> 
  </tr> 
  <tr> 
   <td>0.5</td> 
   <td>2018.05.14</td> 
   <td>添加解构赋值</td> 
   <td>钟鑫</td> 
  </tr> 
  <tr> 
   <td>0.6</td> 
   <td>2018.05.19</td> 
   <td>添加函数定义以及类定义</td> 
   <td>钟鑫</td> 
  </tr> 
  <tr> 
   <td>0.7</td> 
   <td>2018.05.27</td> 
   <td>添加类的定义</td> 
   <td>钟鑫</td> 
  </tr> 
  <tr> 
   <td>0.8</td> 
   <td>2018.06.09</td> 
   <td>添加时间定义</td> 
   <td>钟鑫</td> 
  </tr> 
 </tbody> 
</table>

# JavaScript运行环境 #

## 镶嵌网页 ##

在一个html中镶嵌JavaScript，镶嵌标签  
JsTest.html

<html>
    	<head>
    		<title> ZX test title </title>
    		<script>
    
    		function js_test_html(){  
    			alert('alert ZX test');
    			console.log('console ZX test');
    			document.write('document ZX test\n');
    		}  
    
    		js_test_html();
    
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

显示效果如下图所示。  
![在这里插入图片描述][70]  
![在这里插入图片描述][70 1]

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

<html>
    	<head>
    		<title> ZX test title </title>
    		<script src="./Jsmain.js"> </script>
    	</head>
    	<body>
    	</body>
    </html>

显示效果如下图所示。

![在这里插入图片描述][70 2]  
![在这里插入图片描述][70 3]

## JavaScript打印 ##

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

### 打印方式 ###

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

执行结果  
![在这里插入图片描述][70 4]

### 打印级别 ###

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

执行结果  
![在这里插入图片描述][70 5]

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

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

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

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

### 调试代码 ###

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

edge上调试代码，如下图所示  
![在这里插入图片描述][70 8]  
![在这里插入图片描述][70 9]

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

用Visual Studio Code轻便，结合Node.js开发可以不用调用浏览器去调试代码。  
与浏览器不同的是，js文件可以单独运行而不需嵌入html中，通过Node.js加载运行。

Visual Studio Code下载：[https://code.visualstudio.com/][https_code.visualstudio.com]  
Node.js下载：[https://nodejs.org/en/][https_nodejs.org_en]

安装完之后打开指定文件夹，如下图所示  
![在这里插入图片描述][70 10]

编码格式选择LF，与linux保持一致，如下图所示  
![在这里插入图片描述][70 11]

### 主程序 ###

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

### 调试代码 ###

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

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

## 编写代码IDE平台：Linux ##

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

sudo 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模式保存，不然会出现乱码，如下图所示。  
![在这里插入图片描述][70 15]

[70]: /images/20220509/aba0ef5788c14dd782e60880ae54cef3.png
[70 1]: /images/20220509/a7bf5133af95458bbcb22a97439cf161.png
[70 2]: /images/20220509/80f5ac020c7f45a9a75e3cd2d16c3287.png
[70 3]: /images/20220509/f1a285251d2d4767812f839dfd0f9343.png
[70 4]: /images/20220509/e927d68f3f9547efb1ffbe7fe2f1c44d.png
[70 5]: /images/20220509/55792a3c174a4d6ba2f384c2cf6b85b4.png
[70 6]: /images/20220509/d0b376871e7047dc87a659c4ce427af0.png
[70 7]: /images/20220509/7e2eeecc28c34a3383d60c709a48810e.png
[70 8]: /images/20220509/c8a68ae83faa4310843b686244c4c4cd.png
[70 9]: /images/20220509/61e7443017d44d7ba935b035da03847f.png
[https_code.visualstudio.com]: https://code.visualstudio.com/
[https_nodejs.org_en]: https://nodejs.org/en/
[70 10]: /images/20220509/09512bce425c4598ab7a3eb628573dd4.png
[70 11]: /images/20220509/ec3756f13a0c43ababdf27d8c45eb3a2.png
[70 12]: /images/20220509/bbda919ffde144ec9f28e9a35d1ff65d.png
[70 13]: /images/20220509/9e75746ab77d43ca96cb946c12e8b09b.png
[70 14]: /images/20220509/79a57ce6e5084f36ab5215b62551de65.png
[70 15]: /images/20220509/8c3562357b2c49d4a15de4df39b417c8.png