1. Date() 객체 생성
- Date는 시간정보를 담고있는 클래스다. 이를 이용해서 시간정보를 갖는 객체를 생성할 수 있다.
const date = new Date(); // 시간정보를 담고있는 객체를 생성
- Date 클래스를 이용하면 해당 클래스가 갖고있는 메소드를 이용해서 다양한 정보를 알아낼 수 있다.
console.log(date); // 현재 시간정보를 출력
console.log(date.getDay()); // 1 = 월요일
console.log(date.getDate()); // 일자를 가져옴
console.log(date.getHours()); // 시간
console.log(date.getMinutes()); // 분
console.log(date.getSeconds()); // 초
- date객체를 통해 알아낸 정보들을 변수를 할당하여 각각의 변수에 저장해준다.
- 기본 코드는 다음과 같다.
[기본 HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vanilla JS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<!-- Script 태그는 Body태그의 가장 마지막에 위치한다. -->
<script src="index.js"></script>
<script src="clock.js"></script>
</body>
</html>
[JS 코드]
const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("h1");
function getTime() {
const date = new Date(); // 시간정보를 담고있는 객체를 생성
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}
function init() {
getTime();
}
init();
[출력화면]
- 위의 사진처럼, 시간이 잘 출력되는 것을 볼 수 있다. 하지만, 시간이 자동으로 흐르지 않아 매번 새로고침을 해야하는 문제점이 있다. 어떻게 하면 1초마다 시간이 업데이트 되도록 할 수 있을까?
2. setInterval()
- setInterval(함수, 시간): 매개변수로 들어가는 함수를 얼마 만큼의 시간 간격(ms)을 두고 호출할 것인지 설정하는 함수.
ex) sayHi() 함수를 3초의 간격을 두고 호출 / 3초 = 3000ms
function sayHi() {
console.log("Hi")
}
setInterval(sayHi, 3000)
- 그럼 setInterval() 함수를 이용하여 시간이 1초마다 업데이트 되도록 만들어보자.
[JS 코드]
const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("h1");
function getTime() {
const date = new Date(); // 시간정보를 담고있는 객체를 생성
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}
function init() {
setInterval(getTime, 1000);
}
init();
[출력화면]
- 출력 화면을 확인하니 한가지 문제점을 찾을 수 있었다. 59초 다음에 0초가 되었을때, 00초가 아니라 0초로 1자리로 표현되는 것이다. 어떻게 고칠 수 있을까?
3. 삼항연산자(Ternary Operator)
- 삼항연산자는 간단한 if문을 기호로 작성하는 표현법을 의미한다.
- 삼항연산자는 1개의 조건을 기반으로 A or B의 연산을 하게 된다.
- 표현법은 다음과 같다.
ex) 만약 A가 어떤 조건보다 작다면, A이고 아니면 B 라는 조건문을 삼항연산자로 작성한다면 아래와 같이 표현할 수 있다.
답) A < 조건 ? A : B
- 이 삼항연산자를 이용해서 간단하게 위에서 발견한 00초가 아니라 0초로 시간이 출력되는 문제점을 고쳐보자.
[JS 코드]
const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("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}`;
}
function init() {
setInterval(getTime, 1000);
}
init();
[출력화면]
'Front-end > Vanilla JS' 카테고리의 다른 글
| Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(1) (0) | 2020.10.12 |
|---|---|
| Vanilla JS - 지역 저장소(Local Storage) (0) | 2020.10.10 |
| Vanilla JS - 조건문(if~else) (0) | 2020.10.08 |
| Vanilla JS - 이벤트와 이벤트 핸들러(Events & Event Handlers) (0) | 2020.10.07 |
| Vanilla JS - DOM(Document Object Model)(2) (0) | 2020.10.06 |
댓글