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 ファイル スクリプト: .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 を押すと呼び出され、次のコンソール オブジェクトを使用して実装されます。コード。

印刷メソッド

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

実行結果

印刷レベル

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

ソースコード

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 を押してデバッグ環境を起動すると、ソース コードにブレークポイントを設定し、シングルステップ デバッグして、出力を表示できます。以下に示すように。

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

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

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

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

#メイン プログラム

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

デバッグ コード

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

編集インターフェイスはデバッグ用にポイントをブレークでき、出力情報はデバッグ コンソールで確認できます。変数 bar を使用すると、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 中国語 Web サイトの他の関連記事を参照してください。