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


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


01. 完成イメージ


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

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

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. プログラムの骨格

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

0 件のコメント:

その他の記事