Language/JavaScript [JavaScript] Date 객체/메소드

Dexter_- 2018. 10. 18. 18:23

728x90

자바스크립트에서의 날짜 표현

자바스크립트에서는 Date 객체를 사용하여 매 순간 변화하는 시간과 날짜에 관한 정보를 손쉽게 얻을 수 있다.

Date 객체는 연월일, 시분초의 정보와 함께 밀리초(millisecond)의 정보도 함께 제공한다.

자바스크립트에서 날짜와 시간을 나타내기 위한 값의 범위는 다음과 같다.

연도(year) : 1900년(00) ~ 1999년(99)
월(month) : 1월(0) ~ 12월(11)
일(day) : 1일(1) ~ 31일(31)
시(hours) : 0시(0) ~ 23시(23)
분(minutes) : 0분(0) ~ 59분(59)
초(seconds) : 0초(0) ~ 59초(59)

💡 TIP ? 자바스크립트에서 월(month)을 나타낼 때는 1월이 0으로 표현되고, 12월이 11로 표현된다는 사실에 유의해야 한다.

Date 객체

자바스크립트에서 Date 객체를 초기화하는 방법은 다음과 같다.

new Date()
new Date("날짜를 나타내는 문자열")
new Date(밀리초)
new Date(년, 월, 일, 시, 분, 초, 밀리초)

Date 객체를 생성할 때 어떠한 인수도 전달하지 않으면, 현재 날짜와 시간을 가지고 Date 객체를 생성한다.

🔔 예제)


var date = new Date(); // Date 객체 생성
document.write(date);

Date 객체를 생성할 때 인수가 전달되면, 그 형태에 따라 특정 날짜와 시간을 가리키는 Date 객체를 생성한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Object</title>
</head>
<body>
    <h1>특정 날짜와 시간으로 Date 객체 생성</h1>
    <script>
        document.write(new Date("December 14, 1977 13:30:00") + "<br>");    // 날짜를 나타내는 문자열
        document.write(new Date(80000000) + "<br>");                        // 1970년 1월 1일 0시부터 해당 밀리초만큼 지난 날짜
        document.write(new Date(16, 5, 25) + "<br>");                        // 3개의 숫자로 나타내는 날짜이며, 시간은 자동으로 00:00:00으로 설정됨.
        document.write(new Date(16, 5, 25, 15, 40, 0) + "<br>");            // 7개의 숫자로 나타내는 시간과 날짜
        document.write(new Date(2016, 5, 25, 15, 40, 0));                    // 2000년대를 표기하고자 할 때에는 연도 4자리를 전부 표기해야 함.
   </script>    
</body>
</html>

실행 결과

특정 날짜와 시간으로 Date 객체 생성

