[JS] 바닐라 자바스크립트 - setInterval,setTimeout ,Date,PadStart 시계 만들기

<들어가기 앞서>
노마드 코더 강의를 보며 정리한 글입니다.

---

setInterval()

특정 시간마다 함수를 반복해서 실행한다.
ex) setInterval(sayHello,1000); 1초마다 sayHello 함수 실행

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

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

//함수를 2초마다 나타나게 하고 싶다. setInterval 2개의 인자를 받음 (function, ms) 1초마다 함수 실행
setInterval(sayHello,1000);

setTimeout()

시간이 흐르고 딱 한 번 보여짐.

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

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

//function을 오직 한 번만 보여주게 설정
//근데 이제 3초를 곁들인..
setTimeout(sayHello,3000);

Date()

공식문서
시계가 나오게 된다.
여기서 getClock()함수를 실행시켜주는 이유는 페이지가 뜨자마자 시계가 나올 수 있게 하기 위함이다.
new Date()함수에서 시:분:초 따로 가져오면 시계가 된다.
그러나 한 가지 거슬리는 점은 00,01,02 이렇게 표시되는 게 아니라
0, 1, 2 이렇게 표시되는 것임!!

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

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

getClock() //웹사이트가 로드되자마자 getClock을 실행하고 또 매초마다 다시 실행되도록
setInterval(getClock, 1000);

padStart()

string의 앞 부분을 늘려야할 때, 'string'.padStart(늘릴길이, "채워넣을 문자열")
현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다.
ex) 'abc'.padStart(6,"123465"); // "123abc"

수정해서 이제 01, 02, 03,으로 표시되고 있다!

⌚ clock.js

const clock = document.querySelector("h2#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() //웹사이트가 로드되자마자 getClock을 실행하고 또 매초마다 다시 실행되도록
setInterval(getClock, 1000);

---

시계를 이렇게 간단한 코드 몇 줄로 만들 수 있다니.. 자스의 세계는 참 재밌는 거 같다. 일단 만들어지는 게 바로바로 눈에 보여서 좋다.