자바스크립트 변수 type검사

일반적으로 typeof를 쓴다.(별로 쓸일이 없더만 난.)

 

하지만 정확히 하자면

 

<script type="text/javascript">

alert(Object.prototype.toString.call([]));
alert(Object.prototype.toString.call({}));
alert(Object.prototype.toString.call(''));
alert(Object.prototype.toString.call(0));
alert(Object.prototype.toString.call());

</script>

 

파라미터에 아무것도 안넣으면 window로 나온다.

 

오늘은 여기까지.ㅎ

 

난 왜이렇게 색감이 없지?ㅡㅡㅋ

var 안쓰니까 오류남.

FF에서는 var를 안써도 오류 안나는디...

IE7에서는 안쓰니까 오류나네..

 

var leftmenu = function(main_id) {
    alert(main_id);
}

jQuery로 Ajax 개발을 단순화 하기

Ajax와 DOM 스크립팅을 쉽게 하는 방법

 난이도 : 중급 Jesse Skinner, Web Developer, Freelance 2007 년 9 월 04 일 jQuery는 JavaScript 라이브러리로서 JavaScript™와 Asynchronous JavaScript + XML (Ajax) 프로그래밍을 단순화 하는데 도움이 됩니다. JavaScript 라이브러리와는 달리, jQuery는 복잡한 코드를 간결하게 표현할 수 있는 독특한 철학이 있습니다. jQuery 원리, 기능과 특징을 배우고, 일반적인 Ajax 태스크도 수행하며, 플러그인으로 jQuery를 확장하는 방법도 알아봅니다. 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() 함수가 필요하다. xml, html, script, json을 지정할 수 있고, 여러분이 바로 사용할 수 있도록 jQuery가 자동으로 콜백 함수에 대한 결과를 준비한다. 또한, beforeSend, error, success, complete 콜백을 지정하여 사용자에게 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 프로그래밍 방식을 진정으로 바꿔 놓았다. 참고자료 교육 한국 developerWorks XML 존: 한국 developerWorks XML 존에서 XML 관련 자료를 더 볼 수 있다. jQuery API 문서 jQuery 튜토리얼 Visual jQuery: jQuery API 레퍼런스. IBM XML 인증: XML 분야의 IBM 인증 개발자에 도전하십시오. XML 기술 자료: 한국 developerWorks XML 존에서 다양한 기술 자료, 팁, 튜토리얼, 표준, IBM Redbook 참고하기. 제품 및 기술 얻기 jQuery: jQuery 메인 사이트를 방문해 소프코드 다운로드 하기. Selectors: CSS3과 XPath 셀렉터를 포함하여 jQuery에 사용되는 모든 셀렉터들. jQuery 플러그인 Interface Form 플러그인 토론 jQuery 블로그: : 공식 jQuery 블로그에서 정규 뉴스와 업데이트 확인하기. XML 존 토론 포럼 필자소개 Jesse Skinner는 JavaScript와 CSS 전문 프리랜스 웹 개발자이다. 캐나다와 독일이 주 활동 무대이며, CSS 브라우저 호환성 미스터리를 풀고 있다. Jesse에 대해 더욱 알고 싶거나 웹 개발에 대한 글을 더 읽고 싶다면, 블로그 The Future of the Web를 방문해 보라.

 

 

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

내가 prototype에서 jQuery로 옮긴이유.

이 글은 번역한 것입니다. 원문은 여기에서 확인하실 수 있습니다. 겸손한 자바스크립트를 구현하기엔 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 엘리먼트의 행동들을 분리하여 정의할 수 있다. 클릭했을 때 경고창을 띄우는 예제를 보자.

$(element).click(function(){
  alert("warning");
});

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

$("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 코드의 가독성을 증가시킨다. 만약 엘리먼트에 오퍼레이션들을 삽입하려면 다음과 같이 할 수 있다.

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

    이 것은 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'}같은 엘리먼트가 있다는 것을 검사해야 했다. 프로토타입에서는 그렇게 해야 했다.

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의 경우

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

    
  Prototype의 경우

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

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

  jQuery의 경우

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

  Prototype의 경우    

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> 이 두 라이브러리를 함께 사용하려면 여기를 보라.

 

스크랩출처 : http://dogfeet.tistory.com/29

 

 

jQuery 공부중 v.1

※ 주의!!

개인적인 공부를 위해 정리를 해놓은것이므로  다른분들도 충분히 테스트 후에 사용

하세요~잘못된 내용에 대한 가르침은 환영입니다~

 

 

 

 

1. html()

$("div").html("<b>Wow!</b> Such excitement...");

이거하믄 IE7에서는 "Wow!" 밖에 안나온다.(IE6도 그러네 ㅎ)

FF3에서는 다 나온다.

span이라도 붙여줘야하나?ㅡㅡㅋ

 

2. text()

<script>
  $(document).ready(function(){
   
    var str = $("p:first").text();
    $("p:last").html(str);

  });
  </script>
  <style>
  p { color:blue; margin:8px; }
  b { color:red; }
  </style>
  <p><b>Test</b> Paragraph.</p>
  <p></p>

 

html tag없이 단순 텍스트만 받는군...

 

3. append(content)

$("p").append("hello");

p 엘리먼트에 추가

 

4. appendTo(content)

$("p").appendTo("#ok");

id가 "ok"인 엘리먼트에 "p"의 내용을 더한다.

파라미터는 말이 content이지 실제로는 target인듯...

 

5. prepend(content), prependTo(content)

append, appendTo와 같은방식이지만...content가 맨앞에 붙음.

 

※ 기이한 현상(?)

$("p").append("<b>Hello </b>");
$("span").appendTo("#ok");
$("p").prepend("<b>Hello </b>");
$("span").prependTo("#ok")

 

--> append,prepend는 타겟엘리먼트가 같아도 그냥 앞,뒤로 붙는다.

--> 그러나 appendTo,prependTo는 마지막코드만 수행한다.

--> 왜그러지? 초기화시키는 코드가 들어있나?ㅡㅡㅋ

--> ㅡㅡㅋ 그 복잡한 코드를 봐야하나?

 

 

6. after,before는 append,prepend랑 비슷하게 쓰는듯...

7. insertAfter, insertBefore는 각각 before, after과 동일하다.

    즉, insertAfter는 after의 반대, insertBefore는 before의 반대.

 

8. wrap,wrapall은 말그대로 감싸는것. wrapInner도 말그대로 타겟엘리먼트의 안쪽을 감

    싸는것.

 

9. replaceWith(content)

$("p").replaceWith("<b>Paragraph. </b>");

타겟엘리먼트(여기선 p태그들...)를

content(<b>Paragraph. </b>)로 바꾼다.

replaceAll(selector)는 replaceWith의 다른형태.

-> $("<b>Paragraph. </b>").replaceAll("p");

 

10. empty() 와 remove()의 차이를 모르겠다. 둘다 똑같은듯...ㅡㅡㅋ

 

11. clone()

      엘리먼트 복사

     clone(true)

      해당 엘리먼트의 이벤트까지 복사를 해버린다.

 

 

참고사이트 : http://docs.jquery.com/Manipulation