바닐라 JS로 크롬 앱 만들기::복습 5.0~5.3

chapter 5 : Clock

5.0 Intervals

tip: 새로운 기능을 가진 js, css ...를 구현할 때마다 파일을 따로 두는 것이 관리하기 편하다.

Interval: 매번 일정한 시간마다 같은 동작이 일어나는 것을 의미한다. 이러한 개념 또한 js에서 내장하고 있는데 사용방법이 굉장히 쉽다.
예를 들어, 5초마다 hello라는 단어가 console에 log하고싶다고 하자. 그러면 다음과 같이 하면 된다. (시간은 ms단위, 즉 5초라면 5000ms)

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

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

setInterval(sayHello, 5000);

5.1 Timeouts and Dates

timeout기능이 있다. 이 기능은 설정한 시간이 지나면 주어진 동작을 하게 만드는 기능이다. 다음과 같이 사용하면, 5초가 지났을 때 해당 함수가 한번 동작한다.

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

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

setTimeout(sayHello, 5000);

js는 현재 date를 가져오는 기능이 있는데, console창에 new Date()를 치면 현재 시각, 날짜등이 제공된다. 관련 document를 보면 getDay(), getHours(), getMinutes(), getSeconds() 등등 관련 함수가 굉장히 많이 있다. 이를 이용하여 시계를 손쉽게 구현할 수 있다.

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

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

5.2 PadStart

padStart :string에 쓸 수 있는 function
ex. "1".padStart(2,"0")
(2글자를 유지하도록 하고, 2글자가 아닌 경우 0 추가)
->"01"
유사하게, padEnd는 뒤에 추가

padStart는 string함수에 사용하는 것이므로, getHours()함수를 string으로 감싸주고 적용해야 한다. 5.1 코드를 수정하면 다음과 같다.

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

function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes =String( date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    clock.innerText=`${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);

5.3 총복습