💡 TIP ? 자바스크립트에서 날짜 계산의 모든 기준은 1970년 1월 1일 00:00:00(UTC, 협정 세계시 부터이다. 또한, 하루는 86,400,000 밀리초(millisecond)로 계산 된다.

자바스크립트 날짜 양식(data format)

자바스크립트에서 날짜를 표현할 수 있는 양식은 다음과 같다.

ISO 날짜 양식
Long 날짜 양식
Short 날짜 양식
Full 날짜 양식

ISO 날짜 양식

ISO 8601은 날짜와 시간을 나타내는 국제 표준 양식이다.

문법

YYYY-MM-DDTHH:MM:SS // T는 UTC(협정세계시)를 나타내는 문자로 시간까지 표현할 때에는 반드시 사용해야 함.

YYYY-MM-DD

YYYY-MM

YYYY

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Format</title>
</head>
<body>
    <h1>ISO 날짜 양식</h1>
    <script>
        document.write(new Date("1977-12-14T13:30:00") + "<br>");    // 날짜와 시간까지 표현함.
        document.write(new Date("1977-12-14") + "<br>");            // 시간이 생략되면 자동으로 09:00:00으로 설정됨.
        document.write(new Date("1977-12") + "<br>");                // 일이 생략되면 자동으로 1일로 설정됨.
        document.write(new Date("1977"));                            // 월이 생략되면 자동으로 1월로 설정됨.
   </script>
</body>
</html>

실행 결과

ISO 날짜 양식

Long 날짜 양식

문법

MMM DD YYYY

DD MMM YYYY

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Format</title>
</head>
<body>
    <h1>Long 날짜 양식</h1>
    <script>
        document.write(new Date("Feb 19 1982") + "<br>");        // MMM DD YYYY
        document.write(new Date("19 Feb 1982") + "<br>");        // DD MMM YYYY
        document.write(new Date("February 19 1982") + "<br>");   // 월의 축약형 뿐만 아니라 전체 단어도 인식함.
        document.write(new Date("FEBRUARY, 19, 1982"));          // 쉼표는 무시되며, 대소문자의 구분은 없음.
   </script>
</body>
</html>

실행 결과

Long 날짜 양식

short 날짜 양식

문법

MM/DD/YYYY

YYYY/MM/DD

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Format</title>
</head>
<body>
    <h1>Short 날짜 양식</h1>
    <script>
        document.write(new Date("02/19/1982") + "<br>");    // MM/DD/YYYY
        document.write(new Date("1982/02/19"));             // YYYY/MM/DD
   </script>
</body>
</html>

실행 결과

Short 날짜 양식

💡 TIP ? ISO 날짜 양식과 short 날짜 양식에서는 반드시 월일 순서로 날짜가 나와야 하며, 일월 순서로 나온 날짜는 자바스크립트가 제대로 인식하지 못한다.

Full 날짜 양식

자바스크립트에서 사용하는 날짜 양식으로 표현된 문자열도 날짜로 인식한다.

🔔 예제)

Web May 25 2016 17:00:31 GMT +0900

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Format</title>
</head>
<body>
    <h1>Full 날짜 양식</h1>
    <script>
        document.write(new Date("Wed May 25 2016 17:00:00 GMT+0900 (Seoul Time)") + "<br>");
        // GMT가 현재 국가와 다른 시간은 현재 국가의 GMT로 변환되어 표현됨.
        document.write(new Date("Wed May 25 2016 17:00:00 GMT-0500 (New York Time)"));
   </script>
</body>
</html>

실행 결과

Full 날짜 양식

Date.now() 메소드

Date.now() 메소드는 1970년 1월 1일 0시 0분 0초 부터 현재까지의 시간을 밀리초(millisecond) 단위의 정수로 반환한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Method</title>
</head>

<body>
    <h1>Date.now() 메소드</h1>
    <script>
        var nowMiliSec = Date.now();
        document.write(nowMiliSec + "<br>");              // 1970년 1월 1일 00:00:00부터 현재까지의 밀리초
        document.write(new Date(nowMiliSec) + "<br>");    // new Date()와 같은 결과를 반환함.
        document.write(new Date());
   </script>
</body>
</html>

실행 결과

Date.now() 메소드

Date.prototype getter 메소드

모든 Date 인스턴스는 Date.prototype 으로부터 메소드와 프로퍼티를 상속받는다.

Date.prototype getter 메소드는 날짜와 관련된 정보를 받아오기 위한 메소드이다.

가장 많이 사용되는 대표적인 getter 메소드는 다음과 같다.

getFullYear()
getDate()
getDay()
getTime()

getFullYear() 메소드

getFullYear() 메소드는 현재 연도를 4비트의 숫자(YYYY)로 반환한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Method</title>
</head>
<body>
    <h1>getFullYear() 메소드</h1>
    <script>
        var date = new Date();
        document.write("올해는 " + date.getFullYear() + "년입니다.");    // 현재 연도를 반환함.
   </script>
</body>
</html>

실행 결과

getFullYear() 메소드

getDate() 메소드

getDate() 메소드는 현재 날짜에 해당하는 숫자를 반환한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Method</title>
</head>
<body>
    <h1>getDate() 메소드</h1>
    <script>
        var date = new Date();
        document.write("오늘은 " + date.getMonth() + "월 " + date.getDate() + "일입니다.");    // 현재 날짜를 반환함.
   </script>
</body>
</html>

실행 결과

getDate() 메소드

