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

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

確認環境
・Windows10
・Google Chrome

目次

JavaScriptの動かし方

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

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

 

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

<script>

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

</script>

 

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

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

 

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

 

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

 

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

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

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

 

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

 

console.logの確認方法

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

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

<script>

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

</script>

 

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

 

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

関連の記事

JavaScript consoleオブジェクトのメソッドのサンプル
JavaScript ウィンドウ/ダイアログを開くサンプル(windowオブジェクト)

△上に戻る