출처 : http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html

jQuery란 무엇인가?

2006년 초, John Resig가 만든 jQuery는 JavaScript 코드로 작업하는 사람들에게는 훌륭한 라이브러리이다. 여러분이 JavaScript 언어 초보자라서 라이브러리가 Document Object Model (DOM) 스크립팅과 Ajax의 복잡성을 다루어주기를 원하든지, 숙련된 JavaScript 구루로서 DOM 스크립팅과 Ajax의 반복성에 지루해졌다면, jQuery가 제격이다.

jQuery는 코드를 단순하고 간결하게 유지한다. 많은 반복 루프와 DOM 스크립팅 라이브러리 호출을 작성할 필요가 없다. jQuery를 사용하면 매우 적은 문자로 표현할 수 있다.

jQuery 철학은 매우 독특하다. 무엇이든 단순하고 재사용 가능한 것으로 유지하기 위해 디자인 되었다. 여러분이 이러한 철학을 이해하고 여기에 편안함을 느낀다면, jQuery가 여러분의 프로그래밍 방식을 충분히 향상시킬 수 있다.

단순화

다음은 jQuery가 여러분의 코드에 어떤 영향을 미치는지를 보여주는 예제이다. 페이지의 모든 링크에 클릭 이벤트를 붙이는 것 같이 단순하고 일반적인 것을 수행하려면, 플레인 JavaScript 코드와 DOM 스크립팅을 사용하는 것이 낫다. (Listing 1)


Listing 1. jQuery 없는 DOM 스크립팅
                
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        return confirm('You are going to visit: ' + this.href);
    };
}

Listing 2는 같은 기능에 jQuery를 사용한 모습이다.


Listing 2. jQuery를 사용한 DOM 스크립팅 
                
$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});

놀랍지 않은가? jQuery를 사용하면 복잡하지 않게 코드로 표현하고자 하는 것만 나타낼 수 있다. 엘리먼트를 반복할 필요가 없다.click() 함수가 이 모든 것을 관리한다. 또한, 다중 DOM 스크립팅 호출도 필요 없다. 여기에서 필요한 것은 엘리먼트가 어떻게 작동하는지를 설명하는 짧은 스트링이다.

이 코드로 어떻게 작업이 수행되는지를 이해하기는 조금 어렵다. 우선, $() 함수가 있어야 한다. 이것은 jQuery에서 가장 강력한 함수이다. 대게, 이 함수를 사용하여 문서에서 엘리먼트를 선택한다. 이 예제에서, 이 함수는 Cascading Style Sheets (CSS) 신택스를 포함하고 있는 스트링으로 전달되고, jQuery는 효율적으로 이 엘리먼트를 찾는다.

CSS 셀렉터의 기본을 이해하고 있다면, 이 신택스가 익숙할 것이다. Listing 2에서, #external_links는 external_links의 id를 가진 엘리먼트를 찾는다. a 앞에 있는 공간은 jQuery에게 external_links 엘리먼트 내의 모든 <a> 엘리먼트를 찾도록 명령한다. 영어와 DOM은 장황하지만, CSS에서는 매우 간단하다.

$() 함수는 CSS 셀렉터와 매치하는 모든 엘리먼트를 포함하고 있는 jQuery 객체를 리턴한다. jQuery 객체는 어레이와 비슷하지만, 수 많은 특별한 jQuery 함수들이 포함된다. 예를 들어, click 함수를 호출함으로써 클릭 핸들러 함수를 jQuery 객체의 각 엘리먼트에 할당할 수 있다.

또한, 엘리먼트나 엘리먼트의 어레이를 $() 함수로 전달하면, 이것은 엘리먼트 주위에 jQuery 객체를 래핑할 것이다. 이 기능을 사용하여 window 객체 같은 것에 jQuery 함수를 적용하고 싶을 것이다. 일반적으로 이 함수를 다음과 같이 로드 이벤트에 할당한다.

window.onload = function() {
    // do this stuff when the page is done loading
};

jQuery를 사용하면, 같은 코드도 다음과 같이 된다.

$(window).load(function() {
    // run this when the whole page has been downloaded
});

이미 알고 있었겠지만, 윈도우가 로딩하기를 기다리는 일은 매우 지루한 일이다. 전체 페이지가 로딩을 끝마쳐야 하기 때문이다. 여기에는 페이지의 모든 이미지들도 포함된다. 가끔, 이미지 로딩을 먼저 끝내고 싶지만, 대부분의 경우 Hypertext Markup Language (HTML)만 로딩해야 한다. jQuery는 문서에 특별한 ready 이벤트를 만듦으로써 이 문제를 해결한다.

$(document).ready(function() {
    // do this stuff when the HTML is all ready
});

이 코드는 document 엘리먼트 주위에 jQuery 객체를 만들고, HTML DOM 문서가 준비될 때 함수를 설정하여 인스턴스를 호출한다. 이 함수를 필요한 만큼 호출할 수 있다. 진정한 jQuery 스타일에서, 지름길은 이 함수를 호출하는 것이다. 함수를 $() 함수로 전달한다.

