学習：図解！TypeScriptのツボとコツがゼッタイにわかる本 "超"入門編 (7)

07. ストップウォッチを作ろう

01. 完成イメージ

02. ワークスペースの作成

サンプルは以下よりダウンロード

https://www.shuwasystem.co.jp/

03. イベント処理の基本

・イベントハンドラの登録

element.addEventListener(イベント名, 関数);

・elementの取得

document.querySelector(セレクタ名);

・セレクタ名 = 要素名(HTMLタグ)、id値、class値
・id=startのelementを取得する場合

const element: HTMLElement | null = document.querySelector("#start");
if (element !== null) {
  ...
}
      

・elementがnullでないことが確定できるのであれば

const element: HTMLElement = document.querySelector("#start");
element!.addEventListener("click", () => {...});

　または

const element: HTMLElement = document.querySelector("#start")!;
element.addEventListener("click", () => {...});

04. タイマー処理の基本

・タイマーの開始

タイマーID = window.setTimeout(関数定義, 待機時間);
タイマーID = window.setInterval(関数定義, 待機時間);

・待機時間はミリ秒で指定
・setIntervalの場合は待機時間経過毎に関数が呼び出される
・windowオブジェクトはブラウザのウインドウそのものを表すオブジェクトで省略可

・タイマーの停止

clearTimeout(timerID);
clearInterval(timerID);

05. UIの作成

・HTMLの構造を決める
・HTMLの作成

06. プログラムの骨格

・プログラミングと料理の共通点
・大まかなフローチャート