外部ファイルのJavaScriptを利用する

htmlにJavaScriptを直接記述しないで、JavaScriptだけを記述した外部フィルから関数を呼び出す例。

ディレクトリ構成は、htmlのファイルの下層にある「js」というサブディレクトリに「0002_gaibufile_01.js」と「0002_gaibufile_02.js」がある想定。

HTMLファイルのディレクトリ
└js // サブディレクトリ
　├0002_gaibufile_01.js // １つ目のJavaScriptファイル
　└0002_gaibufile_01.js // ２つ目のJavaScriptファイル

1つ目のJavaScriptファイル<0002_gaibufile_01.js>

function aisatsu1() {
  	alert("おはようございます");
}

function aisatsu2() {
  	alert("こんにちは");
}

2つ目のJavaScriptファイル <0002_gaibufile_02.js>

function oishii1() {
  	alert("美味しいミカン");
}

function oishii2() {
  	alert("おいしいりんご");
}

HTMLファイル<0002_gaibufile.html>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>JavaScriptを外部ファイルにしたサンプル</title>
<script src="./js/0002_gaibufile_01.js"></script>
<script src="./js/0002_gaibufile_02.js"></script>
</head>
<body>

<p>外部ファイルのJavaScriptを呼び出すサンプル</p>

<p><input type="button" value="あいさつ１" onclick="aisatsu1()"></p>
<p><input type="button" value="あいさつ２" onclick="aisatsu2()"></p>
<p><input type="button" value="おいしい１" onclick="oishii1()"></p>
<p><input type="button" value="おいしい２" onclick="oishii2()"></p>


</body>
</html>

複数のファイルを使用する時は、<script> ～ </script>で複数指定する。

一度作成した関数を複数のHTMLから呼び出し出来るのが大きなメリット。HTMLのソースコードがシンプルになるのもありがたい。