第11回の実施例

第11回の実施例と解説

setTimeoutの使用例

body のonLoad 属性で関数を呼び出す。
- 呼び出すタイミングは後述のようにいろいろある。
関数 xx の中で（普通は最後に） setTimeoutを呼び、一定時間後にその関数 xx を呼び出させる。
- と、一定時間間隔で xx が実行されることになる。

<!doctype html>
<!-- やたらダイアログボックスが出てくるので うざいページ -->
<script>
function xx() {
	alert("..")
	setTimeout(xx,2000)	
}
</script>
<body onLoad=xx>

setInterval の使用例

関数（ここでは dsp）を定義して、それを一定時間間隔で呼び出す。
その setInterval を呼ぶ関数も別途（start）定義して、前節と同様に onLoad属性の値とした。

<!doctype html>
<script>
function dsp() {
	// 時計を表示。 中身はこれから作ろう。
}
function start() {
	setInterval(dsp,1000)
}
</script>
<body onload=start>

少し変更してみよう。

時計を表示すべき要素（ここではDIVを使う）を置く
onLoadを使わずに起動関数をScriptタグの末尾に直接書いても（微妙なタイミングのプログラムでなければ）大丈夫。

<!doctype html>
<div></div><!--ここに時計を表示-->
<script>
function dsp() {
	// 時計を表示
}

function start() {
	setInterval(dsp,1000);
}
start();
</script>

実際に動く例として

さらに変更を加えてみよう。

DIVに id を付与する。
- と、getElementByIdメソッドで要素を単独で取得できるので、
- プログラムの記述がややシンプルになる
- 逆に言えば、複数の要素（の配列）を取得するメソッドを使うと、
  - 配列の添え字を付加して要素を１つ選び出す
  - 繰り返しの構文で各要素にアクセス
のいずれかが必要になる。
ここではその要素の textContent に表示すべき文字列を代入している。
スクリプトの末尾で setInterval を直接呼出してもいい。
- 前節で start 関数を定義したのは、onLoad属性に関数名を渡すためだった（が、この呼び方だと特に必要性は乏しい）

<!doctype html>
<div id="clock"></div><!--ここに時計を表示-->
<script>
function dsp() {
	document.getElementById("clock").textContent=	
	new Date().toLocaleString()
}
setInterval("dsp()",1000)
</script>

以下は極端な例：
- 関数 dsp を定義するのをやめて、
- setIntervalの第一引数に、実行すべきプログラムをベタ書き。
- ただし、内側または外側のクォート文字を（これまで使っていたダブルクォートから）シングルクォートに変えて、
  クォート文字の対応関係の混乱を防いでいる。
これでもいちおう動作はする。
- が、やたら読みにくくなるので避けたほうが無難だろう。

<!doctype html>
<div id="clock"></div><!--ここに時計を表示-->
<script>
setInterval("document.getElementById('clock').textContent=
	new Date().toLocaleString()",1000)
</script>