[ JS : 실습 : Making a JS Clock ]

📍 Javascript를 공부했을 때 학습노트에 정리해둔 것을 옮겨왔다.

<Date( )>

Date() 참고 링크

<setInterval( )>

이 함수가 하는 것은 두 인자값(argument)을 받는데, 첫번째 인자로 실행할 function 함수를 받고, 두번째 인자로 그 함수를 실행하고 싶은 시간(실행할 시간)을 받는다.

• ex) setInterval(fn, 시간);

function init() {
    getTime();
    setInterval(getTime, 1000);
    // 1초 마다 업데이트 되도록 설정함. 
}
init();

여기서 60초가 지나면 초가 한자리 숫자로 넘어가는 것을 볼 수 있다. 한자리 숫자 앞에 0을 붙이기 위해 삼항연산자를 써보자.

• <ternary operator 삼항연산자> : 작은 if라고 볼 수 있다.

function getTime() {
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours}:${minutes}:${seconds < 9 ? `0${seconds}`: seconds}`;
}

따로 if 식을 빼지 않고, clockTitle.innerText 안의 { }에 조건을 넣어주었다. 매우 유용하고 간편한 방법.

{seconds < 10 ? `0${seconds}`: seconds}

만약(if) 초가 10보다 작으면(참이면) 0${seconds} 을 실행할 것이고, 그렇지 않으면(거짓이면) seconds(디폴트 값)를 실행할 것이라는 뜻.

• If 문은 ? 로 쓴다
• Else 문은 : 로 쓴다

시(hours), 분(minutes), 초(seconds)에 모두 적용해보자.

clockTitle.innerText =
`${hours < 10 ? `0${hours}`: hours}:${minutes < 10 ? `0${minutes}`: minutes}:${seconds < 9 ? `0${seconds}`: seconds}`;