Eclipse에서 Javascript 오류 없애기

Posted 2018. 8. 17. 17:19

무시할수도 있으나 Errors 탭에 남아있거나 프로젝트에 X 표시가 되어 있으면 왠지 모를 불편함에 찾아봤다.

방법은 간단하다.

결론은 Eclipse 가 체크하는데 예외처리를 하는것이다.

먼저 예외처리할 javscript js 파일의 위치를 확인한다.

/js/user/util.js 라고 가정하자.

Eclipse > Project > Properties > Javascript > Include Path > Source >

Exclude를 선택한 위 화면에서  우측의 Edit 버튼을 클릭한다.

 

여기에 새로운 패턴(/js/user/*) 형식으로 Add를 한다.

 

이제 Errors 탭이 javascript 오류가 사라져 깨끗해짐을 볼수 있을것이다.

 

 

 

 

 

 



Write your message and submit

jQuery를 이용해서 Ajax처리한 결과를 Json타입으로 받기

 

// 클라이언트 jQuery 코드

 

$.ajax({

type:"post", //http를 요청하는 방식 GET,POST뿐만 아니라  브라우저 지원에 따라 PUT, DELETE도 가능함.

async:true,

url:"login.do",

dataType :"json", //서버로 부터 전송받을 데이터의 타입(xml, json, html, script, JSONP, Text)

timeout: 1000,  //milliseconds

data : 'a='+a+'&b='+b,  // 서버로 전송할 파라메터 데이터.. $("#formId").serialize() 로도 가능

success : function(jsonData, textStatus, jqXHR){

alert(jsonData["result"]);},

error : function(jqXHR, textStatus, errorThrown){

alert(textStatus);

},

beforeSend:function(){

//ajax 요청 보내기 전 처리

},

complete:function(jqXHR, textStatus){

//ajax 완료후 처리

}

 

});

 

 

아래 서버측 코드는 스트러츠1을 이용한 방법이다. struts2에 대한 부분은 많은데, 1에 대한 부분은 없는듯 하다.

서버측 코드에서 Gson을 이용해서 json 데이터 보내기

 

        Map<String, Object> object1 = new HashMap<String ,Object>();
        object1.put("result", "성공");
        
        response.setContentType("application/json"); // 이 코드는 없어도 결과는 정상적으로 나옴.
        response.setCharacterEncoding("utf-8"); // 한글처리를 위해서 있어야 함.
       
        response.getWriter().write(new Gson().toJson(object1));

 

//text 형태는 setContentType 만 변경하고 데이터를 넘겨주면 끝.

 

response.setContentType("text");

response.getWriter().print("This is Text result");

 



  1. 김정우

    | 2018.08.07 18:54 | PERMALINK | EDIT | REPLY |

    이렇게되면 스트럿츠에서 forward는 어떻게 구성되어하나요...?

Write your message and submit

언제부턴가 팝업창이 윈도우 팝업이 아닌 div 팝업이 대세가 되버렸다.

아마도 xp 팝업창 차단기능이 추가되면서부턴가 아닌가 싶다.

 

고객의 요청으로 사이트에 div 팝업을 띄워달라는 요청이 들어왔다.

창 크기에 상관없이 center를 기준으로 왼쪽 100px, top 은 90px 이다.

 

팝업창 기능이야 가장 일반적인것이다. 닫기 버튼과 하루동안 보이지 않기 체크박스

최근 가장 많이 쓰이고 있는(?) jQuery를 이용하여 위의 요구사항을 반영해보았다.

 

1. div 를 페이지 맨 하단에 추가한다.

<div style="position:absolute; width:474px;left:50%; margin-left:-208px; top:40px; z-index:3; display:none" id="layer_pop">

<table> 중략

</table>

 <input type="checkbox" name="today_no" id="today_no" value="1">하루동안 보이지 않기
 <a href="javascript:pop_close();">닫기</a>

</div> 

 

처음은 일단 display:none 으로 추가한다.

 

2. javascript를 추가한다. jQuery용 최신 라이브러리를 import한다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 

3. 닫기 버튼 클릭에 대한 구현.

function pop_close() {
        $("#layer_pop").hide(); // 반대는 당연히 show();

}

 

4. onLoad시 hide되어 있는 div 를 show()로 변경하는 스크립트 추가

window.onload = function(){

$("#layer_pop").show();

}

 

5. cookie를 이용하여 "하루동안 보이지 않기" 기능 구현

먼저 getCookie, setCookie를 구현// 워낙 많이 사용한 코드들이므로 쉽게 검색해서 찾아올수 있다.

function getCookie( name ){
 var nameOfCookie = name + "=";
 var x = 0;
 while ( x <= document.cookie.length ) {
  var y = (x+nameOfCookie.length);
  if ( document.cookie.substring( x, y ) == nameOfCookie ) {
   if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
    endOfCookie = document.cookie.length;
   return unescape( document.cookie.substring( y, endOfCookie ) );
  }
  x = document.cookie.indexOf( " ", x ) + 1;
  if ( x == 0 )
   break;
 }
 return "";
}

 

 

function setCookie(name, value, expirehours, domain)  {
        var today = new Date();
        today.setTime(today.getTime() + (60*60*1000*expirehours));
        document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";";
        if (domain) {
            document.cookie += "domain=" + domain + ";";
        }

 

닫기 버튼 클릭시 체크박스에 체크가 되어 있는지 여부를 확인한다.

앞에서 구현한 pop_close 함수에 체크박스 확인하는 부분, 쿠키에 값을 넣는 부분을 추가한다.

function pop_close() {
  if($("#today_no").attr("checked")){
      setCookie("layer_pop", "done" , 24);
  }
   $("#layer_pop").hide();    
}

 

6. 이제 마지막으로 onload시 쿠키를 읽어 div 를 show() 할것인가를 확인하면 된다.

window.onload = function(){

if(getCookie('layer_pop') != 'done'){ 

$("#layer_pop").show();

}

}

 

7. 끝? 아니다. div의 위치를 잡아주어야 한다. center를 기준으로 좌측100px 이다. 상단은90px

모니터의 해상도가 아닌 브라우저의 사이즈를 알아와야 한다.

var winwidth=document.all?document.body.clientWidth:window.innerWidth; // 브라우저 가로폭 사이즈 가져오기

// 브라우저 가운데에서 왼쪽으로 100px 이동- 보여지는 div의 가로폭의 1/2 만큼 추가로 빼야한다. 

var left = winwidth/2 - (380/2 + 100);

//브라우저가 작을경우 팝업창이 잘리지 않게 하기 위해서 left 최소값은 팝업창 1/2 로 한다.
if(left < 190) left = 190;

var top = 90;

 

$("div#layer_pop").css({"left":left+"px"});
$("div#layer_pop").css({"top":top+"px"});

 

 

8. 구현된 완성코드를 보면 다음과 같다.

function pop_open(){
  if(getCookie('layer_pop') != 'done'){
       var winwidth=document.all?document.body.clientWidth:window.innerWidth;  
  
      var left = winwidth/2 - 320;// - (380/2 + 100);
      if(left < 190) left = 190;
  
      var top = 90;//windowHeight/2;
        $("div#layer_pop").css({"left":left+"px"});
        $("div#layer_pop").css({"top":top+"px"});
        $("div#layer_pop").show("fast");
     }
 }
  
 window.onload = pop_open;
 window.onresize = pop_open;

 

 

마지막의 window.onresize는 창 키기가 변경될 경우 위치를 변경해 주기 위해서 적용하였다.

 

P.S ==> 플래시영역과 div 팝업이 겹치는 경우 플래시가 div 위로 올라와 버리는 경우가 발생한다.

이런경우 flash의 wmode가 transparent인 경우 z-index 값 많으로 적용이 되지 않는다.

반드시 Opaque로 바꿔주고 z-index를 변경해서 div 팝업이 맨 위로 올라오도록 해야한다.

 

<object  ...

<param name='wmode' value='Opaque' />
<embed wmode='Opaque' ...  />

</object>

 

 

이상 jQuery를 이용한 div 팝업 위치조정하기 편 끝.

마지막 resize 가 속도에 영향을 미치는지에 대한 부분은 ...???

 



  1. | 2013.05.30 05:16 | PERMALINK | EDIT | REPLY |

    비밀댓글입니다

  2. BlogIcon 일상이 기적이다. 그 기적속에서의 삶에 감사하자. 대단한넘

    | 2013.06.03 09:12 신고 | PERMALINK | EDIT |

    안녕하세요? 제 블로그를 방문해 주셔서 감사합니다.
    질문하신 그 내용은 저도 해보지 않아서 정확한 답변을 드리기는 좀 뭐하네요.
    다만 <div></div> 를 만들고 해당 div 위치를 위치시키고자 하는 부분에 맞춰서 세팅하시면 됩니다. 전문적으로 css를 하지 않는 제 입장에서는 이부분이 젤 어렵습니다.
    나머지라고 하는 부분은 javascript를 뜻하는건가요? javascript를 head에 넣는 걸로 권고 하지만 요즘은 맨 밑으로 위치시키는 게 일반적입니다. 그리고 <script></script>를 선언하면 위치에 대한 제약은 그렇게 많지 않습니다. 다만 javascript framework로 무엇을 사용할껏이냐에 따라 그 사용법에 차이가 있을뿐입니다. 참고하시어서 작업하시면 됩니다.
    도움이 되셨기를 바랍니다.

    감사합니다.

  3. | 2013.06.03 15:14 | PERMALINK | EDIT |

    비밀댓글입니다

  4. rosebay

    | 2013.12.05 11:46 | PERMALINK | EDIT | REPLY |

    잘 참고하고 갑니다~ 이해하기 쉽게 잘 쓰셨네요.

Write your message and submit
« PREV : 1 : 2 : 3 : NEXT »