[JavaScript] 프로 자바스크립트 테크닉 (7장 ~ 9장) - 3/4

개요

jQuery를 만든 존 레식이 집필한 "Pro JavaScript Techniques"의 번역한 서적이다. JavaScript가 같고 있는 특성을 기준으로 객체지향적인 요소에 대해서 잘 설명하고 있다. jQuery의 기본적인 기술을 확인해 볼 수 있다.

 

책 소개

자바스크립트를 한동안 다뤘던 개발자라면 아는 기본적인 문법이나 문장 구조 같은 기본적인 사항들을 배제하고, 곧바로 자바스크립트에서의 객체지향이라는 개념과 테스트를 위한 도구, 배포와 브라우저 지원에 대한 주의사항 등 현대적인 자바스크립트 개발에 필요한 기술들을 실용적인 예와 소스코드를 통해 설명한다.

 

자바스크립트로 개발해 본 사람이라면 누구나, 어떻게 해야 더 깔끔하고 사용하기 쉬운 코드를 작성할 수 있을지, 객체지향 언어답게 자바스크립트를 사용하는 방법은 무엇인지 고민했을 것이다. 또, 내가 개발한 애플리케이션을 테스트할 적절한 도구는 없는지, 배포 전에 주의해야 할 사항은 없는지, 혹시 내가 테스트하지 못한 브라우저에서 오류가 발생하는 건 아닌지 걱정했을 수도 있다.

 

이 책은 자바스크립트를 한동안 다뤘던 개발자라면 이미 알고 있을 기본적인 문법이나 문장 구조 같은 기본적인 사항들을 배제하고, 곧바로 자바스크립트에서의 객체지향이라는 개념과 테스트를 위한 도구, 배포와 브라우저 지원에 대한 주의사항 등 현대적인 자바스크립트 개발에 필요한 기술들을 실용적인 예와 소스코드를 통해 설명한다.

 

이 책의 저자인 존 레식(John Resig)은, 최근 주목받는 라이브러리인 jQuery를 개발한 자바스크립트 전문가이기도 하며, 그 경험을 살려 라이브 블로깅(Live Blogging)이나 끝이 없는 블로그(Never-Ending Blog) 같이 실무에 바로 적용할 수 있는 예들도 이 책에서 선보였다.

 

이 책을 읽은 독자라면 자신만의 라이브러리를 구축할 수 있을 정도의 도구들을 얻게 될 뿐만 아니라, 현대적인 기술로 무장한 자바스크립트 전문가가 될 수 있을 것이다.

 

저자

존 레식 (John Resig)

소개: 자바스크립트 프로그램 언어에 열정을 품은 프로그래머이며 기업가다. 자바스크립트 라이브러리인 jQuery의 창시자이자 jQuery의 리드 개발자(lead developer)이고, 2008년 현재 웹을 기반으로 하는 다른 많은 프로젝트에서도 리드 개발자로 활동한다.

 

7장 자바스크립트와 CSS

    현대적인 자바스크립트 프로그래밍의 주목적 중 하나는 CSS와 연동하는 것이다.

    CSS는 개발자에게 강력한 기능을 제공하고 사용자에게 유용하고 매력적인 웹페이지를 제공한다.

 

7.1 스타일 정보에 접근하기

    엘리먼트의 CSS 프로퍼티를 조작하는 기본 방법은 style 프로퍼티를 사용하는 것이다.

    자바스크립트에서 치수와 관련된 값을 설정할 때는 치수의 단위를 적어야 한다.

    DOM 엘리먼트의 계산된 style 프로퍼티 값을 얻을 때는 여러 메서드를 활용할 수 있다.

 

    IE는 엘리먼트의 계산된 스타일 값을 얻을 때 자신만의 방법을 사용한다.

    반면 다른 브라우저들은 W3C가 정의한 방법을 사용한다.

 

