Date, innerHTML

*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다.

 

// 예시 코드
function getTime() {
     const date = new Date();
     const hours = date.getHours();
     const minutes = date.getMinutes();
     const seconds = date.getSeconds();
     clockTitle.innerHTML = `${hours}:${minutes}:${seconds}`;
 }

new Date()가 뭘까?

쉽게 생각해 시간을 다루는 Date 객체를 생성하는 코드이다.

그리고 생성된 Date 객체가 date 변수에 저장됐다.

 

document가 웹페이지를 다루는 리모콘이라면 Date는 시간과 관련된 리모콘이다.

그리고 date 변수에 Date 객체를 저장 했으므로 이제 date 변수를 통해 시간 관련 함수를 다룰 수 있게 됐다.

 

Date 객체는 많은 함수를 가지고 있지만 여기서는 예시 코드만 해석했다.

그래도 Date의 개념에 대해 알았으니 언제든 MDN에 접속하면 모르는 함수라도 사용할 수 있을 것이다.

 

getHours(): 현재 시간에서 '시' 부분을 가져온다.

getMinutes(): 현재 시간에서 '분' 부분을 가져온다.

getSeconds(): 현재 시간에서 '초' 부분을 가져온다.

---

clockTitle.innerHTML은 뭘까?

우선 코드엔 나오지 않았지만 clockTitle은 HTMLElement이다.

<h1>00:00</h1>

위 한 줄이 전부 HTMLElement이며 이런 형식을 가지고 있다.

그리고 innerHTML은 HTMLElement의 속성이다.

그리고 말 그대로 HTML tag 안쪽의 값을 의미한다.

위의 예시에서는 00:00 가 innerHTML인 것이다.

따라서 마지막 줄의 코드로 인해 clockTitle의 tag 안쪽 값은 갱신될 것이다.

 

참고 사이트:

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Date

developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Element.innerHTML