줴이쿼리 북마크입니다~

모든 브라우저에서 동작하고, 안되는 브라우저에서는 메세지를 띄워주네요~

주소는
http://www.dummwiam.com/jFav
이고 사용법은

// 줴이쿼리로드
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>

// jFav 로드~
<script src="../libraries/jquery/plugins/jFav_v1.0.js"></script>
<script>
$(function() {
 $('.add-favorite').jFav();
});
</script>

// 이미지
<span class="add-favorite">북마크추가<span>


개인적으로는 북마크정도의 기능은 제이쿼리의 기본기능으로 들어가도 될것같네요 ㅎㅎ

프로그래밍에서 프레임워크는 필수적이라고 할 수 있다. 거의 모든 작업들이 비슷한 경우가 많아 같은 작업을 두번 세번 하게 되는경우가 많기 때문이다. 이를 모아놓은것을 라이브러리라 하는데 이런 코드에 방법론까지 더한것이 프레임워크이다.

ajax 개발을 하다보면 여기 자바스크립트 프레임워크의 필요성을 절실히 느끼게된다. 기존에 수많은 노가다와 오류를 감당할수 없기때문이다. 이에 Prototype 을 필두로 많은 프레임워크들이 존재한다.  다음 링크는 구글이 호스팅하는 ajax 프레임워크다. 플래시 오프젝트를 표현하기 위한 swfobject도 보인다.

http://code.google.com/intl/ko/apis/ajaxlibs/

조금 된 이야기지만 구글에서 그런 프레임워크들에 대해 호스팅 서비스를 시작했다. 필자도 애용하고 있지만 이를 이용할 경우 장점은 다음글에서 볼수 있다.

http://enzine.tistory.com/entry/Google-AJAX-라이브러리-API

여하튼 구글에서 제공하는 리스트들이 바로 자바 프레임워크 들이다. 2009년 2월 현재 구글에서 제공하는 리스트들을 살펴보면

• jQuery
• jQuery UI
• Prototype
• script.aculo.us
• MooTools
• Dojo
• SWFObject
• Yahoo! User Interface Library (YUI)

목차

1. id로 특정 요소 가져오기[1]
2. 폼 컨트롤러의 값을 가져오기[2]
3. 스타일 변경하기[3]
4. html 내용 변경하기[4]
5. Ajax Request의 파라미터 셋팅하기[5]
6. Ajax Request 생성하기[6]
7. Event 추가하기[7]
8. 각 요소별로 함수 실행하기[8]
9. 이벤트 핸들링[9]
10. 호출 체이닝[10]
11. 테이블 형태의 html 내용변경하기[11]
12. key 이벤트 감지하기[12]
13. 이벤트 가로채기[13]
14. insert() 메소드 제대로 사용하기[14]
15. form 다루기[15]

