Web Designer No Tame No jquery by Takeshi Takatsudo Copyright c Seiichiro Inoue, Takuro Tsuchie, Shota Hamabe All rights reserved. Original Japanese edition published by Gijyutsu-Hyoron Co., Ltd., Tokyo This Korean language edition published by arrangement with Gijutsu-Hyoron Co., Ltd., Toyko in care of Tuttle-Mori Agency, Inc., Tokyo through Danny Hong Agency, Seoul. Korean translation rights c 2012 by J-Pub 이책의한국어판저작권은터틀모리에이전시와대니홍에이전시를통한저작권사와의독점계약으로제이펍에있습니다. 신저작권법에의하여한국내에서보호를받는저작물이므로무단전제와복제를금합니다. 초판 1 쇄발행 2012 년 7 월 23 일 지은이다카쯔도다케시옮긴이정인식 펴낸이장성두 책임편집안주연 본문디자인북아이 표지디자인미디어픽스 주소경기도파주시문발동파주출판도시 530-1 뮤즈빌딩 403호전화 070-8201-9010 팩스 02-6280-0405 홈페이지 www.jpub.kr 펴낸곳제이펍 출판신고 2009 년 11 월 10 일제 406-2009-000087 호 용지신승지류유통 인쇄한승인쇄 제본동호문화 ISBN 978-89-94506-47-2 (13560) 값 25,000 원 이책은저작권법에따라보호를받는저작물이므로무단전재와무단복제를금지하며, 이책내용의전부또는일부를이용하려면반드시저작권자와제이펍의서면동의를받아야합니다. 잘못된책은구입하신서점에서바꾸어드립니다. 제이펍은독자여러분의책에관한아이디어와원고투고를기다리고있습니다. 책으로펴내고자하는아이디어나원고가있으신분께서는책에대한간단한개요와차례, 구성과저 ( 역 ) 자약력등을메일로보내주세요. ( 보내실곳 : jeipub@gmail.com)
차례 Chapter 2 무언가를가져오기 ( 기본그첫번째 ) 23 차례 2.1 무언가를가져오기 기능 24 Chapter 1 1.1 jquery 의대략적인개념 2 무언가를가져오기 그것에무언가를하기 2 $ 와 jquery 객체 4 jquery의다운로드 10 1.2 jquery 를사용하기위한준비 10 jquery 의버전에대해서 _ 11 추천사 Ⅵ 머리말 Ⅷ 샘플파일에대하여 ⅩⅤ 이책을읽는방법 ⅩⅥ jquery 를시작해보자 1 2.2 셀렉터 25 어려운셀렉터는나중에 26 ID 셀렉터 -------- #idvalue 27 클래스셀렉터 --------.classname 30 타입셀렉터 -------- element 32 조합해보기 34 자손셀렉터 -------- ancestor descendant 36 보다고기능의셀렉터 39 요소의조상ㆍ자손ㆍ형제관계 _ 39 변수에보관하기 41 2.3 가져온것에서좀더검색하기 41 jquery와변수조합시키기 45 내포된요소안에서좀더검색하기 -------- find 48 보다수준높은 가져온것에서좀더검색하기 기능 51 페이지의로딩완료기다리기 12 코드의외부파일화 15 $(document).ready(function(){}) _ 14 Chapter 3 그것에무언가를하기 ( 기본그두번째 ) 53 body 를닫기전에실행 _ 15 이책에서사용하는기본파일세트 17 Firebug 17 Google Chrome Developer Tools _ 21 3.1 그것에무언가를하기 기능 54 3.2 메소드 55 CSS 57 IV V
차례 3.3 스타일변경하기 57 CSS3 의 opacity _ 59 show/hide 60 애니메이션도가능한 show/hide _ 62 width/height 62 정리 64 fadein/fadeout 66 3.4 애니메이션시키기 66 slidedown/slideup 69 animate 72 정리 75 하이픈을포함한 CSS의프로퍼티 _ 75 JavaScript로할수있는애니메이션 _ 76 text/html 77 3.5 내용이나속성변경하기 77 XSS( 크로스사이트스크립팅 ) _ 79 empty 80 변경된 HTML 의확인방법 _ 82 attr 82 val 84 addclass/removeclass 87 정리 92 append/appendto 93 3.6 움직이기 지우기 만들기 93 append/appendto 를외우는법 _ 97 요소를새롭게만들기 99 문자열과개행코드 _ 102 appendto( 셀렉터 ) _ 102 remove 103 정리 104 타로의면접 105 3.7 이벤트설정하기 105 click -------- 클릭되었을때 107 mouserenter/mouseleave -------- 마우스포인터가위에있을때 / 벗어났을때 109 hover -------- mouserenter와 mouseleave를한꺼번에 111 mouseover/mouseout _ 111 focus/blur -------- 포커스를얻었을때 / 벗어났을때 113 동일요소를두번가져오지않도록하기 115 이벤트와 this 117 $(DOM 요소 ) 123 this 는읽기전용의변수 _ 128 정리 128 each 129 3.8 각각에대하여처리하기 129 값이나내용세트하기 / 취득하기 131 간결하게쓰기 _ 131 3.9 정리 134 prepend/prependto _ 98 VI VII
차례 Chapter 4 무언가를만들어보기 139 4.1 실용성이높은것을만들어보자 140 대략적인구조 141 4.2 롤오버 141 기본형 142 Firebug 로이미지의로딩확인하기 _ 147 발전형 148 정규표현에대하여자세히알고싶은사람에게 _ 152 대략적인구조 154 4.3 텍스트입력필드의가이드텍스트 154 기본형 156 처리의과정을조립한다는것 _ 164 발전형 165 placeholder 속성 _ 168 대략적인구조 169 4.4 아코디언 169 기본형 172 발전형 179 완전히 JavaScript에의존하는웹페이지의경우 _ 179 jquery 메소드와함수 _ 186 대략적인구조 187 여기서만들예제 _ 187 4.5 외부파일에서테이블만들기 187 기본형 188 콤마지우는것을잊어버림 _ 196 지금까지의 each 에서도루프카운터를사용한다 _ 200 발전형 201 RSS 리더 _ 203 외부데이터파일을사용할기회 _ 206 여기서만들예제 _ 207 4.6 슬라이드쇼 207 대략적인구조 208 기본형 208 appendto 로 img 요소를이동 _ 212 발전형 214 타이머라고불리는것, 실은타이머 ID 다 _ 218 대략적인구조 219 여기서만들예제 _ 219 4.7 탭콘텐츠 219 기본형 220 발전형 228 메소드체인은왜동작하는가? _ 234 find와메소드체인 _ 235 4.8 툴팁 236 대략적인구조 236 기본형 238 발전형 244 4.9 정리 252 VIII IX
Chapter 5 플러그인으로정리하기 253 추천사 5.1 플러그인이란? 254 5.2 플러그인을사용해보자 256 플러그인이있다면자신이직접작성하지않아도되는지? _ 259 jquery UI _ 259 5.3 플러그인을작성해보자 260 플러그인형식과실행방법 261 옵션 262 $.extend 264 자신이직접작성할것인가, 플러그인을사용할것인가? _ 266 에필로그 270 찾아보기 273 요즈음코더 (Coder) 및마크업 (Markup) 엔지니어라고불리는사람들의대부분은 JavaScript를배워야한다고초초해하고있을지도모르겠다. HTML5가보급됨에따라 JavaScript의필요성은점차증가하고있으며, HTML5 의일부사양은 JavaScript를사용하지않으면아무것도할수없는요소등도포함하고있다. 다만독자여러분이너무나도초조해한나머지 일단 Copy & Past할수있는샘플코드가없나? 라고생각해서혹여이책을손을넣었다면, 얼른책장에돌려놓고다른책을찾는편이좋을것같다. 만일독자여러분이프로그램경험이없더라도다른사람의샘플코드로부터의 Copy & Paste에의존하지않고 jquery나 JavaScript를배워언젠가는자력으로자신의생각대로동작하는코드를만들고싶은생각이라면, 이책보다좋은책은없을것이다. 저자인다카쓰도는원래 HTML과 CSS를중심으로대규모사이트를대응할수있는시스템설계등을하고있었다. 그또한예전부터 JavaScript를잘했던것은아니다. 그는 JavaScript를배우는데상당한시간을소비하였다. 그도그럴것이, 이런식으로작성하면이렇게된다라는책은많이있다. 그러나그것이왜그렇게되는지에대한것까지설명해주고있는책은적기때문이다. 그래서제대로공부하기위해비슷한종류의책을몇권이고읽고, 또한사양을다루고있는블로그를여러개읽어책에적혀있지않는 어째서그렇게되는가? 라는부분을이해한후, 아 ~ 첫번째책에적혀있는것은이런뜻이었구나? 하고마침내납득했던경험을몇번이고했을거라생각한다. 이책은그러했던저자가 어째서그렇게되는가? 는물론초심자가확실히 jquery 나 JavaScript를이해할수있는책을쓰고싶다라는마음으로실무에서얻은노하우나지식을포함하여차분히시간과공을들여쓴책이다. X XI
옮긴이머리말 이책은 jquery와 JavaScript 중에서도 HTML을조작하는것을특화하여, 정말로필요한기능을엄선한후정성들여설명하고있다. jquery나 JavaScript를처음으로다루는코더, 마크업엔지니어, 그리고 jquery를조금해보았으나아직도이해를잘할수없어알듯말듯한사람들의실력향상에도폭넓게도움이될내용을다루고있다. 이러한훌륭한해설서가필요로하는많은분들에게잘활용되어지식의향상은물론 JavaScript에대한흥미로이어질수있기를마음속으로부터염원해본다. 나카무라쿄스케 SNS와클라우드서비스등유무선인터넷환경의괄목할만한성장은우리들의일상생활패턴에도많은변화를가져오고있다. 바야흐로각기다른다양한통신단말들을통해시간과공간의제약을넘어서유용한정보를서로공유하고이용할수있는세상이된것이다. 특히과거에는일부몇몇계층의전유물이었던 IT 서비스가이제는남녀노소를불문하고일상생활에널리사용되고있는것을보면참으로놀랍기까지하다. 실례로, 가끔지하철안에서어린이나혹은연세가지긋한어르신들이모바일단말을통해트위터와페이스북등의최신애플리케이션을자유자재로다루는모습을자주접하곤하는데, 이를볼때마다사용자의편의성을고려한고급스런유저인터페이스와다양한 IT 기술이애플리케이션안에녹아있음을깨닫게된다. 나름 IT 업계에종사하는엔지니어로서이에대한호기심이생겨 과연이러한기능은어떻게만들었을까? 라는의문이머릿속에서떠나지않는다. 최근들어웹서비스분야에서는 JavaScript의사용비중이높아지고있다. 비단클라이언트뿐만아니라서버쪽에서도 node.js 등의 JavaScript 기술이사용되고있을정도니말이다. 특히이책에서다루고있는 jquery 라이브러리는 JavaScript 분야에서단연독보적인시장점유율을자랑하고있다. 실제로우리들이자주사용하는유명웹사이트를조사해보면바로알겠지만, jquery 라이브러리가대부분의웹사이트에서사용되고있음을발견하게된다. 이책은이렇듯최근 IT 업계에서널리사용되고있는 jquery 라이브러리의입문서다. 이책의원제는 웹디자이너를위한 jquery 입문 으로, 그제목처럼프로그래밍에대해그다지잘알지못하는사람들도쉽게이해할수있도록쓰여있다. 이책은개념이해를위한기본적인지식부터 jquery 플러그인제작이라는심도깊은기술에이르기까지상세히다루고있으며, 실제응용가능한사례로서롤오버, 툴팁, 슬라이드쇼, 아코디언및탭콘텐츠등다양한콘텐츠의제작과정을소개하고있다. 또한보다확실한이해를돕기위해서여러가지다양한일러스트를제공하고있다. XII XIII
머리말 저자의바람처럼이책을통해여러분들이 jquery를사용하여자신이직접코드를생각해서작성할수있길진심으로바란다. 새로운또한권의책을번역하게해주신하나님께감사를드린다. 그리고언제나그렇지만한권의책을만들기위해진심으로수고해주신여러분께도이자리를빌려감사의말씀을드리고싶다. 번역의기회와교정등여러작업에아낌없는지원을해주신제이펍출판사의장성두실장님, 어려운편집을맡았음에도정성스럽게작업해주신김수미님께고마움을전하고싶다. 또한마지막까지원고를세심하게정독해교정에커다란도움을준사랑하는아내에게특별히감사함을표하고싶다 ( 나의아내는웹디자이너출신이다 ). 그리고이책의출판에관련된모든관계자여러분에게도감사한다. 마지막으로회사설립과번역업무등으로인해때로는집안에만있어야했던나의사랑하는딸하은이와아들시온이에게사랑을듬뿍담아고마움을전하고싶다. 2012년 6월 21일밤일본오사카에서정인식 이책은 jquery 입문서다. 이책은웹사이트의디자인, 마크업언어에주로관여된일을하고있는사람들중 JavaScript나 jquery를거의알지못하는사람들을대상으로하고있다. 그리고그러한사람들이 jquery를사용하여자신이직접코드를생각해서작성할수있도록하는것이이책이달성하고자하는목표라말할수있다. 이책을손에든사람들중에는이미 jquery가무엇인지좀알고있는사람들도많을거라생각한다. 하지만그렇지못한사람을위해서설명을해두자면, jquery라는것은 2011년 11월현재상당히많은사이트에서이용되고있는 JavaScript 라이브러리다. 예를들어, 웹사이트에서는이미지위에마우스포인터를올려놓으면그이미지가하이라이트되는, 이른바 롤오버 (RollOver) 라는방식이잘사용된다. 이러한방식을직접만들경우, JavaScript라는프로그래밍언어를사용하여프로그램을작성할필요가있다. 그러나여러가지이유때문에이것이좀처럼쉬운일은아니다. 별것아닌것을구현하는데에복잡한코드를많이작성해야하는일이발생하게되는것이다. 이러한 JavaScript를작성할때멋지게활약해주는편리한라이브러리가바로 jquery다. jquery를사용하면 JavaScript를작성하는과정에서필요한, 복잡한처리를직감적으로단순하고짧게작성할수있다. 해외의어느통계에따르면, 2011년 5월현재트래픽이많은사이트들중약 40% 가 jquery를사용하고있음을알수있었다고한다. 게다가과거의통계와비교해보면, 시간의경과와함께점점 jquery의사용률이높아지고있다고한다. 이것은웹사이트제작을일상적인업무로하고있는필자또한느끼고있는것이지만, 이제는 JavaScript 로무언가를하고싶다면우선 jquery를전제로검토한다고말할정도로표준화된 JavaScript 라이브러리가되었다. 이책을집필할때어떠한구성으로하면좋을까고민하였다. 단순히 jquery의기능을망라하여해설하는것으로는기존과별반다르지않는, 프로그래머만을위한책이되어버리고만다. 기능을망라한책은 JavaScript에대하여어느정도이해를하고있는사람에게있어서는단시간에 jquery를깊게알기에는최적의선택일수있다. 그러나아무것도알지못하는사람이그러한책을손에들고, 서점의계산대앞에가지고갈것인가? XIV XV
샘플파일에대하여 그렇다고해서샘플코드를대량으로게재하는것만으로는자신의실력으로프로그램을직접만들수없게되지는않을까라는생각도들었다. 예를들어, 웹사이트에서툴팁 (Tool Tip) 을사용하고싶다고생각해보자. 많은샘플코드가수록되어있는책이있다면, 툴팁의코드를복사하여자신의웹사이트에붙여넣어완성할수있을것이다. 하지만이책이목표로하는것은그러한내용이아니다. 자신이무언가를만들수있게되는것 이다. 하지만이것은간단한일이아니다. 왜냐하면자기자신이무언가를만들수있으려면우선기본적인 JavaScript, jquery의지식이머릿속에정리되어있어야한다. 그리고가장중요한것은필요에따라그러한지식들을조합하여하나의프로그램을작성할수있는능력이다. 이는단순히책을읽어서곧바로될수있는것이아니며, 기능을모두암기했다고해서되는것도아니다. 이책은 자기자신이직접코드를작성할수있게된사람 이한사람이라도늘어날수있도록배려하여집필하였다. 이책에게재된코드는어떠한환경에서라도유연하게대응가능한만능의코드로작성되어있는것이아니라, 입문자가이해하기쉽도록작성된코드들이다. jquery의기능해설또한전기능을망라하고있는것이아니라, 기본적인기능부터세세하고복잡한기능을배워나가는형식으로쓰여져있다. 이미어느정도프로그래밍및 JavaScript에지식이있는사람이 jquery를정말로깊이있게알고싶은경우, 이책은내용이좀얕다고느낄지도모르겠다. jquery라는말을자주듣고는있지만정말편리한것일까? 실제업무에서간단히사용할수있을까? JavaScript를배우고외워보려고생각하고있는데어떻게하면좋을까? 이책은한번이라도이러한것들을생각해본사람들을위한책이다. 이책이조금이라도 jquery이해에도움이되기를바란다. 한편, 이책에서는 HTML이나 CSS에대해서깊이있게설명하고있지않다. 난해한 HTML, CSS가등장하지는않지만, 어느정도 HTML, CSS를이해하고있는것을전제로쓰여져있으므로유의해주길바란다. 다카쯔도다케시 샘플파일의다운로드방법 이책에서설명하고있는샘플파일은아래의 URL 에서다운로드할수있다. URL http://gihyo.jp/book/sp/01/jqbook/ 이책에서설명하고있는코드는각장마다정리해놓았다. 각샘플은기본적으로동일폴더내에다음의 4가지파일이포함된구성을취하고있다. 이외에도샘플에따라이미지파일등이포함되어있다. 코드의동작을확인하려면 index.html을브라우저로열면된다. 한편, 지면의형편상일부코드는게재하지않았다. 샘플파일을다운로드해서확인해주길바란다. 동작환경에대해서 이책에게재한샘플파일은다음의브라우저로동작을확인할수있다. Internet Explorer 6, 7, 8, 9 Firefox 5 HTML 파일이다. CSS 파일이다. jquery 본체파일이다. JavaScript 파일이다. Google Chrome 15 XVI XVII
이책을읽는방법 이책을읽는방법 이책은 jquery 학습서다. jquery의기본지식에대한설명이나샘플코드의설명을통하여 jquery를가지고실제로코드를작성하는방법을배워나간다. 이책을보는방법은다음과같다. 코드 HTML, CSS, JavaScript 코드를게재 하고있다. 코드에서주목하길바라는 CHAPTER 04 _ 4.3 부분은주황색이나파란색으로표시 해놓았고, 코드정리에있어서이해 starttimer 하기어려운부분은점선으로둘러싸기도하였다. stoptimer container.find('a').hover(stoptimer, starttimer); a stoptimer starttimer hover 샘플샘플파일의소재를나타내는폴더경로를기재하고있다. 참조페이지본문에서설명하고있는내용에대하여관련페이지의정보를기재하고있다. 힌트 jquery를학습하는데있어서의조언이나예비지식, 코드를작성할때보탬이되는정보를기재하고있다. $('a').hover(function(){ alert (' '); }, function(){ alert (' '); }); jquery $(function(){ var guideclass = 'guide'; $('.guidetext').each(function(){ var guidetext = this.defaultvalue; var element = $(this); element.focus(function(){ if(element.val()===guidetext){ element.val('').removeclass(guideclass); } }).blur(function(){ if(element.val()===''){ element.val(guidetext).addclass(guideclass); } }); if(element.val()===guidetext){ element.addclass(guideclass); } }); }); 주석본문의내용을보충하는정보나간단한주의사항을기재하고있다. 데모사이트본서게재샘플은인터넷을통해서실제동작하고있는모습을확인할수있다. 그데모사이트의 URL을기재하고있다. 또한이책에서게재하고있는화면의 그림은기본적으로 Windows 7 환경 본문과관련되어있는내용의좀더깊이있는정보나 jquery를보다의욕적으로학습하고싶은분들을위한주제등을정리하고있다. 고있다. var guideclass = 'guide'; guide 에서 Firefox 5를사용하는경우를예로하고있다. 218 165 XVIII XIX
이책을읽는방법 1 이러한기능에대해서는필자자신또한 그러한것이있다 라고머릿속한편에기억해두고있을뿐이며, 실제로사용하는경우에는 jquery 의사이트를보고사용방법을확인하고있다. 2 jquery 는매우많은기능을가지고있어버전이높아질때마다기능도많아지지만, jquery 에추가되는것은 jquery 개발팀이중요하다고인정한, 핵심적인부분에관련된기능이다. 롤오버, 툴팁이라는구체적인기능은플러그인이라는확장형식으로이용되는형식이다. URL jquery: http://jquery.com 이책의구성 이책은대략적으로다음과같은구성으로되어있다. jquery를시작해보자 무언가를가져오기 ( 기본그첫번째 ) 그것에무언가를하기 ( 기본그두번째 ) 무언가만들어보기 플러그인으로정리하기 메인이되는내용은 기본 과 무언가만들어보기 장이다. 우선 jquery의기본적인개념을설명한후 기본 장들에서 jquery의기능을하나하나소개하여나갈것이다. 그러나전기능을설명한다는의미는아니며, 빈번하게사용되는기능을중심으로다룰것이다. jquery의기능은방대하며모두가매우편리한기능들이지만, 처음접해보는사람에게는거의사용하지않는기능들도많이포함되어있다. 1 처음으로 JavaScript와 jquery를접하는사람에게이러한기능까지설명해놓으면혼란스럽기만할것이다. 그래서이장에서는정말로빈번하게사용하는기능을엄선하여설명하고있다. 그다음인 무언가만들어보기 장에서는웹제작자가업무에서사용하는기능에대해서 jquery를사용하여작성한샘플을설명하고있다. 샘플은 ( 대체로 ) 난이도순으로나열되어있어앞에서부터순서대로읽어나가면 jquery를점차깊이있게이해해나갈수있는구성으로되어있다. 또한 기본 파트에서는설명하고있지않는기능과 JavaScript의기본지식에대해서도다루고있다. 마지막의 플러그인으로정리하기 장에서는 jquery의플러그인에대해서설명하고있다. 플러그인이란무엇인가와만든코드를플러그인으로만드는방법, 배포된유명한플러그인에대한설명을하고있다. 2 왜 jquery 인가? jquery는편리하다. 여기저기서 jquery를사용하고있다라는말을들어보았을것이다. 도대체왜이렇게 jquery가인기가있는것일까? 몇가지그이유를열거해보겠다. Write Less, Do More jquery의사이트에는 Write Less, Do More 라는말이쓰여져있다. 의미는 코드작성량을줄이고, 많은것을하자 라는뜻이다. jquery는이말대로매우짧은코드로하고싶은것을간단하게실현가능하도록작성되어있다. 2011년시점에서 JavaScript는 브라우저에서무언가하고싶다면, 우선은이것 이라불리는프로그래밍언어가되었다. 롤오버 (Roll Over), 툴팁 (Tool Tip), 탭 (Tab) 등여러사이트에서일상적으로보여지는약간의기능적인구조는대부분이 JavaScript 로작성된것들이다. 그런데이러한단순한것을하고싶은것인데도불구하고때로는방대한코드로작성해야만하는일이종종발생하기도한다. 예를들면, important라는클래스에소속된 div 요소에 1픽셀의빨간색테두리를넣고싶다고가정해보자. 그러나갖가지문제가있어이런단순한것을하려해도꽤많은양의 JavaScript를작성하지않으면안된다. 만일 jquery가없다면, JavaScript 를처음배운사람은처음부터매우소소한문제에끊임없이직면하기될것이다. 툴팁을만드는것이목표라고한다면, 그것에도달하기까지는상당한단계를필요로하게될거라고생각한나머지망연자실하게될지도모르며, 그렇게어렵다면이쯤에서그만두지 라고판단하는모습도쉽게상상될지모르겠다. 그러나쓸데없는염려는하지않아도된다. jquery를사용하면앞서이야기한예를단 1행으로만들어낼수있게된다. 코드작성량을줄이고, 많은것을하자 바로이것을가능하게해주는것이 jquery인것이다. 브라우저의차이를흡수해준다별것아닌것을하기위해서도많은양의코드를작성해야한다고했는데, 그이유의대부분을차지하는것이 브라우저간의상호호환성문제 ( 크로스브라우저문제 ) 다. 최근브라우저의기능이점차늘어나 HTML, CSS, JavaScript로가능한것이매우풍부해졌다. 이것은우리제작자들에게있어서매우기쁜일이긴하지만, 이와동시에어떠한브라우저도완전한것이아니라는것을의미하기도한다. 현재에는각브라우저벤더가기술의표준화에적극적으로임하고있지만, 예전에는사양이명확하게정해지지않아브라우저마다차이가매우컸다. 업무적인웹사이트를만들경우에, 새로운브라우저에서만동작하면되는것이아니므로여러가지브라우저의신구버전에대응해야만했다. 이것이바로별것아닌것을구현함에도불구하고많은양의코드를작성해야만했었던이유다. 각종브라우저에서동등한기능을실현시키기위해각각의특징을조사하면서작성해야했던것이다. XX XXI
이책을읽는방법 간단히예를들자면, jquery 는전자레인지와같은것이다. 마치무언가를따뜻하게데우는데있어사용할수있는여러방법중하나라말할수있다. jquery 는이러한문제가마치존재하지않는것처럼움직여브라우저간의차이를 흡수해준다. 이때문에우리들은 jquery 를배워두는것만으로도이런문제를해결할 수가있게되었다. 필요한기능이들어있다. jquery 의굉장한점은브라우저의차이를흡수해주는것만이아니다. 까다로운기능 을간단히이용할수있도록여러기능을제공해주고있다. 예를들어, jquery 를사용하면손쉽게애니메이션을만들수있다. JavaScript 에는 원래애니메이션기능이없다. 그러나요소의스타일을변경할수있는기능과타이머기능은가지고있다. 애니메이션을 JavaScript로제작할경우는이기능들을응용하여 10밀리초후에이 div 요소의위치를조금변경하고, 다시 10밀리초후에다시조금변경해서 라는식으로단순하고까다로운처리를많이작성해야한다. 생각한대로의애니메이션을만드는것은꽤귀찮은작업인셈이다. 그림1 약간씩 div의위치를옆으로이동 처리를반복함으로써애니메이션을만든다 하지만 jquery를사용하면이러한것을작성할필요가없다. 이러한것은 1행만으로실현가능하도록되어있기때문이다. 그외에도필요로하는요소를유연하게취해주는셀렉터기능, 비동기통신을간단하게할수있는 Ajax 기능등있는그대로를단지열심히노력해서작성하면, 정말이지두통이라도생길것같은여러가지복잡한기능을매우간단하게작성할수있도록만들어져있다. JavaScript로무언가를하고싶을때 jquery는그것을완성하기까지의여정을극적으로단축시켜준다. 누가 jquery 를사용해야하는가? jquery는이렇듯여러가지멋진기능을가지고있다. 그렇다면누가이 jquery를사용해야하는것일까? 필자는다음의두부류의유저에게특별히 jquery를만져보길권하고싶다. 웹디자이너여기서말하는웹디자이너는주로웹에이젠시에서근무하고있거나프리랜서로, 때에따라 HTML+CSS의코딩을하기도하는사람을대상으로생각하였다. 이러한사람들이이책의대상으로삼고있는주요타겟층이다. HTML과 CSS를구사한다면분명수려한디자인이가능하다. 그러나동작에관해서말하자면, HTML과 CSS는그리대단한기능을가지고있지않다. 유저의액션에대해무언가할수있는구조가존재하는지잠시생각해보면, 마우스를올려놓았을때문자색을변화시키거나밑줄을나타내거나하는매우한정적인것밖에할수없다라는것이현실이다. 그이상의무언가를하기에는 JavaScript나 Flash를사용해야하고, 이에대한노력과비용이들기때문에일반적인예상에서빗나가는일이많았을것이다. jquery를사용하면사이트에동적인움직임을추가하는것이매우간단하게가능하다. 그것은정말로간단해서단몇줄로작성할수있을정도다. 필자는그러한것이 가능하다 라는것을체감적으로아는것이중요하다고생각하고있다. 어디선가본것을기억하는것도좋지만, 실제로손을움직여서그러한것이 가능하다 고확실히이해해자신의것으로만들어둔상태가되면, 자연스럽게평소의디자인작업에서도적용시켜나갈수있게될것이다. jquery를습득하면보다고급스런 UI 디자인을행할수있게된다. 개발자여기서말하는개발자란평소업무에서서버사이드의프로그램을주로작성하는사람, HTML이나 CSS 코딩을하는한편으로 JavaScript를작성하는사람등을말한다. 이러한사람들중 jquery 등장이전부터 JavaScript를작성했던사람들대부분은, 앞서말한 브라우저간의차이를흡수하기위한스크립트 를자신이직접코딩하거나또는누군가가작성한소스를찾아사용했음에틀림없다. 또한 작성하다보면두통이생길법한여러가지복잡한기능 을직접만들어서편리하게사용해왔을지도모르겠다. 그러나 jquery가이러한것들에동일한처리를해줄수있다면, 향후진행해나가 XXII XXIII
이책을읽는방법 야할일에서는그것들대신 jquery를사용해보길바란다. 그이유에대해서는계속해서설명해나가겠다. jquery 를사용할경우의장점 이책의처음에서 jquery는시장점유율이높다라고기술하였는데, 이 시장점유율이높다 라는것은상당히중요하다. 다음은 jquery를사용하는데있어서얻을수있는장점의일례들이다. 정보가풍부하다누군가가단순한예로작성한스크립트이거나어떤개인에의해운용및개발된스크립트의경우는사용방법에관한문서가없거나있다고해도완전하지않은경우가많다. 해당코드에생소한사람이막상써보려고해도우선코드를분석해서이해해야만한다. 이것은시간이많이걸리는작업이다. 이에반해서 jquery는문서가풍부하게준비되어있으므로잘모르는기능이있다면바로찾아볼수있다. 만일문서를읽었음에도불구하고잘모르겠더라도, 웹검색을통해찾고자하는답의절반이상은순식간에해결될수있을것이다. 이는 jquery가널리알려졌고많은사람들이사용하고있기에가능한일이다. 개발자들사이에서의사소통이원활해진다 jquery를사용하고있으면개발자간의커뮤니케이션이용이하다. jquery 이외에도많은 JavaScript 라이브러리가있지만, 당연히그이용방법을알고있지않다면사용할수가없다. 그러한점은 jquery도동일하지만, 최근의 JavaScript 라이브러리의보급상황을보게되면 jquery를능가하는다른라이브러리는없는상황이다. 이러한상황은많은사람들이 jquery로무엇을할수있는지알고있으며, 어떻게작성하는지를알고있는환경이조성되는것이다. 서로가상대방의코드를쉽게읽을수있다라는것은매우커다란장점이다. 버그가적다 jquery는단순히유명하기만한게아니라많은개발자들에의해서개발이지속되고있는라이브러리다. 그리고점차새로운버전의개발이진행되고있다. 이렇게오랜기간유지보수되고있는라이브러리에서는이미많은버그가제거되어문제없이동작 되고있음을기대할수있다. 자신이직접작성한코드에서버그퇴치를즐겁게시행해나간다면이는별개의이야기가되겠지만, 그렇지않다면 jquery를선택하는것이현명한선택인것이다. jquery의커다란특징은 DOM의조작 1 을매우쉽게할수있다는점이다. 브라우저상에서 JavaScript를사용할경우가장많이하는것이이 DOM 관련조작일것이다. 자신이작성한것에대해애착을갖고있는사람들도있을지모르겠으나, 부디 jquery의편리함을꼭접해보길바란다. 처음 JavaScript 를다루어보는사람들에게 JavaScript와프로그래밍을처음으로시작하는사람들에게한가지조언을해두고싶다. 그것은 전부암기해야한다 라고생각하지말라는것이다. 이책을읽어나가는도중어떤샘플코드가나왔을때, 코드속의 JavaScript와 jquery의기능과문법을전혀모르겠다고해서실망할필요가없다. 그러한것은일년내내코드를작성하지않는한금방잊어버리는것이일반적이다. 2 프로그램을작성하는데있어서암기는전혀필요가없다. 중요한것은기능을어떻게조합하면좋은지알고있느냐다. 구체적인기능에대해서는사용할때조사하면된다. 이러한느낌으로이책을한번싹훑어볼것을권유하고싶다. 그럼다음의예를생각해보자. 나무상자와패널 일요목수학원에서나무상자를만들고싶다라고해보자. 일년내내일요목수학원을다니고있는사람은세세하게만드는법을알고있을지모르겠으나, 설사그렇지않다하더라도다음의순서대로만드는것은알고있을것이다. 판자를준비하여서톱으로필요한크기로자르기 나무망치와못으로판자를고정시켜나무상자를조립하기 그리고이것을시행하기위해필요로하는지식은다음과같은것이있다. 1 나중에다시설명하겠지만, 웹페이지에배치된요소를이동시키거나, 또는지우거나스타일을변경시키는것을말한다. 2 필자자신도 jquery 의기능을전부다기억하고있지않다. jquery 의사이트를보고어설프게기억했던기능을어떻게사용할것인지그때그때확인하고있다. XXIV XXV
이책을읽는방법 톱의사용법 나무망치를사용하여못박는방법 톱의사용법을숙지하고있거나세부적인요령을알고있다면보다예쁜나무상자 를쉽게만들수있겠지만, 제작의흐름을이해했고과거에한번이라도톱과나무망치를사용해본적이있다면어찌되었던간에나무상자를완성시킬수는있을것이다. 그럼 JavaScript로버튼의클릭에의해패널을개폐시키는구조를만들경우에대해생각해보자. 위의예와같은제작법을배워서이구조의제작법을작성해보면다음과같이된다. 그림2 JavaScript로버튼의클릭에의해패널을개폐시키는구성 버튼과패널을배치한다 버튼이클릭되면, 패널이닫혀있다면열기 동작을설정한다 버튼이클릭되면, 패널이열려있다면닫기 동작을설정한다 전체흐름을연상할수있는것이중요하다. 아무리하나하나의기능을자세하게알고있다고해도제작의흐름을머릿속에그려두지않으면, 어디서부터손대야좋을지알지못한채전혀앞으로전진할수없는상태가되어버린다. 클릭하면무언가시킨다는것이그걸말하는것이었나? 스타일을변경하면표시되거나또는감춰질수있었지? 이러한것을생각해낼수있게되어그조합방법이대략적으로머릿속에떠오르게된다. 여기까지가능하다면이미코드는작성할수있게된것과다른바없다. 구체적으로어떻게작성하면좋은지에대해서는필요할때조사해서적용해나가면된다. 거꾸로말하자면, 그러한하나하나의기능은그것을알고있는것만으로는아무런도움이되지못한다. 나무망치의사용법을알고있어도나무상자의제작법을모른다면의미가없는것과마찬가지다. 이책에서는다양한샘플코드를소개하고있다. 그것들하나하나는부품을이렇게조립하면이러이러한것을할수있다라는아이디어를코드로만든것이다. 굉장한것은아니지만나는이러한방법을상상조차할수없었어 라고생각할만한것도있을지모르겠다. 하지만그것은처음프로그램을작성하는것이라면당연한것이다. 처음에는샘플코드를보고흉내내어어떻게든움직이게했다라는느낌일것이다. 처음부터자기자신의힘으로스크립트를작성하는것은아주힘든일이라고생각하지만, 자신의힘으로하나둘씩뭔가를작성하다보면, 그것은경험으로축적되어간다. 이를반복해나가한층더성장하길바란다. 이벤트에대해서는 105 페이지에서상세하게설명하고있다. 스타일의변경에대해서는 57 페이지에서자세히설명하고있다. 그리고이구조를만들기위해필요한지식은다음과같은것이있다. 클릭동작을감시하는방법 ( 이벤트의설정 ) 요소표시를제어하는방법 ( 스타일의변경 ) 나무망치나톱은상식적으로사용법을알고있는데반해, 위의내용은이제막 JavaScript를학습하는사람들에게는다소뜬구름잡는이야기일지도모르겠다. 하지만위에서기술한패널개폐를실현하기위한흐름이어떠한것을나타내는지는어느정도연상이되지않는가? 처음프로그래밍을접해보는사람은일단수수께끼같은단어나기호의나열에난처해질수도있겠다. 그러나그러한하나하나의기능을암기하는것보다는차라리제작의 XXVI XXVII