JavaScriptを書く方法は、大きく分けてHTMLファイル内に書く方法とHTMLファイルの外部から読み込む方法があります。今回は、HTML ファイルの外部から読み込む2つの方法を説明します。

<script>要素のsrc属性による読み込み

<script>要素にはsrc属性があり、HTMLファイルとは別のJavaScriptファイルを読み込んで利用することができます。たとえば、次のように書くと、test6.jsを読み込み「こんにちは」とダイアログ表示します。

まず、test6.jsの中身はこういうコードです。
alert("こんにちは")

これまで何度も出てきましたね。「こんにちは」というダイアログを表示するコードです。これをHTML内へ読み込むには、次のように書きます。
<script src="test6.js"></script>

これで、このHTMLページを開くと「こんにちは」と表示されます。

ただ、これもページを開いていきなりダイアログが表示されたのでは迷惑なページになってしまいますので、ワンクッションおいてみましょう。今度は、簡単な関数を使ってみます。test6.jsを次のように書き換えてみます。
function test(){
alert("こんにちは")
}

そのうえで、先程のHTMLページにボタンを書き加えてみます。
<script src="test6.js"></script>
<button onclick="test()">click</button>

すると、今度はボタンをクリックすると「こんにちは」と表示されるようになります。

関数は、JavaScriptの命令をまとめて書くことのできる場所でしたが、ここでは、その関数に「test」という名前をつけてあります。これにより、「test()」と書くことで、その関数の中の命令(ここではalert)を実行できるようにしているのです。

なお、日本語の場合にはひとつ注意したいポイントがあります。「文字コード」です。

日本語を表示するためには、何種類かの文字コードがあり適切なコードを使わないと「文字化け」して読めなくなってしまいます。Webでは、「Shift_JIS」「EUC」「UTF-8」が主なものですが、これからWebページを書きたいという方は、できれば「UTF-8」の使用をおすすめします。

それは、ファイルをエディタで保存するときに選択できるのですが、HTMLで読み込むときにも明示的に指定することで、文字化けによる誤動作を避けられます。

そして、<script>要素でJavaScriptを読み込むときには、次のようにcharset属性を使って指定します。
<script src="test5.js" charset="utf-8"></script>
<button onclick="test()">click</button>

動作はいままでと同じですが、これも試してみます。

サンプルはこちら

さて次も外部ファイルからの読み込みですが、今度はJavaScriptファイルではありません。