날짜와 시간 다루기

날짜와 시간을 다루는 방법을 알아보자.

날짜와 시간을 다루는 방법을 익히고 원하는 결과값을 출력해보자.

날짜 객체

날짜와 시간을 저장하고 보여줄 때는 날짜 객체를 사용한다.
날짜 객체는 new 연산자 다음에 Date 생성자를 사용한다.

let day = new Date();
console.log(day);	
//콘솔 창에 찍힌 그 시간을 호출한다. 
//ex). Sat Feb 05 2022 00:07:04 GMT+0900 (한국 표준시)/(Whale기준)

GMT란? Greenwich Mean Time의 줄임말이며 컴퓨터 언어에서는 GMT기준으로 시간을 알려준다. = GMT는 기준이 되는 시간
GMT+0900는 GMT기준으로 9시간 느리다는 뜻

날짜, 시간의 값 가져오기

let rightNow = new Date();	//작성 시기 2022.02.05.12:34
let year = rightNow.getFullYear();	//2022
let month = rightNow.getMonth()+1;	//2
let date = rightNow.getDate();	//5
let day = rightNow.getDay();	//6
let currentHour = rightNow.getHours();	//0
let currentMin = rightNow.getMinutes();	//34

Date.prototype getter 메소드

모든 Date 인스턴스는 Date.prototype으로부터 메소드와 프로퍼티를 상속받습니다.
Date.prototype getter 메소드는 날짜와 관련된 정보를 받아오기 위한 메소드

1) 연도

getFullYear() : 날짜 중 연도를 4자리 숫자로 반환 (yyyy년)

let rightNow = new Date();	//작성 시기 2022.02.05.12:34
let year = rightNow.getFullYear();	//2022

2) 월

getMonth() : 날짜 중 월을 숫자로 반환 (1월 : 0 ~ 12월 : 11)
getMonth()메서드는 현재 달보다 1 작은 숫자를 반환함으로 +1을 해준다.

let rightNow = new Date();	//작성 시기 2022.02.05.12:34
let month = rightNow.getMonth()+1;	//2

3) 일

getDate() : 날짜 중 일자를 숫자로 반환 (1 ~ 31)

let rightNow = new Date();	//작성 시기 2022.02.05.12:34
let year = rightNow.getDate();	//5

4) 요일

getDay() : 날짜 중 요일을 숫자로 반환 (일요일 : 0 ~ 토요일 : 6)

let rightNow = new Date();	//작성 시기 2022.02.05.12:34
let year = rightNow.getDay();	//6

5) 시

getHours() : 시간 중 시를 숫자로 반환 (0 ~ 23)

let rightNow = new Date();	//작성 시기 2022.02.05.12:34
let year = rightNow.getHours();	//0

6) 분

getMinutes() : 시간 중 분을 숫자로 반환 (0 ~ 59)

let rightNow = new Date();	//작성 시기 2022.02.05.12:34
let year = rightNow.getMinutes();	//34

7) 시간

getTime() : 1970년 1월 1일부터 현재까지의 시간을 밀리초(millisecond) 단위의 숫자로 반환

let rightNow = new Date();	//작성 시기 2022.02.05.12:34
let year = rightNow.getTime();	//1641353640000

Date.now() 메서드

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

let nowMiliSec = Date.now();  //1643995532623
document.write(new Date());   //Sat Feb 05 2022 02:27:31 GMT+0900 (한국 표준시)
document.write(new Date(nowMiliSec) + "<br>");	// new Date()와 같은 결과를 반환함. = Sat Feb 05 2022 02:27:31 GMT+0900 (한국 표준시)

날짜, 시간의 값 설정하기

Date.prototype setter 메소드

Date.prototype setter 메소드는 날짜와 관련된 정보를 설정하기 위한 메소드
getDay()메서드는 존재하지 않는다.
가장 많이 사용되는 대표적인 setter 메소드는 다음과 같다.

1. setFullYear()
2. setDate()

1) 날짜(연, 월, 일)

setFullYear() : Date 객체의 값을 특정 날짜로 설정

let date = new Date();
date.setFullYear(1998, 3, 28); // 특정 날짜를 설정
date.getFullYear();            // 1998
date.getMonth();               // 3
date.getDate();                // 28

