Soon Gud Story

[Jquery / Javascript / Json / AJAX] 자바스크립트를 이용하여 현재일자를 특정일자과 비교하여 페이지 이동하는 방법

자바스크립트로 Date개체를 사용하는 경우가 많습니다. 

Date 개체는 현재 보고 있는 컴퓨터 시간을 참조합니다.

즉 서버 시간이 아닌 사용하는 컴퓨터 시간을 확인 하는 겁니다.

이것은 자바스크립트가 서버언어가 아닌 클라이언트(사용자PC)에서 로드 되는 특성때문입니다.

그렇기 때문에 상대적으로 시간이 틀릴 수가 있습니다. 

수동으로 개인 PC시간을 변경하면 그값을 그대로 가져오는 것을 확인 할 수 있습니다. 

자바스크립트 자체로만으로는 서버시간을 표시하는 것은 할 수 없다는 이야기가 됩니다. 

java를 사용하면 서버에서 기동을 하는 언어이기 때문에 바로 가져 올수 있지만 java를 사용할 수 없는 경우에는

여기에 필요한것은 서버의 시간을 가져올 중간 매개체가 필요합니다.

그 매개체는 XMLHttpRequest 개체를 사용합니다. 

XMLHttpRequest 개체는 클라이언트와 서버 중간에서 요청과 결과를 전달하는 역활을 합니다. 

다만 XMLHttpRequst 개체는 웹 표준은 아닙니다. 

하지만 현재는 거의 모든 웹브라우저에서 지원하고 있습니다. 

JSON /chk/systemcheck.js 파일 데이터 내용

--------------------------------------------------------------------------------------

{

 "openyn":"Y"

,"startdaytime":"2018.09.28 18:00"

,"enddaytime":"2018.10.01 11:00"

,"syschkUri":"/systemCheck.html"

,"noticetxt":"스타필드 앱의 안정적인 사용을 위해

              \n시스템 점검을 진행하고 있습니다.

              \n이용에 불편함을 드린점 양해 부탁드립니다."

}

--------------------------------------------------------------------------------------

자바스크립트

--------------------------------------------------------------------------------------

$(document).ready(function() {   

        var st = srvTime();

        var today = new Date(st); // 현재시간

        console.log("http",today);

        $.getJSON("/chk/systemcheck.js", function(data){

            var openyn = data["openyn"];

            var startdaytime = new Date(data["startdaytime"]);

            var enddaytime = new Date(data["enddaytime"]);

            var noticetxt = data["noticetxt"];

            if(openyn == 'Y'){

                if(startdaytime<today && today<enddaytime){

                    location.href = data["syschkUri"]; 

                }

            }

        });

    });

    // 서버 시간 get

    var xmlHttp;

    function srvTime(){

        if(window.XMLHttpRequest){//분기 하지 않으면 IE에서만 작종

            xmlHttp = new XMLHttpRequest(); // IE 7.0 이상, 크롬, 파이어폭스 등 작동

            xmlHttp.open('HEAD',window.location.href.toString(),false);

            xmlHttp.setRequestHeader("Content-Type", "text/html");

            xmlHttp.send('');

            return xmlHttp.getResponseHeader("Date");

        }else if (window.ActiveXObject) { // 윈도우 IE 버전이 4,5,6 이라면 

            xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');

            xmlHttp.open('HEAD',window.location.href.toString(),false);

            xmlHttp.setRequestHeader("Content-Type", "text/html");

            xmlHttp.send('');

            return xmlHttp.getResponseHeader("Date");

        }

    }

--------------------------------------------------------------------------------------

자바스크립트로 srvTime() 함수를 생성합니다. 

srvTime() 함수는 XMLHttpRequest를 이용해서 HEAD에서 서버시간을 추출하는 함수 입니다. 

