JavaScript 로 신호등 시스템 구축하기

소개

이 프로젝트에서는 특정 시간 간격 후에 빨간색에서 녹색으로 신호등 색상을 변경하는 시스템을 만드는 방법을 배우게 됩니다. 이 프로젝트는 JavaScript 의 기본 사항과 시간 기반 이벤트를 기반으로 다른 요소를 표시하기 위해 DOM 을 조작하는 방법을 이해하는 데 도움이 될 것입니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

• 기본 HTML 및 JavaScript 프로젝트 구조를 설정하는 방법
• 3 초 후에 신호등 표시를 빨간색으로 변경하는 함수를 구현하는 방법
• 6 초 후에 신호등 표시를 녹색으로 변경하는 함수를 구현하는 방법
• async/await를 사용하여 빨간색 및 녹색 신호등 함수의 실행을 조정하는 방법
• 신호등 시스템을 테스트하고 예상대로 작동하는지 확인하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

• JavaScript 를 사용하여 HTML 요소의 표시를 변경하기 위해 DOM 을 조작합니다.
• setTimeout() 을 사용하여 시간 기반 이벤트를 예약합니다.
• async/await를 사용하여 비동기 작업을 관리합니다.
• JavaScript 코드를 테스트하고 디버깅합니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 구조를 설정하고 필요한 파일과 폴더를 준비합니다.

1. 편집기를 엽니다. /home/labex/project 디렉토리에서 index.html, trafficlights.js 및 몇 개의 이미지 파일을 볼 수 있습니다.
2. WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
3. VM 상단에서 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

빨간색 신호등 기능 구현

이 단계에서는 신호등을 빨간색으로 변경하는 함수를 구현합니다.

1. trafficlights.js 파일에서 red() 함수를 찾습니다.
2. red 함수 위에 변수를 설정하고 초기 값을 지정합니다.

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

3. 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);
  });
}

초록색 신호등 기능 구현

이 단계에서는 신호등을 녹색으로 변경하는 함수를 구현합니다.

1. trafficlights.js 파일에서 green() 함수를 찾습니다.
2. 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() 함수를 호출하여 신호등 시퀀스를 시작합니다.

1. trafficlights.js 파일에서 trafficlights() 함수를 찾습니다.
2. trafficlights() 함수는 async/await 구문을 사용하여 red() 및 green() 함수를 순차적으로 호출해야 합니다.

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

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

신호등 테스트

1. trafficlights.js 파일에 변경 사항을 저장합니다.
2. 브라우저에서 페이지를 새로 고칩니다. 기본 신호등에서 빨간색으로, 6 초 후에 녹색으로 변경되는 것을 볼 수 있습니다. 완성된 결과는 다음과 같습니다.

축하합니다! 색상 변경 가능한 신호등 프로젝트를 완료했습니다. 질문이 있거나 추가 지원이 필요한 경우 언제든지 문의하십시오.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.