Whiteship's Note


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

모하니?/Coding : 2009.10.13 13:04


<%@ 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("종료 하시겠습니까?");
    });

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

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


document.location.href 써먹기

View/JavaScript : 2008.12.15 16:14


    <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을 입력한 거랑 동일한 효과가 나는 거군요. 자세한 내용은 여기서 참조할 수 있습니다.
top


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

모하니?/Coding : 2008.06.26 18:05


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

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

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

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

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


1장~6장 정리

AJAX/JavaScript : 2008.04.04 19:46


자바스크립트는 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라는게 있군.

'AJAX > JavaScript' 카테고리의 다른 글

1장~6장 정리  (0) 2008.04.04
자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
top


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

모하니?/Coding : 2008.03.26 23:42


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

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

replaceAll("\r\n", " ");

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

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


구글 캘린더 정보 가져오기

모하니?/Coding : 2007.10.06 20:38


구글 캘린더 API를 사용하는 방법은 여러가지(Java, .Net, Protocol, Javascript)가 있는데 그 중에서 가장 간단한 것은 아마도 자바스크립트 입니다. 뷰에서 데이터를 읽어온 다음에 바로 보여주기 때문에 매우 간단합니다.

구글 캘린더 정보를 가져오는 방법을 크게 두 가지 방법으로 나눌 수 있는데, 나누는 기준은 인증입니다. 즉 로그인을 거친 다음에 정보를 가져오느냐, 아니면 인증 없이 공개된 일정만 가져오느냐 입니다. 당연히 인증을 거치는 방법이 쪼금 더 복잡하겠죠. 그래서 저는 인증을 사용하지 않고, 공개된 일정만 가져와서 뿌려주는 예제를 돌려봤습니다.

자바스크립트 코드는 여기서 참조하실 수 있습니다.

1. 구글 API 키 받기.
여타 다른 오픈 API를 제공하는 곳과 마찬가지로 구글도 여기서 key를 받아서 사용해야 합니다.

2. 외부 자바스크립트 파일 포함시키기.
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>
요건 구글 API 키 인증작업에 해당하고, 실제 API를 가져오는 것은 다음과 같습니다.
google.load("gdata", "1");

3. 캘린더 정보 가져오기.
function loadCalendarByAddress(calendarAddress) {
  var calendarUrl = 'http://www.google.com/calendar/feeds/' +
                    calendarAddress +
                    '/public/full';
  loadCalendar(calendarUrl);
}

function loadCalendar(calendarUrl) {
  var service = new
      google.gdata.calendar.CalendarService('gdata-js-client-samples-simple');
  var query = new google.gdata.calendar.CalendarEventQuery(calendarUrl);
  query.setOrderBy('starttime');
  query.setSortOrder('ascending');
  query.setFutureEvents(true);
  query.setSingleEvents(true);
  query.setMaxResults(10);

  service.getEventsFeed(query, listEvents, handleGDError);
}

위의 코드는 전체 코드에서 캘린더 정보를 가져오는 부분에 해당합니다. 가장 핵심이 되는 부분은 맨 아래의 loadCalendar 함수 입니다. 이 함수에 calendarUrl을 넘겨주면 되는데 해당 URL 형식은 위에 있는 메소드에서 알 수 있습니다. calendarAddress에 자신의 구글 계정을 입력하면 자신의 캘린더 정보(자신이 가지고 있는 모든 캘린더 정보가 아니라 기본으로 만들어져 있는 한 개의 캘린더를 지칭합니다.)를 가져올 수 있습니다.

4. 화면에 보여주기

function listEvents(feedRoot) {
  var entries = feedRoot.feed.getEntries();
  var eventDiv = document.getElementById('events');
  if (eventDiv.childNodes.length > 0) {
    eventDiv.removeChild(eventDiv.childNodes[0]);
  }     
  /* create a new unordered list */
  var ul = document.createElement('ul');
  /* set the calendarTitle div with the name of the calendar */
  document.getElementById('calendarTitle').innerHTML =
    "Calendar: " + feedRoot.feed.title.$t;
  /* loop through each event in the feed */
  var len = entries.length;
  for (var i = 0; i < len; i++) {
    var entry = entries[i];
    var title = entry.getTitle().getText();
    var startDateTime = null;
    var startJSDate = null;
    var times = entry.getTimes();
    if (times.length > 0) {
      startDateTime = times[0].getStartTime();
      startJSDate = startDateTime.getDate();
    }
    var entryLinkHref = null;
    if (entry.getHtmlLink() != null) {
      entryLinkHref = entry.getHtmlLink().getHref();
    }
    var dateString = (startJSDate.getMonth() + 1) + "/" + startJSDate.getDate();
    if (!startDateTime.isDateOnly()) {
      dateString += " " + startJSDate.getHours() + ":" +
          padNumber(startJSDate.getMinutes());
    }
    var li = document.createElement('li');

    /* if we have a link to the event, create an 'a' element */
    if (entryLinkHref != null) {
      entryLink = document.createElement('a');
      entryLink.setAttribute('href', entryLinkHref);
      entryLink.appendChild(document.createTextNode(title));
      li.appendChild(entryLink);
      li.appendChild(document.createTextNode(' - ' + dateString));
    } else {
      li.appendChild(document.createTextNode(title + ' - ' + dateString));
    }       

    /* append the list item onto the unordered list */
    ul.appendChild(li);
  }
  eventDiv.appendChild(ul);
}

google.setOnLoadCallback(init);

<div id="calendarTitle"></div>
<div id="events"></div>

google.setOnLoadCallback(init); 까지는 <script> 태그로 묶여 있어야 하는 부분입니다. listEvents 함수 내부에서는 구글 캘린더 API와 DOM을 사용해서 특정 id를 가진 엘리먼트에 데이터를 채워넣고 있습니다.

이렇게 간단하게 구글 캘린더 정보를 가져와서 보여줄 수 있습니다.
사용자 삽입 이미지

top