$(document).ready(function() {..}  는 페이지 호출을 하면 자동으로 실행되는 자바스크립트 함수 입니다. 

이 함수 안에서  서버시간을 추출해서 var today = new Date(st); 비교할 현재 시간 객체를 생성합니다. 

$.getJSON("/chk/systemcheck.js", function(data){..} 는 /chk/systemcheck.js 위치에 있는 JSON 파일을 읽어 객체 화 할수 있도록 합니다.

var openyn = data["openyn"]; 는 json 파일 데이터 중에 openyn키 값을 openyn 객체에 넣습니다. 

var startdaytime = new Date(data["startdaytime"]); 위와 마찬가지고 비교할 startdaytime 객체에 startdaytime 키값을 date 형식으로 넣습니다. 

if(startdaytime<today && today<enddaytime){..} 생성된 날짜 객체들을 비교합니다. 

비교값이 참일 경우 location.href = data["syschkUri"]; 실행이 되며 syschkUri키값인 /systemCheck.html 페이지로 이동을 합니다. 

감사합니다. 고맙습니다. 운이 좋습니다. 

Date Class getTime() 와 SimpleDateFormat을 통한 String 날짜 시간 비교 방법

감사합니다 고맙습니다 운이 좋습니다.

개발을 하다보면 시간을 비교 해야 하는 경우가 많이 있습니다. 

String 형태의 지정된 날짜와 현재 또는 특정일과 비교를 해야 하는 경우에 getTime() 을 사용하게 됩니다. 

getTime()은 import java.util.Date 를 선언하고 사용하면 됩니다. 

String 일시(날짜+시간)를 서로 비교할때 SimpleDateFormat을 사용해서 동일한 형식으로 변경하여 쉽게 비교 할수 있습니다. 

예를 들어 현재일시가 세일기간 사이에 있는지 확인을 방법은 다음과 같습니다. 

String saleStartStr = "2018.09.28 00:30"; //세일 시작 일시

String saleEndStr = "2018.09.30 23:30"; //세일 종료 일시

Date nowDayTime = new Date();

SimpleDateFormat sdf = new SimpleDateFormat("yyyy.MM.dd HH:mm"); // String 날짜 형식을 정의 합니다. 

String nowDayTimeStr = sdf.format(nowDayTime);  // 현재일시를 같은 형식으로 파싱합니다.

Date saleStart = sdf.parse(saleStartStr); // 시간으로 변경을 합니다. 

Date saleEnd = sdf.parse(saleEndStr); // 시간으로 변경을 합니다.

Date nowDayTimeFormat = sdf.parse(nowDayTimeStr); // 시간으로 변경을 합니다.

// 이제 비교를 진행 합니니다. 

// Date 형식으로 값을 변경한 것은 getTime() 메소드를 사용하기 위해서 입니다. 

if(saleStart.getTime() > nowDayTimeFormat.getTime()){

System.out.println("현재는 세일 시작 전 입니다.");

}

// nowDayTimeFormat.getTime() 값이 작으면 시작일보다 앞에 있다는 이야기 입니다. 

// 날짜를 비교할때 실수를 많이 하는 부분이기 때문에 주의가 필요합니다. 

if(saleStart.getTime() < nowDayTimeFormat.getTime(){

System.out.println("현재는 세일 시작 후 입니다.");

}

// 현재 시간을 분단위 까지 정의 하였기 때문에 두 값이 같은 경우는 제외 하겠습니다. 

// 동일하게 종료 시간도 다음과 같이 확인을 할 수 있습니다. 

if(saleEnd.getTime() > nowDayTimeFormat.getTime()){

System.out.println("현재는 세일 종료 전 입니다.");

}

if(saleEnd.getTime() < nowDayTimeFormat.getTime()){

System.out.println("현재는 세일 종료 후 입니다.");

}

// 다음은 세일 기간 중인지 아닌지를 알아보겠습니다. 

if(saleStart.getTime() <= nowDayTimeFormat.getTime() && saleEnd.getTime() >= nowDayTimeFormat.getTime()){

System.out.println("현재는 세일기간 중 입니다.");

}else{

System.out.println("현재는 세일기간이 아닙니다.");

}

// 조건을 변경하여 다음과 같이 조건문을 사용 할 수도 있습니다. 

if(saleStart.getTime() > nowDayTimeFormat.getTime() && saleEnd.getTime() < nowDayTimeFormat.getTime()){

System.out.println("현재는 세일기간이 아닙니다.");

}else{

System.out.println("현재는 세일기간중 입니다.");

}

// 그럼 getTime() 으로 비교가 가능한 이유는 날짜date를 long형 숫자 값으로 변경하기 때문입니다. 

// 여기서는 현재 날짜를 new Date()를 사용해서 구했지만 

// 요즘은 Calendar 를 사용해서 많이 구합니다. 

// Calendar 를 사용하면 다음과 같습니다. 

// 선언된 nowDayTime.getTime() 을 바로 사용해도 되지만 같은 형식으로 변경한 후에 사용한것으로 구성했습니다.