자바스크립트 시계 만들기

 

최종 결과물

DOM

 

• HTML의 모든 컨텐츠를 웹 브라우저의 메모리 상에 올려 자바스크립트로 접근하기 위해 DOM 문서를 사용한다.
• HTML의 모든 태그를 자바스크립트에서 객체로 불러올 수 있다.
• 요소 접근 메서드

document.getElementById(""): document는 가장 포괄적인 범위로, HTML 전 문서를 탐색하여 ""사이 들어가는 Id 요소를 호출한다. 

document.querySelector(""): 특정 태그, 또는 .가 붙을 경우 클래스, #가 붙을 경우 ID 요소를 호출한다.

 

• 요소 변환 메서드

요소.innerHTML = 을 통해 해당 요소 내 값을 재할당할 수 있다.

 

날짜 호출 메서드

 

Date()은 달, 날짜, 요일, 시간, 분, 초 등 시간과 관련된 모든 요소를 호출한다.

date.getHours()는 시간 요소를 호출한다.

date.getMinutes()는 호출한 시간 중 분 요소를 호출한다.

date.getSeconds()는 초 요소를 호출한다.

 

 

시계를 만들기 위해 필요한 동작들

 

1) 현재 시간을 호출한 후, 시간/분/초 단위로 각각 분해한다.

function getTime(){
	let date = new Date();
    let hours = date.getHours();
	let minutes = date.getMinutes();
	let seconds = date.getSeconds();
}

2) 현재 시간에 맞추어 시간 : 분 : 초 : 형식으로 html 상에 표시되도록 한다.

const clockContainer = document.querySelector(".clock"),
	  clockTitle = document.querySelector("h1");
      
function displayTime(){

clockTitle.innerHTML = `${hours}`:`${minutes}`:`${seconds}`;

}

이 때, 시간/분/초가 현재 시간에 맞추어 동적으로 변화해야 하므로 변수를 텍스트로 할당할 수 있게 백틱을 사용한다. 

 

3) 10미만의 정수의 경우, 앞에 0가 표시되어 일관된 두 자리수로 표현되도록 하자.

 

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

물음표 연산자를 복습할 수 있는 좋은 기회였다.

 

4) 0시의 경우, 12시로 치환되도록 하자.

 

if (hours == 0) {
		hours = 12;
	} 

 

5) 13 ~ 24의 경우, 1 ~ 12로 표시하고 대신 AM / PM 으로 구분하자.

if (hours > 12) {
		hours = hours - 12;
		period = "PM";
	}

6) 1초마다 시간이 갱신되도록 하자.

 

setInterval(getTime, 1000);

 

---

 

간단한 예제였지만 자바스크립트로 구현하는 첫 과제물!

생각보다 재밌었고, 역시 직접 구현해야 이해된다는 중요한 교훈을 얻었다. 특히 물음표 연산자는 아무리 시간이 지나도 공식이 잘 안 외워졌는데 익숙해질 수 있었다.