[Basic] JS - Dates - JS날짜
목차
JS 날짜 학습 전 알아두기
Date() 함수
Date 객체 생성
[날짜 객체] - new Date()
[날짜 객체] - new Date("날짜 문자열")
[날짜 객체] - new Date(숫자)
[날짜 객체] - new Date(년, 월, 일, 시간, 분, 초, 밀리세컨드)
Date 객체의 메서드
[날짜 표시] - toString()
[날짜 표시] - toUTCString()
[날짜 표시] - 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 객체는 한번 생성되면 시간이 생성된 날짜로 고정됨.
주소 복사
랜덤 이동
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)
JavaScript 관련글
JQuery 관련글
코딩동강 관련글
HTML 관련글
CSS 관련글
PHP 관련글
SQL 관련글
Bootstrap 3 관련글