• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Dates - JS날짜

목차

  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 객체는 한번 생성되면 시간이 생성된 날짜로 고정됨.


분류 제목
DOM JS - CSS - 스타일변경
DOM JS - Animation - 애니메이션 (= 동적효과 = 움직임효과)
DOM JS - Events - 이벤트 2
DOM JS - addEventListener() 메서드 ★★★★★ - 이벤트 걸기 (= addEventListen…
DOM JS - Navigation - 노드탐색 (= 요소탐색) ※ 텍스트노드복사
DOM JS - Node - 노드추가, 노드삭제, 노드변경 (= 노드생성, 노드제거, 노드교체)
DOM JS - Collection - HTML요소집합 (= HTML요소묶음)
BOM JS - Window BOM - 윈도우 브라우저객체모델 (BOM: Browser Object Model)
BOM JS - Window Screen 객체 - 화면객체 (= 스크린객체 = screen객체)
BOM JS - Window Location 객체 - 위치객체 (= 로케이션객체 = Location객체) ※ loc…
BOM JS - Window History 객체 - 이력객체 (= 히스토리객체 = History객체 = 뒤로가기 +…
BOM JS - Window Navigator 객체 - 브라우저객체 (= 네이게이터객체 = Navigator객체 =…
BOM JS - Popup Boxes - 팝업상자 (= 팝업박스 = Alert Box + Confirm box + …
BOM JS - Timing Events ★ - 시간간격 코드실행 (= 타이밍 이벤트 = 시간이벤트 = 일정시간별 …
BOM JS - Cookie (쿠키) 사용법 ★★★ - 쿠키 (설정・생성) / 쿠키 (읽기・얻기・가져오기) / 쿠…
AJAX JS - AJAX (아작스) 소개
AJAX JS - AJAX - XMLHttpRequest() 메서드 ★ - 객체생성 (= 아작스/에이잭스 핵심 = X…
AJAX JS - AJAX - open()/send() 메서드 ★ - 서버에 요청 보내기 (GET방식 vs POST방…
AJAX JS - AJAX - Server Response (서버응답) - 콜백함수 사용 예제
AJAX JS - AJAX - XML 아작스 예제 (= xml 데이터 불러와 표만들기)
4/67
목록
찾아주셔서 감사합니다. Since 2012