Timeouts and Dates

이번에는 함수를 딱 한 번만 호출할건데, 일정 시간이 지난 뒤에 호출하도록 해보겠다.

이때 사용하는 함수는 setTimeout() 인데, 먼저 호출하려는 함수를 넣어주고 그 다음에는 얼마나 기다릴지를 ms 단위로 넣어주면 된다.

 

이제 화면을 실행하면 5초 뒤에 console창에 Hello가 출력되는 것을 확인할 수 있다.

 

이번에는 JS가 가지고 있는 Date object라는 tool을 사용해보자

Date는 new Date() 의 형식으로 쓸 수 있는데, 이는 오늘 날짜를 가져온다.

new Date()를 변수로 지정하여 다양한 메소드를 사용할 수 있고, date와 관련된 많은 정보를 얻을 수 있다.

오늘의 날짜와 시간등의 정보

이제 여기서 getHours와 getMinutes, getSeconds를 매 초마다 출력하게 만들어보자.

getClock() 함수를 생성하여 해당하는 정보를 출력하는 코드를 작성하는데, 이때 따옴표 ' 가 아닌 ` 백틱을 사용해야 한다는 점을 주의해야 한다. 그리고 setInterval() 함수로 getClock() 함수를 1초마다 실행하도록 만들었다.

새로고침 후 실행해보면 시계처럼 console 창에 매 초마다 시간 정보가 출력되는 것을 확인할 수 있다.

이는 매 초마다 새로운 Date object를 만들고 있는 것이고 new Date object는 현재 날짜, 시간, 분, 초에 대한 정보를 가지고 있으며 우리는 그런 object를 매 초마다 새로 만들고 있는 것이다.

 

하지만 문제가 있는데 이렇게 숫자의 자릿수가 일정하지 않다는 것과, 

페이지를 새로고침 하면, 1초가 지나야 시간에 대한 정보가 출력된다는 것이다.

자릿수가 일정하지 않은 문제는 일단 뒤로 하고 두 번째 문제를 해결하기 위해 먼저 getClock()을 호출하고 페이지가 load되자마자 getClock()을 실행하고 또 매초마다 다시 실행되도록 하려한다.

먼저 getClock()을 한 번 호출하여 문제 해결

 

이제 이런 시간들을(text)

text

아래에 보이는 페이지의 h2에 넣어주면 된다.

h2

그러기 위해 html h2의 default를 00:00:00 으로 변경하고

변경 후 모습

JS에서 console.log 대신 clock.innerText 를 사용했다

함수 변경

이제 실행해보면 console 창이 아닌 보여지는 페이지에서 시계가 작동하는 것을 확인할 수 있다.

3시 52분 6초의 화면

3시 52분 17초의 화면