DHTML SAMPLES

setExpressionの注意点

円運動をsetExpressionで実現する例。仕組みは、
(1)div1のXY座標をsetExpression()で設定する
(2)setinterval()メソッドで一定時間ごとにupdate()を呼び出す
(3)update()では、変数timeの値を増加させ、document.recalc(true)ですべてのダイナミックプロパティの値を更新する
となる。1つの注意点は、setInterval()の引数2番目には変数を使えなかったこと。ソースのコメント部分の4行を、その下の2行に代わりに有効にすると、スクリプトは動かない。どうやら、引数2番目には変数や配列は使えないようだ。

以下、ヘッダ部分

<SCRIPT LANGUAGE="JavaScript">

var startX = 300
var startY = 300
var radiusX = 100
var radiusY = 100
var freq = 0.05

var time = 0
function update()	{
	time = time + freq
	document.recalc(true)
	div2.innerText = time	//デバッグ用にtimeの数値を表示しているだけ
}

function initCircle()	{
//	var pointX = startX + Math.cos(time)*radiusX
//	var pointY = startY + Math.sin(time)*radiusY
//	div1.style.setExpression("pixelLeft",pointX)
//	div1.style.setExpression("pixelTop",pointY)

	↑4行を有効にして↓2行を無効にするとスクリプトは動かない

	div1.style.setExpression("pixelLeft","startX + Math.cos(time)*radiusX")
	div1.style.setExpression("pixelTop","startY + Math.sin(time)*radiusY")

	setInterval("update()",100)
}

</SCRIPT>

★