剰余計算を使用すると、if〜文が不要になりスクリプトソースが見やすくなる場合があります。

ここでは例を紹介しますね。

蛍の光がゆっくりと点滅するように画像の透明度を0から100まで段階的に増加させ、100に達すると今度は0になるまで段階的に減少させる。この繰り返し処理により画像がゆっくりと現れては消えるひな形が作れそうですね。

具体的には [0=>5=>10=>15=>・・・・=>95=>100=>95=>90=>・・・5=>0] -this repeat- のようにしたいのです。

通常はif〜文を使用するでしょう。

増加状態にある場合、(例えばflag==1の時):：5を加算する。
   加算した値が100に達したら減少状態にする（例えばflag=-1に変更）。
減少状態にある場合、（例えばflag==-1の時）：5を減算する。
   減算した値が0に達したら増加状態にする（例えばflag=1に変更）。

var flag=1
var alp=0
function alpChange(){
if(flag==1){
alp=alp+5
   if(alp==100)flag=-1
}else{
alp=alp-5
   if(alp==0)flag=1
}
setTimeout("alpChange()",100)
}

あるいは

var flag=1
var alp=0
function alpChange(){
alp=alp+5*flag
   if(alp==100)flag=-1
   if(alp==0)flag=1
setTimeout("alpChange()",100)
}

こんな感じでしょう。

これを剰余と絶対値を求めるメソッドMath.abs()を使用すると

var alp=0
var alps=100
function alpChange(){
alps=(alps+5)%200
alp=Math.abs(100-alps)
setTimeout("alpChange()",100)
}

こんな感じで処理する行数が減りますね。

次の表で数値を確認してください。

alps=(alps+7)%200の場合

下のalps=(alps+7)%200の場合は、少しずつずれが生じてきますが、それでもMath.abs(100-alps)の値は0から上昇し、100を超えない値まで最上昇した後に、下降し始めますよね。一定の増減値で特定の範囲を上昇・下降させるにはうってつけだと思いませんか？

ここではif〜文を使用してもそれほど変わらないじゃないかと思われますが、場合によってはとても便利なので、覚えておいて損はしません。

サンプル,、蛍点滅

DirectX系のフィルタ(IE5.5以降)では、CSSでは、style="filter:progid:DXImageTransform.Microsoft.Alpha(属性1=値1,…)"のように記述しますが、スクリプトでアクセスする時にはobject.filters["DXImageTransform.Microsoft.Alpha"].プロパティ=設定値のようになります。progid:（プログラム ID---プログラム上の識別子）は不要ですので、注意してください。

上記サンプルではhObj[n].filters["DXImageTransform.Microsoft.alpha"].opacity=halp[n]のように記述しています。filtersコレクションの内、"DXImageTransform.Microsoft.alpha"という文字列でサブオブジェクトを指定して、そのオブジェクトのopacityプロパティを設定しています。

上記サンプルで点滅を繰り返している関数は
function alpChange(n){
alps[n]=(alps[n]+5)%200
halp[n]=Math.abs(100-alps[n])
hObj[n].filters["DXImageTransform.Microsoft.alpha"].opacity=halp[n]
setTimeout("alpChange("+n+")",ha[n]*10)
}
たったこれだけなんですよ。

setTimeout("alpChange("+i+");hObj["+i+"].style.visibility='visible'",(i-1)*1000)の部分はスクリプト部分に二つのステートメントを;で区切って書いています。
(i-1)*1000は時間差で動かすために、実行時間を計算しています。iの値が1ずつ増えるのを利用して1秒すつずれを作っています。

 次回から少し趣を変えて、HTML+TIMEのエレメントを動作させることにふれていきたいと思います。

今回の講座は短かったので、予備学習としてHTML+TIMEエレメントもDHTMLとして扱うことができることにふれておきます。

