解決JavaScript運行環境

javascript欄位介紹其運作環境，才有好的開始。

相關免費學習推薦：javascript（影片）

文章目錄

• 檔案版本說明
• JavaScript執行環境
• • #鑲嵌網頁
  • JavaScript檔案腳本：.js
  • JavaScript列印
  • • 列印方式
    • #列印等級
  ##編寫程式碼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#1函數鐘鑫0.5#2018.05.14加入解構賦值#鐘鑫0.62018.05.19新增函數定義以及類別定義鐘鑫#0.72018.05.27新增類別的定義鐘鑫0.82018.06 .09新增時間定義鐘鑫

JavaScript運行環境

鑲嵌網頁

在一個html中鑲嵌JavaScript，鑲嵌標籤
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>
	
	
	

顯示效果如下圖所示。

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檔案中

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

顯示效果如下圖所示。

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 -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模式儲存，不然會出現亂碼，如下圖所示。

#

以上是解決JavaScript運行環境的詳細內容。更多資訊請關注PHP中文網其他相關文章！