JavaScript 実行環境の解決

coldplay.xixi

リリース： 2020-11-27 17:07:36

転載

10134 人が閲覧しました

javascript 列では、良いスタートを切るための動作環境を紹介します。

JavaScript 実行環境の解決

#関連する無料学習の推奨事項: javascript(ビデオ)

記事ディレクトリ

JavaScript 実行環境
##インレイ Web ページ
- JavaScript ファイルスクリプト：.js
- JavaScript 印刷
- 印刷メソッド
  - 印刷レベル
  コードの記述 IDE プラットフォーム:メモ帳ブラウザ
- コードのデバッグ
  コードの作成 IDE プラットフォーム: Visual Studio Code Node.js
- メインプログラム
  - コードのデバッグ
  コードの作成 IDE プラットフォーム: Linux
- 中国語サポート

バージョン#0.12018.05.01原稿執筆Zhong Xin 0.22018.05.05js 変数定義を追加Zhong Xin0.32018.05 .05 js コンパイル環境を追加Zhong Xin0.42018.05.11js 関数を追加Zhong Xin0.52018.05.14分割割り当ての追加Zhong Xin0.62018.05.19関数定義とクラス定義を追加Zhong Xin 0.72018.05.27クラス定義の追加Zhong Xin0.82018.06 .09時間定義を追加Zhong Xin

JavaScript 実行環境

インレイ Web ページ

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 実行環境の解決

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 印刷

JavaScript デバッグ印刷は、ブラウザで F12 を押すと呼び出され、次のコンソールオブジェクトを使用して実装されます。コード。

印刷メソッド

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

ログイン後にコピー

実行結果

JavaScript 実行環境の解決

印刷レベル

コンソールオブジェクトには、さまざまなデバッグ環境に対応したデバッグ印刷用の印刷レベルがあります。。

ソースコード

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

ログイン後にコピー

実行結果

JavaScript 実行環境の解決

右側の位置をクリックするとコードデバッグオプションへジャンプします

JavaScript 実行環境の解決

コードの記述 IDE プラットフォーム: メモ帳ブラウザ

ブラウザがインストールされている限り、メモ帳を使用して JS コードを作成できます。ただし、js を実行するには、js を html ファイルに埋め込む必要があります。

ブラウザで html ファイルが開くと、js スクリプトを実行できます。

コードのデバッグ

ブラウザで F12 を押してデバッグ環境を起動すると、ソースコードにブレークポイントを設定し、シングルステップデバッグして、出力を表示できます。以下に示すように。

JavaScript 実行環境の解決

以下に示すように、エッジでコードをデバッグします。

JavaScript 実行環境の解決

コードの記述 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/

インストール後、指定されたフォルダー (次の図に示すように)

JavaScript 実行環境の解決

#Linux と一致するエンコード形式として LF を選択します (次の図に示すように)

JavaScript 実行環境の解決

#メインプログラム

Node.js をインストールした後、js コードをデバッグするために Visual Studio Code 環境を構成します。以下に示すように。

JavaScript 実行環境の解決

デバッグコード

デバッグコードの構成の制御は、launch.json ファイルによって制御されます。構成オプションの追加でデバッグオプションを構成できます。以下の図に示すように、launch.json ファイルはプロジェクトディレクトリの .vscode フォルダーに配置されます。

JavaScript 実行環境の解決

編集インターフェイスはデバッグ用にポイントをブレークでき、出力情報はデバッグコンソールで確認できます。変数 bar を使用すると、js 変数を常に観察できます。以下に示すように。

JavaScript 実行環境の解決

コードの記述 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 実行環境の解決