바닐라 JS 2주 완성반 5일차

5일차 멘붕중~
오늘은 D-day를 만들어봤다

#3.0

HTML에서 javaScript에서 class 이름을 어떻게 쓰는가

<div class = "js-clock"></div>

클래스 이름을 js-clock라고 하는 이유는 같은 clock을 다른 CSS에서도 동일하게 사용하는게 편리하다.

현재 시간은 어떻게 알아내는가?

시계를 만드려면 먼저 현재시간이 몇시 몇분 몇초인지 알아내야 한다
그러기 위해서는 console창을 사용해 보자

콘솔창에

const date = new date();
↓
date
↓

Fri Nov 27 2020 13:00:11 GMT+0900 (대한민국 표준시)

new date()는 괄호에 아무런 인자가 없으면 현재시간을 알수있다

일,시간,분,초 → getDay, getHours, getMinutes, getSeconds

이제 현재시간을 알아냈으니 시계의 형태를 만들어 보자

<div class="js-clock">
        <h1>00:00</h1>
    </div>

h1 에 innerText를 하여 현재시간을 나타내도록 한다

const clockContainer = document.querySelector(".js-clock"),
 clockTitle = clockContainer.querySelector("h1");
//js-clock의 자식인 h1을 선택

function getTime() {
    const date = new Date();
//인수를 지정하지 않는경우 현재시간을 반환한다
    const minutes = date.getMinutes();
//현재시간의 분을 가져온다
    const hours = date.getHours();
//현재시간의 시각을 가져온다
    const seconds = date.getSeconds();
//현재시간의 초를 가져온다
    colokTitle.innerText = `${hours}:${minutes}:${seconds}`;
//clockTitle즉 h1에 새로운 텍스트를 넣는다

function init(){
getTime()
}
init();

위의 코드는 한번만 getTime을 실행시키므로 실시간으로 시간을 가져오지 못한다

#3.1

시간을 실시간으로 가져오려면

setInterval(a,1000)

이 필요하다 setInterval은 첫번째 인자가 실행할 함수를 받고 두번째 인자는 첫번째 인자를 실행할 시간 간격을 의미한다(단위는 millisecond)

function init(){
getTime()
setInterval(getTime,1000);
}
init();

이렇게 쓰면 getTime은 1초에 한번씩 실행된다

여기서 또 문제가 있다
위의 사진은 시간이 10미만일 경우 01과 같은 형태가 아닌 1의 형태로 출력이 되고 있다

해결하려면!

`${hours<10 ? `0${hours}` : hours}
    :${minutes<10 ? `0${minutes}`:minutes}
    :${seconds<10 ? `0${seconds}` : seconds}`;

이와 같이 삼항연산자를 사용해서 시간이 10보다 작으면 0과시간을 출력하고 10보다 크면 그대로 시간을 출력한다

물론 if를 사용해도 되지만 가독성을 높이기 위해서 삼항 연산자가 사용이 되었다