メモ

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

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

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

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", () => {...});

・タイマーの開始

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

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

・タイマーの停止

clearTimeout(timerID);
clearInterval(timerID);

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

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