いろいろなページで使うJavaScript関数を外部ファイルにまとめて書く

HOME
更新日:2013.10.04
HOMEJavaScript入門 > JavaScriptの外部ファイル

JavaScriptの外部ファイル

このページではJavaScriptを外部ファイルで指定する方法について解説します。 外部ファイルにソースを書いておくと色々なページから参照することができるので、 良く使う関数などを記入しておくと非常に便利です。

例えば更新履歴を書き出す関数や、サブウィンドウを出す関数などは、 様々なページで使える関数です。 これらを外部ファイルに記入しておけば、あとはリンクを張るだけで関数を呼び出せます。

外部ファイルの使用方法

記入と保存

外部ファイルはJavaScript専用のファイルになります。 従って、HTMLの中にJavaScriptを埋め込む時に使った<script>~</script>を記入する必要はありません。 直接JavaScriptのソースを書いていきます。

外部ファイルを保存する時に、拡張子を.jsにします。 こうすることによって、JavaScript専用ファイルになります。 Windowsでは下のようなアイコンのファイルになります。

JavaScript外部ファイル

外部ファイルの参照の仕方

外部ファイルを参照する場合は、HTMLのヘッダーに以下のリンクを挿入するだけです。

<script type="text/javascript" src="JSファイルのパス"></script>

複数の外部ファイルを参照したい場合は、上記のリンクを2つ,3つ…と並べればOKです。 あとはイベントタグやAタグなどで関数を呼び出すことができます。

外部ファイルを使ったサンプル

では更新履歴を表示する関数を外部ファイルで書いてみましょう。まずは外部ファイルの方を作ってみたいと思います。 以下の4行を書いて、「modi.js」というファイル名で保存して下さい。

function koshin(){
  var hiduke=document.lastModified;
  document.write(hiduke);
}

上記のdocument.lastModifiedというのがファイルの更新日時を調べるスクリプトです。 それを変数hidukeに入れて、document.writeで書き出しています。

次に、JSファイルを保存したのと同じ場所にHTMLファイルを作ってみましょう。 HTMLに以下のように記入してみて下さい。

<head>
  <script type="text/javascript" src="modi.js"></script>
</head>

<body>
<script>
  koshin();
</script>
</body>

サンプル(別窓)

サンプルのように、更新日時が表示されていますか?表示されていれば成功です。 因みに日時の表示形式はブラウザによって違うので、実際に活用するにはもう一工夫必要かもしれません。

<script type="text/javascript" src="JSファイルのパス"></script>
外部JSファイルを読み込みます。
外部ファイル本文は、<script>~</script>で囲む必要はありません。

ここまででJavaScriptの基本編は終わりです。