• Q&A
  • 회원가입
  • 로그인

[Basic] JS - Dates - JS날짜

2,755  

목차

  1. JS 날짜 학습 전 알아두기
  2. Date() 함수
  3. Date 객체 생성
  4. [날짜 객체] - new Date()
  5. [날짜 객체] - new Date("날짜 문자열")
  6. [날짜 객체] - new Date(숫자)
  7. [날짜 객체] - new Date(년, 월, 일, 시간, 분, 초, 밀리세컨드)
  8. Date 객체의 메서드
  9. [날짜 표시] - toString()
  10. [날짜 표시] - toUTCString()
  11. [날짜 표시] - toDateString()

 

JS 날짜 학습 전 알아두기

 

1. 

Date 객체는 날짜 (년, 월, 일, 시간, 분, 초, 밀리세컨드)와 관련된  일을 처리할 수 있게 해줌. 
※ 밀리세컨드: 소수점 세 째 자리 까지 표시한 초 단위

2. 

JS는 시간을 1970년 1월 1일 0시 0분 0초부터 시작해 밀리세컨드 단위로 시간을 세 나감.

3. 

하루는 86,400,000 밀리세컨드로 구성. (= 86,400 초)
1day = (24시간 x 60분 x 60초 x 1000)   

※ 1000을 곱해준 이유는 밀리세컨드 때문.

4.

JS는 순서 셀 때 0부터 시작. 단, 일은 1부터 시작.

  • 요일 : 일 0, 월 1, 화 2, 수 3, 목 4, 금 5, 토 6
  • 달 :  1월 0, 2월 1, 3월 2, 4월 3, ...........
  • 일 : 1일 1, 2일 2, 3일 3, 4일 4, .........

 


 

Date() 함수

 

<p id="hz"></p>

<script>
var hz = document.getElementById("hz");
hz.innerHTML = Date()
</script>

결과값:  Mon Jan 19 2015 13:36:33 GMT+0900 (대한민국 표준시)
 

Date 객체 생성

 

1. 
Date 객체는  (년, 월, 일, 분, 초, 천분의 1초)로 구성. 
year, month, day, hours, minutes, seconds, milliseconds

 



2. 
Date 객체는 new 붙여 생성. (4가지 방법 가능)

① new Date()
② new Date(milliseconds)
③ new Date("날짜 문자열")
④ new Date(year, month, day, hours, minutes, seconds, milliseconds)

 

 

[날짜 객체] - new Date()

 

<p id="homzzang"></p>


<script>

var day = new Date();

var hz = document.getElementById("homzzang");

hz.innerHTML = day;

</script>

 

결과값: Mon Jan 19 2015 13:46:14 GMT+0900 (대한민국 표준시) 

 

[날짜 객체] - new Date("날짜 문자열")

 

<p id="homzzang"></p>


<script>

var day = new Date("January 19, 2015 13:50:00");

var hz = document.getElementById("homzzang");

hz.innerHTML = day;

</script>

 

결과값: Mon Jan 19 2015 13:50:00 GMT+0900 (대한민국 표준시) 

 

[날짜 객체] - new Date(숫자)

 

<p id="homzzang"></p>


<script>

var day = new Date(86400000);  // 1970-01-0 00:00:00초에 86400초 더한 날짜 (∵ 매개변수가 밀리초 단위)

document.getElementById("homzzang").innerHTML = day;

</script>

 

결과값: Fri Jan 02 1970 09:00:00 GMT+0900 (대한민국 표준시)

 

[날짜 객체] - new Date(년, 월, 일, 시간, 분, 초, 밀리세컨드)

1. 월 (= 달) 표기 : 0부터 셈

(예) 1월은 0 / 2월은 1 / 3월은 2 / ..... / 12월은 11

 

 

<p id="homzzang"></p>


<script>

var day = new Date(2015,0,19,14,10,30,0); // 1월 

var hz = document.getElementById("homzzang");

hz.innerHTML = day;

</script>

 

결과값: Thu Jan 19 2015 14:10:30 GMT+0900 (대한민국 표준시) 

2. 2자리 년도 표기:  1900년대 의미.

※ 4자리로 표기하면 2000년대 의미.
 
 
<p id="homzzang"></p>

<script>
var d = new Date(99,10,20,11,33,50,7);  // 1999년 11월
document.getElementById("homzzang").innerHTML = d;
</script>

결과값: Sat Nov 20 1999 11:33:50 GMT+0900 (대한민국 표준시) 

3. 년월일만 적고, 시간 이하의 단위는 생략해도 됨.

 

<p id="homzzang"></p>


<script>

var day = new Date(2015,0,19); // 2015년 1월 19일

var hz = document.getElementById("homzzang");

hz.innerHTML = day;

</script>

결과값: Thu Jan 19 2015 00:00:00 GMT+0900 (대한민국 표준시)


Date 객체의 메서드

날짜 표시 메서드 (3가지)

[날짜 표시] - toString()

지역 표준시로 출력/

※ 날짜 객체를 HTML로 출력 시, toString() 메서드 작동 적용됨.
즉, 아래 2가지 코드는 출력 결과 동일.



[방법1] 묵시적으로 toString() 메서드 적용

<p id="homzzang"></p>

<script>
var day = new Date();
var hz = document.getElementById("homzzang");
hz.innerHTML = day;
</script>

결과값: Mon Jan 19 2015 14:49:45 GMT+0900 (대한민국 표준시)


[방법2] - 명시적으로 toString() 메서드 적용

<p id="homzzang"></p>

<script>
var day = new Date();
var hz = document.getElementById("homzzang");
hz.innerHTML = day.toString();
</script>

결과값: Mon Jan 19 2015 14:49:45 GMT+0900 (대한민국 표준시)

[날짜 표시] - toUTCString()

세계 표준시로 출력.
 
 
<p id="homzzang"></p>

<script>
var day = new Date();
var hz = document.getElementById("homzzang");
hz.innerHTML = day.toUTCString();
</script>

결과값: Mon, 19 Jan 2015 05:53:33 GMT

[날짜 표시] - toDateString()

요일 월 일 년도 형태로 출력. (※ 날짜 가독성 ↑)


<p id="homzzang"></p>

<script>
var day = new Date(); 
var hz = document.getElementById("homzzang");
hz.innerHTML= day.toDateString(); 
</script>

결과값: Mon Jan 19 2015

PS. Date 객체는 「정적」임.
즉, 
컴퓨터 시계는 동적으로 계속 흐르지만, 
Date 객체는 한번 생성되면 시간이 생성된 날짜로 고정됨.


찾아주셔서 감사합니다. Since 2012