信号機システム | JavaScript DOM 操作

はじめに

このプロジェクトでは、一定の時間間隔後に信号の色を赤から緑に変える信号システムを作成する方法を学びます。このプロジェクトは、JavaScript の基本と、時間ベースのイベントに基づいて異なる要素を表示するために DOM を操作する方法を理解するのに役立ちます。

👀 プレビュー

traffic light color change

🎯 タスク

このプロジェクトでは、以下を学びます。

基本的な HTML と JavaScript のプロジェクト構造を設定する方法
3 秒後に信号の表示を赤に変更する関数を実装する方法
6 秒後に信号の表示を緑に変更する関数を実装する方法
async/awaitを使用して赤信号と緑信号の関数の実行を調整する方法
信号システムをテストし、期待通りに機能することを確認する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

JavaScript を使用して DOM を操作し、HTML 要素の表示を変更する
setTimeout() を使用して時間ベースのイベントをスケジュールする
async/awaitを使用して非同期操作を管理する
JavaScript コードをテストしてデバッグする

プロジェクト構造を設定する

このステップでは、プロジェクト構造を設定し、必要なファイルとフォルダを準備します。

エディタを開きます。/home/labex/project ディレクトリに index.html、trafficlights.js といくつかの画像ファイルが表示されるはずです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

unfinished project screenshot

赤色信号の機能を実装する

このステップでは、信号を赤に変える機能を実装します。

trafficlights.js ファイルで、red() 関数を探します。
red 関数の上に変数を設定し、初期値を与えます。

let trafficlightsTimer = 3000;
// function red() {...}

red() 関数は、3 秒後にデフォルトの信号の表示を none に、赤信号の表示を inline-block に変更する必要があります。

function red() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      defaultlight.style.display = "none";
      redlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

緑色信号の機能を実装する

このステップでは、信号を緑に変える機能を実装します。

trafficlights.js ファイルで、green() 関数を探します。
green() 関数は、3 秒後（ページ読み込みから 6 秒後）に赤信号の表示を none に、緑信号の表示を inline-block に変更する必要があります。

function green() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      redlight.style.display = "none";
      greenlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

信号機の機能を呼び出す

このステップでは、信号機のシーケンスを開始するために trafficlights() 関数を呼び出します。

trafficlights.js ファイルで、trafficlights() 関数を探します。
trafficlights() 関数は、async/await 構文を使用して red() 関数と green() 関数を順番に呼び出す必要があります。

async function trafficlights() {
  await red();
  await green();
}

trafficlights();
module.exports = { trafficlights };

信号機をテストする

trafficlights.js ファイルの変更を保存します。
ブラウザでページを更新します。信号機がデフォルトの信号から赤に、その後 6 秒後に緑に変化するはずです。完成した結果は以下の通りです。

traffic lights color change

おめでとうございます！あなたは色変え可能な信号機のプロジェクトを完了させました。質問やさらなる支援が必要な場合は、遠慮なくお尋ねください。

まとめ

おめでとうございます！このプロジェクトを完了させました。あなたは実験（Lab）をもっとたくさん行って技術力を向上させることができます。

JavaScript を使った信号機システムの構築