[자바스크립트] confirm() 주의할 것

<%@ tag pageEncoding=”utf-8″%>
<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core”%>
<%@ attribute name=”url” required=”true” %>

<a id=”btn_stop” href=”<c:url value=”${url}”/>”><img src=”<c:url value=”/images/study/stop.png”/>”/></a>

<script type=”text/javascript”>
$(document).ready( function(){
    $(“#btn_stop”).click( function() {
        if(confirm(“종료 하시겠습니까?”)) {
            $(this).parent().click();
        }
    });
});
</script>

분명히 confirm 팝업에서 “취소”를 눌렀는데도 그냥 진행이 되버리더군요. @_@;; 왜 이러나.. 싶어서 봄싹에 올렸더니 역시.. 성윤군이 원인과 해결책까지 제공! 캬~~ 어서 봄싹에 StackOverFlow 짭퉁 NullPE(NullPointerException) 메뉴를 추가해야 할텐데 말이죠.

원인은 간단하더군요. a 링크를 클릭할 때 이벤트를 등록했으니… 이벤트 처리하고 나서 링크 클릭한거 처리하느라 그렇게 된거더군요.

해결책도 역시 초간단…

$(document).ready( function(){
    $(“#btn_stop”).click( function() {
        if(confirm(“종료 하시겠습니까?”)) {
            $(this).parent().click();
        } else {
            return false;
        }
    });
});

else문 추가하고 false를 반환하면 끝. 크핫;

방법이 여러 개더군요.

    $(“#btn_stop”).click( function() {
        if(confirm(“종료 하시겠습니까?”) == false) {
            return false;
        }
    });

    $(“#btn_stop”).click( function(e) {
        if(confirm(“종료 하시겠습니까?”) == false) {
            e.preventDefault();
        }
    });

    $(“#btn_stop”).click( function(e) {
        return confirm(“종료 하시겠습니까?”);
    });

결국은 맨 마지막 걸로 고쳤습니다.

정우형/성유군/재일이형 쌩큐!

document.location.href 써먹기

    <script>
    function doinvconfirm() {
        var res = confirm(“재고조사를 하시겠습니까?”);
        if (res == false) return;

        document.location.href = “doinvconfirm.do”;
    }
    </script>

<a href=”javascript:doinvconfirm()” class=”black”>&nbsp;재고조사</a>

흠~ document.location.href를 이용하면 URL 주소창에 해당 URL을 입력한 거랑 동일한 효과가 나는 거군요. 자세한 내용은 여기서 참조할 수 있습니다.

서버에 위치한 파일 다운로드 링크 달기

    var excelformdown = function(){
        location.href = “${actionURL}”;
    }

일단 화면에서 어떤 이미지 버튼을 클릭하면 자바스크립트로 특정 URL을 호출하게 하도록 하고…

저 URL을 처리할 핸들러에서 파일을 응답으로 돌려주면 된다.

    @RequestMapping
    public void excelformdown(HttpServletResponse response){
        giveExcelForm(“sales.xls”, response);
    }

저 메소드 안 에서는 응답 유형을 multipart로 설정하고, 파일 이름을 설정해준다. 그리고 파일을 찾아서 output 스트림에 write() 해준다.

1장~6장 정리

자바스크립트는 Unicode를 사용함.

대소문자를 가림. HTML은 대소문자를 안 가리는데..

공백 상관없음.

세미콜론 안 붙이면 알아서 붙인걸로 인식한다. 붙여주는게 좋음.

주석은 자바랑 같음.

변수명 규칙도 자바랑 같음.

세 가지 primitive 타입이 있음. number, string, boolean. 이 들의 Wrapper 클래스들 있다. AutoBoxing/unBoxing 해준다.

자바스크립트는 function도 Object. 따라서 메소드의 인자로 넘길 수도 있다.

Function 만들 때 Function Literal 형태로 만들 수 있다.
var square = function(x) { return x*x; }

Object 만들 때도 Literal 형태로 만들 수 있다.
var point = { x:2.3, y:-1.2 };

초기화 안 한 변수는 undefined.

변수를 선언한 위치에 따라 Scope이 결정되는데, local에서 var를 사용하지 않고 변수 선언하면 전역변수가 된다. 변수 선언은 항상 함수 맨 위에 하는 것이 좋고, var는 맨날 붙이는게 좋다.

==은 자바의 equals()랑 비슷하고, ===는 자바의 ==랑 비슷하다.

for/in 루프가 있군.

with라는게 있군.

자바스크립트 줄바꿈 버그 해결과 원인 발견

form에서 String 타입의 변수에 입력할 때 엔터키를 눌러서 줄바꿈을 했다면 DB에 들어갈 때 캐리지 리턴이 포함되어 들어갑니다. 그런데 그 데이터를 화면에 뿌릴 때 자바스크립트에서 그걸 그대로 화면에서 줄바꿈을 해버려서 배열이 이상하게 되서 화면에 그리드가 나와야 하는데 undefined 라는 글자가 찍히고 “화면에 에러가 있습니다.”라고 친절하게 알려줍니다.

해결하는 방법은 간단합니다. 자바 코드에서 해당 데이터를 가져오는 게터에서 다음과 같은 코드를 추가합니다.
캐리지 리턴을 모두 찾아서 한 칸짜리 공백으로 바꿔줍니다.

replaceAll(“\r\n”, ” “);

진짜 어려운건 대체 저 버그가 발생했을 때 저런 이유로 인해 그런 결과가 나왔다는 것을 어떻게 금방 알아내느냐 인데.. 전 그걸 못해서 거의 일주일간 이 버그를 방치해두고 있었습니다. 그런데 제 사수님께서 거의 5분만에 원인을 알아내고 해결책까지 제시하는 걸 보고(한 두 번도 아니지만..) 정말 놀랐습니다. 그래서 어떻게 찾아내는 건지 물어봤더니 에러난 화면의 HTML 소스보기로 보니까 보인다고 해서 봤더니 정말 해당 데이터가 HTML 코드에서 갑자기 줄바꿈을 해버려서 눈에 튀더군요;;;

음.. 버그를 만났을 때 대처하는 방법과 자세에서 배울 것들이 정말 많습니다. 물론 그 밖에도 배울 것들이 많지요. 장인을 보고 있는 기분이랄까요… 장인어른 말구요.