Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.40 - スクリプトを外部ファイル( .js ) にする


JavaScript も、作り込んでくるとリストが長くなってきます。HTML をスッキリさせるため、スクリプトを外に追いやってみます。


Step テーマ
● 外部ファイル(js ファイル)を作る

実行例




リスト


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

<script type="text/javascript"><!--
myFunc();
// --></script>


● step40.js の内容

function myFunc(){
     myTbl = new Array("日","月","火","水","木","金","土");
     myD = new Date();

     myYear = myD.getFullYear();
     myMonth = myD.getMonth() + 1;
     myDate = myD.getDate();
     myDay = myD.getDay();
     myHours = myD.getHours();
     myMinutes = myD.getMinutes();
     mySeconds = myD.getSeconds();

     myMess1 = myYear + "年" + myMonth + "月" + myDate + "日";
     myMess2 = myTbl[myDay] + "曜日";
     myMess3 = myHours + "時" + myMinutes + "分" + mySeconds + "秒";
     myMess = myMess1 + " " + myMess2 + " " + myMess3;
     document.write( myMess );
}

サンプルだけの HTMLは こちらへ

説明


Step.4 で作った 日付を表示する関数を 外部ファイルへ追いやってみました。
日付を表示する関数を外部ファイルに追いやったので、この HTML自体は、スッキリしました。

外部ファイルは「ファイル名.js」と、拡張子を「js」にします。

このファイルを <HEAD>~</HEAD>タグ内に以下のように指定します。
<script type="text/javascript" src="step40.js"></script>

また、 js ファイルは何個でも使用できます。
<script type="text/javascript" src="step40.js"></script>
<script type="text/javascript" src="step41.js"></script>
<script type="text/javascript" src="step42.js"></script>

<script>~</script>は、上記にて定義しているので、js ファイル内には記述しません。
js ファイルは、JavaScript のみでタグは使えません。
※ <!-- コメント --> のコメントも使えません。 コメントは、 /* ~ */ で囲むか、 // を使います。


● 注意事項
・HTMLファイルと jsファイルの文字コードが異なっていると正常に動作しない場合があります。
・jsファイルをアップデートした場合にブラウザを手動更新かキャッシュを削除しないと、キャッシュの古いjsファイルが使われているケースがあります。

● 古臭い時代の注意事項
・JSファイルを使う場合は、サーバ側(プロバイダ)に、MIMEタイプの設定をする必要があります。プロバイダによっては、既にMIMEタイプの設定をしている所もありますが、これらの設定がされているかどうか、プロバイダに確認する必要があります(かなり、古臭いプロバイダの話)。
・IE3は対応していません。
・IE4の一部のバージョンがバグのためエラーが出ます。
・MacIE4はShiftJISコードで保存された漢字は???になります。Unicode(UTF-8)コードで保存する必要があります。
・MacNS3,MacNS4はUnicode(UTF-8)コードで保存された漢字は表示しません。ShiftJISコードで保存する必要があります。
・WindowsNT3.51(IE5)でコメントに漢字を使うと一般保護エラーが発生します。

 
イヌでもわかるJavaScript講座 お品書き へ戻ります