JavaScript) 날짜 및 시간 다루기 (Date 객체 활용)

: JavaScript의 Date 객체를 사용하여 현재 날짜 및 시간 출력, 특정 날짜 설정, 개별 날짜 요소 추출하는 방법

1. HTML 기본 구조

<p id="demo"></p>  <!-- 현재 시간을 표시할 영역 -->
<br/>
<button type="button" onclick="displayDate()">지금시간</button> <!-- 현재 시간 버튼 -->
<p id="date"></p>  <!-- 특정 날짜 정보를 표시할 영역 -->

<p id="demo"> : 현재 시간을 표시

<button> : 클릭하면 현재 시간을 출력하는 함수를 실행

<p id="date"> : 특정 날짜를 설정하고, 그 정보를 표시

---

2. 현재 시간 표시 (setInterval 활용)

displayDate() 함수: 현재 시간을 가져와서 화면에 출력

function displayDate(){
    document.getElementById("demo").innerHTML = Date();
}

: Date()를 호출하면 현재 날짜 및 시간이 문자열 형태로 반환

: document.getElementById("demo").innerHTML = Date();

    →  id="demo"인 <p> 태그 내부에 현재 날짜/시간을 출력

setInterval(): 1초마다 자동으로 시간 업데이트

setInterval("displayDate()", 1000);

: setInterval("displayDate()", 1000);

    → displayDate() 함수를 1초(1000ms)마다 실행하여 자동으로 갱신되도록 설정

: 버튼을 클릭하지 않아도 1초마다 현재 시간이 자동 업데이트

---

3. 특정 날짜 설정 및 개별 요소 추출

new Date()를 사용하여 특정 날짜 설정

let date = new Date("October 12, 2025 14:33:23");

"October 12, 2025 14:33:23"

     → 2025년 10월 12일 14시 33분 23초로 날짜를 설정

new Date(2025, 0, 16, 13, 25, 0);

    → 2025년 1월 16일 13시 25분 00초 (월은 0부터 시작)

---

4. 특정 날짜의 개별 요소 가져오기

getDay() : 요일 가져오기

document.getElementById("date").innerHTML = date.getDay();

getDay()는 요일을 반환

결과값 (0~6)

: 0: 일요일 (Sun)

: 1: 월요일 (Mon)

: 2: 화요일 (Tue)

...

: 6: 토요일 (Sat)

getFullYear(): 연도 가져오기

document.getElementById("date").innerHTML = date.getFullYear();

: getFullYear()는 2025를 반환

getMonth(): 월 가져오기

document.getElementById("date").innerHTML = date.getMonth() + 1;

: getMonth()는 0부터 시작하는 월 값을 반환

(예: 0 → 1월, 1 → 2월, ..., 11 → 12월)

: 따라서 +1을 해줘야 정상적인 월 숫자가 나옴.( Day도 포함 )

getDate(): 날짜 가져오기

document.getElementById("date").innerHTML = date.getDate();

: getDate()는 해당 월의 일(day) 값을 반환

getHours(), getMinutes(), getSeconds(): 시간, 분, 초 가져오기

document.getElementById("date").innerHTML = date.getHours();   // 시
document.getElementById("date").innerHTML = date.getMinutes(); // 분
document.getElementById("date").innerHTML = date.getSeconds(); // 초

: 각각 시간(Hours), 분(Minutes), 초(Seconds) 값을 가져옵니다.

---

5. 실행 결과

5-1. "지금시간" 버튼 클릭

: <p id="demo">에 현재 시간이 표시

Tue Feb 20 2025 10:30:45 GMT+0900 (KST)

5-2. 특정 날짜 설정 후 개별 요소 출력

let date = new Date("October 12, 2025 14:33:23");

: date.getFullYear() → 2025

: date.getMonth() + 1 → 10

: date.getDate() → 12

: date.getDay() → 0 (Sunday)

: date.getHours() → 14

: date.getMinutes() → 33

: date.getSeconds() → 23

연도: 2025
월: 10
일: 12
요일: 0 (일요일)
시간: 14
분: 33
초: 23

메서드	설명	반환값 예시
Date()	현재 날짜 및 시간 가져오기	"Tue Feb 20 2025 10:30:45 GMT+0900 (KST)"
new Date("YYYY-MM-DD HH:MM:SS")	특정 날짜 설정	Sun Oct 12 2025 14:33:23 GMT+0900 (KST)
getFullYear()	연도 가져오기	2025
getMonth()	월 가져오기( 0 ~ 11)	9 (10월)
getDate()	날짜 가져오기	12
getDay()	요일 가져오기 (0=일요일 ~ 6=토요일)	0 (일요일)
getHours()	시간 가져오기	14
getMinutes()	분 가져오기	33
getSeconds()	초 가져오기	23