JavaScript setIntervalの使い方を理解しましょう。
次のプログラムでは、カウンタ変数cntを用意して、cntが0から3の間、idがtargetである要素のinnterHtmlを1秒毎に更新する処理をしています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>setInterval sample 1</title>
</head>
<body>
<div id="target" style="position:absolute;">target</div>
<script>
var INTERVAL=1000;
var COUNT_MAX=3;
var cnt=0;
function callback(value) {
if (cnt > COUNT_MAX) {
clearInterval(id);
return;
}
var v = value + '_' + cnt;
document.getElementById('target').innerHTML = v;
cnt++;
}
var id=setInterval("callback('value');", INTERVAL);
</script>
</body>
</html>
jQueryを使えば、要素の取得はもっと簡単にできます。次の例では、http://code.jquery.com/jquery-1.7.1.js からjQueryスクリプトを読み込んでいます。また、HTMLの要素を変更するのに「$(‘#target’).html(v);」としています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>setInterval sample 2</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
</head>
<body>
<div id="target" style="position:absolute;">target</div>
<script>
var INTERVAL=1000;
var COUNT_MAX=3;
var cnt=0;
function callback(value) {
if (cnt > COUNT_MAX) {
clearInterval(id);
return;
}
var v = value + '_' + cnt;
$('#target').html(v);
cnt++;
}
var id=setInterval("callback('value');", INTERVAL);
</script>
</body>
</html>
JavaScriptについては、下記の書籍の参考になるでしょう。
プログラミング言語一般については、下記が参考になるでしょう。
- クラスベースのオブジェクト指向プログラミング言語の基礎を学ぶには … 改訂版 基礎Java(CD-ROM付) (IMPRESS KISO SERIES)
- クラスベースのオブジェクト指向プログラミング言語を学ぶには … プログラミング言語Java (The Java Series)
- 関数型プログラミング言語を学ぶには … Scalaスケーラブルプログラミング第2版
- プログラミング言語の理論を学には … プログラミング言語の基礎概念 (ライブラリ情報学コア・テキスト)