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

(確認環境:Google Chrome,Windows 10)

JavaScriptの動かし方

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

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

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

これはJavaScriptのコードです。

<script>

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

</script>

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

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

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

５．作成したファイルをGoogle Chromeのブラウザにドラッグアンドドロップします。

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

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

console.logは、ブラウザのCosoleタブでJavaScriptで実行した値を確認できます。

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

<script>

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

</script>

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

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

以下のDevToolsが開きます。

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

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

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