JavaScriptのきほん（２）アウトプットのきほん（その２）

JavaScriptを使うためには、Webページが必要である。WebページにはHTMLもCSSも書かなくてはならない。さらには画像のデータが必要な場合もある。そこで、JavaScriptに関係あること以外は毎回書かなくて済むように、あらかじめindex.htmlを含むテンプレートを用意しておくと良い。

前回は、プログラムをコンソールに直接書いていた。ただし、実際のWebサイトで、ユーザーにコンソールを使わせることはない。
そこで、コンソール以外にプログラムを書く場所をご紹介しよう。

HTMLにJavaScriptを記述する

事前に用意したindex.htmlをエディタで開いて、次のプログラムを記述する。

ちなみに、筆者のおすすめのエディタは、「Visual Studio Code」である。

https://azure.microsoft.com/ja-jp/products/visual-studio-code

azure.microsoft.com

index.htmlを編集する。（抜粋）

</footer>
<script>
    'use strict'
    console.log('JavaScriptを学ぼう！')
</script>
</body>

このindex.htmlをブラウザで開き、コンソールも開く。下図のように表示されただろうか。

JavaScriptファイルを読み込む

JavaScriptプログラムを専用のファイルに書いておいて、それをHTMLファイルに読み込ませてみよう。

まず、index.htmlファイルを編集する。（抜粋）

</footer>
<script src="script.js"></script>
<script>
    'use strict'
    console.log('を学ぼう！')
</script>
</body>

次に、エディタで、新規ファイルを作成し、以下のプログラムを記述しよう。

'use strict'

//外部JavaScriptファイル
/*
読み込まれるとすぐに実行される
*/

console.log("JavaScript");

編集後、index.htmlをブラウザで開き、コンソールを表示しよう。下図のように表示されただろうか。

なお、JavaScriptは外部ファイルに書くのが一般的である。ただ、本ブログでは、わかりやすさを優先し、原則として、HTMLファイルの<script>タグ内にJavaScriptを記述する。

（参考）確かな力が身につくJavaScript「超」入門 第2版　狩野 祐東 (著)　SBクリエイティブ