プログラムは今すぐ理解できなくても大丈夫です。安心してください。基本的な部分は変わることがないので、何回も繰り返すうちに分かるようになります。
初めて見たものは難しく感じますが、見慣れると何となく簡単に思えてきます。全体的な流れがつかめれば、今の段階ではOKです。
■pref.html側
(1)文字コードを UTF-8 に設定している部分です。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
＊文字コードはファイルの保存時の文字コードと一致させます。
(2)外部ファイルに記述した JavaScript を読み込んでいる部分です。
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript" src="pref.js"></script>
(3)外部ファイルに記述したスタイルシートを読み込んでいる部分です。
<link href="pref.css" rel="stylesheet" type="text/css">
(4)div要素でグループ化したボタンを配置しています。
<div>
<input type="button" id="btnData" value="データ取得" />
<input type="button" id="btnClear" value="クリア" />
</div>
(5)HTMLの div 要素に id 属性を設定している部分です。
<div id="state"></div>
<div id="result"></div>
＊JavaScriptからはidやname属性を使って参照できます。
■pref.js側
(1)ページが読込まれた時に、独自で定義した init という関数を呼び出すための、イベントハンドラを設定しています。
onload = init;
＊JavaScriptの中でイベントハンドラを設定する場合は、関数名の後ろに()カッコが付かない点に注意してください。
(2)変数を宣言している部分です。
var state;
var result;
＊この変数の有効範囲はプログラム全体です。
(3)ボタンにイベントハンドラを設定している部分です。
$("btnData").onclick = prefDisp;
$("btnClear").onclick = clearDisp;
＊$()関数は getElementById() のショートカットで、prototype.js の機能です。
(4)各id名を持つ要素を見つけ出し、変数で参照できるようにしている部分です。
state = $('state');
result = $('result');
(5)処理開始時にメッセージを表示している部分です。
state.innerHTML = "処理中です・・・<br />\n";
処理時間が短い場合は一瞬しか表示されません。innerHTMLには文字列やHTMLタグを代入することができます。
(6)データを取得するファイルのURLを指定している部分です。
var url = "pref.xml";
今回はプログラムと同じディレクトリ内にあるので、ファイル名だけでOKです。場合によっては相対パスや、httpからはじまる絶対パスで指定することもあります。
(7)通信時に渡すパラメータを設定する変数です。今回はパラメータが不要なので空にしています。無くてもかまいませんが、後々使いますのでそのまま置いておいてください。
var paramList = "";
(8)実際に通信を行なっている部分です。
new Ajax.Request(url,
{
method: 'get',
onSuccess: getData,
onFailure: showErrMsg,
parameters: paramList
});
method 通信方法を指定します
onSuccess 成功時に呼び出す関数を指定します
onFailure 失敗時に呼び出す関数を指定します
parameters 必要ならパラメータを指定します
(9)成功時に呼び出される内部関数です。
function getData(data){
省略
}
getData() や showErrMsg() は『内部関数』になっています。{}カッコの対応をよく見るとprefDisp()の中にあることがわかります。
内部関数とは関数内に定義された関数のことです。その関数内だけからしか呼び出すことがないケースでよく使われます。親の関数内で宣言された変数は内部関数内でも使えるメリットがあります。
(10)通信で取得したデータからResponseという要素を取り出している部分です。
var response = data.responseXML.getElementsByTagName('Response');
＊getElementsByTagName の戻り値は配列なので、responseは配列になります。
Responseを取り出すイメージ
(11)responseからさらにItemという要素を取り出している部分です。
var item = response[0].getElementsByTagName('Item');
responseは配列なので、1つしかなくても添え字を指定する必要があります。添え字は 0 から始まります。itemも配列になります。
Itemを取り出すイメージ
(12)これからfor文内で使う変数を初期化しています。
var tmpHtml="";
この変数はfor文の外でも使うため、あらかじめ宣言が必要なのです。
(13)Item要素の数だけ処理を繰り返している部分です。
for(i = 0; i < item.length; i++){
省略
}
＊ i は 0 からItem要素の数だけ変化します。
(14)item から PREF_CD という要素を取り出している部分です。
var prefCd = item[i].getElementsByTagName('PREF_CD');
＊prefCdは配列になります。
PREF_CDを取り出すイメージ
(15)prefCdの値を取り出している部分です。
var prefCdValue = prefCd[0].firstChild.nodeValue;
開始タグと終了タグではさまれた部分も要素になるので、その最初の子要素(firstChild)の値(nodeValue)で取得できます。
この要素にはさらにHTMLタグが含まれることもあるので、最初の子要素という指定が必要です。
値を取り出すイメージ
PREF_NAMEでも同じようにイメージしてください。
(16)item から PREF_NAME という要素を取り出している部分です。
var prefName = item[i].getElementsByTagName('PREF_NAME');
＊prefNameは配列になります。
(17)prefNameの値を取り出している部分です。
var prefNameValue = prefName[0].firstChild.nodeValue;
(18)変数に値を連結している部分です。
tmpHtml += prefCdValue + " " + prefNameValue + "<br />\n";
for文が繰り返される分だけ、tmpHtmlの文字列は長くなります。
(19)変数resultで参照している div要素に、結果を出力しています。
result.innerHTML = tmpHtml;
innerHTML は動的にWebページを変更する時によく使われます。innerHTML には文字列やHTMLタグも代入できます。
(20)処理終了時にメッセージを表示している部分です。
state.innerHTML = "データを取得しました。<br />\n";
(21)失敗時に呼び出される内部関数です。
function showErrMsg(){
clearDisp();
state.innerHTML = "データを取得できませんでした。<br />\n";
}
(22)「クリア」ボタンをクリックした時に呼び出される関数です。
function clearDisp() {
state.innerHTML = "";
result.innerHTML = "";
}
■pref.css側
(1)stateというid属性を付けたdiv要素に、スタイルを設定しています。
#state {
font-size:16px;
color:#0000cc;
margin-top:10px;
margin-bottom:10px;
}
(2)resultというid属性を付けたdiv要素に、スタイルを設定しています。
#result {
font-size:14px;
color:#000000;
}
＊スタイルシートでは、id属性の場合は先頭に「#」シャープを付けて表します。
■pref.xml
(1)取得するデータをXML形式で記述しています。XMLは基本的に開始タグと終了タグがセットになっています。
XML(エックスエムエル：Extensible Markup Language)
<?xml version="1.0" encoding="UTF-8" ?>
<Response>
<Items>
<Item>
<PREF_CD>1</PREF_CD>
<PREF_NAME>北海道</PREF_NAME>
</Item>
途中省略
</Items>
</Response>
このようにXML形式にすることで、様々なデータを利用できるようになります。
