站長資訊網(wǎng)javascript欄目介紹其運(yùn)行環(huán)境，才有好的開始。
相關(guān)免費(fèi)學(xué)習(xí)推薦：javascript（視頻）
文章目錄
- 文件版本說明
- JavaScript運(yùn)行環(huán)境
-
- 鑲嵌網(wǎng)頁
- JavaScript文件腳本：.js
- JavaScript打印
-
- 打印方式
- 打印級別
- 編寫代碼IDE平臺(tái):記事本 + 瀏覽器
-
- 調(diào)試代碼
- 編寫代碼IDE平臺(tái)：Visual Studio Code + Node.js
-
- 主程序
- 調(diào)試代碼
- 編寫代碼IDE平臺(tái)：Linux
- 中文支持
文件版本說明
| 版本 | 發(fā)布日期 | 修訂章節(jié) | 作者 |
|---|---|---|---|
| 0.1 | 2018.05.01 | 撰寫草稿 | 鐘鑫 |
| 0.2 | 2018.05.05 | 添加js變量定義 | 鐘鑫 |
| 0.3 | 2018.05.05 | 添加js編譯環(huán)境 | 鐘鑫 |
| 0.4 | 2018.05.11 | 添加js函數(shù) | 鐘鑫 |
| 0.5 | 2018.05.14 | 添加解構(gòu)賦值 | 鐘鑫 |
| 0.6 | 2018.05.19 | 添加函數(shù)定義以及類定義 | 鐘鑫 |
| 0.7 | 2018.05.27 | 添加類的定義 | 鐘鑫 |
| 0.8 | 2018.06.09 | 添加時(shí)間定義 | 鐘鑫 |
JavaScript運(yùn)行環(huán)境
鑲嵌網(wǎng)頁
在一個(gè)html中鑲嵌JavaScript，鑲嵌標(biāo)簽
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 testn'); } js_test_html(); </script> </head> <body> </body> </html>
顯示效果如下圖所示。
JavaScript文件腳本：.js
將js代碼寫入一個(gè)js文件中，然后通過html調(diào)用這個(gè)腳本。
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>
顯示效果如下圖所示。
JavaScript打印
JavaScript的調(diào)試打印在瀏覽器中按F12調(diào)出，代碼中用console對象實(shí)現(xiàn)。
打印方式
JavaScript的調(diào)試打印有多中方式，包含可以直接打印數(shù)字、數(shù)組、字符串甚至結(jié)構(gòu)體和類。
源碼
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); }
執(zhí)行結(jié)果
打印級別
console對象對調(diào)試打印有著打印級別，對應(yīng)不同的調(diào)試環(huán)境。
源碼
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."); }
執(zhí)行結(jié)果
點(diǎn)擊右邊的定位會(huì)跳轉(zhuǎn)到代碼調(diào)試選項(xiàng)
編寫代碼IDE平臺(tái):記事本 + 瀏覽器
只要安裝了瀏覽器，通過記事本就可以編寫js代碼。但要使js運(yùn)行起來，就必須將js鑲嵌到html文件中
瀏覽器打開html文件，就可以執(zhí)行js腳本。
調(diào)試代碼
在瀏覽器按F12調(diào)出調(diào)試環(huán)境，可以在源碼上打上斷點(diǎn)，單步調(diào)試，查看輸出。如下圖所示。
edge上調(diào)試代碼，如下圖所示
編寫代碼IDE平臺(tái)：Visual Studio Code + Node.js
用Visual Studio Code輕便，結(jié)合Node.js開發(fā)可以不用調(diào)用瀏覽器去調(diào)試代碼。
與瀏覽器不同的是，js文件可以單獨(dú)運(yùn)行而不需嵌入html中，通過Node.js加載運(yùn)行。
Visual Studio Code下載：https://code.visualstudio.com/
Node.js下載：https://nodejs.org/en/
安裝完之后打開指定文件夾，如下圖所示
編碼格式選擇LF，與linux保持一致，如下圖所示
主程序
在安裝好Node.js之后，配置Visual Studio Code的環(huán)境，就可以調(diào)試js的代碼。如下圖所示。
調(diào)試代碼
控制調(diào)試代碼的配置是由文件launch.json進(jìn)行控制的，可以在添加配置選項(xiàng)中配置調(diào)試選項(xiàng)。launch.json文件放置在工程目錄的.vscode文件夾下，如下圖所示。
編輯界面可以打斷點(diǎn)進(jìn)行調(diào)試，在調(diào)試控制臺(tái)可以看到輸出信息。變量欄可以時(shí)刻觀察js變量。如下圖所示。
編寫代碼IDE平臺(tái)：Linux
在linux中，支持JavaScript的調(diào)試，需要安裝nodejs
sudo apt-get install nodejs-legacy nodejs $ node -v v4.2.6
執(zhí)行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模式保存，不然會(huì)出現(xiàn)亂碼，如下圖所示。
