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

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


분류 제목
Basic JS - Common Mistakes -
Basic JS - Performance -
Basic JS - Reserved Words -
Basic JS - Versions -
Basic JS - JSON (제이슨) - 데이터 전송 위한 가벼운 자료 형식.
Form JS - Forms - 폼양식 유효성 제어
Form JS - Forms API - 폼유효성
Object JS - Object - 객체개념(=객체의미=객체정의) ★ 3
Object JS - Object Property - 객체속성 ★
Object JS - Object Methods - 객체메서드 ★
Object JS - Object Accessors - 객체접근자 (Getter/Setter = 게러/세러 = 게터/세터… 2
Functions JS - Function Definition - 함수선언방법 + 함수호출방법 ★★★ (= 함수구문 + 함수특…
Functions JS - Function Parameter/argument - 함수 (매개변수/독립변수) ※ 변수 종류 ※ …
Functions JS - Function Invocation - 함수호출방법1 = (함수방식 + 메서드방식 + 함수생성자방…
Functions JS - call() 메서드 - 함수호출방법2 (= call메서드 = 콜메서드)
DOM JS - DOM (= 돔 = 문서객체모델) 정의
DOM JS - Method - 메서드 (= HTML 요소에 대한 수행 작업)
DOM JS - Document - 문서객체
DOM JS - Element Selector - 주요 요소선택자 (= 객체찾기) ※ JS외부링크호출 주의사항
DOM JS - HTML - 내용입력/내용변경/속성값변경(=속성값입력)
3/67
목록
찾아주셔서 감사합니다. Since 2012