TOP＞ HTML+TIME＞ JavaScriptとの融合
HTML+TIME with JavaScript  
　　　　
.
TIME指定　JavaScript指定　スタイルシート指定
いままで、HTML+TIMEとJavaScript を当サイトでは分けて紹介をしてきました。と、いうのも管理人である私がJavaScriptに関しての知識が浅く、また1からオリジナルのものが組めなかったということもあったわけです。当サイトにおいて、他サイトのパクリを紹介しているものは一切ありません。ところが、皆さんご存知のように、たいしたスクリプトは全くありませんが、JavaScriptのサンプル数はもはやサイトのメインコンテンツであるHTML+TIMEのサンプル数を追い越すばかりの勢いにまでなっています。それに、最近はJavaScriptとTIMEを融合したものもいくつかサンプルにありますので皆さんのわかりのことでしょう。と、前置きが長くなりましたが、この先はどちらかというと自分でJavaScriptを組める方で、TIMEのことをよく知らないという人向けになりますので、ご了承下さい。
まず、TIMEに置ける、IDの意味を理解していなくてはなりません。
例えば、
<DIV style="width:200;height:20;position:relative;top:0;left:0;background-color:black;color:white;">
加速度制御
<t:animate id="t1" attributeName="left" begin="bt1.click" dur="2" from="0" to="150" autoReverse="false" fill="hold" accelerate="0.25" />
</DIV>
<INPUT type="button" id="bt1" value="開始">

このようなTIMEのソースがあるとします。動作は下記のようになります。
加速度制御


この場合、
begin="bt1.click" が動作開始の指定であり、そして
<INPUT type="button" id="bt1" value="開始">
のボタンのIDを bt1 としているため、このボタンをクリックすると動作が始まるわけですが、この begin  指定とボタンのタグを下記のように変えてもそっくり同じ動作をさせることができます。

<DIV style="width:200;height:20;position:relative;top:0;left:0;background-color:black;color:white;">
加速度制御
<t:animate id="t1" attributeName="left" begin="indefinite" dur="2" from="0" to="150" autoReverse="false" fill="hold" accelerate="0.25" />
</DIV>
<INPUT type="button" onclick="t1.beginElement()" value="開始">

そうです。begin の指定を完全に JavaScript 化（？）させることができるわけです。indefinite は直訳すると「不明確である」といった感じの意味になるようですが、そして、動作指定のタグについているID、つまり<t:animate>タグにつけられているID t1 を onclick 時にbeginElement() せよ。という書き方でTIMEの制御を JavaScript で行なうことができるわけです。このID名.beginElement() というのはもちろん関数内でも使用可能です。
つまり、
<html>
<head>
<title>TIME+JavaScript</title>
<SCRIPT language="JavaScript">
<!--
function timeMsg(){
      alert('動かしますよ。');
       t1.beginElement();
}
-->
</SCRIPT>
</head>
<body>
<DIV style="width:200;height:20;position:relative;top:0;left:0;background-color:black;color:white;">
加速度制御
<t:animate id="t1" attributeName="left" begin="indefinite" dur="2" from="0" to="150" autoReverse="false" fill="hold" accelerate="0.25" />
</DIV>
<input type="button" onclick="timeMsg()" value="動作開始">
</body>
</html>
とすることも可能であるということです。実際の動作は下のようになります。


加速度制御



さぁ、こうなってくると、JavaScript関連サイトの運営者さんが黙っていなさそうですが、どうかこれからも当サイトのことをよろしくお願いします（笑）。
また、このbeginElement() の他に、

endElement()・・・・・終了
pauseElement()・・・・・ポーズ
resumeElement()・・・・・ポーズの続き
resetElement()・・・・・リセット

というものがあります。当サイトも徐々にこれらを取り入れ、より興味深い表現ができるようなTIME+JavaScript を作成していきたいと思っています。