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

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

確認環境
・Windows10
・Google Chrome

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

JavaScriptの動かし方

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

１．任意の場所にテキストファイルを作成します。

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

<script>

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

</script>

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

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

５．Google Chromeのブラウザで作成したファイルを開きます。
ファイルを右クリックして「プログラムから開く」→「Google Chrome」をクリックします。

６．ブラウザが開き、画面に上記コードにある文言「テストです」が表示されます。

htmlファイルを関連付けする場合

拡張子がhtmlのファイルをダブルクリックすると常にGoogle Chromeを開くようにする場合は以下の操作をします。

１．ファイルを右クリックして「プログラムから開く」→「別のプログラムを選択」をクリックします。

２．Google Chromeを選択し、「常にこのアプリを使って.htmlファイルを開く」をチェックしてOKを押します。以後は、拡張子がhtmlのファイルをダブルクリックするとGoogle Chromeが開きます。

console.logの確認方法

Google Chromeのconsole.logの確認方法です。
console.logは、デベロッパー用のツールで値を確認するときなどに使用します。

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

<script>

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

</script>

２．作成したファイルをGoogle Chromeで開いた後、F12キーを押します。
Chrome DevToolsが開きます。
右上の３つの点があるマークをクリックするとDock sideのレイアウトを選択できます。
Dock sideの右から２番目にあるアイコンをクリックするとDockは下へ配置されます。

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