$(function() {
    // run this when the HTML is done downloading
});

지금까지, $() 함수를 사용하는 세 가지 방법을 설명했다. 네 번째 방법은, 스트링을 사용하여 엘리먼트를 만드는 것이다. 결과는, 그 엘리먼트를 포함하고 있는 jQuery 객체가 된다. Listing 3은 문단을 페이지에 추가하는 예제이다.


Listing 3. 간단한 문단을 생성하여 붙이기 
                
$('<p></p>')
    .html('Hey World!')
    .css('background', 'yellow')
    .appendTo("body");

이전 예제에서 파악했겠지만, jQuery의 또 다른 강력한 기능은 메소드 체인(method chaining.)이다. jQuery 객체에 대해 메소드를 호출할 때마다, 이 메소드는 같은 jQuery 객체를 리턴한다. jQuery 객체에 다중 메소드를 호출하고 싶다면 셀렉터를 다시 입력하지 않고 이를 수행할 수 있다.

$('#message').css('background', 'yellow').html('Hello!').show();

Ajax로 단순하게!

Ajax는 jQuery를 사용하면 더 단순해 질 수 있다. jQuery에는 쉬운 것도 쉽게 복잡한 것도 가능한 단순하게 만드는 유용한 함수들이 많이 있다.

Ajax에서 사용되는 방식은 HTML 청크를 페이지 영역에 로딩하는 것이다. 여러분이 필요로 하는 엘리먼트를 선택하고 load() 함수를 사용하는 것이다. 다음은 통계를 업데이트 하는 예제이다.

$('#stats').load('stats.html');

일부 매개변수들을 서버 상의 페이지로 전달해야 할 경우가 종종 있다. jQuery를 사용하면 이는 매우 간단하다. 필요한 메소드가 어떤 것인지에 따라서 $.post()와 $.get() 중 선택한다. 선택적 데이터 객체와 콜백 함수를 전달할 수도 있다. Listing 4는 데이터를 보내고 콜백을 사용하는 예제이다.


Listing 4. Ajax를 사용하여 데이터를 페이지로 보내기 
                
$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});

복잡한 Ajax 스크립팅을 해야 한다면, $.ajax() 함수가 필요하다. xmlhtmlscriptjson을 지정할 수 있고, 여러분이 바로 사용할 수 있도록 jQuery가 자동으로 콜백 함수에 대한 결과를 준비한다. 또한, beforeSenderrorsuccesscomplete 콜백을 지정하여 사용자에게 Ajax에 대한 더 많은 피드백을 제공할 수 있다. 게다가, Ajax 요청의 타임아웃이나 페이지의 "최종 변경" 상태를 설정하는 매개변수들도 있다. Listing 5는 필자가 언급했던 매개변수를 사용하여 XML 문서를 검색하는 예제이다.


Listing 5. $.ajax()를 사용하여 복잡한 Ajax를 단순하게
                
$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

콜백 성공으로 XML을 받으면, jQuery를 사용하여 HTML에서 했던 것과 같은 방식으로 XML을 볼 수 있다. 이는 XML 문서 작업을 쉽게 하며 콘텐트와 데이터를 웹 사이트로 쉽게 통합시킨다. Listing 6은 리스트 아이템을 XML의 <item> 엘리먼트용 웹 페이지에 추가하는success 함수에 대한 확장 모습이다.


Listing 6. jQuery를 사용하여 XML 작업하기 
                
success: function(xml){
    $(xml).find('item').each(function(){
        var item_text = $(this).text();

        $('<li></li>')
            .html(item_text)
            .appendTo('ol');
    });
}

HTML 애니메이션

jQuery를 사용하여 기본적인 애니메이션과 효과를 다룰 수 있다. 애니메이션 코드의 중심에는 animate() 함수가 있는데, 이는 숫자로 된 CSS 스타일 값을 바꾼다. 예를 들어, 높이, 넓이, 폭, 위치를 움직일 수 있다. 또한, 애니메이션의 속도를 밀리초 또는 사전 정의된 속도(느림, 보통, 빠름)로 지정할 수 있다.

다음은, 엘리먼트의 높이와 넓이를 동시에 움직이게 하는 예제이다. 시작 값은 없고 종료 값만 있다. 시작 값은 엘리먼트의 현재 크기에서 가져온다. 여기에도 콜백 함수를 첨부했다.

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
    alert('The element is done growing!');
});

jQuery는 빌트인 함수를 사용하여 일반적인 애니메이션도 더욱 쉽게 만든다. show()와 hide() 엘리먼트를 즉각적으로 또는 지정된 속도로 사용할 수 있다. fadeIn()과 fadeOut() 또는 slideDown()과 slideUp()을 사용하여 엘리먼트를 나타나게 하거나 사라지게 할 수 있다. 다음은 네비게이션의 slidedown 예제이다.

$('#nav').slideDown('slow');

DOM 스크립팅과 이벤트 핸들링

