📌 setTimeout()
setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다.
function sayHello() {
console.log("hello");
}
setTimeout(sayHello, 3000);console 창을 보면 3초 뒤에 실행된다.
setTimeout()과 setInterval()의 차이점은 주기적으로 실행하는 setInterval()과 다르게 setTimeout()은 일정 시간 기다린 후 함수를 실행하는 것이 그 차이점이다.
📌 Date()
시 분 초를 보여주는 시계를 만들어보자. JavaScript에서는 Date() 객체를 사용하여 매 순간 변화하는 시간과 날짜에 관한 정보를 얻을 수 있다. Date() 객체는 연월일, 시분초의 정보와 함께 밀리초(millisecond)의 정보도 함께 제공합니다.
🧩 new Date()
인수(argument)를 전달하지 않으면 현재 날짜와 시간을 가지는 인스턴스를 반환한다.
let date = new Date()
console.log(date) // Sat Sep 10 2022 11:36:57 GMT+0900 (한국 표준시)🧩 new Date(dateString)
인수(argument)로 날짜와 시간을 나타내는 문자열을 전달하면 지정된 날짜와 시간을 가지는 인스턴스를 반환한다.
let date = new Date('May 16, 2019 17:22:10');
console.log(date); // Thu May 16 2019 17:22:10 GMT+0900 (한국 표준시)
date = new Date('2019/05/16/17:22:10');
console.log(date); // Thu May 16 2019 17:22:10 GMT+0900 (한국 표준시)🧩 Date() 메소드
| 메소드 | 설명 | 값의 범위 |
|---|---|---|
| getDate() | 현지 시각으로 현재 일자에 해당하는 숫자를 반환한다. | 1 ~ 31 |
| getDay() | 현지 시각으로 현재 요일에 해당하는 숫자를 반환한다. | 0 ~ 6 (월요일 1 ~ 일요일 0) |
| getMonth() | 현지 시각으로 현재 월에 해당하는 숫자를 반환한다. | 0 ~ 11 (0부터 시작 0 = 1월) |
| getFullYear() | 현지 시각으로 현재 연도를 4비트의 숫자(YYYY)로 반환한다. | YYYY |
| getHours() | 현지 시각으로 현재 시각에 해당하는 숫자를 반환한다. | 0 ~ 23 |
| getMilliseconds() | 현지 시각으로 현재 시각의 밀리초에 해당하는 숫자를 반환한다. | 0 ~ 999 |
| getMinutes() | 현지 시각으로 현재 시각의 분에 해당하는 숫자를 반환한다. | 0 ~ 59 |
| getSeconds() | 현지 시각으로 현재 시각의 초에 해당하는 숫자를 반환한다. | 0 ~ 59 |
Date() 객체를 이용해서 콘솔 창에 시 분 초가 출력되게 할 것이다. 그리고 setTimeout()처럼 일정 시간을 기다린 후 실행하는 함수 보다 시 분 초를 주기적으로 표시해 줄 수 있는 setInterval()을 사용하는 게 적합하다.
console 창을 보면 시간이 확인된다. 화면을 새로고침 했을 때 setInterval()에 의해 1초 후에 console 창에 표시되는 것을 볼 수 있다. 그래서 코드에 getclock()을 추가해서 wedsite가 load되자마자 getclock()을 실행하고 setInterval()을 이용해 매 초마다 다시 실행되게 만든다.
const clock = document.querySelector("#clock");
function getClock() {
const date = new Date();
// 현재 날짜와 시간을 나타내는 new Date()를 date라는 변수로 선언한다.
// 인수를 전달하지 않으면 현재 날짜와 시간을 가지는 인스턴스를 반환한다.
console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
// Date 메서드를 이용해서 시,분,초 를 나타나게 한다.
}
getClock();
// 웹사이트가 로드되면 getClock()을 바로 호출한다.
setInterval(getClock, 1000);
// setInterval() 함수는 주기적으로 인자를 실행하는 함수이다. / 1초 뒤에 getClock()함수를 실행
// 첫번째 인자로 실행할 함수의 이름을 적는다. 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.
getclock() 추가하기 전
getclock() 추가했을 때
console 창에 보이는 시계가 아닌 wedsite 화면에 보이게 만들어보자.
console.log 대신 clock.innerText를 사용해서 화면에 보이게 만든다.
const clock = document.querySelector("#clock");
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock();
setInterval(getClock, 1000);
