[자바스크립트 스터디]Review - 바닐라JS로 크롬 앱 만들기(momentum clone) - clock.js(시계 만들기)

clock.js - 시계 만들기 !

👉 html 코드

<div class="js-clock">
   <h1>2020-04-22</h1>
   <h2>00:00</h2>
</div>
                

👉 js 코드

const clockContainer = document.querySelector(".js-clock"),
dayTitle = clockContainer.querySelector("h1"),
clockTitle = clockContainer.querySelector("h2");

function getTime(){
    const date = new Date(); 
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    dayTitle.innerText = `${year} - ${month < 10 ? `0${month}` : month} - ${day < 10 ? `0${day}` : day}`;
    clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours} : ${minutes < 10 ? `0${minutes}` : minutes}`;
}

function init(){
    getTime();
    // setInterval 사용하기! 계속 작동하는 것이 아니라 새로고침 할 때만 업데이트 되어 보이니까 setInterval로 매 초 업데이트 시기기
    setInterval(getTime, 1000);
}

init();

👉 내가 코드를 작성한 순서

1. 사용 할 객체를 변수로 선언한다.

2. init 함수를 만든다.

function init(){

};

init()

3. getTime() 함수를 만든다.

getTime() 함수에서 setInterval을 한번 살펴보자!

setInterval() : 일정 시간마다 반복 실행하는 함수

👉 setInterval 사용하는 방법

setInterval(function() { ... }, 지연시간);

👉 setInterval() 사용했던 이유
시계를 만들었다. 웁스! 여기서 문제가 발생했는데, 시계가 계속 작동하는 것이 아니라 새로고침(F5) 할 때만 업데이트 되어서 보였다. setInterval로 매 초(1000(ms) = 1s)마다 시계를 업데이트 시켰다.

setInterval(getTime, 1000);

👉 getTime() 함수는

function getTime(){
    const date = new Date(); 
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    dayTitle.innerText = `${year} - ${month < 10 ? `0${month}` : month} - ${day < 10 ? `0${day}` : day}`;
    clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours} : ${minutes < 10 ? `0${minutes}` : minutes}`;
}

new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다.

👆 주의해야할 점!
getMonth() : 0, 1, 2... -> 0부터 시작하니까 +1 해주기!

${month < 10 ? `0${month}` : month}

👆 삼항연산자
1 ~ 9월은 앞에 01 ~ 09 이렇게 0을 붙혀주자는 코드!

${if ? `표현식` : else}