jQuery는 DOM 스크립팅과 이벤트 핸들링을 단순화하는데 제격이다. DOM의 트래버스와 조작이 쉽고, 이벤트의 첨부, 제거, 호출은 매우 자연스러운 일이며, 직접 수행하는 것보다 에러도 적게 발생한다.

기본적으로 jQuery는 DOM 스크립팅으로 수행하는 일들을 더욱 쉽게 수행할 수 있도록 해준다. 엘리먼트를 생성하고 append() 함수를 사용하여 이들을 다른 엘리먼트로 연결할 수 있고, clone()을 사용하여 엘리먼트를 중복시키고, 콘텐트를 html()로 설정하고, empty()함수로 콘텐트를 삭제하고, remove() 함수로 엘리먼트를 삭제하고, wrap() 함수를 사용하여 또 다른 엘리먼트로 엘리먼트를 래핑한다.

DOM을 트래버스 함으로써 jQuery 객체의 콘텐트를 변경할 때 여러 함수들을 사용할 수 있다. 엘리먼트의 siblings()parents(),children()을 사용할 수 있다. 또한, next() 또는 prev() sibling 엘리먼트도 선택할 수 있다. 아마도 가장 강력한 것은 find() 함수일 것이다. jQuery 셀렉터를 사용하여 jQuery 객체의 엘리먼트 종속 관계들을 통해 검색할 수 있다.

이 함수는 end() 함수와 사용될 때 더욱 강력해진다. 이 함수는 실행 취소 함수와 비슷하고, find() 또는 parents() 또는 다른 트래버싱 함수들을 호출하기 전에 가졌던 jQuery 객체로 돌아간다.

메소드 체인과 함께 사용되면, 복잡한 연산도 단순하게 보이게 할 수 있다. Listing 7은 로그인 폼을 찾고 이와 관련한 여러 엘리먼트를 조작하는 예제이다.


Listing 7. DOM의 트래버스와 조작 
                
$('form#login')
    // hide all the labels inside the form with the 'optional' class
    .find('label.optional').hide().end()

    // add a red border to any password fields in the form
    .find('input:password').css('border', '1px solid red').end()

    // add a submit handler to the form
    .submit(function(){
        return confirm('Are you sure you want to submit?');
    });

믿을 수 있는지 모르겠지만, 이 예제는, 공백을 사용한 하나의 연결된 코드 라인일 뿐이다. 우선, 로그인 폼을 선택했다. 그리고 나서, 이 안에 선택 레이블을 찾고, 이들을 숨긴 다음, end()를 호출하여 폼으로 돌아가게 하였다. 패스워드 필드를 찾았고, 보더를 빨간색으로 한 다음, 다시 end()를 호출하여 폼으로 돌아갔다. 마지막으로, 제출 이벤트 핸들러를 폼에 추가했다. 여기에서 특히 재미있는 부분은 jQuery가 모든 쿼리 연산들을 최적화 하기 때문에, 여러분은 모든 것이 서로 잘 연결될 때 엘리먼트를 두 번 찾을 필요가 없다.

공통 이벤트 핸들링은 click()submit()mouseover() 같은 함수를 호출하고 여기에 이벤트 핸들러 함수를 전달하는 것만큼 단순하다. 게다가, bind('eventname', function(){})을 사용하여 커스텀 이벤트 핸들러를 할당하는 옵션도 있다. unbind('eventname')를 사용하여 특정 이벤트를 제거하거나, unbind()를 사용하여 모든 이벤트를 제거할 수 있다. 이것과 기타 함수들을 사용하는 다른 방법들은, jQuery 애플리케이션 프로그램 인터페이스(API) 문서를 참조하라. (참고자료)

jQuery 셀렉터의 힘 활용하기

#myid 같은 아이디 또는 div.myclass 같은 클래스 이름으로 엘리먼트를 선택한다. 하지만, jQuery는 하나의 셀렉터에서 거의 모든 엘리먼트 조합을 선택할 수 있도록 하는 복잡하고도 완벽한 셀렉터 신택스를 갖고 있다.

jQuery의 셀렉터 신택스는 CSS3과 XPath에 기반하고 있다. CSS3과 XPath 신택스를 더욱 잘 안다면, jQuery 사용이 더욱 수월해진다. CSS와 XPath를 포함하여 jQuery 셀렉터의 전체 리스트를 보려면 참고자료 섹션을 참조하라.

CSS3에는 모든 브라우저가 지원하지 않는 신택스가 포함되어 있기 때문에, 이를 자주 볼 수 없다. 하지만, jQuery에서 CSS3을 사용하여 엘리먼트를 선택한다. jQuery는 고유의 커스텀 셀렉터 엔진을 갖고 있다. 예를 들어, 테이블의 모든 빈 컬럼 안에 대시(dash)를 추가하려면, :empty pseudo-selector를 사용한다.

$('td:empty').html('-');

특정 클래스를 갖고 있지 않은 모든 엘리먼트를 찾는다면? CSS3은 이를 위한 신택스도 있다. :not pseudo-selector를 사용하는 것이다. 다음은 required의 클래스를 갖고 있지 않은 모든 인풋을 숨기는 방법이다.

