javascript 100day #Day 1

こんにちわ
おーかいです。今回も記事を書かせてください。

今回何の記事？？

自分の過去の記事でjavascript100日コーディングやると宣言したのですが、現在20日目にしてパンクしそうです。笑
そこで今回、アウトプット目的で100日分のコーディングを一個ずつ自分で簡単にですが解説していきたいと思います。

やってる内容

自分の100日分の内容はyoutube に100日コーディングをしている方がいらっしゃって、それを模写しているという感じです。
ここでまんま同じ内容を乗っけても自分の力にはならないので、お題だけ同じで基本的にデザインから自分で考えて作るようにはします。
基本的にはjavascriptの説明になります。

1日目　ストップウォッチ

1.完成イメージ

2.ファイル構成

index.html
|
assets
    |
    |_css
    |  | 
    |  |_main.css
    |
    |_js
       |_main.js

3.やっていこう

まずは画面のデザインと表示をやっていきます。

以下のようにして、タイマーに必要なタイマーを表示する画面と、開始、停止、再開、リセットボタンをindex.htmlに記述していきます。

index.html

    <div id="stopWatch">
       <!-- タイマー表示 -->
       <div id="timer"></div>
       <!-- ボタン -->
       <div id="buttons">
           <ul>
               <button id="start" class="blue">開始</button>
               <button class='hidden red' id="stop">停止</button>
               <button class="hidden blue" id="resume">再開</button>
               <button class='hidden black' id="reset">リセット</button>
           </ul>
       </div>
   </div>

main.css

body {
   padding-top: 40%;
   margin: auto;
   text-align: center;
}

/* ストップウォッチ画面 */

#stopWatch #timer {
   text-align: center;
}

/* ボタン */

#buttons ul {
   text-align: center;
   padding: 0;
}
button {
   padding: auto;
   color: #fff;
   border-radius: 10px;
   width: 100px;
   font-weight: bold;
}


/* color */
.blue {
   background-color: blue;
}
.red {
   background-color: red;
}
.black {
   background-color: black;
}

/* 状態 */
.hidden {
   display: none;
}

はい。とまーこんな感じで見た目は作りました。

では、ここからが機能の実装でつまり、javascriptです。

まずは、それぞれの要素を取得します。
変数を決める時は第三者がぱっと見でなんのことか想像できる！がポイントです。

// 表示要素
let displayTimer = document.getElementById('timer');



// ボタン要素
let start = document.getElementById('start');
let stop = document.getElementById('stop');
let resume = document.getElementById('resume');
let reset = document.getElementById('reset');

次にタイマーの数値を作るために変数を用意します。
初期値は0で表示していて欲しいので、0に設定しています。

// 表示データ
// ストップウォッチデータ
let time = '00:00.00';
let min_element = 0;
let sec_element = 0;
let ms_element = 0;
let controller;​

次にデータを表示するための書き込みを書きます。

displayTimer.innerHTML = time;

はい！ここである程度変数などは揃いました。
次にやりたいことは、ボタンを押した時の処理です。
スタートボタンをクリックした時

// ストップウォッチスタート処理
start.addEventListener('click', function ()
{
   // タイマースタート (TimerEvent関数呼び出し)
   controller = setInterval(TimerEvent, 10);
   // 画面に表示・非表示
   start.classList.add('hidden');
   stop.classList.remove('hidden');
});

停止ボタンを押した時の処理

// ストップウォッチ停止処理
stop.addEventListener('click', function ()
{
   // タイマー停止
   controller = clearInterval(controller);
   // 画面に表示・非表示
   stop.classList.add('hidden');
   resume.classList.remove('hidden');
   reset.classList.remove('hidden');
});

再開ボタンを押した時の処理

// ストップウォッチ再開処理
resume.addEventListener('click', function ()
{
   // タイマー再開 (TimerEvent関数呼び出し)
   controller = setInterval(TimerEvent, 10);
   // 画面表示・非表示
   resume.classList.add('hidden');
   reset.classList.add('hidden');
   stop.classList.remove('hidden');
});

リセットボタンを押した時の処理

// ストップウォッチリセット処理
reset.addEventListener('click', function ()
{
   // リセット
   min_element = 0;
   sec_element = 0;
   ms_element = 0;
   timer.innerHTML = time;

   // 画面表示・非表示
   resume.classList.add('hidden');
   reset.classList.add('hidden');
   start.classList.remove('hidden');
});

TimerEvent関数呼び出しで呼ばれた関数

// 時間カウント
function TimerEvent ()
{
   // 時間増加
   ms_element++;
   // 桁の繰り上げ ミリ秒->秒
   if (ms_element == 100) {
       ms_element = 0;
       sec_element++;
   }
   // 桁の繰り上げ 秒->分
   if (sec_element == 60) {
       sec_element = 0;
       min_element++;
   }
   // DisplayTimer関数呼び出し
   DisplayTimer();
}

// 表示するデータのレスポンス処理
function DisplayTimer ()
{
   let ms = ms_element;
   let sec = sec_element;
   let min = min_element;

   // 表示処理
   if (ms < 10) {
       ms = '0' + ms_element;
   }
   if (sec < 10) {
       sec = '0' + sec_element;
   }
   if (min < 10) {
       min = '0' + min_element;
   }
   // データを画面で表示
   displayTimer.innerHTML = min + ':' + sec + '.' + ms;
}

この関数を実行すると、時間が更新されていきます。

4. 解説

こっからは要点だけ解説していきます。

addEventListener
さまざまなイベント処理を実行することができるメソッド
対象要素.addEventListener( 種類, 関数, false )
何をしたかを種類に！今回は、clickした時、関数が実行される。

setInterval

setInterval(関数, ミリ秒);
これは指定したミリ秒経過毎に指定した関数を実行する。

clearInterval
setInterval ()を使用して設定された繰り返し動作をキャンセルする。clearInterval(引数)
引数に入るのは、動作キャンセルしたいsetInterval()の返り値。

 ポイント

今回のポイントは解説にまとめました。

終わりに

100日コーディングまだまだ先は長いですが続けていきます。自分の作ったものが誰かの役に立つ。それが自分の理想なので今はそれを作れるだけのスキルを地道に身につけていきたいと思います。応援よろしくお願いします。

もし、プログラミング一緒にやってくださる方いらっしゃいましたら、やりましょう。