🗓 진행일: 3월 16일
📎 5.0 ~ 5.3 with 과제

5.0 Intervals

• interval? 주기적으로 어떤 작업이 일어나게 해주는 것

clock.js

// 1 arg: 실행하려는 함수, 2 arg: 간격 ms
setInterval(sayHello, 5000);

5.1 Timeouts and Dates

우리의 최종 목표는 시계,
Date와 Timeout에 대해 배웁시다

clock.js

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

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

// interval과 다르게 한 번만 실행하는 것
// 1 arg: 어떤 함수를 실행할지
// 2 arg: 얼마나 기다릴지
// setTimeout(sayHello, 5000);

getClock(); // setInterval 때문에 좀 걸리나봐 getClock으로 일단 한 번 실행
setInterval(getClock, 1000);

5.2 PadStart

숫자가 0~9초일 때는 1의 자리로 나오는 게 싫어 그럴 때 PadStart를 사용한다

clock.js

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}`;
}

// "String".padStart(2, "0")
// 어떤 String의 길이가 2가 되지 않는다면 앞에 0을 (부족한 길이만큼) 추가한다
// 뒤에 붙이려면 padEnd 도 있네요
// number를 String으로 만들려면 String()으로 감싸준다

5.3 Recap

복습쓰