JavaScriptの動かし方とconsole.logの確認方法

JavaScriptの動かし方とconsole.logの確認方法です。
ブラウザはGoogle Chromeを使用します。

確認環境
・Windows10
・Google Chrome

サンプル	JavaScriptの動かし方
	console.logで確認する方法

JavaScriptの動かし方

JavaScriptの動かし方の手順です。

１．最初に、JavaScriptを記述するためのテキストファイルを作成します。

２．テキストファイルに以下の1から5行目までをコピペして保存します。

これはJavaScriptのコードです。

<script>

document.write("テストです");

</script>

3行目は、「テストです」という文字列を画面に表示する命令文です。

３．ファイルの拡張子を.htmlにします。

４．「拡張子を変更すると使えなくなる可能性があります。」というダイアログが表示されるので「はい」をクリックします。

５．作成したファイルをGoogle Chromeのブラウザで開きます。

ファイルを右クリックして「プログラムから開く」→「Google Chrome」をクリックします。

６．ブラウザに上記のJavaScriptで書いた「テストです」が表示されます。

console.logは、ブラウザのCosoleタブで以下のように値を確認できます。

１．テキストファイルに以下の1から5行目までをコピペして保存します。

<script>

console.log("テスト2です");

</script>

3行目は、「テストです」という文字列をコンソールに表示する命令文です。

２．作成したファイルをGoogle Chromeで開いた後、F12キーを押します。

以下のChrome DevToolsが開きます。

右上の３つの点があるマークをクリックするとDock sideのレイアウトを選択できます。

Dock sideの右から２番目にあるアイコンをクリックするとDockは下へ配置されます。

３．consoleタブをクリックすると上記コードにある文言「テスト2です」が表示されます。