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

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

デザインを引数で変えられるようにする。

赤字が今回追記したコードです。

ストップウォッチ

function MystopWatch( options){
function addMessage(message){
var messageElm = document.createElement(‘div’);
var now = new Date();
messageElm.innerText = now.getHours() + ‘時’ + now.getMinutes() + ‘分’ + now.getSeconds() + ‘秒’ + ‘ ‘ + message;
messageElm.classList = [‘message’];
logElm.appendChild(messageElm)
}

options = options || {};
var color = options.color || ‘blue’;
var backgroundColor = options.backgroundColor || ‘grey’;
var displayElm = document.getElementsByClassName(‘display’)[0];
displayElm.style.color = color;
displayElm.style.backgroundColor = backgroundColor;

var logElm = document.querySelector(‘.log’);
var timer = null;
var startButton = document.getElementsByClassName(‘startButton’)[0];
startButton.addEventListener(‘click’, function(){
if(timer === null){
displayElm.innerHTML = seconds;
var seconds = 0;
timer = setInterval(function(){
seconds++;
},1000);
addMessage(‘start!’)
}
});

var stopButton = document.getElementsByClassName(‘stopButton’)[0];
stopButton.addEventListener(‘click’, function(){
if(timer !== null){
clearInterval(timer);
timer = null;
}
});
}
var options = {
color: ‘limegreen’,
backgroundColor: ‘#222’
};
MystopWatch({color:”red”,backgroundColor:”white”})

解説

function MystopWatch(options){	MystopWatchという関数を作り、引数はoptionsとしています。
function addMessage(message){	リファクタリングして新たにaddMessageという関数を作ります。
var messageElm = document.createElement(‘div’);	指定した名前のHTMLタグを作成できるcreateElementにて’div’を作り、それを変数messageElmに代入します。
var now = new Date();	初期化したものを変数nowに代入します。
messageElm.innerText = now.getHours() + ‘時’ + now.getMinutes() + ‘分’ + now.getSeconds() + ‘秒’ + ‘ ‘ + message;	現在時刻を表します。
messageElm.classList = [‘message’];	クラスとしてmessageを追加。したがって新規作成されるdivタグにはclass=”message”となります。先に作成したCSSの内容が反映され、アンダーラインが入ります。
logElm.appendChild(messageElm)}	appendChildを使って、作成したタグをlogElmの子要素としてmessageElm（ここではdiv）要素をブラウザに表します。
options = options || {};	||の左辺の値の評価が偽(null,undefinedや0）ならば、右辺で示した値を返す指示になります。
var color = options.color || ‘blue’;	options.colorの評価が偽ならば、blueとする。これを変数colorに代入します。
var backgroundColor = options.backgroundColor || ‘grey’;	options.backgroundColorの評価が偽ならば、greyとする。これを変数backgroundColorに代入します。
var displayElm = document.getElementsByClassName(‘display’)[0];	HTMLのドキュメントからdisplayというクラスがついている要素を全て取得し、「0」で取得した配列の一番初めの要素を取り出す。それを変数displayElmに代入します。
displayElm.style.color = color;	.styleで適用されているスタイルシートをJavaScriptから操作します。
displayElm.style.backgroundColor = backgroundColor;	.styleで適用されているスタイルシートをJavaScriptから操作します。
var logElm = document.querySelector(‘.log’);	querySelectorは引数に与えたCSSセレクタに合致する画面上のHTMLタグ要素を一つ取得します。
var timer = null;	intervalIDの数値を入れておくための変数timerを用意します。
var startButton = document.getElementsByClassName(‘startButton’)[0];	HTMLのドキュメントからstartButtonというクラスがついている要素を全て取得し、「0」で取得した配列の一番初めの要素を取り出す。それを変数startButtonに代入します。
startButton.addEventListener(‘click’, function(){～	取り出したstartButtonに対してクリックイベントのリスナを指示する
if(timer === null){～　}	もしtimer変数がnullならば、startButtonのクリックが動作する
displayElm.innerHTML = seconds;	先に変数定義したdisplayElmからinnerHTMLを呼び出し、それを秒数の数字とするsecondsとさせ数字を変更します。
var seconds = 0;	変数secondsを定義し、それを0とし、1秒ごとに加算されるようにする。
timer =setInterval(function(){	一定時間ごとに処理を繰り返す setIntervalを使います。第一引数の関数内容を、第二引数の時間間隔で何度も呼び出します。そして戻り値を変数timerに代入しておくことでintervalIDを持ち続けるようにします。
seconds++;	1つずつ加算されるようにする。
},1000);	第二引数はミリ秒単位なので、1000と指定して1秒ごとに呼び出されるように指示します。
addMessage(‘start!’); } });	関数addMessageを作動させstart!を表示させる。
}	MystopWatchの関数をここまでで閉じます。
MystopWatch();	MystopWatch関数を呼び出します。
var stopButton = document.getElementsByClassName(‘stopButton’)[0];	HTMLのドキュメントからstoptButtonというクラスがついている要素を全て取得し、「0」で取得した配列の一番初めの要素を取り出す。それを変数stopButtonに代入します。
stopButton.addEventListener(‘click’, function(){	取り出したstopButtonに対してクリックイベントのリスナを指示する
if(timer !== null){～　}	もしtimer変数がnullでないならば、stopButtonのクリックが動作する。
clearInterval(timer);	clearIntervalをtimerに適用する
timer = null;	停止したときにtimer変数に初期状態のnullを代入します。
addMessage(‘stop!’); } });	関数addMessageを作動させstop!を表示させる。
var options = {	変数opitonsにてObjectを格納します。
color: ‘limegreen’,	文字の色を指定します
backgroundColor: ‘#333’ };	背景色を指定します。
MystopWatch()	MystopWatch関数を呼び出します。

尚、引数を以下のように指定するどのようになるか確認しておきましょう。

呼び出し方法	color	backgroundColor
MystopWatch()	blue	grey
MystopWatch({color:”red”})	red	grey
MystopWatch({backgroundColor:”black”})	blue	black
MystopWatch({color:”red”,backgroundColor:”black”})	red	black

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