Javascriptを使って簡単なストップウオッチを作る➀

Javascriptを使って簡単なストップウオッチを作る

ストップウオッチを作ってみよう➀

スタートボタンが押されたら一定時間ごとにイベントを呼ぶ出す。

HTML <button class=”startButton”>スタート</button>
<button class=”stopButton”>ストップ</button>

JavaScript var startButton = document.getElementsByClassName(‘startButton’)[0];
startButton.addEventListener(‘click’, function(){
var seconds = 0;
setInterval(function(){
seconds++;
console.log(seconds);
},1000);
})

解説

var startButton = document.getElementsByClassName(‘startButton’)[0];	HTMLのドキュメントからstartButtonというクラスがついている要素を全て取得し、「0」番目、すなわち一番初めの要素を取り出す。それを変数startButtonに代入します。
startButton.addEventListener(‘click’, function(){	取り出したstartButtonに対してクリックイベントのリスナを指示する
var seconds = 0;	変数secondsを定義し、それを0とし、1秒ごとに加算されるように準備する。
setInterval(function(){	一定時間ごとに処理を繰り返すsetIntervalを使います。第一引数の関数内容を、第二引数の時間間隔で何度も呼び出します。
seconds++;	1つずつ加算されるようにする。
console.log(seconds);	コンソールで一度、動きを確認しておきましょう。
},1000);	第二引数はミリ秒単位なので、1000と指定して1秒ごとに呼び出されるように指示します。

まずはコンソールにて一秒ずつ数字が増えていくことが確認できます。

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。