시계 만들기
html 파일 수정
이제 모멘텀 extension을 만들기위해 알아야할 문법은 다 배웠으니 실전에 들어가보도록 하자. 우선 html 파일에서 시계가 오는 위치를 정하자.
1
2
3
4
5
6
7
8
9
<body>
<div class="js-clock">
<!-- 시계가 들어갈 클래스를 생성하였다. -->
<h1>00:00</h1>
</div>
<script src="clock.js"></script>
<!-- 시계를 구현하는 자바스크립트 파일을 새로이 또 추가한다. 항상 나누어서 작업하면 깔끔하고 충돌도 덜
일어난다. 이러한 작업태도를 'divde and concour' 라고 한다. -->
</body>
Clock.js 파일 생성(분업화)
그리고 clock.js 란 파일을 만들어준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const clockContainer = document.querySelector(".js-clock"); // 앞서 생성한 시계 클래스를 선택하고
const clockTitle = clockContainer.querySelector("h1"); //시계 클래스의 child인 h1태그를 세부선택한다. 이렇게 따로따로 지정해놓으면 선별 작업하기 편리해진다.
function getTime() {
const date = new Date(); // 시간을 나타내주는 객체이다. 큰 틀을 만들었다.
const minutes = date.getMinutes(); //분
const hours = date.getHours(); // 시
const seconds = date.getSeconds();
clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
minutes < 10 ? `0${minutes}` : minutes
}:${seconds < 10 ? `0${seconds}` : seconds}`; // ternary operator(삼항연산자) 라고 하고 미니if 라고 읽는다. seconds,minutes,hours 가 10미만이면 0%{seconds} 이고 아니면 그대로 출력한다. --0이 숫자 앞에 붙어서 나오게 하는 과정.
}
function init() {
getTime();
setInterval(getTime, 1000); // 괄호안에 있는 함수를 1초마다 업데이터하는 함수.(1000이라 적은 이유는 백만분의 1이기 때문에) 이 함수가 없으면 그냥 새로고침할때의 시간이 그대로 박제되어있게 된다.
}
init();
//always divide and conquer!