자바 스크립트(js) 입문 공부 11. 타이머 기능, 자바스크립트로 디지털 시계 만들기

 

이번에는 자바스크립트의 타이머 관련 기능들에 대해서 알아보겠습니다. 

타이머 기능 

setTimeout

window 의 기본 함수 중 setTimeout 함수가 있습니다. 

이것은 정해진 시간이 지나고 나면 주어진 함수를 진행해주는 타이머 메소드입니다. 

 

setTimeout(실행할함수, ms단위의시간)

 

(ms 단위의 시간은 1000ms 일 때 1s초 가 지나는 것입니다. )

 

이렇게 함수에다가 인자를 전달하는 것 콜백함수라고 합니다. 

setTimeout은 콜백함수로 실행할 함수를 하나 받습니다. 

 

setTimeout(function(){
	console.log("자, 이제 시작이야.")
    }, 1000)

 

타이머 기능으로 기능을 수행하는 함수를 알아보았으니, 이번에는 시간 간격에 따라 실행하는 함수를 알아볼게요.

 

setInterval 

 

 계속적으로 함수를 반복실행할 수 있도록 해주는 타이머 메소드 입니다. 

 

setInterval(반복실행할함수, ms단위의시간)

 

0.5초 마다 계속 걸어나가겠다는 문자열을 출력해보겠습니다. 

 

setInterval(function(){
    console.log("계속 걸어나가겠어요.")
}. 500)

 

이 기능을 활용하면 1초마다 값을 반환하는 시계를 만들 수 있습니다.

아래 코드를 보며 디지털 타이머 시계를 만드는 과정을 보겠습니다. 

 

let h1 = document.createElement("h1")
document.body.appendChild(h1)

setInterval(function(){
const now = new Date()  

const year = now.getFullYear()
let month = now.getMonth() + 1  
let date = now.getDate()
let hour = now.getHours()
let minute = now.getMinutes()
let second = now.getSeconds()


month = month < 10 ? `0${month}` : `${month}`
date = date < 10 ? `0${date}` : `${date}`
hour = hour < 10 ? `0${hour}` : `${hour}`
minute = minute < 10 ? `0${minute}` : `${minute}`
second = second < 10 ? `0${second}` : `${second}`


h1.textContent = `${year}/${month}/${date} ${hour}:${minute}:${second}`
}, 1000)

 

코드를 하나씩 해석해볼게요. 

 

let h1 = document.createElement("h1")
　　document.body.appendChild(h1)

 

　 html 문서에 h1 제목 요소를 생성하는 h1 함수를 하나 생성하고, 그것을 출력합니다. 

setInterval(function(){
const now = new Date()  

 

　　setInterval 의 기능을 불러와서 현재 시간을 불러오는 now 상수를 만듭니다. 

const year = now.getFullYear()

 

년도를 불러오는 기능으로 year 상수를 만듭니다. 

년도를 let이 아닌 상수 const로 만드는 이유는 하단의 코드에서 월, 일, 시, 분, 초의 경우 1분 의 표기를

01분의 두 자리수로 만드는 작업을 거치기 때문에 변경이 되므로 let의 변수로 저장한 것이고, 

2022년 혹은 2023년의 경우에는 그러한 작업이 필요하지 않기 때문입니다. 

 

let month = now.getMonth() + 1  
let date = now.getDate()
let hour = now.getHours()
let minute = now.getMinutes()
let second = now.getSeconds()

 

각 월, 일, 시, 분, 초를 let 함수로 저장합니다. 

month의 경우, 프로그램이 0월을 기준으로 세기 때문에 +1을 해주어야 값이 올바르게 표기됩니다. 

 

month = month < 10 ? `0${month}` : `${month}`
date = date < 10 ? `0${date}` : `${date}`
hour = hour < 10 ? `0${hour}` : `${hour}`
minute = minute < 10 ? `0${minute}` : `${minute}`
second = second < 10 ? `0${second}` : `${second}`

 

상기에서 말씀드린 것처럼 1분, 1초 로 표기되는 것을 나란한 정렬을 위해 두 자리 수 01분 01초의 형식으로 저장합니다.

h1.textContent = `${year}/${month}/${date} ${hour}:${minute}:${second}`
}, 1000)

 

그리고 맨 위에 만들었던 h1 변수에 년월일시분초의 text Content를 저장하는 코드를 생성해줍니다. 

이렇게 생성된 페이지는 아래와 같습니다!

 

 

여기까지 기본적인 기능에 대해서 알아보았습니다. 

이 다음에는 오늘 만든 타이머 기능을 이용해서 html, css, 자바스크립트 js 를 이용한 디지털 시계 만들기를 해보겠습니다.