.js外部ファイル編　[1] jsファイルの使い方

JavaScript

JavaScript Tips
.js外部ファイル編
jsファイルでメンテナンスを楽にする

■　 [1] jsファイルの使い方

　JavaScriptは名前の最後に.jsという拡張子のついた外部のファイルを読み込んで利用することができます。CSSでいえばページとは別に用意した.cssファイルのようなものです。今回からはこれを利用してページのメンテナンスを楽にする方法について数回にわたって連載してみます。

1: とりあえず、.jsファイルを読み込んでみる
2: サーバー側の設定について
3: ブラウザ実装状況
4: メリットデメリット
1: とりあえず、.jsファイルを読み込んでみる　←サンプル
```
　呼び出し側　test.htm


	<script language="JavaScript" src="./test.js"></script>



　読み込まれる.jsファイル　test.js



	alert('testです')
```
.jsファイルを使うのは簡単です。まず、上記二つのファイルを用意します。呼び出す側のhtmlファイルと呼び出されて読み込まれる.js外部ファイルです。

呼び出す側のhtmlファイルには、scriptタグを書き「src」属性をつけてそこへ読み込みたいファイルのURL(ここでは./test.js)を記述します。要するに画像をimgタグのsrcで読み込むようにして外にあるスクリプトを読み込むのです。

読み込まれる.jsファイルの方へは 使いたいスクリプトを書きますが、この時scriptタグや
	</script>
```
2:
サーバー側の設定について

現在.js外部ファイルを使えないプロバイダーは珍しいと思いますので普通は下記の設定は不要です。

ただ、たまにパソコンで実行させるとうまく動くのに、いざWebサーバに置いて動作させてみるとjsファイルを「保存しますか?」と聞かれて実行できないという場合があります。このような時は、サーバにMIMEタイプの設定が必要です。サーバーの管理者に「.jsファイルを使えるようにしたい」と頼んでみて下さい。もし、自分で設定を変更できるなら、下記の方法でMIMEタイプを追加します。
- Apacheでユーザーが.htaccessによる設定変更可能な場合
  - AddType application/x-javascript .js を追加して下さい。
- Windowsアドミニストレーターの場合
  - \HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\ InetInfo\Parameeters\MimeMapへ値を追加します。
  - 値の名前: application/x-javascript,js,,0:
  - 値の型: REG_SZ
  - 値: (空)
  - その後　WWW, Gopher, FTP のサービスを停止，再起動します。

3: ブラウザ実装状況

最近のJavaScriptを使えるブラウザで.jsファイル(scriptタグのsrc属性) を使えないものはありませんから、その実装について心配する必要はほとんどありません。ただ、もし、厳密にマイナーなブラウザにも対応したいという場合には下記のような注意が必要です。

最初に実装されたのはNetscape2.0(n2)からです。しかし、n2やIE4.0(e4)やe5などの初期のものはバギーで使えませんでした。実際にまともに使えるようになったのは下記の各バージョンからです。


  * n3以上  (n2も使えるがバギー。)
  * e5.1以上(e4,e5.01も使えるがバギー。
             mac-e4と一部のwin-e5.01は外部ファイル
             をUnicode(UTF-8)にしないと文字化けす
             るというバグがあります。ただしmac-n3,
             mac-n4などは逆にユニコードによる.jsが
             不可なのでどうしても共用する場合はそ
             れらを分岐するなどの手当てが必要です。
                                            →注:1)
  * 最近のブラウザ(e6,n6,n7,MozillaやSfari,Opera7
    など)は問題ない。

 注:1　mac-e4,win-e5.01対策分岐コード例


  var ua = navigator.userAgent
	if((ua.indexOf('MSIE 4.5')  !=-1   ||
	    ua.indexOf('MSIE 5.01') !=-1 ) && 
	    (unescape('%u3042') == 'あ'))
	{
	  //mac-e4.5,win-e5.01用読み込み
	  document.write('<scr'+'ipt src="./testA1utf8.js"></scr'+'ipt>')
	} else { 
	  //その他用読み込み
	  document.write('<scr'+'ipt src="./testA1.js"></scr'+'ipt>')
	}

	

  <scr'+'iptはdocument.writeでscriptタグを書き出すときに
  ブラウザによって誤動作する場合があるので念のためにそれを
  回避するおまじないです。

4:
メリットデメリット

.js外部ファイルを使う場合のメリットとデメリットはつぎのようなものです。一般的には、複数ページ管理には劇的な効果が期待できますので、必須のテクニックといえるかもしれません。

次回からは、実際に.jsファイルを使って楽をする事例(笑)について具体的に紹介していきたいと思います。

「.js外部ファイル編」シリーズの記事一覧へ

記事一覧

.js外部ファイル編　[1] jsファイルの使い方

JavaScript

最新情報

JavaScriptの基本

サンプル・ライブラリ

関連情報

ガイドおすすめの
逸品

「JavaScript」関連サイト

.js外部ファイル編 [1] jsファイルの使い方

JavaScript

最新情報

JavaScriptの基本

サンプル・ライブラリ

関連情報

ガイドおすすめの逸品

「JavaScript」関連サイト

.js外部ファイル編　[1] jsファイルの使い方

ガイドおすすめの
逸品