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

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

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/3
목록
찾아주셔서 감사합니다. Since 2012