7.2 동적인 엘리먼트

    동적인 효과를 만드는 데 사용되는 프로퍼티는 position, size, visibility이다.이다.

    위치를 조작할 때는 CSS에서 작동하는 위치 지정 시스템에 대해 이해하는 것이 중요하다.

 

    정적 위치 지정방식(static) : 기본적인 위치 지정 방식. 문서의 기본적인 흐름을 따른다.

    상대 위치 지정방식(relative) : 정적 위치와 유사하나 원래 위치의 상대적인 만큼 이동한다.

    절대적 위치 지정방식(absolute) : 기본 흐름을 따르지 않고 부모 엘리먼트의 상대적으로 지정된다.

    고정적 위치 지정방식(fixed) : 엘리먼트의 위치가 브라우저 창에 상대적으로 지정된다.

 

    엘리먼트의 위치는 엘리먼트에 설정된 CSS 매개변수와 인접한 내용에 따라 달라진다.

 

    offsetParent : 주어진 엘리먼트를 담고 있는 부모 엘리먼트를 나타낸다. 브라우저마다 다르다.

    offsetLeft, offsetTop : 주어진 엘리먼트의 offsetParent 문맥 내 수평 혹은 수직 오프셋을 의미한다.

 

    엘리먼트의 위치를 얻어낼 때와는 달리 엘리먼트의 위치를 설정하는 작업은 훨씬 수월하다. 

    function posX(elem) {
        return parseInt( getStyle( elem, “left” ) );
    }

    function posY(elem) {
        return parseInt( getStyle( elem, “top” ) );
    }

    function setX(elem, pos) {
        elem.style.left = pos + “px”;
    }

    function setY(elem, pos) {
        elem.style.top = pos + “px”;
    }

    function addX(elem,pos) {
        setX( posX(elem) + pos );
    }

    function addY(elem,pos) {
        setY( posY(elem) + pos );
    }

 

    엘리먼트가 커질 수 있는 전체 구역을 알려주는 clientWidth와 clientHeight 프로퍼티를 사용한다.

 

    엘리먼트의 가시성

    visibility 프로퍼티는 보여줄지 여부를 설정한다. (visible/hidden)

    display 프로퍼티는 배치를 제어한다. (inline/block/none)

 

    opacity 불투명도를 조절한다. IE와 W3C와 구현방식이 서로 다르다.    

    function setOpacity( elem, level ) {
        if ( elem.filters )
            elem.filters.alpha.opacity = level;
        else
            elem.style.opacity = level / 100;
    }

 

7.3 애니메이션

    슬라이드 인 (slide in) : 시간에 따라 엘리먼트의 높이를 키워서 서서히 화면에 보여준다.

    페이드 인 (fade in) : 불투명도 0에서 100까지 조절하여 화면에 표시한다.

 

7.4 브라우저

    브라우저를 다룰 때는 마우스 커서와 위치와 사용자가 화면을 얼마나 스크롤했는지가 중요하다.

    마우스 위치를 얻기 위해서 알아야 할 두 변수는 전체 페이지에 대해 상대적인 커서의 x, y 좌표다.

 

    브라우저의 뷰포트(Viewport)는 스크롤할 수 있는 전체 영역이라고 생각할 수 있다.

    scrollWidth와 scrollHeight는 보이는 부분의 크기가 아니라 가능한 최대너비와 높이를 알려준다.

    scrollTo 메서드는 페이지 상의 현재 뷰포트 위치를 수정할 수 있다.

    뷰포트의 크기를 알면 화면의 해사도나 브라우저 창의 크기와 상관없이 현재 크기를 알 수 있다.

 

