どのようにしたら、ウェブページ閲覧者がスピードを設定できるか？ Control the speed of Javascript animation --　Beaverland Net Art -- For Internet Artists

どのようにしたら、
ウェブページ閲覧者が
スピードを設定できるか？

by Akira Kato

October 9, 2003

ジャバスクリプト・コードは次のようになります。

var delayTime=3000

function goWink() {
document.head.src="../images/pinup35b.gif"
myTimerID=setTimeout("restore()",delayTime)
}

function restore() {
document.head.src="../images/spacer.gif"
myTimerID=setTimeout("goWink()",delayTime)
}

//----->
</script>

<input type=button value="Faster "
onClick="if (delayTime > 10) {delayTime -= 10;
document.thisForm.delayNumber.value = delayTime}"
onDblClick="if (delayTime > 100) {delayTime -= 100;
document.thisForm.delayNumber.value = delayTime}">

</form>

このページは次に示すページの続きです。もし直接、このページへジャンプした場合には、次のリンクをクリックすると、前のページを見ることができます。

『スタート・ストップ　メカニズム』新しいウィンドーが開きます。このページへ戻るには、そのウィンドーを閉じてください。

大きく違う点は、このページでは、さらに２つのボタンが追加され合計４つのボタンが付いていることです。また、ウィンクとウィンクの間隔をミリセカンドで表示しています。

それぞれのボタン（あるいは　）をクリックすることにより、この数字（初期設定３０００）を減らしたり（スピードアップ）、または増やしたり（スピードダウン）することができます。

クリックすると１０ずつ変化します。ダブル・クリックすると１００ずつ変化します。

上記のことを実行するために、ジャバスクリプトを使って書いた部分が上のコーディング・シートの白いバックグラウンド・カラーで示した部分です。

それ以外のコードは、前のページで使っていたものを、そのまま引き継いで使っています。

このページでは、ウィンクとウィンクの間隔を変える必要があるので、delayTime　という変数を使っています。前のページでは直接、３０００（ミリセカンド、つまり３秒）という定数を書き込んでいましたが、このページでは、その代わりに上の変数を書き込んであります。　

最初の　INPUT タグ

これはスピード・メーターの部分です。つまり、ウィンクとウィンクの間隔が、ミリセカンドで表示されます。この表示だけに使われる“窓”にdelayNumberという名前を与えています。

delayTimeは、間隔を表す変数です。この２つは非常に良く似ていますが、全く性質の異なるものですので、混同しないように注意してください。

初期値を表示するために、valueアトリビュートを使って　３０００　をその初期値として与えています。

sizeアトリビュートを使って５桁の数字であることを指定しています。

２番目の　INPUT タグ

この　INPUT タグで上のボタンの機能を設定しています。　onClick はイベント・ハンドラーと呼ばれるものです。

onClick="クリックすると実行するステートメントをここに書く"

この場合、クリックすると次の　IF ステートメントを実行します。

if (delayTime > 10) {delayTime -= 10;
document.thisForm.delayNumber.value = delayTime}

delayTimeが１０ミリセカンドより大きい場合には次の２つのステートメントを実行します。もし、同じか小さい場合は、何もしません。

delayTime -= 10

上のステートメントは下に示すステートメントと同じことを実行します。

delayTime = delayTime　-　10

つまり、delayTime　から１０を引いた数値を　delayTime　に保存し直します。

delayTime は上のコーディング・シートの中で、次に示すようなやり方で、３０００という初期値が与えられています。

var delayTime=3000

var はvariable の略で、「変数」という意味です。

document.thisForm.delayNumber.value = delayTime

上の　複合IFステートメントの２番目のステートメントは、簡単に言えば、delayTimeで表される数値をテキストに変換して、最初の　INPUT タグで設定された“窓”に表示しなさいという命令です。

ジャバスクリプトでは、“窓”に表示されるストリング・バリュー（value）を、このように厳密に指定しているわけです。左側の４つの単語は、専門用語では、「オブジェクト」と呼ばれるものです。オブジェクト・プログラミングというような時に使われるオブジェクトが、この「オブジェクト」のことです。つまり、documentというのは、ドキュメント・オブジェクトで、この場合には、このページを意味しています。

thisFormと言うのはフォーム・オブジェクトのことです。つまり、FORMタグで設定した、上のコーディング・シートで言うと、薄い緑色で囲まれた部分です。この部分（オブジェクト）を次のように nameアトリビュートを使って　thisForm　と名づけています。

delayNumberは「テキスト窓」オブジェクトに与えられた名前です。

valueは、この「テキスト窓」オブジェクトに付随するテキスト・ストリングを保存する場所（メモリー）を意味します。

ドットは所有関係、もしくは所属関係を表しています。ドットの左側が所有しているもの、右側が所有されるもの、あるいは左側のオブジェクトに所属しているものと言う意味です。

「テキスト窓」オブジェクトを使う場合、注意しなければならいのは、フォーム・オブジェクトと一緒に使わなければなりません。そうでないとエラーになって、全く動きません。つまり、次のような使い方は出来ません。
document.delayNumber.value = delayTime

onDblClick イベント・ハンドラー

ボタンをダブルクリックすると１０ではなく１００だけ減算されます。これだけが違うことで、それ以外のことは、クリックする場合と全く変わりません。

３番目の　INPUT タグ

２番目の　INPUT タグとほぼ同様です。この場合には、引き算でなく足し算になっているのが違っているだけです。引き算の場合と違って、マイナスになることがないので　IFステートメントは使われていません。従って、上限を設けていません。上限を設ける場合にはIFステートメントを付け足す必要があります。

関連リンク