$('input:not(.required)').hide();

또한, CSS에서처럼 다중 셀렉터를 콤마를 사용하여 하나로 연결시킬 수 있다. 다음은 이 페이지에서 모든 리스트 유형들을 동시에 숨기는 예제이다.

$('ul, ol, dl').hide();

XPath는 하나의 문서에서 엘리먼트를 찾는 강력한 신택스이다. CSS와는 다르며, CSS로 수행할 수 없는 몇 가지 일을 수행할 수 있다. 보더를 모든 체크 박스의 부모 엘리먼트에 추가하려면, XPath의 /.. 신택스를 사용할 수 있다.

$("input:checkbox/..").css('border', '1px solid #777');

가독성 있는 테이블을 만들려면, 다른 클래스 이름을 테이블의 모든 짝수 또는 홀수 행에 붙인다. 이를 다른 말로 테이블의 스트라이핑(striping)이라고 한다. jQuery를 사용하면 :odd pseudo-selector 덕택에 쉽게 수행할 수 있다. 아래 예제는 테이블의 모든 홀수 행의 백그라운드를 striped 클래스를 사용하여 변경한다.

$('table.striped > tr:odd').css('background', '#999999');

jQuery 셀렉터로 코드를 어느 정도 단순화 할 수 있는지를 보았다. 어떤 엘리먼트를 선택하든지 간에, 하나의 jQuery 셀렉터를 사용하여 이를 정의하는 방법도 찾을 수 있다.

플러그인으로 jQuery 확장하기

대부분의 소프트웨어와는 달리, jQuery용 플러그인 작성은 복잡한 API를 사용해야 하는 힘든 일이 아니다. 사실, jQuery 플러그인은 작성하기가 쉬워서 몇 가지만 작성하면 코드를 더욱 단순하게 유지할 수 있다. 다음은 여러분이 작성할 수 있는 가장 기본적인 jQuery 플러그인이다.

$.fn.donothing = function(){
    return this;
};

단순하지만, 이 플러그인은 약간의 설명이 필요하다. 우선, 함수를 모든 jQuery 객체에 추가하려면, 여기에 $.fn을 할당하고, 이 함수는this (jQuery 객체)를 리턴하여 이것이 메소드 체인을 깨트리지 않도록 해야 한다.

이 예제를 기반으로 쉽게 구현할 수 있다. css('background')를 사용하는 대신 플러그인을 작성하여 백그라운드를 바꾸려면, 다음을 사용한다.

$.fn.background = function(bg){
    return this.css('background', bg);
};

css()에서 값을 리턴할 뿐이다. 이것은 이미 jQuery 객체를 리턴하기 때문이다. 따라서, 메소드 체인은 여전이 잘 작동한다.

여러분은 반복 작업이 있을 경우에 jQuery 플러그인을 사용하기 바란다. 예를 들어, 같은 일을 여러 번 수행하기 위해 each() 함수를 사용하고 있다면 플러그인을 사용해도 된다.

jQuery 플러그인을 작성이 쉽기 때문에, 여러분이 사용할 수 있는 것도 수백 가지나 존재한다. jQuery는 탭, 곡선형 코너, 슬라이드 쇼, 툴 팁, 날짜 셀렉터, 기타 여러분이 상상하고 있는 모든 것을 위한 플러그인이 있다. 플러그인 리스트는 참고자료 섹션을 참조하기 바란다.

가장 복잡하고 광범위하게 사용되는 플러그인은 Interface이다. 이것은 정렬, 드래그&드롭 기능, 복합 효과, 기타 복잡한 사용자 인터페이스(UI)를 핸들하는 애니메이션 플러그인이다. Interface가 jQuery를 위한 것이라면 Prototype에는 Scriptaculous가 있다.

또한 Form 플러그인도 대중적이고 유용하다. 이것으로 Ajax를 사용하여 백그라운드에서 폼을 쉽게 제출할 수 있다. 이 플러그인은 폼의 제출 이벤트를 하이재킹 하고, 다른 인풋 필드를 찾고, 이들을 사용하여 Ajax 호출을 구현하는 상황에 사용된다.

jQuery 이후의 삶

jQuery를 사용하여 할 수 있는 것의 표면적인 부분만 다루었다. jQuery는 기분 좋게 사용할 수 있고 새로운 트릭이나 기능도 자연스럽다. jQuery는 JavaScript와 Ajax 프로그래밍을 매우 단순화 시킬 수 있다. 새로운 것을 배울 때마다 코드는 더욱 단순해 진다.

jQuery를 배운 후에, 필자는 JavaScript 언어로 하는 프로그래밍에 재미를 발견했다. 지루한 부분은 알아서 처리되기 때문에, 필자는 중요한 코딩 부분에만 집중하면 된다. jQuery를 사용하게 되면서 지난날 for 루프를 작성하던 때는 거의 기억이 나지 않는다. 심지어, 다른 JavaScript 라이브러리를 사용할 생각도 거의 하지 않는다. jQuery는 JavaScript 프로그래밍 방식을 진정으로 바꿔 놓았다.


