1.<head>～</head>間
2.<body>～</body>間
3.htmlとは別ファイルに書いて呼び出す
1はこれまでの方法ですが、JavaScriptはhead部分だけではなく、body部分にも書くことができます。またhead部分とbody部分に分けて書くこともできます。
しかしプログラムが長くなってくると、JavaScriptとhtmlが混じって非常に読みにくくなってしまいます。プログラムとhtml（デザイン）が混在していると、ちょっとしたデザインの変更もプログラムを知っている人しかできないことになります。これでは効率が悪いです。デザインはhtmlさえ知っている人なら変更できるほうが便利です。
そこで今回は3番目のhtmlとは別ファイルに書いて呼び出す方法を学びます。分離することで、とてもすっきりして読みやすいプログラムになります。それでは実際にやってみましょう。使うのは前回までに作成したプログラムです。
【1】テキストエディタで以下のように入力し、ファイル名は「sample007.html」で適当な場所に保存してください。コピーして貼り付けてもかまいません。
sample007.html
<html>
<head>
<script type="text/javascript" src="sample007.js"></script>
<title>sample007</title>
</head>
<body>
<form name="form1">
<INPUT TYPE="text" NAME="txtA">
<select name="selOpe" size=1>
<option value="1">＋</option>
<option value="2">－</option>
<option value="3">×</option>
<option value="4">÷</option>
<option value="5">％</option>
</select>
<INPUT TYPE="text" NAME="txtB"> =
<INPUT TYPE="text" NAME="txtC">
<br>
<input type="button" name="cmdCalc" value="計算" onclick="Calc()">
<input type="reset" value="クリア">
</form>
</body>
</html>
【2】テキストエディタで以下のように入力し、ファイル名は「sample007.js」で上のhtmlと同じ場所に保存してください。コピーして貼り付けてもかまいません。
sample007.js
function Calc() {
//変数の宣言
var a;
var b;
var c;
var ope;
//withを使って簡潔に書く
with (document.form1) {
a = parseInt(txtA.value);
b = parseInt(txtB.value);
ope = parseInt(selOpe.value);
}
//セレクトボックスによって処理を変える
switch (ope) {
case 1:
c = a + b;
break;
case 2:
c = a - b;
break;
case 3:
c = a * b;
break;
case 4:
c = a / b;
break;
case 5:
c = a % b;
break;
default:
break;
}
//計算結果を表示
document.form1.txtC.value = c;
}
【3】保存したら sample007.html をダブルクリックしてWebブラウザで開きます。
★sample007.htmlとsample007.jsは必ず同じフォルダ内に置いてください。
【4】前回までとまったく同じ動きをすることを確認してください。
【解説】
どうですか？プログラムとhtmlを分けるとすっきりしますね。しかも意外と簡単です。それでは主な変更点を解説します。
まず、html側に以下の1行を加えています。たったこれだけです。これでhtmlから JavaScript を呼び出せるようになりました。
<script type="text/javascript" src="sample007.js"></script>
src=""の部分には分離した JavaScript のファイル名を書きます。JavaScriptファイルの拡張子はかならず「.js」にしてください。JavaScriptは複数のファイルに分けて書くこともできます。その場合でも上記のような行を複数書くだけで済みます。
世の中には親切で優秀な人がいて、便利なJavaScriptのプログラムをライブラリとして公開しています。そのプログラムを自分のページに利用する場合にも同じように１行書くだけで機能が使えるようになります。(GoogleMAPがよい例です)
次にJavaScript側ですが、JavaScriptをhtmlの中に書くときに必要だった以下の部分が不要になります。JavaScript側には純粋にプログラムだけ書くことができますからかなりすっきりします。
<script type="text/javascript">
</script>
これでプログラムに変更がある場合はJavaScript側だけ、デザインに変更がある場合はhtml側だけ変えればよいことになりました。
でもまだhtml部分には onclick="Calc()" のようなイベントハンドラが残っています。イベントハンドラとは、マウスでクリックしたりキーを入力したりといったユーザーの動作を感知し、JavaScript を実行するものです。イベントハンドラはhtmlタグの中に書くことになっていますのでhtml側に残ることになります。
＊イベントハンドラはJavaScriptの中で書くことも可能です。この方法については後々書きたいと思います。
