些細な日常

サイトの複数の要素にJavaScriptで共通の処理を行うとき、forEach()メソッドがとても便利で、良く使っている。 const atpss = document.querySelectorAll("article.post"); atpss.forEach(atps => { // 全てのarticle.postへの共通の処理 }); forEach()メソッドは反復処理のfor文のように数を気にせず、いつでもそれだけで配列を扱えるから簡単だし、サイトの要素を取り込むquerySelectorAll()メソッドによるノードリスト（配列と似たもの）にも対応しているから使い易い。 しかしasync／await、またはPromiseの非同期処理を組み込むことができない。 いい換えると複数の要素に対する複数の処理を前のものが終わっ…

JavaScriptで時間を数えてスタートとストップとリセットの三つのボタンで操作できるストップウォッチのプログラムを組む。 目次 ストップウォッチの計測時間の表示 ストップウォッチのソースコード 時間を数えて表示するプログラムの概要 時間を数えて表示するプログラムの説明 ストップウォッチの計測時間の表示 00:00.00.00 スタート ストップ リセット ストップウォッチのソースコード HTML <figure class="time"> <p class="counter">00:00.00.00</p> <button class="start" type="button">スタート</button> <button cl…

JavaScriptで関数などを遅らせて実行する時間差の処理に使えるsetTimeout()メソッドと間隔を空けて繰り返せるsetInterval()メソッドには共通するパフォーマンスの問題があって避けるためにはどちらもrequestAnimationFrame()メソッドで置き換えることができる。 目次 requestAnimationFrameはジャンクを防ぐ requestAnimationFrameはイベントループに強い アニメーションの始動と時間通りの実行に向く requestAnimationFrameに時間を設定して使う 二秒後に実行して即座に停止するサンプル 一秒間隔で実行して十秒で停止するサンプル requestAnimationFrameはジャンクを防ぐ アニメーションの処理に利点があってサイトの表示を良好に保ち易くするのがrequestAnim…