日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/10 javascript 37 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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添加js函數鐘鑫
0.52018.05.14添加解構賦值鐘鑫
0.62018.05.19添加函數定義以及類定義鐘鑫
0.72018.05.27添加類的定義鐘鑫
0.82018.06.09添加時間定義鐘鑫

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>

顯示效果如下圖所示。

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>

顯示效果如下圖所示。


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编程用法——JavaScript运行环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。