2024.08.28.JS - 날짜

* Date 객체

- 날짜 및 시각 정보를 관리하는 객체

- 제공되는 다양한 메서드를 통해 날짜 및 시각 정보 확인 및 처리 가능

- new Date() 형식으로 Date 객체 생성 후 메서드 호출을 통해 처리

  1.new Date() : 현재 시스템(클라이언트 = PC)의 현재 날짜 및 시각정보를 기준으로 Date 객체 생성

    let date1 = new Date();

    document.write(date1 + "<br>"); // 화면 : Wed Aug 28 2024 15:56:49 GMT+0900 (한국 표준시)

                                                                   // 세계 날짜 및 시각 표준 표기법으로 출력됨.

  2. new date("yyyy-MM-dd") : 지정된 날짜를기준으로 Date 객체 생성

       => 연도 4자리, 월 2자리, 일 2자리 형식으로 지정한다는 의미

       => 시각 미설정 시 국제표준시 기준 00시 00분 00초 (대한민국 표준시 기준 +9시간이므로 09시)로 설정됨.

            let date2 = new Date("2000" + "<br>"); // 연도만 지정시 1월1일로 기본값 세팅됨.

            let date2 = new Date("2000-01" + "<br>"); // 1일로 자동으로 기본값 설정됨.

            let date2 = new Date("2000-01-02"); // 2000년 1월 2일로 설정 -

           document.write(date2 + "<br>"); // 결과 : Sun Jan 02 2000 09:00:00 GMT+0900 (한국 표준시)

 

3. new Date("yyyy-MM-ddThh:mm:ss") : 지정된 날짜 및 시각 기준으로 Date객체 생성 (M: 월, m: 분)

    => 연도 4자리, 월일시분초 2자리 형식으로 지정함.

          let date3 = new Date("2023-12-31T23:59:59");

          let date3 = new Date("2023-12-31T23:59"); // 초 생략시 기본값 00초

          let date3 = new Date("2023-12-31T23"); // 분을 생략시 오류발생(출력 데이터에 Invalid Date가 출력됨. = 최소 분까지는 넣어야 함.)

          document.write(date3 + "<br>"); // Sun Dec 31 2023 23:59:59 GMT+0900 (한국 표준시)

 

* Date 객체에서 정보추출하기

   => Date 객체의 getXXX() 메서드 활용(객체가 특정값을 리턴하는 메서드들은 get 으로 시작함.)

        let now = new Date();

        document.write("현재 연도: " + now.getFullYear() + "<br>"); // 2024

        document.write("현재 월: " + now.getMonth() + "<br>"); // ?? : 7 (현재 8월)

           => 주의! getMonth() 메서드 리턴값은 실제 월보다 1만큼 작은 값이 리터됨.

               (1월은 January이며, 첫번째 월이라는 의미로 0값을 기준값으로 사용하여 표기)

           => 따라서, 실제 월을 표기하려면 getMonth() 리턴값 +1 필수!

       document.write("현재 월: " + (now.getMonth() + 1) + "<br>"); // 8 (현재8월)

       getDay() 메서드는 날짜가 아닌 요일을 정수로 관리한다.(0: 일요일, 6: 토요일 => 달력과 동일)

       document.write("현재 일: " + now.getDay() + "<br>"); // ?? :3(수요일)

           => 따라서, 실제 요일을 표기하려면 값을 판별하여 해당 요일을 문자열로 출력해야 함.

 

    * 배열 활용하여 요일꺼내기 (인덱스와 getDay() 메서드 리턴값을 동일한 요일로 사용)

     const arrWeek = ['일','월','화','수','목','금','토']; // 요일은 바뀔일이 없으니까 const로 작성함.

     dayOfWeek = arrWeek[now.getDay()];

     document.write(dayOfWeek + "<br>"); // 수

     // -------------------------------------------------------------------

    document.write("현재 시: " + now.getHours() + "<br>");

    document.write("현재 분: " + now.getMinutes() + "<br>");

    document.write("현재 초: " + now.getSeconds() + "<br>");

    document.write("현재 초: " + now.getMilliseconds() + "<br><hr>");

    // -------------------------------------------------------------------

    document.write("<div id='timer'></div>")

    document.write("<input type='button' value='타이머 시작' onclick='startTimer()'>")

    document.write("<input type='button' value='타이머 종료' onclick='stopTimer()'>")

 

* getTime() 메서드

