JS - [clock 기능 - intervals / timeout / Date object / padStart]

1. intervals 

참고로 기능에 따라 js파일은 분할해서 만드는게 보기 좋다. 시계를 만들 것이므로 따로 clock.js파일을 생성해서 작업했다.

 

 

interval은 매번 일어나야 하는 무언가를 의미한다. 예를 들어 매 2초마다 무슨 일이 일어나게 하고 싶을 때 쓴다. JS에서 이런 기능을 제공하는 tool이 setInterval() 이다.

setInterval()은 두개의 인자를 받는데 첫번째 argument는 실행하고자 하는 function이고, 두번째 argument는 호출되는 function 간격을 몇 ms로 할지 쓰면 된다.

예를 들어 setInterval(sayHello, 5000); 과 같이 작성하면 sayHello 함수를 5초마다 실행한다는 의미이다.

 

 

---

2. timeout

setTimeout은 일정 시간 뒤에 함수를 실행시켜준다. 첫 번째 인자로 실행시킬 함수, 두 번째 인자로 얼마나 기다릴지 ms 단위로 넣어주면 된다.

예를 들어 setTimeout(sayHello(), 5000); 과 같이 작성하면 sayHello 함수를 5초(5000ms초) 뒤에 1번 실행시키겠다는 의미이다.

 

---

3. Date object

이번엔 JS가 가지고 있는 Date object라는 tool을 사용해보자. new Date() 와 같이 사용하면 오늘 날짜를 가져온다. Date의 function을 이용하면 시간, 분, 초 값을 가져올 수 있다. getHours(), getMinutes(), getSeconds()를 이용해 아래와 같이 작성하면

이렇게 매 초 마다 시간을 가져올 수 있다.

 

조금 더 보기 좋게 고쳐보자. 우선 새로고침 하면 1초 뒤에 시계가 뜬다. 그러니 웹사이트가 load 되자마자 getClock()을 실행하고 또 매초마다 다시 실행되도록 해 준다.

 

---

4. padStart

시간을 불러올 때 00 과 같이 두 자리수로 나올 수 있도록 text formatting을 해 준다.

 

padStart(최소 자릿수, "채울 문자") 와 같이 쓰면 최소 자릿수를 채울 만큼 앞쪽에 문자를 채워준다.

padEnd(최소 자릿수, "채울 문자")는 뒷쪽에 문자를 채워준다.

but getHours() 등 은 number 형식이고 patStart()는 string형식에만 사용 가능하므로, string으로 형식을 변경해주고 사용해야 한다.

 

아래와 같이 작성했더니 시간이 올바르게 나온다!

 

00 단위로 나옴!!

 

---