참고자료

교육

제품 및 기술 얻기

토론


Posted by 현수림

댓글을 달아 주세요

출처 : http://xguru.net/503

xGuru님이 올려주신 강의 모음 포스트.
역시 개발자는 다방면에서 활동해야하는구나 라는 걸 새삼 깨닫게 된다.

AJAX 가 웹 기술의 대세로 떠오르면서, Javascript 언어에 대해 새로운 접근들이 시도되고
다양한 AJAX 및 자바스크립트 라이브러리들이 출시되었습니다. 
많이 쓰이니까 쉽게 쓸 수 있도록 하는 방법들이 나오는 건 당연하겠죠.

Script.aculo.usPrototype.js , MooTools , jQueryYUI ( Yahoo UI Library ) 등등.. 

수 많은 Javascript 라이브러리중 최근의 대세는 jQuery – http://jquery.com/ 입니다.

Google Trends를 통해서 위의 Script 라이브러리들을 비교해보면 이렇습니다.

http://google.com/trends?q=jquery+%2C+script.aculo.us+%2C+prototype.js+%2C+yui+%2C+mootools&ctab=0&geo=all&date=all&sort=0 

자바스크립트 비교
그래프만 봐도 딱 보이시죠. 이렇게 jQuery 가 인기를 끌어가는데.. Microsoft 가 강펀치를 하나 날려줍니다.
위에 부분에 보면.. Microsoft 가 jQuery 를 Visual Studio 에 내장하겠다고 발표한게 보이실겁니다.
이제 ASP.NET 의 AJAX 프레임워크에서 jQuery 를 기본으로 내장하고 활용하게 되었습니다. – Microsoft to ship jQuery with Visual Studio 

또한 Nokia 역시, 그들이 만들고 있는 Web Kit 기반의 Web-Runtime에서 jQuery를 사용할 것이라고 발표하였습니다.
http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/

Javascript 와 jQuery 공부하기


이제 Javascript 를 이용한 AJAX개발은 모든 웹 기반 개발의 기본기술이 되었습니다. 모바일 환경에서도 사용되는건 물론이구요.
한번 Javascript, AJAX와 jQuery 를 익혀보지 않으시겠습니까 ? 
공부하시는데 도움이 될만한 강의 문서들을 링크해 드립니다.


Posted by 현수림

댓글을 달아 주세요

  1. Favicon of http://mosaic53.tistory.com BlogIcon 둥이내꺼 2010.12.31 09:42 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보감사합니다. 퍼가겠습니다.

 이 글은 번역한 것입니다. 원문은 여기에서 확인하실 수 있습니다. 겸손한 자바스크립트를 구현하기엔 jQuery가 가장 적절하고 바람직하다는 생각에 옮겨봅니다. 저도 Quark씨처럼 당장의 편리함을 따른 것보다 jQuery의 철학을 따르는 것이 더 바람직하다고 생각합니다. 항상 디커플링을 지향하는 것이 생산성 문제를 개선하고 미래에 적응하는 것을 가능케 하기 때문입니다.

 오역된 부분이 있을 지도 모르겠습니다.-_-;; 교과서 영어가 아니라-_-;; 나름대로 의역을 하긴 했는데 어렵네요.

----여기부터는 번역입니다.

 jQuery는 겸손한(unobtrusive) 자바스크립트를 위한 자바스크립트 라이브러리다. jQuery는 태생적으로 Behavior driven development 방법론을 지향하고 CSS 셀렉터를 사용하여 HTML 문서를 훓는 방법(traversing)을 방법에 기반한다. 반면에 Prototype은 태생적으로 Class driven development를 지향하고 쉽게 자바스크립트 개발할 수 있도록 해준다. Prototype 라이브러리는 Ruby on Rails에서 아주 잘 지원되고 많은 헬퍼 함수들을 가지고 있다.

 세달 전에 마음을 jQuery로 굳히기까지 나는 항상 Prototype 라이브러리를 사용해왔다. jQuery은 나를 매우 고무시겼다. 여기에 그 이유가 있다.

  1. BDD(Behavior driven development)
  jQuery를 사용하면 CSS로 HTML 엘리먼트의 스타일을 정의하는 것 처럼 HTML 엘리먼트의 행동들을 분리하여 정의할 수 있다. 클릭했을 때 경고창을 띄우는 예제를 보자.

?
1
2
3
$(element).click(function(){
  alert("warning");
});
  이제 복잡한 예제를 살펴보자. speciallinks 클래스들의 모든 엘리먼트에 다음과 같은 행위를 집어넣자.
    1. href를 "javascript:void(0);"로 변경하고
    2. 클릭시 로그를 남기고
    3. onhover시(mouse over시) 배경색을 변경한다.

