# 반응속도테스트

JS에서 시간을 체크하는 방법

1. new Date : new Date를 이용하여 시작 시간과 끝나는 시간의 차를 구하면 숫자값이 나오는데 이 때 나오는 값은 밀리세컨즈 단위이기 때문에 1000당 1초이므로 1000을 나눠주면 초 단위로 계산이 가능하다.

```javascript
//시간을 체크하는 첫번째 방법.
//new Date()를 하는 순간 그 시각이 저장된다.
var 시작시간 = new Date();
스크린.addEventListener('click',function(){
    var 끝시간 = new Date();
    console.log((끝시간 - 시작시간) / 1000);

    if(스크린.classList.contains('waiting')) {//classList.contains로 현재 클래스 파악 가능
        스크린.classList.remove('waiting');
        스크린.classList.add('ready');
        스크린.textContent = '초록색이 되면 클릭하세요.';
    } else if (스크린.classList.contains('ready')) {
        스크린.classList.remove('ready');
        스크린.classList.add('now');
        스크린.textContent = '클릭하세요!';
    } else if(스크린.classList.contains('now')) {
        스크린.classList.remove('now');
        스크린.classList.add('waiting');
        스크린.textContent = '클릭해서 시작하세요.';
    }
});
```

2\. console.time 이용

```javascript
//시간을 체크하는 두번째 방법.
//console.time()이용
console.time('시간');

스크린.addEventListener('click',function(){
    console.timeEnd('시간');

    if(스크린.classList.contains('waiting')) {//classList.contains로 현재 클래스 파악 가능
        스크린.classList.remove('waiting');
        스크린.classList.add('ready');
        스크린.textContent = '초록색이 되면 클릭하세요.';
    } else if (스크린.classList.contains('ready')) {
        스크린.classList.remove('ready');
        스크린.classList.add('now');
        스크린.textContent = '클릭하세요!';
    } else if(스크린.classList.contains('now')) {
        스크린.classList.remove('now');
        스크린.classList.add('waiting');
        스크린.textContent = '클릭해서 시작하세요.';
    }
});
```

3\. performance.now 이용

```javascript
//시간을 체크하는 세번째 방법.
//performance.now();이용
var 시작시간 = performance.now();//newDate 보다 더 정밀한 시간을 측정할 때.

스크린.addEventListener('click',function(){
    끝시간 = performance.now();
    console.log((끝시간 - 시작시간) / 1000);

    if(스크린.classList.contains('waiting')) {//classList.contains로 현재 클래스 파악 가능
        스크린.classList.remove('waiting');
        스크린.classList.add('ready');
        스크린.textContent = '초록색이 되면 클릭하세요.';
    } else if (스크린.classList.contains('ready')) {
        스크린.classList.remove('ready');
        스크린.classList.add('now');
        스크린.textContent = '클릭하세요!';
    } else if(스크린.classList.contains('now')) {
        스크린.classList.remove('now');
        스크린.classList.add('waiting');
        스크린.textContent = '클릭해서 시작하세요.';
    }
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://heunnajo.gitbook.io/zerocho-javascript/undefined-20.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.