20日目:ドットインストールで勉強中(JavaScriptでストップウォッチを作成)

SNSやってます。

今日は仕事帰りにフィットネスで筋トレしてきました。明日は筋肉痛でしょう。楽しみです。

さて、引き続きプログラミング勉強動画の「ドットインストール」でJavascriptの勉強を続けています。

こんにちはSPF36.comのダイ(@daijirok_jp)です。

今日はストップウォッチの作成に入りました。#4から突然難しくなってちょっと面食らってます。。。

本日の学習結果

JavaScriptでストップウォッチを作ろう (全8回)の勉強を開始しし、今日は#1から#4までの動画で勉強しました。

  • #01 ストップウォッチを作ってみよう
  • #02 画面を作りこんでいこう
  • #03 画面内の要素を取得していこう
  • #04 STARTボタンを動作させよう

感想

今日始めた「JavaScriptでストップウォッチを作ろう」のレッスンの一番始めの動画(#1)で完成形の動きを見たのですが、動きがあるプログラムでなかなか面白そうだと思い意気揚々と始めました。

#3ではJavaScriptを書き始める準備として

var startButton = document.getElementById('start');
var stopButton = document.getElementById('stop');
var resettButton = document.getElementById('reset');
var timerTextButton = document.getElementById('timerText');

という処理を書きましたが、JavaScriptってまずはHTML内の部品(タブを)を使えるように宣言していくんだなというのが良くわかりました。

そして

startButton.addEventListener('click',function(){
  startTime = Date.now();//1970/1/1 00:00:00 からの経過ミリ秒
  updateTimerText() //再帰処理
});

このコードの

StartButton.addEventListener(‘ click ‘,function()…..

のところで、ボタンを押したらどうするかという処理を書くんですね。

なるほどなという感じです。

しかし#4になって再帰処理が出てきて突然難易度が上がりました。

この処理です。

function updateTimerText(){
  timerId = setTimeout(function(){
    var t = Date.now() - startTime; //今の時間からstartTimeを引く
    timerText.innerHTML = (t / 1000).toFixed(2);
    updateTimerText();
  }, 10); // setTimeoutを何ミリ秒ごとに作動させるか?
}

プログラム自体は書き写すだけできちんと動いたのですが、何度解説を聞いても良くわかりません。

またどうしてupdateTimerTextの関数内で関数外のstartTimerという変数が使えているのか良くわかりません。

ローカル変数だから使えないんじゃないのという疑問も湧いてきました。

ちょっと消化不良なんですが、とにかく先に進むことにしましょう。。。

明日は多分ストップウォッチが完成する事と思います。