Date 객체와 setInterval() 함수

날짜와 시간을 다룰때에 사용되는 내장객체 Date에 대해서 알아보겠습니다.

객체 생성 방법

<script>
      const date = new Date();
      console.log(date);	//Wed Mar 24 2021 13:41:30 GMT+0900 (대한민국 표준시)
</script>

Date 객체의 시간과 날짜를 읽는 메서드

getYear() : Date객체에서 (년도) 불러옴

getMonth() : Date객체에서 (월) 불러옴


getDate() : Date객체에서 (일) 불러옴


getDay() : Date객체에서 (요일) 불러옴


getHours() : Date객체에서 (시) 불러옴


getMenutes() : Date객체에서 (분) 불러옴


getHours() : Date객체에서 (초) 불러옴

ex)

<script>   
      function getTime() {
         const date = new Date();
         const hours = date.getHours();
         const minutes = date.getMinutes();
         const seconds = date.getSeconds();
         console.log(`${hours}:${minutes}:${seconds}`);	//  시:분:초
      }
      getTime();
</script>

console창에서 실행 된 시간기준으로 정상적인 결과가 시:분:초로 나오게 됩니다.

매초마다 실행을시키는것은 시계에서

기능적으로도 효율성으로도 떨어지게 되기 떄문에 설정시간에 따라
실행되게 만드는 함수가 바로 setInterval() 입니다.

setInterval() 함수

가로 안에서는 두가지의 인자값을 받습니다.

첫번째 인자값은 실행 할 함수를 받고,
두번째 인자값에서는 받은 함수를 실행하고 싶은 시간을 받습니다.


매초에 한번씩 실행하게 되기위해 아래처럼 추가 해주면 됩니다.

<script>   
      setInterval(getTime, 1000);
</script>

그럼 콘솔창에서라든지 innerText로 보여지는 브라우저의 화면에서 1초간격으로 함수가 실행되어서 시계처럼 보이게 됩니다.



Date 객체에서의 메서드는 글에 기재한 것 보다 더 많지만 기본적으로 사
용 되는 메서드를 알아보았습니다.