主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: 一つ上のストップウォッチスクリプト

                
tags: JavaScript
まず完成物がどんなものか
demo

 JavaScriptではストップウォッチを書くのが一つの通過儀礼のようなもの(学校の課題で出されるような類のもの)らしい。まだ書いたことがなかったので書いてみることにした。

 スクリプトというのは動いてなんぼ。それでもってバグを内包してなくてなんぼ。その先はというと、あとでそのスクリプトにさわりたいときのために可読性があってなんぼということになる。で、JavaScriptには可読性を上げるための一手段としてオブジェクト指向という特徴がある。ストップウォッチをJavaScriptで表示するスクリプトはググれば簡単に出てくるが、手っ取り早く手続きを関数にならべて書いたものが多く、オブジェクトを利用したスクリプトはあまり見つからなかった。ここではJavaScript初級者を脱するために、オブジェクトを利用したスクリプトにする。

 ストップウォッチは主な機能として、
・計測スタート
・現在の経過時間の確認
・計測終了
の3つがあって、とりあえずこれらが実行できればいい。これら3つの機能をメソッドとして備える、一つのstopWatchというオブジェクトを作ることにする。
var stopWatch = (function()
{
var obj = {},
start = null,
now = null;

obj.start = function()
{
start = Date.now();
};

obj.stop = function()
{
start = null;
};

obj.getCurrentTimeStr = function()
{
var str = null;
if (start)
{
now = Date.now();
var diff = (now - start) / 1000;
str = "" + Math.floor(diff / 60) + ":" + Math.floor(100 * (diff % 60.0)) / 100;
}
return str;
};

return obj;
})();

これでオブジェクトstopWatchができた。このオブジェクトに対して与えられる命令は、
・計測スタート"stopWatch.start()"
・経過時間の取得"stopWatch.getCurrentTimeStr()"
・計測スタート"stopWatch.stop()"
以上の3つであり、このひとまとまりになっている部分をコピペすれば、ストップウォッチ機能をどこでも実行できる。ストップウォッチを実行したくなったとき、どの関数とどの変数がストップウォッチの機能を達成しているかと細かいことを考えずに、ただstopWatchオブジェクトに開始か計測か終了の命令を下せばいいし、移植するときもこのstopWatchオブジェクトだけを移植すればいい。

 stopWatchオブジェクトが書けたら、あとはこれが持つ機能とユーザーからの入力イベントを結びつけるだけだ。グローバル変数として使われるのはオブジェクトstopWatchだけ。グローバル変数の使用はほかのスクリプトを併用する場合を考えて、可能な限り減らしておきたい。

改めて完成物
demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>
<body>
<div id="display">0:00</div>
<button id="start">start</button><button id="stop">stop</button><button id="lap">lap</button>
<div id="laps"></div>
<script>
var stopWatch = (function()
{
var obj = {},
start = null,
now = null;

obj.start = function()
{
start = Date.now();
};

obj.stop = function()
{
start = null;
};

obj.getCurrentTimeStr = function()
{
var str = null;
if (start)
{
now = Date.now();
var diff = (now - start) / 1000;
str = "" + Math.floor(diff / 60) + ":" + Math.floor(100 * (diff % 60.0)) / 100;
}
return str;
};

return obj;
})();


setInterval(function(){var timeStr = stopWatch.getCurrentTimeStr();
if (timeStr)
{
$("#display").text(timeStr);
}
else $("#display").text("0:00");
}, 10);

$("#start").click(stopWatch.start);

$("#stop").click(function(){stopWatch.stop();
$("#laps").text("");
});

$("#lap").click(function(){var timeStr = stopWatch.getCurrentTimeStr();
if (timeStr)
{
$("#laps").prepend(timeStr + "<br>");
}
});

</script>
</body>
</html>


 なぜグローバル変数の使用を避けたいのか。
 JavaScriptというのは名前空間の管理の仕方が厄介な言語とされる。たとえばC#では、書いているコードの名前空間を宣言することで、そのなかに書いた変数はほかの名前空間で宣言された同名の変数と干渉を避けられる。Pythonでもスクリプト名がprefixとなり、そのスクリプト内で宣言された変数と、別のスクリプトで宣言された同一名の変数が干渉することは避けられる。一方でJavaScriptはグローバル変数を使うと、同じページ内の別の箇所で同一名のグローバル変数があった場合に干渉する。その干渉を避けるためにグローバル変数の使用は極力避けるべきであって、そのためにオブジェクトを使うのがJavaScriptだ。初級を脱するためには少なくとも、このオブジェクトを使ってグローバル変数は使わないでスクリプトを書けるようになる必要がある。
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。