학습목표
실시간으로 작동하는 시계를 구현하는 것을 통하여 날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 빌트인 객체이면서 생성자 함수인 date 객체를 학습한다.
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Clock</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<h1 class="myClock"></h1>
<script type="text/javascript" src="./js/common.js"></script>
</body>
</html>먼저 HTML에 myClock이라는 클래스명을 가진 h1태그를 만든다. 추후 이 태그 안에 자바스크립트로 구현된 시계를 집어넣을 예정이다.
2. JavaScript
2-1.
let clock = document.querySelector(".myClock");
먼저 querySelector를 이용해 위에서 만든 .myClock에 접근하고, 이를 clokc 이라는 변수에 넣는다.
2-2.
function getTime() {
const time = new Date();
const hour = time.getHours();
const minutes = time.getMinutes();
const seconds = time.getSeconds();}new Date()를 통해 객체를 초기화하고,time변수를 통해 현재 시간을 가져온다.
time.getHours() //시간
time.getMinutes() //분
time.getSeconds() //초
Date 객체 초기화
JavaScript Date 객체를 생성하는 법은 new 연산자를 사용하는 것이 유일하다.
다음으로 HTML에 시계형태로 변수를 넣어준다.
clock.innerHTML = hour + ":" + minutes + ":" +seconds;2-3.
getTime() 함수를 호출하면 페이지에 시계가 나타나게 된다.
그럴듯한 시계가 구현되었다! 그러나 여기서 문제가 있다. new Date()를 통해 시간 데이터를 가져온후 추가적으로 어떤 코드도 넣지 않았기 때문에 만약 1~9시 같이 시간이 한자리수인 경우에 시계는 1:17:23 처럼 표현이 될 것이다.
이것을 해결하기 위해 삼항연산자를 이용한다.
clock.innerHTML = `${hour < 10 ? `0${hour}` : hour}:
${minutes < 10 ? `0${minutes}` : minutes}:
${seconds < 10 ? `0${seconds}` : seconds}`;
}hour < 10 ? `0${hour}` : hourhour부분만 풀어서 설명하자면 이렇다.
"hour이 10보다 클 경우에 앞에 0을 붙이고 그렇지 않을 경우에 그냥 출력하라"
삼항연산자를 통하여 hour의 값이 1~9인 경우 01, 02, 03 처럼 0을 붙여서 화면에 출력할 수 있게된다.
2-4.
마지막으로 우리가 만든 시계는 새로고침을 하지않으면 시간이 변하지 않는다. 함수를 한 번 밖에 불러오지 않았기 때문이다. 실시간으로 움직이는 시간을 위해서는 seInterval()을 이용한다.
function init() {
setInterval(getTime, 1000);
}
init();setInterval(param1,param2)
seInterval()는 두가지 인자를 가진다. 첫번째는 실행할 함수명, 그리고 두번째는 몇초마다 실행할 것인지 받아온다.
시계를 구현한 getTime()을 1초마다 한 번씩 호출해 1초마다 시간이 흐르는 시계가 완성되었다!
3. 완성
//h1태그에 접근하는 변수생성
let clock = document.querySelector(".myClock");
//new Date()를 통해 시간을 가져와 각각의 변수에 넣고, 이것들을 h1에 넣음
function getTime() {
const time = new Date();
const hour = time.getHours();
const minutes = time.getMinutes();
const seconds = time.getSeconds();
//삼항연산자를 이용해 시,분,초를 두자리로 만듬
clock.innerHTML = `${hour < 10 ? `0${hour}` : hour}:
${minutes < 10 ? `0${minutes}` : minutes}:
${seconds < 10 ? `0${seconds}` : seconds}`;
}
//1초마다 시계를 실행시키기 위해 seInterval()함수에 인자를 넣고 init함수를 통해 실행시킴
function init() {
setInterval(getTime, 1000);
}
init();