Javascript小僧：値渡しと参照渡し

タイムリミットまでの残り時間をリアルタイムで表示するJavascriptを作っていて、気が付いたことがありましたので報告です。

【画面構成】
こんな感じです。



タイムリミット（１）から現在時刻（２）を引いた残り時間（３）を表示します。

【アルゴリズム】
※以下のJavascriptのコードは説明のため、簡略化しています。そのままでは動きません。

500msec間隔で、残り時間を表示する関数を周期的に呼び出します。


関数「残り時間」（タイムリミット、場所）｛
 ・タイムリミットから現在時刻を引いて、残り時間を計算
 ・残り時間を指定された場所に表示
｝

Javascriptで関数を周期的に呼び出すには、setInterval()を使います。
関数「残り時間」には、２つの引数「タイムリミット、場所」があります。
引数のある関数をsetInterval()で周期呼び出しするには、一工夫必要です。

今回は、「無名関数内で改めて関数実行」という手法を使います。

http://www.gravity-works.jp/gravica/web/js/003755.html

こんな感じになります。

T = setInterval(function(){「残り時間」（タイムリミット、場所）},500);

これで、関数「残り時間」を500msec間隔で周期呼び出しできます。

タイムリミットはテキストボックスに入力された年、プルダウンメニューで選択された月、日、時、分、秒の値をDateオブジェクトを使って、タイムリミットの日時を表すオブジェクトに変換します。

new Date(年, 月, 日, 時, 分, 秒, 000)

最後の000はmsecの値です。
さて、タイムリミットの値を渡すには、「値渡し」と「参照渡し」の２種類があります。

【値渡し】
TL = new Date(年, 月, 日, 時, 分, 秒, 000);
T = setInterval(function(){「残り時間」（TL、場所）},500);

【参照渡し】
T = setInterval(function(){「残り時間」（new Date(年, 月, 日, 時, 分, 秒, 000)、場所）},500);

値渡しの場合、タイムリミットの値はsetInterval()を実行した瞬間の値のままです。
ブラウザ上でタイムリミットの年, 月, 日, 時, 分, 秒を変更しても、「残り時間」関数に渡されるタイムリミットの値は変わりません。

参照渡しの場合、タイムリミットの値ではなく、Dateオブジェクトに埋め込まれた年, 月, 日, 時, 分, 秒の格納場所が渡されます。例えば、プルダウンメニューで選択された月の値は、

document.getElementById("ID月").selectedIndex

で参照させます。参照渡しの場合、setInterval()を実行後に年, 月, 日, 時, 分, 秒を変更すると、即座に残り時間に新しいタイムリミットの値が反映されます。

福島には空が無い、という。。（チエコ舎弟）
だって。。

青空　THE BLUE HEARTS


放射線が舞っているのだもの。。

そういえば、情報セキュリティスペシャリスト試験用にJava/Javascript/Perlの本を買ったケド、ほとんど読まなかったなあ。。セキュア・プログラミングの知識が無くても、試験には受かります！　ただ、過去問のプログラミングねたは一通り読んだけど。さすがにC++の本は買わなかった。

タグ：JavaScript 情報セキュリティスペシャリスト 青空 THE BLUE HEARTS

コメント 1

nice! ありがとうございます。[__猫]
by cheese999 (2013-08-25 08:32)