getDay() 메소드

getDay() 메소드는 현재 요일에 해당하는 숫자를 반환한다.

자바스크립트에서 일주일은 일요일(0)부터 시작하여 토요일(6)로 끝난다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Method</title>
</head>
<body>
    <h1>getDay() 메소드</h1>
    <script>
        var date = new Date();
        var day;
        switch (date.getDay()) {    // 현재 요일을 반환함.
            case 0:
                day = "일";
                break;
            case 1:
                day = "월";
                break;
            case 2:
                day = "화";
                break;
            case 3:
                day = "수";
                break;
            case 4:
                day = "목";
                break;
            case 5:
                day = "금";
                break;
            case 6:
                day = "토";
                break;
        }
        document.write("오늘은 " + day + "요일입니다.");
   </script>
</body>
</html>

실행 결과

getDay() 메소드

배열을 사용하면 더욱 간단하게 요일을 출력할 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Method</title>
</head>
<body>
    <h1>getDay() 메소드</h1>
    <script>
        var date = new Date();
        var days = ["일", "월", "화", "수", "목", "금", "토"];
        document.write("오늘은 " + days[date.getDay()] + "요일입니다.");
   </script>
</body>
</html>

실행 결과

getDay() 메소드

getTime() 메소드

getTime() 메소드는 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초 단위로 환산한값을 숫자로 반환한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Method</title>
</head>
<body>
    <h1>getTime() 메소드</h1>
    <script>
        var date = new Date();
        var period = date.getTime() / 86400000 // 하루는 86,400,000 밀리초로 계산됨.
        document.write("1970년 1월 1일부터 오늘까지 " + period.toFixed() + "일이 지났습니다."); // 소수 부분은 생략함.
   </script>
</body>
</html>

실행 결과

getTime() 메소드

자바스크립트 Date.prototype getter 메소드

메소드	설명	값의 범위
getDate()	현지 시각으로 현재 일자에 해당하는 숫자를 반환함	1 ~ 31
getDay()	현지 시각으로 현재 요일에 해당하는 숫자를 반환함	0 ~ 6
getMonth()	현지 시각으로 현재 월에 해당하는 숫자를 반환함	0 ~ 11
getFullYear()	현지 시각으로 현재 연도를 4비트의 숫자(YYYY)로 반환함	YYYY
getHours()	현지 시각으로 현재 시각에 해당하는 숫자를 반환함	0 ~ 23
getMilliseconds()	현지 시각으로 현재 시각의 밀리초에 해당하는 숫자를 반환함	0 ~ 999
getMinutes()	현지 시각으로 현재 시간의 분에 해당하는 숫자를 반환함	0 ~ 59
getTime()	1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초 단위로 환산한 값을 숫자로 반환함	-
getTimezoneOffset()	UTC로 부터 현재 시각까지의 시간차를 분 단위로 환산한 값을 숫자로 반환함	-

자바스크립트 Date.prototype UTC getter 메소드

메소드	설명
getUTCDate()	협정세계시(UTC)로 현재 일자에 해당하는 숫자를 반환함
getUTCDay()	협정세계시(UTC)로 현재 요일에 해당하는 숫자를 반환함
getUTCMonth()	협정세계시(UTC)로 현재 월에 해당하는 숫자를 반환함
getUTCFullYear()	협정세계시(UTC)로 현재 현재 연도를 4비트의 숫자(YYYY)로 반환함
getUTCHours()	협정세계시(UTC)로 현재 시각에 해당하는 숫자를 반환함
getUTCMilliseconds()	협정세계시(UTC)로 현재 시각의 밀리초에 해당하는 숫자를 반환함
getUTCSeconds()	협정세계시(UTC)로 현재 시각의 초에 해당하는 숫자를 반환함

Date.prototype setter 메소드

Date.prototype setter 메소드는 날짜와 관련된 정보를 설정하기 위한 메소드이다.

가장 많이 사용되는 대표적인 setter 메소드는 다음과 같다.

setFullYear()
setDate()

setFullYear() 메소드