id로 특정 요소 가져오기[#1]

추천하는 방법

폼 컨트롤러의 값을 가져오기[#2]

추천하는 방법

스타일 변경하기[#3]

추천하는 방법

html 내용 변경하기[#4]

추천하는 방법

Ajax Request의 파라미터 셋팅하기[#5]

추천하는 방법

Ajax Request 생성하기[#6]

추천하는 방법

여기서 위 방법이 잘못된게 아니다. 하지만 사용된 값이 모두 디폴트 값이기 때문에 굳이 표기할 필요가 없다는 것이다.

Event 추가하기[#7]

추천하는 방법

뒤의 방법이 좀더 객체 지향적이고 다른 이벤트를 추가하기가 용이하다.

각 요소별로 함수 실행하기[#8]

추천하는 방법

같은 기능을 하기 위해 첫번째 방법처럼 지나치게 많은 함수를 사용할 필요가 없다.

이벤트 핸들링[#9]

추천하는 방법

호출 체이닝[#10]

추천하는 방법

위 두가지 모두 같은 기능을 실행하게 되지만 앞의 예제처럼 $$() 함수를 두번이나 호출해서 처리할 필요가 없다. 아래의 경우처럼 체이닝(chaining nirvana)를 사용하면 된다.

테이블 형태의 html 내용변경하기[#11]

추천하는 방법

위 두가지 모두 같은 기능을 실행하게 되지만 앞의 예제처럼 $$() 함수를 두번이나 호출해서 처리할 필요가 없다. 아래의 경우처럼 체이닝(chaining nirvana)를 사용하면 된다.

key 이벤트 감지하기[#12]

keyCode는 KEY_RETURN, KEY_ESC, KEY_TAB, KEY_LEFT, KEY_UP, KEY_RIGHT, KEY_DOWN 과 같은 값들이 있다.

이벤트 가로채기[#13]

간단한 방법

insert() 메소드 제대로 사용하기[#14]

위치값은 top, bottom, before, after 를 사용할수 있다. 이 값을 생략한다면 디폴트는 bottom이다.

form 다루기[#15]

.getInputs 는 type과 name속성에 기초하여 요소를 필터링하기 쉬도록 해준다. 여기서는 "email" 이라는 이름의 요소를 직렬화하고 폼의 "action" 이라는 속성내 포함된 URI에 결과를 서브밋한다.

앞서 본 .getInputs가 대부분의 경우 유용하지만 일부 속성을 제외하고자 할때는 .reject를 사용한다.

 The right way:
  $('foo')

 Surprisingly some people actually don't know about this one ( including ~100KB file just to use Ajax.Request family )

2
 The wrong way:
  var woot = document.getElementById('bar').value
  var woot = $('bar').value
 The right way:
  var woot = $F('bar')
 
 Handy shortcut for reading a value of a form control

3
 The wrong way:
  $('footer').style.height = '100px';
  $('footer').style.background = '#ffc';

 The right way:
  $('footer').setStyle({
   height: '100px',
   background: '#ffc'
  })

Dreaming about IE behaving W3C way?
Not happenning! (but second construct will make you forget about cross-browser glitches)

4
 The wrong way:
  $('coolestWidgetEver').innerHTML = 'some nifty content'

 The right way:
  $('coolestWidgetEver').update('some nifty content')

One of those simple ones yet quite often forgotten.
Yes, I know they are almost the same
but I want to see you doing THIS with the first one
(isn't chaining just cool?)

 $('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()

5
 The wrong way:
  new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')

 The right way:
  new Ajax.Request('ninja.php', {
   parameters: {
    weapon1: 'foo',
    weapon2: 'bar'
   }
  })

 Cleaner and better structured parameters definition

6
 The wrong way:
  new Ajax.Request('blah.php', {
   method: 'POST',
   asynchronous: true,
   contentType: 'application/x-www-form-urlencoded',
   encoding: 'UTF-8',
  })

 The right way:

 new Ajax.Request('blah.php')

 All of these options are in Ajax.Request by default!
 "method: 'POST'" happens to be on every second pastie page I've seen
 (Still don't believe in JS inheritance? You don't have to. Just take advantage of it)

7
 The wrong way:
  Event.observe('myContainer', 'click', doSomeMagic)

 The right way:
  $('myContainer').observe('click', doSomeMagic)
  This one is debatable
  but second way is more Object Oriented (well... sort of)
  and easier to chain (So decide for yourself)

8
 The wrong way:
  $$('div.hidden').each(function(el){
   el.show();
  })

 The right way:
  $$('div.hidden').invoke('show')

 Here's a typical "each overuse". We have invoke for such things, folks! Sadly not many people know about it.

9
 The wrong way:
  $$('div.collapsed').each(function(el){
   el.observe('click', expand);
  })

 The right way:
  $$('div.collapsed').invoke('observe', 'click', expand)

 Ha! Take this!
 Invoke can also be used for event handling when iterating over a collection of elements.
 It's really easy, isn't it?

10
 The wrong way:
  $$('input.date').invoke('observe', 'focus', onFocus);
  $$('input.date').invoke('observe', 'blur', onBlur);

 The right way:

  $$('input.date')
   .invoke('observe', 'focus', onFocus)
    .invoke('observe', 'blur', onBlur)

 Somehow people tend to forget about "chaining nirvana".
 Don't like the way it looks? Think about saving some time by NOT invoking $$ twice!

11
 The wrong way:

 $('productTable').innerHTML =
  $('productTable').innerHTML +
  '<tr><td>' + productId + ' '
  + productName + '</td></tr><tr><td>'
  + productId + ' ' + productPrice +
  '</td></tr>'

 The right way:

 var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
 $('productTable').insert(
  rowTemplate.evaluate({
   id: productId,
   name: productName,
   price: productPrice
  }))
 )