자바스크립트로 시계를 만들어보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="prac.css">
<title>JavaScript Clock</title>
</head>
<body>
<div class="clock">
<h1>00:00:00</h1>
</div>
<script src="clock2.js"></script>
</body>
</html>
먼저 위와 같이 시계를 보여줄 html 문서를 하나 만들어줍니다.
그러면 화면에 위와 같이 00:00:00 표시가 나옵니다.
그다음으로 자바스크립트 코드를 넣을 문서를 하나 만들어줍니다.
저 같은 경우에는 clock2.js, 이렇게 파일 이름을 만들었습니다.
const clock = document.querySelector(".clock");
/*
html 문서안에서 class 이름이 clock인 코드를 가지고 와서
상수 clock으로 설정해줍니다.
이 부분 입니다.
*/
const clockTitle = clock.querySelector("h1");
/*
그 후
<div class="clock">
<h1>00:00:00</h1>
</div>
안에 있는 h1 태그를 상수 clockTitle로 설정해줍니다.
*/그 안에 이렇게 작성해줍시다.
상수 clockTitle은 앞으로 시간을 저장할 상수입니다.
그 아래 이어서 현재 시간을 가지고 올 함수를 만들어줍니다.
function Time(){
const date = new Date();
const hour = date.getHours(); // '시'를 저장
const minute = date.getMinutes(); // '분'을 저장
const second = date.getSeconds(); // '초'를 저장
clockTitle.innerText = `${hour}:${minute}:${second}`;
}clockTitle.innerText는 <h1></h1>태그 안에 ${hour}:${minute}:${second}를 넣는다고 생각하시면 됩니다.
주의) clockTitle.innerText = 이 다음에 "", '' 이것이 아니고 키보드에서 느낌표 왼쪽에 있는 `` 이것입니다.
이것과 관련해서는 아래 링크를 참고해주세요.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
Template literals
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.
developer.mozilla.org
new Date()와 관련해서
Date | PoiemaWeb
Date 객체는 날짜와 시간을 위한 메소드를 제공하는 built-in 객체이다. 내부적으로 Date 객체는 숫자값을 갖는다. 이 값은 1970년 1월 1일 00:00(UTC)을 기점으로 현재 시간까지의 밀리초를 나타낸다.
poiemaweb.com
이 사이트를 참고해주시기 바랍니다.
이제 아래쪽에 이어서 html 화면에 시간을 보여줄 함수를 만들어줍니다.
function show(){
Time();
}
show();
화면을 새로고침 하면 위와 같이 현재시간이 뜨는 것을 볼 수 있습니다.
하지만 시계가 스스로 가지 않고 사용자가 새로고침 할 때마다 가는 것을 볼 수 있는데요.
시계가 스스로 가도록 바꿔줍시다.
function show(){
Time();
setInterval(Time,1000);
}
show();show 함수 안에 'setInterval(Time,1000)'을 추가했습니다.
setInterval은 일정한 시간 간격으로 실행하게 만드는 것입니다.
setInterval(Time,1000)을 하여 Time 함수가 1초마다 실행되게 만들어준 것입니다.
여기서 1000은 1초를 뜻합니다.
이제 화면을 새로고침 해서 확인해보면 시간이 스스로 가는 것을 볼 수 있습니다.
아직 마음에 들지 않습니다.
22:51:02 이런 식으로 시, 분, 초를 두 자리씩 표현해주고 싶습니다.
Time 함수 부분을 고쳐줍시다.
function Time(){
const date = new Date();
const hour = date.getHours(); // '시'를 저장
const minute = date.getMinutes(); // '분'을 저장
const second = date.getSeconds(); // '초'를 저장
clockTitle.innerText = `${hour < 10 ? `0${hour}` : hour}:${minute < 10 ? `0${minute}` : minute}:${second < 10 ? `0${second}` : second}`;
}clockTitle.innerText 부분을 바꿔줬는데요.
저기 쓰인 '?, : ' 이것이 궁금하시다면 삼항 조건 연산자 검색
혹은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
삼항 조건 연산자
조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 보통 if 명령문의 단축 형태로 쓰입니다.
developer.mozilla.org
이곳을 참고해주시기 바랍니다.
다시 clockTitle.innerText 이 부분을 설명하자면 '시', '분', '초'가 10보다 작을 때는 앞에 0을 붙여 시간을 보여주고 그렇지 않을 경우에는 그냥 시간을 보여주게 설정한 것입니다.
이제 화면을 새로 고침 하면 위와 같이 10보다 작은 경우에는 앞에 0이 붙여져 표현되는 것을 볼 수 있습니다.
아래는 전체 자바스크립트 코드입니다.
const clock = document.querySelector(".clock");
/*
html 문서안에서 class 이름이 clock인 코드를 가지고 와서
상수 clock으로 설정해줍니다.
이 부분 입니다.
*/
const clockTitle = clock.querySelector("h1");
/*
그 후
<div class="clock">
<h1>00:00:00</h1>
</div>
안에 있는 h1 태그를 상수 clockTitle로 설정해줍니다.
*/
function Time(){
const date = new Date();
const hour = date.getHours(); // '시'를 저장
const minute = date.getMinutes(); // '분'을 저장
const second = date.getSeconds(); // '초'를 저장
clockTitle.innerText = `${hour < 10 ? `0${hour}` : hour}:${minute < 10 ? `0${minute}` : minute}:${second < 10 ? `0${second}` : second}`;
}
function show(){
Time();
setInterval(Time,1000);
}
show();
오늘은 이것으로 마치겠습니다.
#VScode로 작성한 코드입니다.
#참고 : https://academy.nomadcoders.co/courses/435558/lectures/6689800
#3.1 Making a JS Clock part One
크롬 앱 클론코딩하며, JS 이론 배우기
[초급] HTML, CSS, JS
academy.nomadcoders.co
'IT > JavaScript' 카테고리의 다른 글
| JavaScript(2) ToDoList 만들기 (1) | 2020.02.12 |
|---|
댓글