説明
● フォームに値をセットする
このサンプルは Step.3 で説明した日付を表示するスクリプトをほんの少し変更しただけです。
今回はフォームに時間を表示しました。このようにフォームは入力するだけでなく出力にも使えるわけです。
日付と時間を表示する関数名を myFunc() という名前で定義して、メインはそれを呼ぶだけのスクリプトになっています。
（もう少し、それらしい名前をつけてあげましょう (^^; ）
Step.3 から変わったものとして、日付と時間を表示していた、
document.write(myMess);
の行が、
document.myForm.myFormDate.value = myMess1;
document.myForm.myFormTime.value = myMess2;
の、２行に変わっています。
この２行は、それぞれのフォームに日付と時間をセットしています。セットするだけでフォームに表示されます。document.write() の代わりですね。
= の左にある長い変数らしきものは、
<form name="myForm">
<input type="text" size="28" name="myFormDate">
<input type="text" size="15" name="myFormTime">
</form>
を見れば、なんとなくわかるでしょうか？
document.
<FORMのNAME属性値>.
<INPUTのNAME属性値>.value
です。
フォームへのデータセットの方法はいろいろありますが、今回はこの方法でやります。
年月日と曜日を
document.myForm.myFormDate.value
時分秒を
document.myForm.myFormTime.value
にセットしています。
● setInterval
setInterval( "myFunc()" , 1000 );
これが、今回のメインです。
setInterval()は、指定の関数を 指定の時間の周期に動かすというスグレモノです。
括弧
() の中にそれらを指定します。この括弧の中に渡す変数(値)のことを「
引数」とか「
パラメータ」と呼びます。
setInterval( "関数名" , 起動するミリ秒 );
という書式なので、
setInterval( "myFunc()" , 1000 );
となっております。
※ 1秒は 1000ミリ秒です。1分は 60000ミリ秒です (^^;
これで、１秒周期に myFunc() が実行されるので１秒単位でフォームに現在時間が表示されるわけです。
※この場合、1秒経過するまでsetIntervalで処理が止まっているわけではありません。myFunc()を1秒周期で呼ぶタスクがバックグラウンドで動きます。なので setInterval()の次になにか処理の記述があれば、1秒待つことなく、その処理は実行されます。
このスクリプトをフォームを定義した後に実行していることに注目してください。
<form name="myForm">いらっしゃいませ、ただいまは
<input type="text" size="28" name="myFormDate">
<input type="text" size="15" name="myFormTime"> です
</form>
<script type="text/javascript"><!--
setInterval("myFunc()",1000);
// --></script>
日付と時間を表示する関数 myFunc() は、日付と時間を取得して指定のフォームにセットするようにしています。
つまり、このフォームがまだページに読み込まれて表示される前に myFunc() を実行されてしまったら、セット先のフォームを見つけることが出来ずに エラーが発生してしまうわけなのです。