ストップウォッチを作ってみた

ここ数日JavaScriptで作る「簡単おみくじ」 (全3回)とJavaScriptで作る「あなたの誕生日診断」 (全5回)を繰り返し、書いては消して書いては消してを繰り返していたら、いつの間にか2つのプログラムの作り方を暗記していた。完成に必要な部品がわかるようになったのは凄く嬉しい。何も見ないで作っていく作業に、少しだけプログラマー気分を味わうことができました。さて、今日はJavaScriptで作るストップウォッチ (全7回)を勉強していきます。

ストップウォッチの基本

setTimeout(function () {
	実行したい関数名();
}, 秒数);

ストップウォッチでinnerHTMLを繰り返し書き換えるために使うらしい。カウントアップしているような演出はこのsetTimeoutがその都度動いてくれるためということを知って感動。そしてclearTimeoutをstopに書くことでタイマーを止める演出が可能になる。これまた感動。そしてreset()の中身はvar startTimerの中身をundefined書いて空にしたうえでinnerHTMLで0.00に戻す。これだけでストップウォッチが作れるようになったのが嬉しくて、何度も書いては消して書いては消してを繰り返した。現在の日付ミリ秒を取得するのに(new Date()).getTime();と短縮して書けることも覚えることができた。

機能の追加

if文の登場。「もし～なら」という条件を与えたいときに便利な機能らしい。ここでは「もしストップボタンを押したなら、再スタートはストップボタンを押した時間から」というような条件文を書くために使用。中身はstartTime + (new Date()).getTime() - stopTime;とStart!ボタンを押した時刻と現在の最新時刻を足して、そこからStop!ボタンを押した時刻を引いてやることで実現。数字に弱いせいか、ここの計算で少し混乱しました。

ストップウォッチらしからぬ挙動を修正

ここからif文がガンガン出てくる。少し混乱したのがif (!running) return false;の部分。falseを消しても動くのでどう影響しているのかがわかりませんでした。!のビックリマークは「～じゃない」という否定の意味なのかな。running = falseを使ってタイマーが回っているかどうかの判定をさせることで、らしからぬ動きは修正された。うーん、難しい。

総評

.toFixed();やreturnのようなものが登場してきて段々と覚えることが増えてきたこともあって、すんなりとは理解はできなかった。とにかく毎日JavaScriptを触って慣れていこうと思います。