[하코사세미나] 한 시간 만에 배우는 Jquery

9.416 Aufrufe

Veröffentlicht am

퍼블리셔의 시각으로 쉽게 배우는 JQuery

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

[하코사세미나] 한 시간 만에 배우는 Jquery

  1. 1. 한 시간 만에 배우는 Jquery 퍼블리셔의 시각으로 쉽게 배우자! 하드코딩하는사람들 빼로
  2. 2. Jquery란?
  3. 3. 많은 퍼블리셔가 힘들어해요… UI개발이 너무 어려워서… 대충 요런 기분?
  4. 4. UI개발이 어려운 이유 개발자가 아닌 사람에게 개발을 하라 한다… 책을 봐도 당최 모르겠어…
  5. 5. 하지만 희망은 있다! 우리에겐 빼로Jquery가 있으니까
  6. 6. 발표의 대상 CSS는 익숙하지만, Jquery가 어려운 사람 퍼블리셔의 시각이 형성된 사람 2~3년차!
  7. 7. 퍼블리셔의 시각이란? CSS적 사고 Selector Style
  8. 8. CSS적 사고의 핵심 선택한 대상을 변화시킨다 Selector Style
  9. 9. UI개발의 핵심과 Jquery 선택한 대상이 특정 상황일 때 변화시킨다 Event $(Selector) .css() .addClass() .removeClass()
  10. 10. 무슨 일이 발생하는가? 사용자 이벤트 • Click • Mousedown • Mouseup • Keydown • Keyup • Keypress • Focus • …… 브라우저 이벤트 • Load • Unload • Resize • Scroll • ……
  11. 11. 하지만… 이런 사전적인 내용이 중요한 것이 아니다!
  12. 12. 결론 Jquery를 잘 하려면 CSS적 사고에 익숙해야 한다!
  13. 13. 감사합니다
  14. 14. 그럼 이제 시작해볼까요!?
  15. 15. 목차 기초 : CSS적 사고하기 1. Class 기반 사고하기 2. Selector 기반 사고하기 심화 : 기초에 기술 더하기 1. DOM 조작하기 2. 모듈화의 첫 걸음
  16. 16. 1. 기초 : Class 기반 사고하기
  17. 17. Class기반 사고란? 이벤트 처리를 할 때 대상에 Class를 추가하거나 없애는 것으로 모든 효과를 처리할 수 있도록 CSS를 설계하는 사고방법
  18. 18. Class기반 사고를 해야 하는 이유 대부분의 UI개발은 사용자의 의도에 따른 화면의 변화를 의미 화면의 변화는 80%이상 CSS로 처리가 가능 대규모 화면일수록 작업의 효율과 모듈화를 위해 수준 높은 CSS설계가 필수
  19. 19. Style관련 Jquery 기능 .CSS() .addClass() .removeClass() Style=“” 형태로 적용됨 .css(‘background’, ‘#fff’); .css({ background : ‘#fff’, marginTop: ’10px’ }); Class=“” 형태로 적용됨 두 가지 방법으로 적용 가능!
  20. 20. 이벤트에 따른 Class 추가 $(‘#button’).click(function() { $(this).addClass(‘active’); }); 기본 $(‘#button’).click(function() { if($(this).hasClass(‘active’)) { $(this).removeClass(‘active’); } else { $(this).addClass(‘active’); } }); 토글 예제보기2예제보기1
  21. 21. 다른 대상에 영향주기 $('#button').click(function() { if($('body').hasClass('dark')) { $('body').removeClass('dark'); } else { $('body').addClass('dark'); } }); 토글 실제사례예제보기
  22. 22. 2. 기초 : 셀렉터 기반 사고하기
  23. 23. Selector기반 사고란? 이벤트에 따른 Class&상태 변화가 있을 때 그에 대한 조건을 일일이 확인하지 않고 Selector에서 선처리 할 수 있도록 설계하는 사고방법
  24. 24. Class를 이용한 UI예제 $('#list>li').click(function() { if($(this).hasClass('select')) { $(this).removeClass('select'); } else { $(this).addClass('select'); } }); li태그 선택 예제보기 $('#delete').click(function() { $('#list>li.select').remove(); }); li태그 선택
  25. 25. Form요소를 이용한 UI예제 $('#delete').click(function() { $('#list input:checked').closest('li').remove(); }); li태그 선택 예제보기 parent()는 리뉴얼 하면서 DOM이 끊길 수 있고 parents()는 복수로 적용될 수 있기 때문에 반드시 closest()를 사용
  26. 26. 1. 심화 : DOM 조작하기
  27. 27. DOM생성 파워레인져! .before() .prepend() .after() .append() .html()
  28. 28. 한 방에 이해하는 DOM생성 …</div> <ul id=“list”> <li>빼로</li> <li>재선</li> <li>낙구</li> <li>수호</li> </ul> <div> … $('#list').before(); $('#list').after(); $('#list').prepend(); $('#list').append(); 선택자의 바깥 $('#list').html(); 선택자의 내부
  29. 29. DOM 생성 예제 $('#add').click(function() { var content = $('#field').val(); if(!content) { alert('내용을 입력하세요.'); return false; } $('#list').append('<li>'+content+'</li>'); }); input태그를 이용한 필드추가 예제보기
  30. 30. 하지만… 새로 생성한 태그는 이벤트가 없다… 어째서…
  31. 31. bind의 한계 이벤트를 바인딩 하는 시점에 없는 태그는 적용되지 않는다. 참고로 위의 내용은 파이어폭스 개발자도구
  32. 32. live를 사용하면 된다! $('#list>li').click(function() { …… }); bind $(document).on('click', '#list>li', function() { …… }); live 한 번만 선언하면 계속 적용된다. 실수로 여러 번 선언했을 경우 여러 번 동작한다. 초기 로딩될 때 한 번만 사용하자. 예제보기
  33. 33. 2. 심화 : 모듈화의 첫 걸음
  34. 34. 개발의 진화과정 어떻게든 만든다 한 페이지에서 한 번만 작동 어찌어찌 해서 두 번 작동하게 만든다 다른 페이지에서 쓰려니 소스를 통으로 복사한다 공통으로 사용할 수 있게 모듈화를 했다 조금 더 다듬어서 라이브러리나 플러그인으로 배포!!!
  35. 35. 모듈화의 첫 걸음 1. ID 이외의 Selector기반으로 작성 2. Selector가 일정 범위를 벗어나지 않음 3. 자주 쓸 경우 자동 바인딩, 가끔 사용할 경우 실행형으로 작성
  36. 36. ID 이외의 Selector 기반으로 작성 <div class="dropdown-set"> <button type="button" data-toggle="dropdown">세미나 신청</button> <ul class="dropdown-menu"> <li><a href="#">빼로</a></li> <li><a href="#">재선</a></li> <li><a href="#">낙구</a></li> <li><a href="#">수호</a></li> </ul> </div>
  37. 37. Selector가 일정 범위를 벗어나지 않음 $('button[data-toggle="dropdown"]').click(function() { if($(this).hasClass('active')) { $(this).closest('.dropdown-set').find('.dropdown-menu').removeClass('active'); } else { $(this).closest('.dropdown-set').find('.dropdown-menu').addClass('active'); } }); 이벤트가 일어났을 때 이벤트 주체(this)에서 .closest()로 selector의 범위를 한정하고 DOM을 탐색
  38. 38. 가끔 사용할 경우 실행형으로 작성 function initDropdown() { $('button[data-toggle="dropdown"]').click(function() { if($(this).hasClass('active')) { $(this).closest('.dropdown-set').find('.dropdown-menu').removeClass('active'); } else { $(this).closest('.dropdown-set').find('.dropdown-menu').addClass('active'); } }); } 아래 함수를 공통모듈 js파일에 넣고 필요할 때 호출 예제보기
  39. 39. 이제 옵션도 설정하고 다시 잘 다듬어서 제이쿼리 플러그인으로 배포해야지!
  40. 40. 하지만 그 내용을 담으면 이번 발표를 듣는 우리는… 대충 요런 기분?
  41. 41. 이 발표가 끝났을 때 딱 하나만 기억에 남았으면 좋겠어요…
  42. 42. 결국 UI개발은 이벤트가 발생했을 때 CSS나 HTML을 조작하는 것이 전부라는 것을…
  43. 43. 그리고 그 작업의 도우미가 바로 Jquery입니다.
  44. 44. 감사합니다

×