1. HTML 세팅하기

#screen {
     width: 300px;
     height: 200px;
     text-align: center;
     user-select: none;
}
#screen.waiting {
     background-color: aqua;
}
#screen.ready {
     background-color: Red;
     color: white;
}
#screen.now {
     background-color: greenyellow;
}

• #screen.now : 아이디가 screen 이고, 클래스가 now인 경우이다. 클래스는 특정한 역할을 부여할 때, 여러개의 선택자를 사용할 때 클래스 태그를 많이 사용 된다.

2. 클릭해서 화면 전환하기

$screen.addEventListener('click', (event) => {
    if (event.target.classList.contains('waiting')) {
           $screen.classList.remove('waiting');
           $screen.classList.add('ready');
					$screen.textContent = '초록색이 되면 클릭하세요';
          setTimeout(function(){
             $screen.classList.remove('ready');
             $screen.classList.add('now');
             $screen.textContent = '클릭하세요!';
          }, Math.floor(Math.random() * 1000) + 2000);
   } else if(event.target.classList.contains('ready')) {
                
   } else if(event.target.classList.contains('now')) {
               
   }
});

• $screen.classList;
  • 한 태그에 여러개의 class가 들어 있는 경우에 사용한다. 특히 $screen.classList.contains(' ');로 사용 가능하다.
  • classList 관련 속성값
    • 태그.classList.add('클래스');
    • 태그.classList.replace('클래스');
    • 태그.classList.remove('클래스');

3. 반응 속도 측정하기

• new Date();

  new Date(2021, 2, 31); 
  > Wed Mar 31 2021 00:00:00 대한민국 표준시
  
  new Date(2021, 2, 31, 18, 30, 5);
  > Wed Mar 31 2021 18:30:05 대한민국 표준시
  

  • 주의! 월만 0부터 시작한다. (ex: 2월 → 1, 서양에서는 월을 단어로 사용하기 때문)
  • endTime - startTime : 자바스크립트는 1970년부터 현재까지의 시간을 빼기 때문에 끝나는 시간이 시작 시간보다 크다.
  • 시간을 계산한 값은 ms 으로 나타난다. 따라서 해당 값을 1000으로 나누면 초, 60으로 나누면 분, 60으로 나누면 시간을 알 수 있다.
    • ex: (new Date(2021,2,3) - new Date(2021, 2,2))/1000/60/60 → 24시간
  • new Date().getfullYear() : 연도만 꺼내기
  • new Date().getMonth() : 월만 꺼내기
  • new Date().getDate() : 날만 꺼내기
  • new Date().getHours() : 시간만 꺼내기
  • new Date().getMinutes() : 분만 꺼내기
  • new Date().getSeconds() : 초만 꺼내기
  • new Date().setMonth() : 특정 날짜 데이터를 설정.

4. 평균 구하기

• 평균 구하는 코드

  const average = records.reduce((a,c) => a+c) / records.length;
  

• 전체 평균 구하는 코드

  const records = [];
  const cur = endTime - startTime;
  records.push(cur);
  const average = records.reduce((a,c) => a+c) /records.length;
  $result.textContent =  `현재 ${cur}ms, 평균 ${average}ms`;
  startTime = null;
  endTime = null;
  

  • startTime, endTime 초기화는 필수는 아님.

• Reduce() (정말 중요!)

  • reduce((누적값, 현재값) ⇒ {(다음 누적값), 초깃값})
  • 기본형 : [1,2,3,4].reduce((a,b) => {return a+b})
  • 축약형 : [1,2,3,4].reduce((a,b) => a+b)
  • 축약괄호형 : [1,2,3,4].reduce((a,b) => (a+b))
  • 단순히 더하기 뿐만 아니라 인덱스 선택, 곱하기 등 다양하게 가능. 초깃값이 없으면 첫번째값이 초깃값이 된다.

5. 성급한 선택 막기

else if(event.target.classList.contains('ready')) {
    clearTimeout(timeoutId);
    $screen.classList.remove('ready');
    $screen.classList.add('waiting');
    $screen.textContent = '너무 성급하시네요!';
}

• ClearTimeout을 통해서 타이머를 반드시 멈춰야 한다.