?
1
2
3
4
$("div.speciallinks").attr("href","javascript:void(0)")
  .click(function() {console.log("div.speciallinks clicked");})
  .hover(function(){$(this).addClass("hovered");},
       function(){$(this).removeClass("hovered");});

  2. MVC + J
    MVC 프레임웍은 웹 개발 환경을 Model-View-Controller로 나누었다. MVC 프레임워크에서 뷰는 HTML, CSS, Javascript의 부분으로 나누어지고 GUI 개발은 이 세부분이 하나로 결합하여 완성된다. 게다가 Ruby on Rails에서의 Prototype 라이브러리는 HTML과 JavaScript도 함께 합쳐버린다(meshup). 뷰를 개발하면서 JavaScript를 분리하는 BDD 방법론을 따르려 한다면 jQuery가 매우 적절하다. 나는 Ajax에서 MVC + J가 매우 강력하다는 것을 깨닭았다.

    나는 JQuery를 사용하여 나의 HTML 파일을 매우 깨끗하게 만들었고 모든 JavaScript 코드를 .js에 넣음으로써 HTML 엘리먼트의 행위를 모두 .js 파일에 정의하였다.

  3. 액션 체인(Chaining of actions)
    액션 체인은 DRY 원칙을 따를 뿐만 아니라 JavaScript 코드의 가독성을 증가시킨다. 만약 엘리먼트에 오퍼레이션들을 삽입하려면 다음과 같이 할 수 있다. 

?
1
2
3
4
5
$("div.message").show()
  .append("<p>Action has been executed successfully")
  .addClass("flash");
// 각 함수는 라인으로 구분하여 사용한다.
</p>

    이 것은 jQuery의 모든 메소드가 query 객체를 반환하기 때문에 가능하다. 그리고 뒤따르는 메소드들이 선택된 HTML 엘리먼트에 체인 형식으로 적용된다. 

   4. CSS 셀렉터 문제(CSS Selector rocks)
      CSS 셀럭터 HTML DOM을 사용하기에 매우 강력한 도구이다. jQuery는 HTML 문서의 엘리먼트를 식별하기 위해 CSS 셀러터를 이용하고 이를 위해 HTML 태그의 id 속성을 관리해야 하는 지루한 작업을 회피하게 해준다. 대부분의 id 속성은 CSS 셀렉터를 올바르게 사용하여 회피할 수 있다. Prototype의 $$ 함수는 CSS 셀렉터를 지원하지만 CSS 셀렉터의 능력을 모두 이끌어내지 못한다. 나는 Prototype에서 id 속성을 사용하는 것이 최선이라는 것을 알게 됐다.

   5. 엘리먼트의 존재 유무를 검사할 필요가 없다.
     프로토타입으로 액션으로 적용하기 전에 항상 엘리먼트가 존재하는지 확인해야 했다. 예를 들어 나는 사용자가 로그인 했을 때만 사용자가 명시한 내용을 보여주고 싶었다. 사용자가 로그인 했다면 렌더링된 페이지에 div{id='user-box'}같은 엘리먼트가 있다는 것을 검사해야 했다. 프로토타입에서는 그렇게 해야 했다.

?
1
2
3
4
if ($('user-box')!=null) {
    // jQuery에서는 이 if 블럭이 필요없다.
    $("user-box").style.backgroundColor = "red";
}


   6. Aids development process
     jQuery를 사용하면 HTML 코드가 간결해지고 거의 건드릴 필요가 없다. 나의 웹 디자이너는 쉽게 html과 stylesheet를 수정할 수 있고 Prototype 라이브러리를 몰라도 된다.

예제들:
  여기에는 jQuery와 프로토타입의 차이점을 강조하는 몇 가지 예제가 있다(물론, 이 코드가 최상의 코드는 아니다).

Example1:
 이 Tab 예제는 tabs 클래스에 속하는 3 개의 tab이 있고 id는 각각 tabs1, tabs2, tabs3이다(ids=>["tabs1","tabs2","tabs3"]). 사용자가 "show first tab" 링크를 클릭했을 때 #tab1만 보여진다.

 jQuery의 경우

?
1
2
$("div.tabs").hide();
$("div#tabs1").show();


    
  Prototype의 경우

?
1
2
3
4
5
6
$$("div.tabs").invoke("hide");  // 이거
$$("div.tabs").each(function(x){
  Element.hide(x);
});
// 그리고 다음과 같은 코드로 마무리한다.
$("tabs1").show();


Example2:
엘리먼트의 CSS를 수정하는 예제

  jQuery의 경우

?
1
$("#user-box").css("background-color","red")


  Prototype의 경우    

?
1
2
var a = $("user-box");
a.style.cssText += "background-color:red;";

Remy Sharp의 발표자료에서 다른 예제들도 볼 수 있다. http://ajaxian.com/archives/prototype-and-jquery-a-code-comparison.