setFullYear() 메소드는 Date 객체의 값을 특정 날짜로 설정한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Method</title>
</head>
<body>
    <h1>setFullYear() 메소드</h1>
    <script>
        var date = new Date();
        date.setFullYear(1982, 1, 19);    // 자바스크립트에서 2월은 1임.
        document.write(date.getFullYear() + "<br>");    // 1982
        document.write(date.getMonth() + "<br>");        // 1
        document.write(date.getDate() + "<br>");        // 19
        document.write(date);
   </script>
</body>
</html>

실행 결과

setFullYear() 메소드

setDate() 메소드

setDate() 메소드는 Date 객체의 일자 값을 특정 일자로 설정한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Date Method</title>
</head>
<body>
    <h1>setDate() 메소드</h1>
    <script>
        var date = new Date();
        date.setDate(10);                // Date 객체의 일자 값을 10일로 설정함.
        document.write(date + "<br>");
        date.setDate(40);                // 40일을 설정하면, 초과되는 일수만큼 다음달로 넘어감.
        document.write(date);
   </script>    
</body>
</html>

실행 결과

setDate() 메소드

자바스크립트 Date.prototype setter 메소드

메소드	설명	값의 범위
setDate()	현지 시각으로 특정 일자를 설정함	1 ~ 31
setMonth()	현지 시각으로 특정 월을 설정함	0 ~ 11
setFullYear()	현지 시각으로 특정 연도를 설정함 (연도 뿐만 아니라 월과 일자도 설정할 수 있음)	YYYY, MM, DD
setHours()	현지 시각으로 특정 연도를 설정함 (연도 뿐만 아니라 월과 일자도 설정할 수 있음)	0 ~ 23
setMilliseconds()	현지 시각으로 특정 밀리초를 설정함	0 ~ 999
setMinutes()	현지 시각으로 특정 분을 설정함	0 ~ 59
setTime()	1970년 1월 1일 0시 0분 0초부터 밀리초 단위로 표현되는 특정 시간을 설정함	-

💡 TIP ? 자바스크립트에서 setDay() 메소드는 존재하지 않는다.

자바스크립트 Date.prototype UTC setter 메소드

메소드	설명	값의 범위
setUTCDate()	협정세계시(UTC)로 특정 일자를 설정함	1 ~ 31
setUTCMonth()	협정세계시(UTC)로 특정 월을 설정함	0 ~ 11
setUTCFullYear()	협정세계시(UTC)로 특정 연도를 설정함 (연도뿐만 아니라 월과 일자도 설정할 수 있음)	YYYY, MM, DD
setUTCHours()	협정세계시(UTC)로 특정 시간을 설정함	0 ~ 23
setUTCMilliseconds()	협정세계시(UTC)로 특정 밀리초를 설정함	0 ~ 59

728x90

저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] Array 객체 / 메소드 (0)	2018.10.19
[JavaScript] String 객체 / 메소드 (0)	2018.10.19
[JavaScript] Math 객체 (0)	2018.10.18
[JavaScript] Number 메소드 (0)	2018.10.18
[JavaScript] Number 객체 (0)	2018.10.17

Embedded Software Embedded Software

자바스크립트에서의 날짜 표현

Date 객체

특정 날짜와 시간으로 Date 객체 생성

자바스크립트 날짜 양식(data format)

ISO 날짜 양식

ISO 날짜 양식

Long 날짜 양식

Long 날짜 양식

short 날짜 양식

Short 날짜 양식

Full 날짜 양식

Full 날짜 양식

Date.now() 메소드

Date.now() 메소드

Date.prototype getter 메소드

getFullYear() 메소드

getFullYear() 메소드

getDate() 메소드

getDate() 메소드

getDay() 메소드

getDay() 메소드

getDay() 메소드

getTime() 메소드

getTime() 메소드

자바스크립트 Date.prototype getter 메소드

자바스크립트 Date.prototype UTC getter 메소드

Date.prototype setter 메소드

setFullYear() 메소드

setFullYear() 메소드

setDate() 메소드

setDate() 메소드

자바스크립트 Date.prototype setter 메소드

자바스크립트 Date.prototype UTC setter 메소드

'Language > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바