=> 기준일자(1970년 1월 1일 0시0분0초 = UTC(세계표준시)기준)기준으로 

     지정된 날짜와의 차이값을 밀리초(ms)단위로 리턴

     let targetDate = new Date("2024-09-25");

     document.write("targetDate : " + targetDate + "<br>"); // targetDate : Wed Sep 25 2024 09:00:00 GMT+0900 (한국 표준시)

    let nowDate = new Date(); // 기준일자를 현재 시스템의 날짜로 지정.

    document.write("nowDate : " + nowDate + "<br>"); // nowDate : Wed Aug 28 2024 17:10:44 GMT+0900 (한국 표준시)

 

* 지정된 날짜와 기준일자(1970년 1월 1일 0시0분0초)와의 차를 밀리초 단위로 리턴받기

let targetTime = targetDate.getTime();

let nowTime = nowDate.getTime();

document.write("대상날짜 getTime() 결과 : " + targetTime + " ms<br>") // 대상날짜 getTime() 결과 : 1727222400000 ms

document.write("기준날짜 getTime() 결과 : " + nowTime + " ms<br>") //기준날짜 getTime() 결과 : 1724832817011 ms

 

* getTime() 메서드 활용하여 두 날짜간의 차이를 계산하면 D-Day 계산이 가능하다.

- 두 날짜간의 차이 계산식 = 기준일자 - 대상일자

  1) 뺄셈 결과값이 양수 : 기준일자가 대상일자보다 큼 = 대상일자는 과거 = XX일 경과

  2) 뺄셈 결과값이 음수 : 기준일자가 대상일자보다 작다 = 대상일자는 미래 = XX일 남음

  3) 뺄셈 결과값이 0 : 기준일자가 대상일자와 동일 = 지금 = D - Day

   : 0 이 되려면 밀리초까지 맞아야하므로 오늘을 표현하려면 => 결과값이 0이 아니어도 오늘일 수 있다.

      => 따라서 계산을 다르게 해야함.

 

let diferrenceTime = nowTime - targetTime;

document.write("두 날짜의 차 : " + diferrenceTime + " ms<br>"); // 두 날짜의 차 : -2389315176 ms

 

- 두 날짜의 차도 밀리초 단위이므로 결과값 변환 필요 (ex. 일단위 혹은 시간단위로...)

   => 계산을 통해 더 큰 단위 값으로 변환필요(밀리초-> 초-> 분-> 시-> 일 순으로 변환)

   => 따라서, 결과값(밀리초)을 초로 변환하려면 두 단위의 차(1000밀리초)만큼 나눗셈 필요

- 또한, 초로 변환한 결과를 다시 60으로 나누면 분, 다시 60으로 나누면 시 다시 24로 나누면 일 단위 변환가능

  => 결론 > 1000*60*60*24 = 86400000 밀리초 = 1일

let diferrenceTime = (nowTime - targetTime) / 86400000;

document.write("두 날짜의 차 : " + diferrenceTime + " 일<br>");

 

let diferrenceTime = (nowTime - targetTime) / 31536000000;

document.write("두 날짜의 차 : " + diferrenceTime + " 년<br>");

 

let diferrenceTime = (nowTime - targetTime) / 1000 / 60 / 60 / 24; // 일

document.write("두 날짜의 차 : " + diferrenceTime + " 일<br>"); // 두 날짜의 차 : -27.64907516203704 일

    => 소수점(실수) 절삭(버림)을 위해 Math 클래스의 메서드를 활용하거나

 

* parseInt() 함수를 통해 정수 형태로 바로변환

let diferrenceTime = parseInt((nowTime - targetTime) / 1000 / 60 / 60 / 24); // 일

document.write("두 날짜의 차 : " + diferrenceTime + " 일<br>"); // 두 날짜의 차 : 두 날짜의 차 : -27 일

=> 계산을 위해 사용되는 값을 직접 계산하는 대신  기본 계산 단위를 모두 연산 과정으로 명시하면 차후 유지보수도 편리함.

 

 

 

 

 

 

 

 

 

 

document.write("<hr>");

let timer; // 타이머를 저장할 변수

function startTimer() {

showTimer();

// showTimer 함수를 1초마다 반복 호출하여 현재 시각을 1초마다 표시.

// => setInterval() 함수 활용하면 정해진 간격으로 특정작업을 반복수행가능.(지금 필요한 것.)

// => setTimeout 일정시간이 지나면 작업을 함. ex. 예약꺼짐.

timer = setInterval(function(){

showTimer();

}, 1000); // 1초는 1000밀리초. 1초마다 showTimer 함수가 호출됨

// => 이때, setInterval() 함수 리턴값을 변수에 저장해 두면 타이머 종료시 활용가능.

}

 

function stopTimer() {

// clearInterval() 함수를 활용하여 타이머 종료

// => setInterval() 함수 리턴값이 저장된 timer 변수를 활용하여 타이머 종료

clearInterval(timer);

}