Vanilla JS 실시간 시간 뜨게 하기 (20줄도 안됨)
2020. 3. 31. 01:24ㆍ컴퓨터언어/Vanilla JS
728x90
반응형
간단하게 5분도 안 걸리는 코딩이다.
HTML
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>This is a clock app.</h1>
<h4 class="js-clock"></h4>
<script src="../static/clock.js"></script>
</body>
</html>
JS
// DOM 객체로서 HTML 태그 속의 class name을 css처럼 직관적으로 가져오게 하는 마법의 도구 : document.querySelector()
const CLOCK = document.querySelector(".js-clock");
// 3. showClock 함수는 시간 객체를 생성하여 각 상수에 필요한 정보만을 선별한 뒤, HTML에 쏘아주는 역할을 한다.
function showClock() {
// 날짜와 시간 모두 가져와주는 객체 Date를 생성하여 상수 DATE에 담는다.
const DATE = new Date();
// 시, 분, 초에 해당하는 정보를 가져와주는 함수만을 "."를 활용하여 불러오고, 각각 상수에 담는다.
const HOUR = DATE.getHours();
const MIN = DATE.getMinutes();
const SEC = DATE.getSeconds();
// 맨 윗줄에서 HTML의 시계가 나오는 부분을 불러왔던 곳에 해당 시간정보를 쏘아준다.
// 이때 작은 따옴표가 아니라, 숫자 1 왼쪽에 있는 것임을 유의하자!
// 이는 따옴표처럼 문자열을 다루는 것은 동일하지만, 그 안에 변수를 섞어 쓸 수 있다는 점이 차이점이자 매력이다.
CLOCK.innerHTML =
`${HOUR < 10 ? `0${HOUR}` : HOUR}
: ${MIN < 10 ? `0${MIN}` : MIN}
: ${SEC < 10 ? `0${SEC}` : SEC}`
}
// 2. 그 태초의 init 함수의 내부는 1000밀리세컨즈(=1초)마다 showClock 함수를 실행하는 구조로 되어있다.
function init() {
setInterval(showClock, 1000);
}
// 1. 이 JS 파일이 불러와짐과 동시에 시작되는 함수
init();
JavaScript는 진정한 함수파티인 것 같다.
728x90
반응형
'컴퓨터언어 > Vanilla JS' 카테고리의 다른 글
| [for loop] for 반복문의 다양한 방법 (ES6) (0) | 2020.05.19 |
|---|---|
| [JS] const로 선언해도 array와 object는 수정이 가능한가? (0) | 2020.05.11 |
| [Javascript] JSON 핵심 정리 (0) | 2020.05.07 |
| [3줄정리] High-order Function & Call-back Function (0) | 2020.05.04 |
| Vanilla JS 마스터하기 1일차 (0) | 2020.03.31 |