新卒 研修6日目 JavaScriptと格闘

こんばんは。

研修6日目です。

JavaScriptの課題に苦戦しております。進捗が遅くてもどかしいです、、が、課題を理解できる度に快楽物質がでる感じがあって気持ち良いです。研修気持ちいいです。

今日はこんな課題

クリックを押して3秒後にアラートがでる問題です。

僕はこんな感じでコーディングしました。

    <div class="div1">ボタンをクリック！</div>
    <div class="div2"><input type="button" value="クリック！" id="button1" onclick='btnClick()'></div>

    <script>
        var msg = "反応ないと思ったら3秒後なんだなぁ";
        function showMsg(){
            alert(msg);
        }
        function btnClick() {
            setTimeout(function() {
                showMsg();
            }, 3000);
        }
    </script>

onclick= 'btnClick()'というように書くことでボタンがクリックされた時に関数を呼び出せるんですね。 優秀な同期から btnClick()のカッコ内には引数を与えるべきだとアドバイスをもらったんですが、その理由を忘れてしまった・・メモ不足。

こんな課題も。

クリックを押すと、0.1秒間に1ずつ増えていき、もう一度クリックすると止まるという問題。 以下、コード。

    <div class="div1">ボタンをクリック！</div>
    <div class="div2"><input type="button" value="クリック！" id="click" onclick='btnClick()'></div>
    <div class="div3"><input type="text" value=0 id="number"></div>


    <script>
        var buttonState = false; //初期値、button押されてない状態

        function btnClick() { //ボタンクリックで始まる関数
             if(buttonState == false){ //ボタンが押されていない状態の時（未スタート）
                  buttonState = true;
                  repeat = setInterval(function() { //100ミリ秒毎に数値を増やしていく
                  document.getElementById("number").value++; //テキストボックスの数値を取得する
                  }, 100);
              }else { //ボタンが押されているとき（カウントアップしている時）
                  buttonState = false;
                  clearInterval(repeat); //setIntervalを止める
              }
        }
    </script>

buttonが押された時の状態をどのように取得しようか考えましたが、プロパティからは取得できないしどうしよう・・と考えましたが、変数buttonStateにtrueorfalseを与えて判定させられる、と先輩から教えてもらいました。 また、clearInterval()はsetInterval()を停止させる命令文なんですね。セットで使うというわけですか。なるほど。

現段階では「この関数を使えばこれができる」など短絡的な理解が多いですが、今こうやってまとめてみたら全体の構造などを理解する必要があるなと思いました。

今日はこんな感じです。プログラミング楽しいですね。。ではお休みなさい。