【1】テキストエディタで以下のように入力し、ファイル名は「sample010.html」で適当な場所に保存してください。コピーして貼り付けてもかまいません。
sample010.html
<html>
<head>
<script type="text/javascript" src="sample010.js"></script>
<title>sample010</title>
</head>
<body>
都道府県マスター
<form name="form1">
PREF_CD:<input type="text" name="txtPrefCd" id="txtPrefCd">
PREF_NAME:<input type="text" name="txtPrefName" id="txtPrefName">
<input type="button" name="btnInsert" id="btnInsert" value="追加">
<input type="button" name="btnUpdate" id="btnUpdate" value="更新">
<input type="button" name="btnDelete" id="btnDelete" value="削除">
</form>
<div id="disp">ここにデータを表示</div>
</body>
</html>
【2】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。「情報バー」や「セキュリティ保護...」のメッセージが出るのは、sample010.jsを指定しているためですので「OK」を押してください。
【3】 sample010.html が表示されました。
とてもシンプルな画面ですね。
【解説】
sample010.htmlはデザインとコントロール（テキストボックス、ボタンなどの部品）に名前（id、name）を付けているだけでプログラムはまったく書いていません。
部品に名前を付けておくとプログラム内で利用できるようになります。id、nameでは少し扱いが異なりますが同じ名前でかまいません。nameのほうはコントロールを配列として扱う時に便利です。
プログラムは次回のsample010.jsにまとめて書きます。そうすることでデザインとプログラムを分離できます。
