ドットインストール「JavaScriptでストップウォッチを作ろう」をやった
https://dotinstall.com/lessons/stop_watch_js_v4
- buttonというHTML要素がある。
- JavaScriptは文と式からなる。文は「処理を実行するステップ」、式は「値を生成し、変数に代入できるもの」であり、評価値を返す。
- functionという語から始まるコードのうち、単に関数を宣言するのはfunction「文」、無名関数を変数に代入して関数リテラルをつくったりするのはfunction「式」。
参考：文と式 · JavaScript Primer #jsprimer
- JSコード全体を1つの関数として括り、即時実行する。これによって変数のスコープがこの関数内に限られ、ライブラリなど他所から呼び出したコードと変数名が競合することを避けることができる。これを即時関数という。
- function(){...}()と書くとfunction文として認識され、ブロックが終わった時点で文が区切られてしまう。
- (function(){...})()と書くとfunction式として認識され、途中で区切られず、即時関数として期待される挙動をしてくれる。
参考：即時関数(function(){ ... })()の別の書き方いろいろ: Architect Note
- setTimeoutは一定時間経過後に特定の処理を1回だけ行う。setIntervalは一定時間おきに特定の処理を繰り返す。
- 一定時間おきに特定の処理を繰り返したい場合、以下の2つの方法がある。
- setIntervalを利用する。この場合、処理開始時点から一定時間経過後に次の処理が開始されてしまうため、1つの処理がインターバル以上の時間を要してしまうと、実行すべき処理がどんどん積みあがってしまう。
- setTimeOutを再帰的に呼び出すことでも一定時間おきの繰り返し処理を実現できる。こちらは処理終了時点から一定時間経過後に次の処理を開始する。そのため、1つの処理に長い時間がかかった場合、次の処理は呼び出されず、実行すべき処理がどんどん積みあがることはない。こっちの方がベターですね。
参考：JavaScriptでsetTimeoutを使う方法【初心者向け】 | TechAcademyマガジン
- JavaScriptでは除算演算子”/"は小数を返す。商の整数部分のみ得たい場合はMath.floor(X / Y)
- 桁数を固定するには、0を先頭にくっつけてから下X桁を取り出す方法が便利。1桁だったら～とかいちいち判定処理してたら重そうだもんな。
- スタートボタンを押して経過秒数を表示させる場合、①開始時刻を取得する関数、②一定時間経過後に経過時刻を取得する関数（再帰で呼び出して繰り返す）、③取得したミリ秒を固定ケタ数の分/秒/ミリ秒に変換して表示する関数、の3つくらいに分ける。これくらいの粒度で関数を切り出していくのだなあ。（どれだけ共通してつかうかとかによるだろうけど。）
- setTimeoutやsetIntervalの返り値は1とか2とかになる。これをtimeoutIDなどとして変数に入れておき、clearTimeout(timeoutID)とすると、タイマーを解除して、タイマーにより予定されていた処理を取り消すことができる。