Prototype이 좋은 이유
  1. Ajax 요청에서 div의 내용이 부분적으로 변경돼야 할때 JavaScript 행위는  activated/reactivated돼야 한다. jQuery에서는 이를 위한 많은 코드를 만들지 않아도 된다. 하지만 나는 Ajax로 로드된 이 부분을 항상 마음속으로만 새겨야 한다. Prototype에서는 로드된 HTML 엘리먼트들에 관련된 JavaScript 코드가 포함된다. 
  2. Ruby on Rails의 Prototype 헬퍼들은 정말 대단하고 JavaScript와 Ajax를 만들때 많은 부분에서 매우 편리하다.
  3. Prototype은 자바스크립에서도 Ruby같은 문법을 사용할 수 있게 해준다. 개발을 쉽고 빠르게 할 수 있도록 배열, 객체 등의 기능을 변경해준다.
  4. jQuery에서는 JavaScrpt 파일이 모두 다운로드되고 DOM 생성된 후에만 엘리먼트의 행위를 사용할 수 있다. 연결이 느릴 때는 기다려야만 하기 때문에 매우 고통스럽다.

결론:
  jQuery와 Prototype은 둘 다 매우 굉장하다. 나는 더 적은 코드로 더 많은 일을 하면서 직관적이고 겸손하게 유지해야 한다는 jQuery의 철학이 큰 차이를 만든다고 생각한다. 그러나 나는 Prototype이 매우 그립다. jquery-rails가 통합되길 기다리고 있다. 결국 이 고지는 점령될 것이다. 나는 사람들이 이 변화를 감지하고 있다는 소식을 들을 때마다 기쁘다.

ps> 이 두 라이브러리를 함께 사용하려면 여기를 보라.
 

Posted by 현수림

댓글을 달아 주세요

출처 : http://www.thecssninja.com/javascript/gmail-dragout (@xguru 님께서 올려주신 트윗을 보고 알게됨)

자세한 내용은 출처 링크 참고 바람.

더보기


Posted by 현수림

댓글을 달아 주세요

출처 : http://www.mungchung.com/xe/lecture/4197

form의 element에 스크립트로 접근하는 방식들을 정리해보았다.
각 브라우저별로 테스트 했으니 참고 하면 된다.


IE : 익스플로러 7
SF : 사파리 3
FF : FireFox 3
Chrome : 크롬

1. form의 element에 name으로 접근
<input type="text" value="우후훗!" name="txt1">
접근 방법 실행 브라우저
document.form1.txt1.value IE, SF, FF, Chrome
document.getElementsByName('txt1')[0].value IE, SF, FF, Chrome
document.getElementsByTagName('input').item('txt1',0).value IE, SF, FF, Chrome
document.getElementById('txt1').value IE
document.form1.namedItem('txt1').value IE
document.form1.elements['txt1'].value IE, SF, FF, Chrome
2. form의 element에 ID로 접근
<input type="text" value="우후훗!" id="txt2">
접근 방법 실행 브라우저
document.form1.txt2.value IE, SF, FF, Chrome
document.getElementsByName('txt2')[0].value IE
document.getElementsByTagName('input').item('txt2',0).value IE, SF, FF, Chrome
document.getElementById('txt2').value IE, SF, FF, Chrome
document.form1.namedItem('txt2').value IE
document.form1.elements['txt2'].value IE, SF, FF, Chrome
3. form에 중복된 이름의 element가 있을 경우 접근 방법
<input type="text" value="우후훗 1" name="txt3"><input type="text" value="우후훗 2" name="txt3">
접근 방법 실행 브라우저
document.getElementsByName('txt3')[0].value
for (var i=0; i<document.getElementsByName('txt3').length; i++) {
    alert(document.getElementsByName('txt3')[i].value);
}
IE, SF, FF, Chrome
document.getElementsByTagName('input').item('txt3',0).value
for (var i=0; i<document.getElementsByTagName('input').item('txt3').length; i++) {
    alert(document.getElementsByTagName('input').item('txt3',i).value);
}
IE, SF, FF, Chrome

form의 element가 중복 될 수도 있고 아닐수도 있으면 위의 2가지 방법중 하나를 이용해서 스크립트 작성하는게 편하다.

위의 2가지 접근방법말고 다른 스크립트 코드들은 element가 하나면 일반 element 되고 2개 이상이면 배열이 되어버린다.

이러한 element 중복여부의 대표적인 예가 행추가/행삭제이다. 행이 하나면 element가 하나여서 일반 element가 되는데 행이 두개 이상이면 element가 배열이 되어 버린다. 이 경우 스크립트를 이용해서 접근하려고 하면 해당 element가 하나일 때와 2개 이상 일때 구분해서 처리해 줘야한다. if (typeof(document.form1.txt3.length) == "undefined") {<br /> alert(document.form1.txt3.value);<br /> } else {<br /> for (var i=0; i<document.form1.txt3.length; i++) {<br /> alert(document.form1.txt3[i].value);<br /> }<br /> }딱 봐도 엄청 귀찮은 작업이다. -_- 본인도 예전에는 저와같은 방식으로 이용했다 -_-

위의 방식으로의 또 다른 문제점은 form의 select 요소에 접근 할 때이다. 위의 코드에서는 배열여부를 document.form1.txt3.length 의 typeof 값이 undefined 인지 여부를 통해서 판단했는데 select의 경우에는 위의 구문대로 하면 option의 갯수를 가져와 버린다. 그래서 select 는 또 다른 방식으로 배열 여부를 구분해야한다.

