■index.html側
(1)flash.js を読み込む部分を追加しました。
<script type="text/javascript" src="flash.js"></script>
(2)ニュース速報を表示するための div要素を追加しました。
<div id="result2"></div>
■index.js側
(1)変数を宣言している部分に新しい変数を追加しました。
var result2;
＊この変数の有効範囲はプログラム全体です。
(2)ボタンをクリックした時のイベントハンドラの設定を変更しました。
$("btnData").onclick = newkwDisp;
↓
$("btnData").onclick = function (){newkwDisp();flashDisp();}
呼び出す関数を無名関数にし、その中で複数の関数を呼び出すようにしました。関数内では関数名の後に()カッコが付くことに注意してください。
これは以下のように書くこともできます。無名関数は呼び出したその場ですぐに定義していることがわかります。
$("btnData").onclick = function (){
newkwDisp();
flashDisp();
}
中に書くプログラムが多い場合は、この書き方のほうがわかりやすいです。
(3)変数で参照できるようにしている部分に1行追加しました。
result2 = $('result2');
＊$()関数は getElementById() のショートカットで、prototype.js の機能です。
(4)「クリア」ボタンをクリックした時に呼び出される関数に1行追加しました。
result2.innerHTML = "";
■newkw.js側
変更はありません。
■flash.js側
(1)関数名を flashDisp に変更しました。
function flashDisp() {
省略
}
(2)中継プログラムのURLを変更しました。
var url = "flash.php";
(3)div要素に結果を出力している部分を変更しました。
result2.innerHTML = tmpHtml;
■index.css側
(1)result2要素のCSSを指定しました。
#result, #result2 {
font-size:14px;
color:#000000;
}
id名を「,」カンマを用いて区切ると、複数要素の属性を一度に指定することができます。
■newkw.php側
変更はありません。
■flash.php側
flash.phpは中継プログラム(スクリプト)です。
(1)取得するURLを変更しました。
$url = "http://mainichi.jp/rss/etc/flash.rss";
