자바스크립트 Date객체 예제
자바스크립트에서 날짜와 시간을 다루는 객체로 Date 객체가 있다.
Date 객체는 날짜, 시, 분, 초 등의 시간값을 가지고 있는 오브젝트이다.
자바스크립트에서 날짜나 시간에 관련된 작업이 필요할 때에는 반드시 사용되는 객체이므로 반드시 숙지해 놓아야 한다.
Date객체의 기본 예제
기본적으로 Date 객체의 선언은
const d = new Date();
와 같이 한다.
위와 같이 선언하고 화면에 날짜와 시간을 출력해 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>자바스크립트 Date 객체</h2>
<p id="mydate"></p>
<script>
const d = new Date();
document.getElementById("mydate").innerHTML = d;
</script>
</body>
</html>
위 코드를 브라우저에서 실행 시 아래와 같은 결과를 얻을 수 있다.
기본적으로 JavaScript는 브라우저의 표준 시간대를 사용하며 날짜를 전체 텍스트 문자열로 표시한다.
Date 객체의 생성
Date 객체를 생성하는 방법으로는 아래와 같이 여러가지 방법이 있다.
new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)
첫 번째 방법은 앞에서 확인하였고,
두 번째 생성 방법은 지정된 날짜와 시간을 가진 새 Date 객체를 생성한다.
지정된 날짜와 시간의 Date 객체
지정된 날짜와 시간을 가지는 Date 객체의 생성은
const d = new Date(2021, 08, 18, 11, 23, 20, 0);
와 같이 한다.
7개의 매개변수가 있고 각각 년, 월, 일, 시, 분, 초, 밀리초이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>자바스크립트 Date 객체</h2>
<p id="mydate"></p>
<script>
const d = new Date(2021, 08, 18, 20, 23, 20, 0);
document.getElementById("mydate").innerHTML = d;
</script>
</body>
</html>
위 코드를 웹브라우저에서 확인하면 아래와 같은 결과를 보여준다.
현재 날짜와 시간이 아니라 인자값에 지정한 값을 기준으로 날짜와 시간을 출력해 준다.
주의할 것은 월인데요. 월값은 1월은 '0' ~ 12월은 '11'로 적어줘야 한다.
위 예제에서는 08을 적었으므로 9월로 인식하여 'Sep'이라고 출력하고 있다.
근데 또 재미있는 것은 월 데이터 값을 11보다 큰 값을 지정해도 에러가 발생하지 않고
오버된 숫자만큼 다음 연도에 합산되어 이월된다.
매개변수가 6개인 경우
const d = new Date(2021, 08, 18, 11, 23, 20);
매개변수가 6개만 있는 경우는 어떻게 되는지 확인해 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>자바스크립트 Date 객체</h2>
<p id="mydate"></p>
<script>
const d = new Date(2021, 08, 18, 20, 23, 20);
document.getElementById("mydate").innerHTML = d;
</script>
</body>
</html>
년, 월, 일, 시, 분, 초만 넣은 경우 다음의 결과를 보여준다.
매개변수가 5개인 경우
const d = new Date(2021, 08, 18, 11, 23);
매개변수가 5개만 있는 경우는 어떻게 되는지 확인해 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>자바스크립트 Date 객체</h2>
<p id="mydate"></p>
<script>
const d = new Date(2021, 08, 18, 20, 23);
document.getElementById("mydate").innerHTML = d;
</script>
</body>
</html>
년, 월,일, 시, 분만 넣은 경우 다음의 결과를 보여준다.
초 값이 없어서 00초로 표시되고 있다.
마찬가지로 매개변수가 4개인 경우는 년, 월, 일, 시이고 분과 초가 00으로 출력되고,
마찬가지로 매개변수가 3개인 경우는 년, 월, 일이고 시, 분, 초가 00으로 출력된다.
'vita_Programing' 카테고리의 다른 글
| 자바스크립트 배열 컨트롤 중급편 1/2 (1) | 2024.05.19 |
|---|---|
| Javascript 배열 선언 예제 (0) | 2024.05.18 |
| MSSQL에서 저장프로시저 수정이력 확인 (2) | 2024.05.09 |
| 자바스크립트 웹페이지 로딩바 구현 (0) | 2023.11.15 |
| CSS padding 예제로 알아보기 (0) | 2023.11.10 |