그래서 얻은 결론은 행추가/행삭제 같은 element가 중복 될 수도 있고 안될 수도 있다면 위의 2 가지 방법으로 element에 접근하는 것이 편하다는 것이다


4. form의 element의 사용자 정의 속성 접근
<input type="text" myTag="우후훗!" name="txt4">
접근 방법 실행 브라우저
document.form1.txt4.myTag IE
document.getElementsByName('txt4')[0].myTag IE
document.getElementsByTagName('input').item('txt4',0).myTag IE
document.getElementById('txt4').myTag IE
document.form1.namedItem('txt4').myTag IE
document.form1.elements['txt4'].myTag IE
document.form1.txt4.getAttribute('myTag') 모두 안됨
document.getElementsByName('txt4')[0].getAttribute('myTag') IE, SF, FF, Chrome
document.getElementsByTagName('input').item('txt4',0).getAttribute('myTag') IE
document.getElementById('txt4').getAttribute('myTag') IE
document.form1.namedItem('txt4').getAttribute('myTag') IE
document.form1.elements['txt4'].getAttribute('myTag') IE, SF, FF, Chrome

Posted by 현수림

댓글을 달아 주세요

출처 : http://blueb.net/blog/696

약간 에러가 있던데 수정하면 잘 쓸 수 있을것 같다.
나중에 시간되면 수정해야지...


Posted by 현수림

댓글을 달아 주세요

출처 : http://signpen.net/blog/2510886

얼마 전 게시판을 하나 만들면서 댓글을 작성할때 자바스크립트라던가 HTML태그를 사용하지 못하게 하기 위해서 사용했던 정규식


content
= str.replaceAll("<(/)?([a-zA-Z]*)(\\s[a-zA-Z]*=[^>]*)?(\\s)*(/)?>", "");

태그를 없애버린다!! 사라져뢌!!!

내용인 즉.. 태그를 ""로 치환해 버리는것이다.


역시 이런 정규식은 많은 선배 개발자들이 깔끔한 형태로 만들어 놓으신게 많아서...

나는 그냥 긁어다 쓰면... 음훼훼훼~~

위의 정규식도 인터넷 어디선가 긁어온 것!!


날짜 포맷이라던가 간단한 형태를 판별해 내고 처리하는 정규식은 어떻게든 해 보겠는데.. 형태가 조금만 복잡해 지면.. 특수문자들 사이에서 내 정신을 놓아버리고 만다..ㅠㅠ

아무리 봐도.. 이 곳은 내 영역이 아닌것 같아..ㅠㅠS

Posted by 현수림

댓글을 달아 주세요

항상 내 입맛에 맞게끔 수정해서 쓰는 습관을 들이자.

<script type="text/javascript">

//아이디 입력시 한글, 특수문자 체크
function h_check(Objectname) {
 var intErr
 var strValue = Objectname
 var retCode = 0
 var re = /[~!@\#$%<>^&*\()\-=+_\']/gi; //특수문자 정규식 변수 선언
 
 for (i = 0; i < strValue.length; i++) {
  var retCode = strValue.charCodeAt(i)
  var retChar = strValue.substr(i,1).toUpperCase()
  retCode = parseInt(retCode)
  
  //입력받은 값중에 한글이 있으면 에러
  if ( (retChar < "0" || retChar > "9") && (retChar < "A" || retChar > "Z") && ((retCode > 255) || (retCode < 0)) ) {
   intErr = -1;
   break;
  //입력받은 값중에 특수문자가 있으면 에러
  } else if(re.test(strValue)) {
   intErr = -1;
   break;
  }
 }
 return (intErr);
}

</script>

Posted by 현수림

댓글을 달아 주세요

http://koxo.com/lang/js/index.html

찾아쓰기는 어려울듯 하다.
Posted by 현수림

댓글을 달아 주세요

출처 : http://shiinatsu.egloos.com/1293619
JavaScript에서 repalce를 사용해보자.
var value = 'aaabbb';
value = value.replace('a', 'b');
value의 값'baabbb'
이렇게 하면 맨처음 나오는 'a'만 'b'로 바꾸어 준다.

하지만 정규식을 이용하면, 모든 'a'를 'b'로 바꾸는 것도 가능하다.
var value = 'aaabbb';
value = value.repace(/a/gi, 'b');
value의 값'bbbbbb'
replace('바꿀문자', '바꿀문자를 대체할 문자');

정규식의 의미를 알아보자.
g - 발생할 모든 패턴에 대한 전역검색
i  - 대/소문자 구분 X
m- 여러줄 검색
위에선 문자만 바꿨지만, 문자열을 바꾸려고 한다면, 문자열을 입력하자.
var value = 'aaabbb';
value = value.repace(/ab/gi, 'cc');
value의 값'aaccbb'








Posted by 현수림

댓글을 달아 주세요



티스토리 툴바