JavaScriptの外部ファイル
このページではJavaScriptを外部ファイルで指定する方法について解説します。 外部ファイルにソースを書いておくと色々なページから参照することができるので、 良く使う関数などを記入しておくと非常に便利です。
例えば更新履歴を書き出す関数や、サブウィンドウを出す関数などは、 様々なページで使える関数です。 これらを外部ファイルに記入しておけば、あとはリンクを張るだけで関数を呼び出せます。
外部ファイルの使用方法
記入と保存
外部ファイルはJavaScript専用のファイルになります。 従って、HTMLの中にJavaScriptを埋め込む時に使った下のタグを記入する必要はありません。 直接JavaScriptのソースを書いていきます。
<script type="text/javascript"> <!-- // --> </script>
外部ファイルを保存する時に、拡張子を.jsにします。 こうすることによって、JavaScript専用ファイルになります。 WindowsXPでは下のようなアイコンのファイルになります。
HomuPage Writerをお使いの方は、 ファイルを保存する時に「ファイルの種類」でJSファイルを選択すると、拡張子jsのファイルになります。
外部ファイルの参照の仕方
外部ファイルを参照する場合は、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>
サンプル(別窓)
サンプルのように、更新日時が表示されていますか?表示されていれば成功です。 因みに日時の表示形式はブラウザによって違うので、実際に活用するにはもう一工夫必要かもしれません。
ここまででJavaScriptの基本編は終わりです。