7.5 드래그 앤 드롭

    아론 부드맨의 DOM-Drag 라이브러리 (http://boring.youngpup.net/2001/domdrag)

    DOM-Drag는 깔끔한 객체지향 문법으로 작성되어 있고 상대적으로 사용하기 쉽다.

 

7.6 라이브러리

    moo.fx와 jQuery는 간단한 효과를 적용할 때 유용하게 사용할 수 있는 간단한 라이브러리다.

    script.aculo.us는 DHTML 라이브러리 중에서 최고이다. 

 

8장 폼 기능 개선하기

    폼을 사용하면 구조화된 데이터를 입력할 수 있어서 굉장히 유용하다.

    클라이언트 폼 검증을 수행하는 기본적인 방법

    검증 결과를 사용자가 이해하기 쉽게 보여주는 방법

    폼의 전체적인 사용성을 높이기 위한 몇 가지 방법

 

8.1 폼 검증

    모든 폼 스크립팅에서는 폼이 의도한 대로 작동하는지를 반드시 확인해야 한다.

    클라이언트 측 폼 검증이 적용되어 있어도 서버 측 검증도 고려해야 한다.

 

    필드 검증 중에서 가장 중요한 것은 필수 입력을 검증하는 작업이다.

    필수 입력 필드를 검사하는 작업과 함께 의도한 값이 입력되었는지도 검사해야 한다.

    입력 엘리먼트에 올바른 값이 입력되었는지를 검사하는 방법은 패턴 매칭이다.

 

 

   필수 입력 검증

    function checkRequired( elem ) {
        if ( elem.type == "checkbox" || elem.type == "radio" )
            return getInputsByName( elem.name ).numChecked;
        else
            return elem.value || elem.value == elem.defaultValue;
    }

    function getInputsByName( name ) {
        var results = [];
        results.numChecked = 0;

        var input = document.getElementsByTagName("input");
        for ( var i = 0; i < input.length; i++ ) {
            if ( input[i].name == name )
            {
                results.push( input[i] );

                if ( input[i].checked )
                    results.numChecked++;
            }
        }

        return results;
    }

 

    이메일 검증

    function checkEmail( elem ) {
        return !elem.value ||  /^[a-z0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i.test( elem.value );
    }

 

    URL 검증

    function checkURL( elem ) {
        return !elem.value || elem.value == 'http://' || 
            /^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/.test( elem.value );
    }

 

    전화번호 검증

    function checkPhone( elem ) {
        var m = /(\d{3}).*(\d{3}).*(\d{4})/.exec( elem.value );
        if ( m ) obj.value = "(" + m[1] + ") " + m[2] + "-" + m[3];
        return !elem.value || m;
    }

 

    날짜 검증

    function checkDate( elem ) {
        return !elem.value || /^\d{2,4}\/\d{2}\/\d{2}$/.test(obj.value);
    }

 

8.2 에러 메시지 출력

    에러 메시지를 출력하여 사용자에게 많은 정보를 제공하기는 어려울 수 있다.

    모든 form 엘리먼트에는 elements라는라는 프로퍼티가 있다.

    모든 필드에 클래스를 부여하여 각 필드마다 다른 검증 규칙을 적용할 수 있다.

 

    폼을 검증할 수 있는 시점은 1) 폼 제출, 2) 필드 값 변경, 3) 페이지 로드로 분류할 수 있다.

    폼을 제출하는 시점에 검증하는 방법은 가장 널리 사용되는 방법이다.

    필드 값 변경 시점의 검증하는 방법은 사용자가 필드에서 다른 곳으로 커서를 움직였을 때이다.

    페이지 로드 시점에 검증하는 방법은 특수한 상황을 처리할 경우에 사용된다.

 

8.3 사용성 개선

    호버 레이블 : 필드 위에 레이블을 출력하고 필드가 초점을 얻으면 레이블을 사라지게 한다.

    필수 항목 표시 : 시각적인 기호를 사용하여 특정 필드가 필수 입력임을 알리는 것이다. 

    $("input.required").prev("label").css("cursor", "help")
        .title( errMsg.required ).append(" <span class='required'>*</span>");

 

9장 이미지 갤러리 만들기

    DOM 조작 기술, DOM 순회 기술, 동적인 CSS 조작 기술로 좀 더 멋진 경험을 제공할 수 있다.

 

9.1 갤러리의 예

    Lightbox : 새로운 스타일의 최초의 DOM 이미지 갤러리다.

    ThickBox : 코디 린들리가 jQuery를 사용하여 개발한 갤러리다.

 

9.2 갤러리 만들기

    자바스크립트가 아직 실행되지 않은 상태에서도 각 이미지들은 페이지에 표시되어야 한다.

    투명 오버레이의 크기를 현재 페이지의 높이와 너비에 정확히 맞게 만든다.

    사용자가 한 이미지를 클릭했을 때 이미지를 화면 위에 커다랗게 표시한다.

    이미지를 화면에 표시하고 adjust() 함수로 이미지를 화면 가운데 배치한다.

    갤러리 내의 다른 이미지들을 열람할 수 있도록 Navagation 기능을 추가한다.

    마지막으로 구현할 것은 여러 이미지를 자동으로 둘러볼 수 있도록 하는 슬라이드 쇼이다.