반응형

json 형태의 object object 값 alert()나 console.log() 스크립트 함수로 출력하는 방법


자바스크립트(javascript) 에서 


json 형태의 object 변수인 data 가 있다고 치자


이것을 JS에서 alert나 console.log로 찍고싶을때


alert(data ); 로만 찍으면


[object Object] 라고 나온다.


data 의 속 내용을 알고 싶다면



alert(JSON.stringify(data ));


라고 찍어주면 된다.


우리는 모두 운이 좋습니다. 




반응형
반응형

정규식 비밀번호 체크 자바스크립트 


비밀번호 설정 규칙

* 10자~12자리의 영문(대소문자)+숫자+특수문자 중 2종류 이상을 조합하여 사용할 수 있습니다.

* 아이디와 중복되는 패스워드는 사용이 불가능 합니다.

* 동일한 숫자 또는 문자를 3번이상 연속으로 사용할 수 없습니다.


아래와 같이 스크립트를 작성하면 됩니다.

 function chekPassword(){

var mbrId = $("#mbrId").val();   // id 값 입력

var mbrPwd = $("#mbrPwd").val();  // pw 입력

var check1 = /^(?=.*[a-zA-Z])(?=.*[0-9]).{10,12}$/.test(mbrPwd);   //영문,숫자

var check2 = /^(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{10,12}$/.test(mbrPwd);  //영문,특수문자

var check3 = /^(?=.*[^a-zA-Z0-9])(?=.*[0-9]).{10,12}$/.test(mbrPwd);  //특수문자, 숫자

if(!(check1||check2||check3)){

alert("사용할 수 없은 조합입니다.\n패스워드 설정안내를 확인해 주세요.");

return false;

}

if(/(\w)\1\1/.test(mbrPwd)){

alert('같은 문자를 3번 이상 사용하실 수 없습니다.\n패스워드 설정안내를 확인해 주세요.');

return false;

}

if(mbrPwd.search(mbrId)>-1){

alert("비밀번호에 아이디가 포함되었습니다.\n패스워드 설정안내를 확인해 주세요.");

return false;

}

return true;

}


호출

chekPassword(); //패스워드 설정 확인



반응형
반응형

[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 페이지로 이동을 합니다. 


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

반응형
반응형

AJAX는 쉽게 말하면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것입니다. 

HTML from 태그를 사용하지 않고 javascript를 사용하기 때문에 서버에 로딩된 데이터를 페이지에 보여주기 위해 새로운 HTML페이지로 이동 할 필요가 없기 때문에 "새로고침"을 할 필요가 없습니다.

또한 그부분만 로딩 되기 때문에 속도가 빠릅니다. 본래 명칭은 아래에 글을 참고하세요


Asynchronos 

 1. 바로해석을 하면 "비동기적" 이라는 뜻입니다.

 2. 비동기적이라는 것은, 클라이언트(사용자)가 서버에 요청을 보내놓고도 응답을 기다리며 대기 하는 것이 아닌 프로그램은 계속 실행이 된다는 의미 입니다.

    다시 말하면 먼저 요청한 것에 대한 것이 있다고 해서 그 응답을 기다리고 다음것이 실행 되는 것이 아닙니다. 

    그래서 어떠한 경우에는 나중에 요청한 결과가 먼저 실행되어 버리는 경우도 있습니다.


Javascript

 1. 자바스크립트는 웹 브라우저에 대한 스크립트 언어로 만들어진 언어 입니다.


XML

 1. XML은 우선 간단히 데이터 형식의 일종으로 이해하면 됩니다. 

 2. XML은 "Extensible Markup Language" 줄임말 입니다. 해석하면 확장가능한 표시 언어 입니다. 

    Markup Language는 데이터를 태그 항목으로 표시한다는 것입니다. 

    HTML 도 일종의 Markup Language 입니다. 

    대신 데이터를 태그항목으로 설정하는데 HTML에 비해 자유도가 높습니다. 


AJAX의 본래 명칭

 1. AJAX의 본래 명칭은 XHR(XML Http Request) 입니다. 해석하자면 HTTP request를 서버에 보낸다는 의미 입니다.


JSON

 1. JSON도 일종의 데이터 형태 입니다. XML은 자바스크립트에서 사용하기 불편한 점이 많기 때문에 주로 JSON 데이터 형식을 많이 씁니다.

 2. JSON은 객체 또는 배열 등을 이용해서 표현 됩니다. 


AJAX 4단계 과정

 1. XMLHTTP request object를 생성합니다.

    request(요청)를 보낼 준비를 브라우저에게 시키는 과정입니다.

 2. callback 함수를 만듭니다.

    서번에서 response(응답)이 왔을때 실행되는 함수 입니다.

 3. open request

    브라우저에게 두가지 정보를 넘깁니다. 

    request를 보내기 위해 사용할 메소드 예를들면 post 이고 request 가 이동할 URL 입니다. 

 4. request를 보냅니다.



예제 코드 

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

var xhr = new XMLHttpRequest();  // xhr 객체를 생성한다.

xhr.onreadystatechange = function(){  // request 변화여부를 확인할수 있는 객체로 function을 실행한다.

 if(xhr.readyState===4{

 document.getElementById('ajax').innerHTML = xhr.responseText; //response 이다.

 }

}

xhr.open('GET',"test.html");  // html get 방식 메소드와 URL를 낼 준비를 한다.

xhr.send();

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

onreadystatechange

 1. AJAX에서 이벤트는 사용자가 form를 submit하는 것이 일종의 이벤트이다. 이 form이 제대로 입력되었는지 AJAX에 어떠한 변화가 있는지 여부에 대응하는 프로그램이다.


readyState

 1. XHR object는 response가 돌아 왔는지 아닌지를 추적하는 property 이다.

    response 값이 4 이면 response 가 돌아 온것이다.


open send 

 1. open()는 보낼 준비를 시키는 것이지 보내는 것은 send() 메소스가 한다. 


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

반응형
반응형
감사합니다. 고맙습니다. 행운을 드립니다.

간혹 이미지 로드 되기전에 스크립트가 실행될때 이미지 사이즈등을 못불러 올때가 있습니다.

아래 test5위치에 넣으면 잘됩니다.

$(function(){
    alert('test3');
    $(window).load(function() {
        alert('test4');
    });

    $(window).load(function() {
       alert('test5');
    });
 });

 $(document).ready(function(
    alert('test1');
 });

 $(window).load(function() {
    alert('test2');
});

test3 -> test1 -> test2 -> test4 -> test5 순서로 실행됨
반응형
반응형

자바스크립트 백스페이스 javascript history.back BFCache 이슈 


사용자가 백스페이스를 누르거나 history.back 이벤트가 발생하면

브라우져는 일단 이전 페이지 캐시가 있는지 확인하며 있다면 캐시 페이지를 보여줍니다.

이때 캐시를 Back-Forward Cache 라고 말합니다.


페이지 응답속도를 빠르게 하고자 하는 방식이지만, 페이지에 대한 추가적인 load 이벤트가 없어

개발자의 의도와 다른 페이지를 보여주는 경우도 있습니다.


이때 문제점을 해결코자 2009년에 pageshow/pagehide 라는 이벤트가 생겼고

persisted 라는 boolean 형의 변수에 bfcache를 사용했는지 안했는지를 알려줍니다.


하지만 이 변수에도 브라우저별 OS별 버그가 발견되었습니다.

해당 버그를 FF, IE 에서는 수정하였으나, 

사파리나 크롬에서는 2016년에 해당 버그가 있다는건 알고 있다 발표했지만 수정하지 않고 있습니다.


window.performance.navigation.type 변수의 값이 1면 새로운 페이지를 로딩해서 불러온 것이고

window.performance.navigation.type 변수의 값이 2면 bfcache를 사용한 것이라고 합니다.


결론은 아래 코드로 모든 브라우져에서 동작합니다

window.onpageshow = function(event) {

   if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {

       cartCalc(); // 

   }

};



반응형
반응형

이클립스(Eclipse) 실행 시 Build workspace (빌드) 느릴때(멈춤) 해결 방법 - vailidation 

이클립스나(Eclipse), 스프링(STS), 전자정부프레임웍(eGovFrame)를 사용하다 보면 수시로 "Building workspace" 절차가 진행 됩니다.

이클립스 하단 상태표시 중에 한참을 표시되면서 진행률 변경이 없을때 그 답답함은 게임을 접속할때 로딩 99%에서 멈춰 응답이 없을때,

그 느낌을 느껴본 사람은 알 것이다. 


이 답답함을 해소 할 수 있는 방법이 있습니다.

이클립스 vailidation 설정을 변경해 "building workspace" 상태를 빨리 벗어나는 방법이 있습니다.

이클립스 설정을 그대로 사용할 경우 vailidation 설정을 그대로 사용하고 있는 경우가 많은데 중요하지 vailidation 설정을 해제하는 방법입니다. 

예로 들면 자바스크립트 검증은 엉뚱한 경고나 오류가 자주 뜨는 경우가 많아 자바스크립트 검증를 꺼두면 좋습니다. 


Window > Preference > Vailidation 을 확인해 본다.




vailidator 목록에서 체크를 해제 하면 검증을 하지 않게 됩니다. 

아니면 Suspend all vailidators 부분을 체크 하면 vailidator 부분이 전체 비활성화 됩니다.

여기에 하나 더 체크설정을 해제 해야 하는 곳이 있습니다.  


프로젝트(마우스우클릭) > Properties > Builders 이동합니다.



그림을 보면 JavaScript Vailidator 부분이 보입니다. 

이 부분을 해제 하면 building (빌드)시간도 단축이 되고 여러모로 시간 이점을 얻을수 있습니다.

반응형

+ Recent posts