2) 일자

setDate() : Date 객체의 일자 값을 특정 일자로 설정

let date = new Date();
date.setDate(10);              // Date 객체의 일자 값을 10일로 설정함.
document.write(date + "<br>"); //Thu Feb 10 2022 02:56:16 GMT+0900 (한국 표준시)
date.setDate(40);              // 40일을 설정하면, 초과되는 일수만큼 다음달로 넘어감.
document.write(date);		   //Sat Mar 12 2022 02:56:35 GMT+0900 (한국 표준시)

설정한 후에 초과되는 일수만큼 뒤로 감

아래와 같이 더 다양한 setter메서드가 존재한다.

날짜 객체 초기화

1. Date 객체를 생성할 때, 인수에 값을 전달하지 않으면 현재의 기준으로 Date 값을 생성한다.

let rightNow = new Date();	//작성 시기 2022.02.05.12:34

2. 인수에 값을 전달하면 그 형태에 따라 특정한 Date 값을 생성한다.

new Date("December 14, 1977 13:30:00"); // 날짜를 나타내는 문자열
new Date(80000000);               // 1970년 1월 1일 0시부터 해당 밀리초만큼 지난 날짜
new Date(16, 5, 25);              // 3개의 숫자로 나타내는 날짜이며, 시간은 자동으로 0시 0분 0초로 설정됨.
new Date(16, 5, 25, 15, 40, 0);   // 7개의 숫자로 나타내는 날짜
new Date(2016, 5, 25, 15, 40, 0); // 2000년대를 표기하고자 할 때에는 연도를 전부 표기해야 함.

하루는 86,400,000 밀리초(millisecond)로 계산

날짜 양식

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

1. ISO 날짜 양식
2. Long 날짜 양식
3. Short 날짜 양식
4. Full 날짜 양식

1. ISO 날짜 양식
날짜와 시간을 나타내는 국제 표준 양식

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

new Date("1977-12-14T13:30:00"); // 날짜와 시간까지 표현함.
//Wed Dec 14 1977 13:30:00 GMT+0900 (한국 표준시)
new Date("1977-12-14");          // 시간이 생략되면 자동으로 09:00:00으로 설정됨.
//Wed Dec 14 1977 09:00:00 GMT+0900 (한국 표준시)
new Date("1977-12");             // 일이 생략되면 자동으로 1일로 설정됨.
//Thu Dec 01 1977 09:00:00 GMT+0900 (한국 표준시)
new Date("1977");                // 월이 생략되면 자동으로 1월로 설정됨.
//Sat Jan 01 1977 09:00:00 GMT+0900 (한국 표준시)

2. Long 날짜 양식

MMM DD YYYY DD MMM YYYY

new Date("Feb 19 1982");        // MMM DD YYYY
//Fri Feb 19 1982 00:00:00 GMT+0900 (한국 표준시)
new Date("19 Feb 1982");        // DD MMM YYYY
//Fri Feb 19 1982 00:00:00 GMT+0900 (한국 표준시)
new Date("February 19 1982");   // 월의 축약형 뿐만 아니라 전체 단어도 인식함.
//Fri Feb 19 1982 00:00:00 GMT+0900 (한국 표준시)
new Date("FEBRUARY, 19, 1982"); // 쉼표는 무시되며, 대소문자의 구분은 없음.
//Fri Feb 19 1982 00:00:00 GMT+0900 (한국 표준시)

3. Short 날짜 양식

MM/DD/YYYY YYYY/MM/DD

new Date("02/19/1982"); // MM/DD/YYYY
//Fri Feb 19 1982 00:00:00 GMT+0900 (한국 표준시)
new Date("1982/02/19"); // YYYY/MM/DD
//Fri Feb 19 1982 00:00:00 GMT+0900 (한국 표준시)

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

new Date("Wed May 25 2016 17:00:00 GMT+0900 (Seoul Time)");
//Wed May 25 2016 17:00:00 GMT+0900 (한국 표준시)
// GMT가 현재 국가와 다른 시간은 현재 국가의 GMT로 변환되어 표현됨.
new Date("Wed May 25 2016 17:00:00 GMT-0500 (New York Time)");
//Thu May 26 2016 07:00:00 GMT+0900 (한국 표준시)

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