허니몬(Honeymon)의 자바guru

---

자바스크립트 핵심 가이드

저자

더글라스 크락포드 지음

출판사

한빛미디어 | 2008-09-30 출간

카테고리

컴퓨터/IT

책소개

자바스크립트 전문가 더글라스 크락포드가 정리해낸 자바스크립트 언...

글쓴이 평점  

---

이 책에 나온 예문을 그대로... 사용..! 두둥.

var tempArray = new Array();

tempArray.push({id: 1, name: 'a'});

tempArray.push({id: 4, name: 'd'});

tempArray.push({id: 2, name: 'b'});

tempArray.push({id: 3, name: 'c'});

tempArray.push({id: 5, name: 'e'});

var by = function(name) {

    return function(o, p) {

        var a, b;

        if (typeof o === 'object' && typeof p === 'object' && o && p) {

            a = o[name];

            b = p[name];

            if (a === b) {

                return 0;

            }

            if (typeof a === typeof b) {

                return a < b ? -1 : 1;

            }

            return typeof a < typeof b ? -1 : 1;

        } else {

            throw {

                name : 'Error',

                message : 'Expected an object when sorting by ' + name

            };

        }

    };

};

tempArray.sort(by('id'));

[Object { id=1, name="a"}, Object { id=2, name="b"}, Object { id=3, name="c"}, Object { id=4, name="d"}, Object { id=5, name="e"}]

>> 결과

 startDayOfMonth : Tue May 01 2012 00:00:00 GMT+0900 (KST), endDayOfMonth : Thu May 31 2012 00:00:00 GMT+0900 (KST)

.serialize() - jQuery API : http://api.jquery.com/serialize/

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

오늘 jQuery를 가지고 스크립트를 작성하다가 jQuery를 이용해서 form 객체를 호출해서 jquery.submit() 메서드를 실행했는데 안먹히는 거다. 왜 그런거지!? 하면서 끙끙거리면서 고민하다가 옆에 계신 실장님께 도움을 요청하여 왜그런지 분석하다가 jQuery Document에 있는 걸 그대로 따라한 소스를 보시고서는

이건 센스가 없는거에요. 이 코드가 작동되는 것이 맞지만, 굳이 이렇게 할 필요가 있을까요?
이렇게 하면 될텐데?

라고 하시며 조언을 해주시는데...

document.forms['form'].submit();

이건 된다.

$('#form').submit();

이건 안된다.

$('#form').get(0).submit();

이건 된다. 단, 이렇게 get(0)으로 꺼내게 될 경우에는 jQuery에서 다루는 객체가 아니라 실제 form 객체이기 때문에 submit() 메서드는 jquery에서 다루기가 어려워진다. 즉, 복잡시러워지는거다. 문득 생각난건데.

$($('#form').get(0)).submit(function() {

});

요렇게하면 쓸 수 있지 않을까란 잡생각도 잠시 해봤다.

가만히 보고 있으니, 굳이 form.submit()을 실행하는 이벤트를 가로채서 ajax처리할 필요가 없었다.

var serializeObject = $form.serialize();

로 form에 있는 정보를 문자열로 직렬화해서 ajax로 넘기면 되는 거였다. 흠.

사실 그 앞에서 jQuery를 이용해서 동적으로  document.body에다가 form을 생성하고 거기에 appen로 붙이면서 form객체를 만들고 있었다. 이렇게 만들어진 form 객체를 jQuery를 이용해서 다루려고 했던 것인데, 이 부분에서 내가 생각했던 의도와는 다르게(원래 그렇게 되는 게 맞는 것이었겠지) 동작하고 있었던 것이다. 오류메시지도 나타나질 않으니 당황스러웠기도 하고 황망했다.

난 (개발) 센스가 부족하다. ㅠㅅ-)

센스만점이 되는 그날까지 부지런히 노력하자.

오늘의 교훈 : 난 브라우저(클라이언트)에서 다루는 객체의 계층구조나 동작원리를 제대로 이해하지 못하고 있다는 것이다. 그저 jQuery를 이용해서 다루는 정도가 아니라, 충분히 머리 속에서 동작원리를 이해하고 상상해볼 수 있는 수준까지 도달하기 위한 노력을 잊지 말자.

var telValidate = function(event) {
    var key = window.event ? event.keyCode : event.which;
    //alert(key);
    var keychar = String.fromCharCode(key);
    //alert(keychar);
    var reg = /[0-9]/;
    //alert(reg.test(keychar));
    return reg.test(keychar);
};

HTML5 에서 input 의 type attribute value 로 'tel'가 있다(참고 : http://www.w3schools.com/html5/tag_input.asp). 모바일 브라우저 상에서 input에 포커싱이 되면 숫자패드가 떠오르고,'(, ), -' 만 입력이 가능해진다. 일반 부라우저에서야 뭐... ㅡ_-);;

자바스크립트(아니 프로그래밍 언어)에서 중요한 것 중 하나는

 '정규 표현식(Regular expression)'을 제대로 이해하고 활용하는 것.

아직 정규식은 어렵구나. 빠른 시일 내에 정규식에 대해서 정리를 한번 싸악 해봐야겠다.