바닐라 JS로 크롬앱 만들기 #5.1~#5.3

#5.0 Intervals

const clock = document.querySelector("h2#clock");

function sayHello() {
    console.log("Hello");
}

setInterval(sayHello, 5000);

clock 이란 아이디의 h2태그를 가져와 clock변수에 할당해 준 다음 

setInterval이란 메서드를 사용하여 매 ??초마다 sayHello 함수를 실행시켜준다.

콤마다음 실행 단위는 밀리초(millisecond, 1000밀리초 = 1초)

#5.1 Timeouts and Dates

setTimeout 메서드

setTimeout(실행하고자하는 함수, 실행시간 단위)

const clock = document.querySelector("h2#clock");

function sayHello() {
    console.log("Hello");
}

setTimeout(sayHello, 5000);

 

우리의 목표는 시간과 분을 보여주는 코드를 작성하는 것.

const clock = document.querySelector("h2#clock");

function getClock() {
    const date = new Date();
    clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}

getClock()
setInterval(getClock, 1000);

Date라는 새로운 오브젝트를 date 변수에 할당해 준 뒤, 

getHours, getMinutes, getSeconds를 사용하여 h2 태그 안의 clock아이디 속에 text를 넣어준다.

 

그다음 목표는 나오는 시간, 분, 초의 자리수가 2자리 수일 것.

 

1자리 수라면 나머지 자리수를 0으로 채울 것. 

 

#5.2 PadStart 

 

그러기 위해 필요한 것은 padStart함수. 

padStart함수를 사용하여 date.getHours함수와 합칠(?)것

 

    const hours = String(date.getHours()).padStart(2, "0");

 

그렇게 되면 

원하는 표기를 할 수 있다. 

 

#5.3 Recap