JavaScript에서 날짜와 시간을 다루려면 Date 객체를 사용해야 합니다. Date 객체는 new Date() 생성자를 통해 손쉽게 만들 수 있으며, 현재 날짜와 시간뿐만 아니라 특정 날짜를 지정하여 생성할 수도 있습니다.
Date 객체 생성 방법
Date 객체는 다양한 방식으로 생성할 수 있습니다.
- new Date() : 현재 날짜와 시간으로 객체를 생성합니다.
- new Date(milliseconds) : 1970년 1월 1일 이후 경과한 밀리초를 기준으로 객체를 생성합니다.
- new Date(dateString) : 날짜 문자열(예: "2024-01-01")을 파싱하여 객체를 생성합니다.
- new Date(year, month, day, hours, minutes, seconds) : 연도, 월, 일 등 개별 값을 지정하여 객체를 생성합니다. 이때 월(month)은 0부터 시작한다는 점에 유의하세요.
예제 코드
다음은 JavaScript에서 Date 객체를 생성하고 화면에 출력하는 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript의 Date 객체</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 Date 객체를 생성하여 화면에 표시합니다.
</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = new Date();
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'클릭하세요' 버튼을 누르면 현재 날짜와 시간이 Date 객체로 생성되어 결과 영역에 표시됩니다.
마무리
이처럼 new Date() 생성자 하나만으로도 현재 시각을 담은 Date 객체를 간단히 만들 수 있습니다. 생성된 객체에는 getFullYear(), getMonth(), getDate(), getHours() 등 다양한 메서드를 사용해 원하는 정보를 추출할 수 있으니, 실제 프로젝트에서 활용해 보시기 바랍니다.