外部ファイルにスクリプトを記述

広告

HTMLファイルやXHTMLファイル内に直接スクリプトを記述する代わりにスクリプトを記述した別のファイルを作成し、スクリプトを実行したいHTMLファイルやXHTMLファイルから読み込むことが可能です。

まずJavaScriptのスクリプトだけを記述したファイルを用意します。HTMLファイルなどと同じくテキストエディタで作成して下さい。 

document.write("<p>JavaScript テスト</p>");

例えば上記のようなスクリプトが記述されたファイルを作成します。ファイル名は任意で構いません。拡張子も決まりはありませんが通常は「.js」とします。例えば「sample.js」などです。

次にHTMLファイル又はXHTMLファイル内でスクリプトを実行したい位置に<script>要素を記述しますがスクリプトそのものは直接記述する代わりにsrc属性を使ってスクリプトが記述されたファイルをURL形式で指定します。 

src="外部ファイルURL"

例えば次のように記述します。 

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

上記はHTMLファイルが置かれたディレクトリと同じディレクトリにある「sample.js」を読み込みます。これはHTMLファイル内に記述する場合もXHTMLファイル内に記述する場合も同じ形式です。

スクリプトが記述されたファイルを読み込んだ場合、ファイルに記述されたスクリプトが直接記述された場合と同じように扱われます。そして外部ファイルを使用した場合はスクリプトは単なる文字列として扱われますのでXHTMLファイルの場合であってもスクリプト内に「<」などの特殊記号が含まれるかどうか気にする必要はなくなります。

なおスクリプトは読み込む側のHTMLファイルなどが設置されたドメインとは別のドメインのサーバに設置されていても読み込むことは可能です。その場合は「http://sample.jp/xxxx.js」などのようにsrc属性の値を指定して下さい。

外部ファイルの文字コード

スクリプトが記述された外部ファイルと読み込む側のHTMLファイルなどが同じ文字コードであればいいのですが、多くのページで共有して利用されるスクリプトファイルなどで既に別の文字コードで記述されたファイルを読み込みたい場合があります。この時は<script>要素のcharset属性に外部ファイルの文字コードを指定します。 

charset="外部ファイルの文字コード"

例えば次のように記述します。 

<script type="text/javascript" src="./sample.js" charset="Shift_JIS">
</script>

上記の場合はスクリプトが記述された外部ファイルがShift_JISで記述されている場合です。このようにcharset属性を使用することで異なる文字コードで記述されたスクリプトファイルを読み込むことが可能です。

サンプルコード

それでは簡単なサンプルを下記に示します。なお基本はXHTMLで試していくので今後のサンプルはXHTMLベースとなります。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

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

<script type="text/javascript" src="./js/script4_2.js" charset="Shift_JIS">
</script>

</body>
</html>

document.write("<p>UTF-8で記述された外部ファイル</p>");

document.write("<p>Shift_JISで記述された外部ファイル</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p4-1

今回"xhtml_temp4_1.html"ファイルは"UTF-8"、"script4_1.js"は"UTF-8"、"script4_2.js"は"Shift_JIS"で保存してあります。異なる文字コードで保存されたスクリプトファイルも問題無く読み込めています。

( Written by Tatsuo Ikura )