바닐라JS - 앱 만들기 clock

Intervals

- 매번 일어나야 하는 무언가 (예) 매 2초마다 일어나야하는 무언가를 만들 때 사용

 

serInterval(function, 호출간격(ms))

 

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

setInterval(sayHello, 5000);

// 5초마다 sayHello 함수를 호출하여 console에 "hello"를 출력

125초 동안 25번 출력된 hello

 

 

Timeouts

- 설정한 시간만큼 지나고 function이 실행

- 한번만 실행

 

setTimeout(function, 시간(ms))

 

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

setTimeout(sayHello, 5000);

// 5초가 지난 뒤 sayHello 함수를 호출하여 console에 "hello" 출력

 

 

Dates

- Date를 불러오는 함수

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

 

date 불러오는 법

 

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

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

getClock(); // 새로고침시 바로 시계가 보일 수 있도록 먼저 실행
setInterval(getClock, 1000); // 1초마다 getClock 함수를 호출하여 시계를 업데이트

 

문제점:  초가 한자리 수일 때 :1이 아닌 :01로 표기하고 싶음

 

 

 

PadStart

- 길이가 짧은 string을 더 길게 표시하고 싶을 때

 

"string".padStart(최소 문자열 길이, "앞에 추가할 string") 

 

부야~

- 자리수가 모자랄 때만 기능하고 아닐 경우 그대로 출력

- 문자열 뒤에 추가할 때는 padEnd()를 사용 

- 함수의 인수인 문자열의 길이가 출력 문자열의 최소 길이라고 생각하면 됨

- string이 최소 길이가 안될 때 두번째 인수를 사용해 부족한 만큼 채움

 

 

 

Colck

 

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

function getClock() {
    const date = new Date(); // date object 생성
    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);

- interval로 1초마다 시계를 갱신

- string으로 가져온 시간 정보를 묶어 number를 string 바꿈

- padStart()로 string이 된 시간 숫자가 1의 자리수 일 때 앞에 0을 표기하도록 함