HTMLのエレメント（<BR>や<!-- -->コメントも）は、勿論allやchildrenコレクションに含まれますが、HTML+TIMEやVMLのエレメントはどうでしょう？HTML+TIMEですと、<t:〜〜 />或いは<t:〜〜>・・・</t:〜〜>のようなタグで構成されますね。またVMLでも<v:〜〜 />や<v:〜〜>・・・</v:〜〜>で構成されます。HTML+TIMEやVMLの場合はサブエレメントも持つものがあります。

<t:par>
   <t:〜〜 />
</t:par>

のように<t:par>〜</t:par>や<t:seq>〜</t:seq>などはサブエレメントを持つことができます。

<v:shape〜〜>
   <v:fill〜〜 />
</v:shape>

や

<v:group>
   <v:〜〜 />
   <v:〜〜 />
</v:group>

もメインエレメントとサブエレメントで構成されていますね。

これらも同じようにコレクションに含まれる（エレメントとして）のでしょうか？

答えは「Yes」です。

allコレクションでコレクション要素を見た場合、きちんと含まれていることがわかります。またtagNameプロパティでタグ名を表示させると、t:やv:は名前に含まれません。
このt:やv:はbehavior（振る舞い）を実装するのに必要な接頭語です。この接頭語はHTMLのXMLNS属性を使用するように設定されます。あくまでもタグ名は:の後ろの部分です。

<t:animate />・・・animateがタグ名。
<t:set />・・・setがタグ名。
<v:fill />・・・fillがタグ名。
<v:stroke />・・・strokeがタグ名。

下記の例では青い<t:par>〜〜</t:par>はサブエレメントとして<t:animate />や<t:animatemotion />を持っています。従ってallコレクションとchildrenコレクションに差が生じます。

<div id="div1">
<v:image id="vimage0" style="position:absolute; rotation:0; filter:alpha(opacity=100); left:0px; top:0px; width:26px; height:25px; z-index:80; visibility:hidden" />
<script>
vimage0.src=imagf2.src
</script>
<t:set attributeName="visibility" targetElement="vimage0" to="visible" begin="0" fill="hold" />
<t:par id="roll0" repeatcount="indefinite">
   <t:animate attributeName="rotation" from="0" targetElement="vimage0" to="0" autoReverse="false" begin="0" dur="5" fill="hold" />
   <t:animatemotion targetelement="vimage0" begin="0" dur="5" path="m 0 0 c 84 63 254 15 290 172" fill="hold" />
   <t:animate attributeName="rotation" from="0" targetElement="vimage0" to="0" autoReverse="false" begin="5" dur="5" fill="hold" />
   <t:animatemotion targetelement="vimage0" begin="5" dur="5" path="m 0 0 c 84 63 254 15 290 172" fill="hold" />
</t:par>
</div>

サンプル・・・div1に含まれるエレメントコレクション（allとchildren）のタグ名を表示させます。

このサンプルで興味深いのは

のようにスクリプトで参照したIMGのsrcがimagedataエレメントになっていること、そのエレメントはスクリプトエレメントの前であることです。僕にはその理由はわかりませんが、そのような仕組みなんだろうなと思っています。

尚、スクリプトを外すとimagedataエレメントもなくなります。サンプル

HTML+TIMEにエレメントがあるわけですから、プロパティやメソッド、特有のイベントハンドラやイベント、コレクションといったメンバが用意されています。

例えば<t:animate />エレメントのbeginプロパティやdurプロパティ、begin()メソッドやbeginElement()メソッド、onbeginイベントやonendイベント、timeAllやtimeChildrenコレクションなどはその一例です。

HTML+TIME2の定義済みタグ(エレメント）は以下の通りです。赤はタイムコンテナと呼ばれるサブエレメントを持つことができる包括エレメントです。

尚、HTML+TIMEのMSDN情報は日本語がほとんど見当たりません。詳細を知るには英語が理解できないと無理かも。翻訳ソフトなどあれば便利かと思います。エキサイト翻訳など翻訳サイトがありますが、MSDNのWEBページ内容を翻訳できないことが多々あります。僕もATRASV9.0という翻訳ソフトのお世話になっています。