CHAPTER 01 _ jquery 를시작해보자 1.1 jquery 의대략적인개념 여기에서는구체적으로 jquery의기본적인기능에대해하나씩소개할것이다. 다만 jquery의기능이방대하기에이책에서는사용빈도가높은것만을추려서설명하고자한다. 사용빈도가높은것 이라고하였으나그것만해도

Size: px

Start display at page:

Download "CHAPTER 01 _ jquery 를시작해보자 1.1 jquery 의대략적인개념 여기에서는구체적으로 jquery의기본적인기능에대해하나씩소개할것이다. 다만 jquery의기능이방대하기에이책에서는사용빈도가높은것만을추려서설명하고자한다. 사용빈도가높은것 이라고하였으나그것만해도"

화령 이
6 years ago
Views:

1 Chapter 1 jquery 를시작해보자 1.1 jquery의대략적인개념 1.2 jquery를사용하기위한준비 jquery의기능을하나하나설명해나가기전에 jquery의기본적인개념을설명하겠다. 코드를갑자기직면하기보다는그전에대략적으로 jquery를이해한후에살펴보는것이나을것이다. 1장.indd 오후 12:02

2 CHAPTER 01 _ jquery 를시작해보자 1.1 jquery 의대략적인개념 여기에서는구체적으로 jquery의기본적인기능에대해하나씩소개할것이다. 다만 jquery의기능이방대하기에이책에서는사용빈도가높은것만을추려서설명하고자한다. 사용빈도가높은것 이라고하였으나그것만해도상당한숫자이기에 jquery를처음접하는사람이 jquery로무엇을할수있는지에대해알기쉽도록체계적으로구성하려고하였다. 여기서설명하지못한 jquery의기능, 그리고각기능의조합에대한예는샘플설명의장에조금씩섞어두었다. 단계적으로난이도가높은것을습득해나갈수있도록책을구성하려고하였으므로일단이장에서는대략어떠한것이가능한지감을잡아보았으면좋겠다. 우선 jquery의대략적인개념및개발환경의구축방법에대해설명하겠다. 무언가를가져오기 그것에무언가를하기 자, 그럼 jquery의기본적인개념을접해보도록하자. 갑작스럽긴하지만 jquery를사용하여작성된코드를보자. $( #sample1 ).hide(); 이코드에서하고있는것은 id 속성이 sample1인요소를숨기기 다. 페이지안에다음과같은요소가있다고가정해보자. <div id= sample1 > 샘플이다 </div> 이런요소가있다면이것은표시되지않고숨겨질것이다. 매우간단하지않은가? 여기서우선기억해두었으면하는것은 jquery를사용하는데있어서의기본적인흐름이다. jquery는다음의두단계를밟는다. 2 1장.indd 오후 12:02

3 1.1 jquery 의대략적인개념 무언가를가져오기 그것에무언가를하기 그림 1 div 요소에대해서작용하는 jquery의개념도 구체적으로보자면, 지금예로든샘플은다음과같은조합으로하나의명령이된다. 표 1 명령과코드의대응표 구체적인대상ㆍ명령 코드 무언가를가져오기 id 가 sample1 인요소 $('#sample1') 그것에무언가를하기숨기기.hide() 우선요소를가져와서그것을숨기는과정으로되어있다. 일반적으로스타일시트를작성해본사람이라면 #sample1이 id가 sample1인요소 를나타내는것임을알것이다. jquery에서는 CSS의셀렉터를이용하는것이가능하다. hide라는것은 숨기기 란의미그대로다. 이러한감각으로 무언가를가져오기 그것에무언가를하기 를하는것이 jquery의기본적인사용법이다. 셀렉터에대해서는 CSS를평소사용해본사람이라면어떠한저항감도없을것이며, hide라는명령또한단어의의미그대로다. 이장에서는일단이와같은 jquery의대략적인개념을설명할것이다. 무언가를가져오기 그것에무언가를하기 그리고위와같이두가지로크게나누어서하나하나설명해나갈것이다. 3 1장.indd 오후 12:02

4 CHAPTER 01 _ jquery 를시작해보자 무언가를가져오기 그것에무언가를하기 여기서는이것만을기억해두고다음으로진행하자. 힌트 문장의끝을나타내는 ;( 세미콜론 ) 행의마지막에있는 ; 은명령의종료를의미한다. 우리말의.( 마침표 ) 와같은것으로생각해두길 바란다. 이것을붙이지않으면에러가발생하기에주의가필요하다. $ 와 jquery 객체 jquery 를사용할때는 $( 달러표시 ) 라는기호가반드시등장한다. $ 는 jquery 를이해하는데있어서빼놓을수없는매우중요한것이므로이것이무엇 인지를우선설명해두겠다. 앞서설명한코드는다음과같은것이었다. $( #sample1 ).hide(); 맨앞에 $ 가붙어있다. 실은이 $ 야말로 jquery 그자체다. $() 로 HTML 의요소를 jquery 객체화하는부분에서 jquery 의모든것이시작하 게되는것이다. $() 는무언가를가져오는것 jquery 객체화 라는말로표현하긴했으나이게무엇인지감이잘떠오르지않을것이다. 이 1행에서어떠한것이실행되는지에대해자세하게설명하겠다. 우선앞에서 jquery는 무언가를가져오기 그것에무언가를하기 라는흐름으 무언가를가져오기 라고쓰고있지만, 가져오기만했을뿐그요소자체는아무런변화가없다. 보다정확하게말하자면, 요소에대한참조얻기 라는표현이맞겠다. 이요소에대해앞으로조작할거야. 라고마치저격수용총으로표적을결정하는것과같은일이여기에서이루어진다. 로움직인다고했다. 즉, jquery가처음에실행하는일은 무언가를가져오기 다. 그것을실행하고있는것이다음의강조표시로처리된부분이다. $( #sample1 ).hide(); 여기서는 jquery의기본이되는셀렉터라는기능을사용하고있다. $() 로감싼부분에가져오고싶은요소를나타내는셀렉터를지정함으로써원하는요소를취득해올수있다. id가 sample1인요소를원했으므로 #sample1이라는셀렉터 4 1장.indd 오후 12:02

5 1.1 jquery 의대략적인개념 를작성하고있다. 이것이 무언가를가져오기 기능인데, 실제로 $() 가실행하고있는것은 무언가를가져오기 만이아니다. 요소를가져오는것에더하여 jquery 객체를작성하는작업도하고있다. 그러므로 무언가를가져오기 는정확하게말하자면, 무언가를가져와서 jquery 객체만들기 를하고있는것이다. jquery 객체화하기자, 그렇다면갑자기등장한 jquery 객체라는것은무엇일까? 이것은예를들자면, 로봇슈트를입은사람과같은것이다. 1 평범한사람에게로봇슈트를입히면초인적인힘을발휘할수있는것처럼, HTML 요소를 jquery 객체화하면 JavaScript만으로는하기에무척힘든조작을너무나도간단하게할수있게된다. 1 다른예를들자면, 정로환에대한정로환당의가루약에대한캅셀정제, 갑옷을입은전사, 변신한가면라이더, 건담로봇에올라탄파일럿 같은것들을말할수있겠다 ( 옮긴이 _ 원서에서는파워드슈트 (powered exoskeleton) 라는표현을사용하였다. 이는 SF 영화등에서나오는갑옷장비로사람의힘으로는할수없는무겁고힘든일을사람의신체로할수있도록해주는장비를말한다 ). 그림 2 jquery 객체화의개념 로봇슈트를착용함으로써 jquery 객체가된 HTML 요소는자유자재로 jquey 의 그것에무언가를하기 기능을사용할수있게되는것이다. 이런 그것에무언가를하기 기능을사용하려면뒤에. 을붙여작성하면된다. 이번의예에서는 hide라는기능 2 을호출하고있다. $('#sample1').hide(); 이것이 jquery 사용법의기본중의기본이다. 기본중의기본이지만이렇게요소를 2 JavaScript 에는원래부터 hide 라는이름의기능은없다. 이것은간단하게요소를숨길수있도록 jquery 가제공하는기능이다. hide 는그이름그대로요소를숨긴다. 5 1장.indd 오후 12:02

6 CHAPTER 01 _ jquery 를시작해보자 가져와서 jquery 객체를만들고그것에무언가를하는과정은언제나동일하다. jquery 객체란무엇인가? 이렇듯이 $() 로 jquery 객체만들기를시작함으로써 무언가를가져오기 의다음에 $ 는 JavaScript 에서아무의미도없는단순한문자로 a 나 b 또는 c 와같다. 자주사용하는기능을몇번이고반복해서타이핑하는것이귀찮다는이유로이러한의미없는문자에기능을갖도록한것이다. 실행할 그것에무언가를하기 기능이가능하게된다. 여기서잠시 그것에무언가를하기 기능을보도록하자. $('#sample1').show(); // 표시하기 $('#sample1').fadein(); // 페이드인시키기 $('#sample1').slidedown(); // 슬라이드애니메이션을부여하여표시하기 $('#sample1').css('border','1px solid red'); // 1px 의빨강색테두리를표시하기 $('#sample1').remove(); // 삭제하기 위의내용은 그것에무언가를하기 의극히일부분이다. 각기능은후에설명해나가 겠지만, 코드의주석에쓰여있는대로동작한다. 슬라이드애니메이션이나페이드애니메이션도매우간단하게조작가능하다. 그림 3 jquery의 그것에무언가를하기 기능의여러가지 그런데이책의앞부분에서브라우저마다다양한특징이있어그것을 jquery가어떻게든처리해준다라고기술하였다. 로봇슈트 라고표현한 jquery 객체의뒷편에서는기본적으로이러한일들이처리되고있다. JavaScript로무언가를하려고하면각브라우저간의차이에고민해야한다. 예를들어, 버튼클릭시에메시지를표시하기 라는간단한작업에도두가지이상의방식으로작성해야만했었다. jquery는그런까다로운것을뒤쪽에서어떻게든해결해주는편리한로봇슈트다. 로봇슈트를입은 div 요소가 jquery 객체라고생각해주면좋겠다. 6 1장.indd 오후 12:02

7 1.1 jquery 의대략적인개념 힌트 주석 (Comment) 이란? JavaScript 에서 // 를쓰면해당줄에서 // 이후에쓴글자가주석으로처리된다. 뭔가메모를남 겨두고싶을때등에사용한다. 이책에서는약간의설명을넣기위해이주석서식을사용하고있다. 무엇이그렇게힘든가? 여기까지의내용을정리하면이런느낌이다. $ 가 jquery $() 로무언가를가져옴 그리고가지고온요소를 jquery 객체화함 jquery 객체로편리한기능을사용할수있음 그러한편리한기능이없으면여러가지일이매우어렵고힘듦 마지막에제시한여러가지가매우어렵고힘들다라는점에대해서좀설명하고자한다. 물론 jquery가없어도여러가지일을할수있다. 또한어떻게작성하면어떻게동작하는지에대한훌륭한사양도있다. 바로 DOM(Document Object Model) 이라고하는사양이다. DOM에준거해 JavaScript를작성하면, 대부분의경우새브라우저에서는의도한대로작동한다. 하지만 DOM 사양을좀미흡하게준수하는브라우저도이세상에는많이존재하고있다. 그러한브라우저에서 클릭하여대화상자를표시하기 와같이간단한작업을하는 JavaScript 코드를단순히있는그대로작성한다면, 오류가발생하여작동하지않을것이다. 그럼어떻게하면좋을까? DOM 사양을조금모자라게준수하는브라우저는클릭하여대화상자를표시하는것조차불가능한것일까? 물론그렇지않다. 그러한기능은옛날부터대부분의브라우저에서가능했다. 하지만 DOM 사양에서정의한구조와는다른방법이었다. 사양이정해지지않았기때문에각브라우저가독자적인방식으로제공하고있었던것이다. 즉, 무언가를하고싶은경우에그러한문제를모두해결해야한다. 예를들면, 클릭하면 무언가를발생시키는방법을실현하기위해서는다음의단계를수행해야한다. 클릭이벤트에대하여 DOM에의해정의된사양을조사한다 대상으로하는각브라우저에대한대응상황을조사한다 7 1장.indd 오후 12:02

8 CHAPTER 01 _ jquery 를시작해보자 대응하지않는각브라우저에대해서해당브라우저고유의사양을확인한다 대응상황을확인하여다른처리를작성한다 실제로 클릭하면대화상자를표시하기 라는동작을현재주로사용되고있는각브 라우저에서문제없이작동시키려면다음과같이작성해야할필요가있다. var div = document.getelementbyid( div1 ); if(div.addeventlistener){ div.addeventlistener( click, dosomething, false); }else if(div.attachevent){ div.attachevent( onclick, dosomething); } function dosomething(){ alert( 클릭되었다 ); } 강조표시된부분은아주비슷하지만주의해서봐두어야한다. 이것은브라우저간의차이로, 중간에판별하여배분하는처리를사이에끼워넣고있다. 이러한문제를하나하나살피고가야한다는것은많은노력과시간이요구된다. 그결과, 브라우저에대처하는이러한코드처리가소스의대부분을점유하게되어소스의가독성을떨어뜨리고향후유지보수에도어려움을겪게만든다. 그럼 jquery를사용하면어떻게코드를작성할수있을까? 방금전의예라면다음과같은코드가된다. $( #div1 ).click(function(){ alert( 클릭되었다 ); }); 방금전에각브라우저의판별처리를작성해야만동작한다라고설명했는데, 이런식으로작성한다면앞뒤가안맞지않은가? 그러나이게가능한이유가있다. 이는 jquery 내부에서 jquery가각브라우저의차이를메워주는처리를하고있기때문이다. jquery의다양한기능은매우단순하게사용할수있도록되어있는데, 그것들을사용할때에는언제나내부에서매우세세한처리가이뤄지고있기때문이다. 그내부의처리가안보이도록해주는갑옷과같은것이바로 jquery 객체다. div가로봇슈트를입어초인과같이되어있는모습을상상해보라. jquery는이러한식으로동작하고있다. 8 1장.indd 오후 12:02

9 1.1 jquery 의대략적인개념 그림 4 각브라우저의차이를흡수하고있는 jquery 대략적이긴하지만 jquery가일련의처리를하는흐름에대해설명하였다. 하지만이러한설명을읽기만해서는뭔가알았다라고말하기어려울것이다. 여기에서는대충감을잡았다면그것만으로도괜찮다. 이제막 jquery에대한설명이시작되었으므로지금은 $() 로감싸두면 jquery의기능을사용할수있게된다라는정도로만이해해두자. 앞으로하나씩어떠한것이가능한지알아보도록하자. 힌트 jquery 가무엇인지깔끔하게이해가되지않은사람을위해서 솔직하게말하자면, 필자는로봇슈트가어쩌구저쩌구라고하는애매모호하고정확성이결여된설명방식을좋아하지않는다. 하지만 jquery가어떠한것인지그내부적인구조를이해시키기위해서는프로그램의설계나이론에관한지식이필수불가결하게되었다. 게다가 jquery라는것은그자체가꽤특수하게작성된것이다. jquery는 패턴으로작성되어있으므로이책의이런방식을보면이해할수있어요 라는단순한것이아닌, 여러가지테크닉의조합으로만들어진마법상자와도 같은것이다. 이것을처음시작단계에서부터내부구조까지이해한다는것은거의불가능하다. 이책을읽어나가더라도 이것은뭐냐? 라는의미가없어지지않을지도모르겠다. jquery를사용하는데있어일단은, 무엇을어떻게작성하면실현가능한지에대해대략적으로이해한뒤다시 JavaScript 기초부터익혀야한다. 그후에다시한번 jquery의내부를살펴보는방법을추천한다. 9 1장.indd 오후 12:02

CHAPTER 01 _ jquery 를시작해보자 1.2 jquery 를사용하기위한준비 앞에서는간단한샘플코드를사용하여설명하였다. 그런데실제로스크립트를동작시키기위해서는꼭필요한처리가있다. 바로 jquery 파일을무엇보다우선적으로웹페이지에읽어들여야한다는것이다.

다운로드한 jquery-1. 7.1.min.js 의내부는뒤죽박죽된기다란암호와같은텍스트가쓰여져있으나이것은정상적인상태다. 공백문자, 탭이나개행코드를제거하여파일용량을줄이기위해이러한상태로배포하고있다 ( 옮긴이 _ 원서에서사용된 jquery 의버전은 1.6.4 다.

10 CHAPTER 01 _ jquery 를시작해보자 1.2 jquery 를사용하기위한준비 앞에서는간단한샘플코드를사용하여설명하였다. 그런데실제로스크립트를동작시키기위해서는꼭필요한처리가있다. 바로 jquery 파일을무엇보다우선적으로웹페이지에읽어들여야한다는것이다. 여기서는 jquery를실제로동작시키기위해웹페이지에 jquery를읽어들이는방법에대해설명하겠다. jquery 의다운로드 우선 jquery 파일을손에넣어야한다. 브라우저로 을열어빨간 색테두리로둘러싼 Download(jQuery); 버튼을클릭한다. 다운로드한 jquery min.js 의내부는뒤죽박죽된기다란암호와같은텍스트가쓰여져있으나이것은정상적인상태다. 공백문자, 탭이나개행코드를제거하여파일용량을줄이기위해이러한상태로배포하고있다 ( 옮긴이 _ 원서에서사용된 jquery 의버전은 다. 하지만이책을번역하는시점의최신버전은 이었기에여기에서는 을사용하였다 ). 그림 5 jquery의다운로드화면 파일의다운로드다이얼로그가표시될경우적당한장소를지정하여저장한다. JavaScript 의소스코드가나올경우는 다른이름으로저장 (A)... 등을선택하여저 장한다. 10 1장.indd 오후 12:02

11 1.2 jquery 를사용하기위한준비 jquery 를읽어들이고싶은 HTML 을작성하여동일디렉터리에다운로드한 jquery min.js 와같이놓아둔다. HTML 파일의 head 요소안에다음과같이 script 요소를작성하면 jquery 의로딩은완료된다. <!DOCTYPE html> <html> <head> <meta charset= utf-8 /> <title>jquery test</title> <script src= jquery min.js ></script> </head> <body> </body> </html> 이책에서는 jquery min.js 란파일명이지만, 이파일명은버전에따라다르므로주의하길바란다. js 파일을로딩한후라면언제라도 jquery를사용할수있다. 이것으로 jquery를사용하기위한준비는완료되었다. jquery의도입자체는이렇게매우간단하게이루어진다. 칼럼 jquery 의버전에대해서 이책에서설명하고있는 jquery의버전은 1.7.1이다. 그러나 jquery의개발스피드는빨라여러분이이책을손에넣었을때에는훨씬새로운버전이릴리즈되었을지도모르겠다. jquery는어떤버그가수정되거나새로운기능이추가되거나할때마다버전업된다. 새로운버전이릴리즈되면이책에쓰여져있는내용이구식이되서사용할수없게되지는않을까라고걱정하는사람이있을지도모르겠으나, 그런걱정은그다지할필요가없다. jquery는지금엄청나게유명해져서 IT 업계에서는널리알려진존재가되었다. jquery를사용하여작성된다수의라이브러리가대규모의사이트에서이용되고있다. 이러한배경이있기에 jquery는후방호환성을유지하고있어, 이전에존재했던기능이사용할수없게되는일은없도록개발되어있다. 그러므로버전업을할때마다기존코드를수정해야하는일은좀처럼없을것이다. 그러나 그런걱정은그다지할필요가없다 라고쓴것은설사그렇다고는해도확실히변경될일이없다라고단언할수없기때문이다. 아무리후방호환성을갖고있다고해도코드로서는분명차이가있다. jquery를새로운버전으로교체할경우에는작성한기능이동작하는지대략적으로확인해야하며, 디버그는필수라는인식을해두는편이좋다. 11 1장.indd 오후 12:02

12 CHAPTER 01 _ jquery 를시작해보자 페이지의로딩완료기다리기 jquery 를배울때우선한가지반드시기억해두어야할것이있다. 페이지로딩완 료기다리기 가바로그것이다. 이것을잊어버리고있으면아무것도움직이지않게되므로주의하길바란다. head 안에서실행되는 JavaScript 구체적으로처음에소개한샘플을보도록하자. $( #sample1 ).hide(); 이것은 id 속성이 sample1 인요소를숨긴다 라는명령이라고설명하였다. HTML 이책의샘플 HTML 은모두 HTML5로작성되어있다. HTML4.0 이나 XHTML1로작성할시에는 <script type= text/ javascript > 라는 type 속성이필요하므로주의하기바란다. 샘플 Chapter1/2/1/ 데모사이트 gihyo.jp/book/sp/01/ jqbook/1/01/ 의 head 내에작성하면이렇게된다. <!DOCTYPE html> <html> <head> <meta charset= utf-8 /> <title>jquery test</title> <script src= jquery min.js ></script> <script> $( #sample1 ).hide(); </script> </head> <body> <div id= sample1 > 이 div 를지우고싶다!</div> </body> </html> HTML의 head 요소안에서는 우선 jquery를읽어들이고샘플코드를실행 이라는것을한다. script 요소로둘러쌈으로서 JavaScript는실행가능하게된다. 그럼이소스의결과는어떻게될까? id 속성이 sample1인요소를선택해서숨긴다 라는명령에대하여 HTML 파일안에서는해당하는 div 요소하나가있음을알수있다. 그안에는 이 div를지우고싶다! 라고쓰여져있다. 웹페이지의예상표시결과로서, HTML의로딩과동시에 div가사라지기때문에웹페이지에는아무것도표시되지않는것이정답 인것처럼생각된다. 그러나실은 12 1장.indd 오후 12:02

1.2 jquery 를사용하기위한준비 안타깝게도그렇게되지않는다. 브라우저에는 이 div 를지우고싶다! 라고표시된다. 그림 6 사라지지않는 div 요소 어째서이 div는사라지지않은것일까? 이것은샘플코드가실행되는타이밍과관계가있다. 기본적으로 JavaScript라는것은읽혀지자마자실행된다. 브라우저는읽혀진부분부터순서대로 1행씩처리해나간다.

13 1.2 jquery 를사용하기위한준비 안타깝게도그렇게되지않는다. 브라우저에는 이 div 를지우고싶다! 라고표시된다. 그림 6 사라지지않는 div 요소 어째서이 div는사라지지않은것일까? 이것은샘플코드가실행되는타이밍과관계가있다. 기본적으로 JavaScript라는것은읽혀지자마자실행된다. 브라우저는읽혀진부분부터순서대로 1행씩처리해나간다. 이말은샘플코드의 JavaScript가실행될때브라우저가처리할수있는것은다음의내용뿐이다. <!DOCTYPE html> <html> <head> <meta charset= utf-8 /> <title>jquery test</title> <script src= jquery min.js ></script> <script> $( #sample1 ).hide(); 그다음의내용은아직읽혀지지않은상태다. 로딩이완료되어있는내용물에는 id 속성이 sample1인요소 가존재하지않는다. 그러므로아무일도생기지않는것이정상적인동작인것이다. 이렇듯이 head 안에 JavaScript를작성하는것만으로는페이지의내용을조작하는것이거의불가능하다. $(function(){}) 그렇다면어떻게하면좋을까? 물론이것을잘회피할수있는방법이제공되고있다. 다음과같이작성하면의도한대로 id 속성이 sample1인요소를숨기기 에성공한다. 코드를작성할곳은지금과똑같은 head 안쪽으로 jquery를읽어들인후다. 13 1장.indd 오후 12:02

14 CHAPTER 01 _ jquery 를시작해보자 샘플 Chapter1/2/2/ 데모사이트 gihyo.jp/book/sp/01/ jqbook/1/02/ $(function(){ $( #sample1 ).hide(); }); 이것으로염원했던 id 속성이 sample1인요소를숨기기 가실현되었다. 지금까지의코드가 $(function(){}) 로둘러싸여있는데, 왜이묘한코드사이에원래소스를끼워넣으면동작하게되는것일까? $(function(){}) 란 웹페이지의로딩이완료한다음안에쓰여진코드를실행한다 라는예약상태로만들어주는명령이기때문이다. 그렇기때문에 head 요소의안에 body 1 head 내에서 JavaScript 를실행했을경우에는웹페이지로딩이완료된부분만처리한다라고기술하였다. 이책에서는웹페이지내에배치한요소를조작하는것이거의대부분이지만, 이러한타이밍에서는 script 요소보다도위에쓴 title 이나 meta 요소등이미로딩된부분이라면즉시조작하는것이가능하다. 그부분에대해서는이미브라우저가처리를마친상황이므로취급할수있기때문이다. 의내용을조작하는코드를써넣어두어도 $(function(){}) 로만감싸놓으면해당코드는웹페이지가로딩이완료된다음에실행되게된다. 당연히그시점에서는 id 속성이 sample1인요소 는존재하게되므로정상적으로동작하게되는것이다. JavaScript로어떤코드를작성할때, 특히처음의단계에서는화면에표시되는요소를조작하는것이대부분일거라생각한다. 그러한때에 $(function(){}) 로코드를감싸두지않으면 div가사라지지도않고에러조차발생하지도않는다. 올바로작성했는데도불구하고왜동작하지않는거야 라고재차고민하게될수도있다. 따라서처음부터특별히이책에서설명하고있는내용에해당하는것에대해서는모두 $(function() {}) 의안에서실행시키는것도좋은방법이라생각한다. 1 이샘플코드를실제로직접작성해보고 $(funciton(){}) 의유무에따라동작이어떻게다른지확인해보면좋을것이다. 2 2 function 이란복수의명령을하나로정리한것으로, 함수라고말한다. 여기서등장한 $() 는세부적으로말하자면, 그안에쓰여진 function 을페이지로딩완료시에실행시킨다 라는의미를가진기능이다. 단, 안에쓰여진내용이 sample1 과같은셀렉터라면요소취득의기능이된다. $() 는카멜레온처럼내용에따라전혀다른처리를실행하기도한다. 이것에대해서는나중에자세히설명하겠다. 칼럼 $(document).ready(function(){}) $(function(){}) 은다음코드의생략형이다. 생략하지않고써도동일한동작을한다. 이방법은좀장황하긴하지만, 문서의준비상태가됐다 라는의미를좀더이해하기쉽게표현했다고생각한다. 우선은자기자신이외우기쉬운쪽으로작성해나가도록하면좋겠다. $(document).ready(function(){ $( #sample1 ).hide(); }); 14 1장.indd 오후 12:02

15 1.2 jquery 를사용하기위한준비 칼럼 body 를닫기전에실행 한편, body 요소가끝나기직전에스크립트를작성해도거의동일한동작을한다. 그시점에는모든요소가읽혀져있기때문이므로문제없이처리할수있게되는것이다. 다음과같이작성하는사람도있으므로머릿속한편에기억해두는것도좋을것같다. <!DOCTYPE html> <html> <head> <meta charset= utf-8 /> <title>jquery test</title> <script src= jquery min.js ></script> </head> <body> <div id= sample1 > 이 div 를지우고싶다!</div> <script> $( #sample1 ).hide(); </script> </body> </html> 코드의외부파일화 다음진행에앞서한가지더, 코드의외부파일화에대하여설명하겠다. 조금전에설명한코드를보도록하자. <!DOCTYPE html> <html> <head> <meta charset= utf-8 /> <title>jquery test</title> <script src= jquery min.js ></script> <script> $(function(){ $( #sample1 ).hide(); }); </script> </head> <body> 15 1장.indd 오후 12:02

16 CHAPTER 01 _ jquery 를시작해보자 <div id= sample1 > 이 div 를지우고싶다!</div> </body> </html> 롤오버에대해서는 무언가를만들어보기 장의 141 페이지에서설명하고있다. 경사스럽게도잘동작하게된코드이긴하지만, 이제부터점차 JavaScript를작성하다보면모든것을 head 안에작성해버려야한다는점에대해좀생각해봐야한다. 예를들어, 롤오버 의코드를작성했다고하면그러한것을모든웹페이지의 head에작성한다는것은관리또한어렵기도하고용량도불필요하게증가해버린다. 이럴때는다음과같이외부파일을만들어 JavaScript 코드를이동시켜보도록해보자. 샘플 Chapter1/2/3/ 데모사이트 gihyo.jp/book/sp/01/ jqbook/1/03/ index.html <!DOCTYPE html> <html> <head> <meta charset= utf-8 /> <title>jquery test</title> <script src= jquery min.js ></script> <script src= scripts.js ></script> </head> <body> <div id= sample1 > 이 div 를지우고싶다!</div> </body> </html> scripts.js $(function(){ $( #sample1 ).hide(); }); 동일디렉터리에 scripts.js를만들어 script 요소내에쓰여진코드를 scripts.js 쪽으로이동시킨다. 그리고 jquery와동일하게 scripts 요소의 src 속성에 scripts.js를지정한다. 그러면 JavaScript의코드를외부파일에이동시킬수있다. 아주짧은코드라면 HTML 파일안에작성해도문제가없지만, 복수의페이지에공통적으로이용되는코드는외부파일로분리해서그것을읽어들이는편이전송용량이절약된다. 또한관리적인측면에서도외부파일로해두는편이좋은경우가대부분이다. 그러므로기본적으로 JavaScript의코드는별도의파일로만들어두어야한다라고생각하는것이좋겠다. 16 1장.indd 오후 12:02

17 1.2 jquery 를사용하기위한준비 이책에서사용하는기본파일세트 이책에서는빈번하게 HTML, CSS, JavaScript 의코드가나온다. 이것들은다음의 4 개의파일이동일디렉터리에있다고가정하여작성되어있다. index.html styles.css ( 빈텍스트파일 ) jquery min.js (jquery.com으로부터다운로드한것 ) scripts.js ( 빈텍스트파일 ) index.html 의내용은다음과같다. index.html <!DOCTYPE html> <html> <head> <meta charset= utf-8 /> <title>jquery test</title> <link rel= stylesheet type= text/css href= styles.css /> <script src= jquery min.js ></script> <script src= scripts.js ></script> </head> <body> </body> </html> 샘플 Chapter1/2/4/ 데모사이트 gihyo.jp/book/sp/01/ jqbook/1/04/ 이책안에쓰여져있는 HTML은 body 요소안에, JavaScript는모두 scripts.js 안에, CSS는모두 styles.css 안에쓰여져있다라고생각하기바란다. Firebug jquery의기능설명으로이동하기전에 JavaScript 개발시에는반드시언급해도좋을만큼널리사용되고있는 Firebug라는 Firefox의애드온을소개하겠다. 이것이없어도 jquery를작성할수있지만, 이것이있는것과없는것이개발및학습효율에현격한차이를줄수있으므로도입을강력히추천한다. 그럼 Firebug의편리한기능을몇가지소개하겠다. URL Firebug: org/ko/firefox/addon/ firebug/ URL Firefox: ko/firefox/ 17 1장.indd 오후 12:02

CHAPTER 01 _ jquery 를시작해보자 에러의특정 JavaScript를작성할때가장많이고생하는것이에러의특정 ( 特定 ) 이다. 자신이작성한스크립트가동작하지않을때브라우저가반드시정확한에러를반환해준다고확신할수없다. 예를들어, 다음의화면은 Internet Explorer 8이출력한에러다.

18 CHAPTER 01 _ jquery 를시작해보자 에러의특정 JavaScript를작성할때가장많이고생하는것이에러의특정 ( 特定 ) 이다. 자신이작성한스크립트가동작하지않을때브라우저가반드시정확한에러를반환해준다고확신할수없다. 예를들어, 다음의화면은 Internet Explorer 8이출력한에러다. 그림 7 Internet Explorer 8의에러화면 개체가이속성또는메서드를지원하지않습니다 라고되어있다. 하지만이것은좀구체적이지않다. 세미콜론 (;) 이나콤마 (,) 등의기호가좀이상하기만해도이런에러가반환되어지므로어디의무엇이틀렸는지를알수없는경우도종종있다. 이러한때에도 Firebug가인스톨된 Firefox라면다음과같은에러가표시된다. 18 1장.indd 오후 12:02

1.2 jquery 를사용하기위한준비 그림 8 Firebug의에러화면 document.test is not a function 이라는메시지로, 이것이함수가아니라는것을구체적으로알려준다. Firebug를인스톨해두면디버그시간을절약할수있을뿐더러개발을효율적으로진행할수도있다.

19 1.2 jquery 를사용하기위한준비 그림 8 Firebug의에러화면 document.test is not a function 이라는메시지로, 이것이함수가아니라는것을구체적으로알려준다. Firebug를인스톨해두면디버그시간을절약할수있을뿐더러개발을효율적으로진행할수도있다. 콘솔 JavaScript를작성할때어설프게기억하고있던기능에대해간단한코드를작성하여시험해보고싶은일이자주있다. 그러한때에도 Firebug가있으면브라우저의아래에표시되는콘솔에코드를입력하여그자리에서확인이가능하다. 언제나구체적으로알려준다고는보장할수없지만 Internet Explorer 8 보다는좀더구체적으로에러의내용을표시해준다. ( 옮긴이 _ 원서에는 test. errorexample is not a function 이라고되어있으나 IE 8 에서는그림 7 의에러가발생하지않았다. 그러한이유로원서의에러를발생시키기위해내용을수정하였다.) 그림 9 Firebug 콘솔화면 19 1장.indd 오후 12:02

20 CHAPTER 01 _ jquery 를시작해보자 그림 9는 jquery를사용하여 1행의코드를실행시키거나덧셈을실행시키는것을보여주는예다. 윈도우하부에있는입력란에 JavaScript의코드를쓰면결과가곧출력된다. 사람의기억력이라는것이애매한것이기때문에코드의작성법등은곧잊어버리기마련이다. 실제로파일에코드를작성할때조금이라도불안함을느낀다면, 우선콘솔에입력하여동작을확인해보는것도좋을것이다. console.log 1 이책에서는 롤오버 나 툴팁 등의작성법을설명하고있는데, 이런코드들도단번에술술작성한것은아니다. 단계별로생각처럼제대로동작하고있는지, 처리가실행되고있는지를 console.log 를사용하여확인하면서코드를작성하고있다. 코드를작성하고있을때올바른값이대입되었는가, 제대로동작하고있는가를도중에출력해보고싶은경우가있다. 그러한때에편리한것이 console.log다. Firebug 가인스톨되어있다면 JavaScript 내에 console.log( 출력하고싶은내용 ) 을실행하는것만으로콘솔에내용을출력하는것이가능하다. console.log를사용하여조금씩내용을확인하면서코드작성을진행해나가는것은매우중요하다. 1 초보시절에는아마도 JavaScript나 jquery가무엇인지잘알지못하므로조금씩작성해보는것을반복하여에러가발생하지않는지, 이상한동작을하지않는지를확인해가면서작성하게될것이다. 조금이라도의심이난다면 console.log로출력하여확인하면서작성을해나가는것이안전한방법이다. 전체를작성하고나서나중에틀린부분을찾는것은꽤뼈를깎는고통의작업이다. URL FireQuery: binaryage.com/ 2 이책후반부에등장한다. FireQuery Firebug를인스톨한후에는 FireQuery도같이인스톨하도록하자. FireQuery는 Firebug의기능을확장시켜주는플러그인이다. jquery 객체 2 를알기쉽게표시해주거나 jquery에의해설정된이벤트 2 등을알기쉽게표시할수있다. 코드작성이조금더익숙해진후에라도좋으니꼭도입해보길바란다. 20 1장.indd 오후 12:02

1.2 jquery 를사용하기위한준비 칼럼 Google Chrome Developer Tools JavaScript 개발에필수인 Firebug이지만, Google Chrome 에도동일하게개발을도와주는툴이있다. 바로 Google Chrome Developer Tools이다.

log 로출력한결과, 그자리에서작성한코드의출력결과를바로확인할수있다. 이것은 Firebug에서도동일하나 JavaScript 콘솔은 Developer Tools의극히일부다. 페이지내의요소나그요소에적용되어있는스타일을세세하게체크하는것이가능하며, 서버에송신한리퀘스트를상세히확인하는것도가능하다.

21 1.2 jquery 를사용하기위한준비 칼럼 Google Chrome Developer Tools JavaScript 개발에필수인 Firebug이지만, Google Chrome 에도동일하게개발을도와주는툴이있다. 바로 Google Chrome Developer Tools이다. Internet Expoloer 9의개발자툴 Google Chrome Developer Tools Developer Tools는 Google Chrome의설정아이콘을클릭하면표시되는메뉴로부터 [ 도구 ]-[ 자바스크립트콘솔 (J)] 을선택함으로써표시할수있다. 여기서표시되는 JavaScript 콘솔은 Firebug에서설명한것과동일한기능이다. console.log 로출력한결과, 그자리에서작성한코드의출력결과를바로확인할수있다. 이것은 Firebug에서도동일하나 JavaScript 콘솔은 Developer Tools의극히일부다. 페이지내의요소나그요소에적용되어있는스타일을세세하게체크하는것이가능하며, 서버에송신한리퀘스트를상세히확인하는것도가능하다. Firebug는인스톨이필요한데반하여 Google Chrome Developer Tools는처음부터내장되어있으므로손쉽게사용할수있다. 참고로, Safari, Internet Explorer 9, Opera에도동일한기능이처음부터탑재되어있다. 그렇게여러가지를사용할필요는그다지없으나흥미있는사람은조사해보는것도좋으리라생각한다. 이러한개발자용툴은예전부터존재하고있었던것이나, 본격적으로고기능의개발자용툴로등장한것은 Firebug가처음일거라생각한다. JavaScript가널리사용되게되어이러한개발자용툴의수요도높아졌다. 각브라우저벤더들도이를따르도록개발자툴의제공을점차확대시켜나가지금과같은형태로된것이라생각한다. 예전부터 JavaScript를작성했던사람이라면각브라우저에개발자용툴이제공되었다고해도아직은 Firebug의편리함에는이길수없을거라는인상이남아있을것이다. 하지만최근에는 Google Chrome의 Developer Tools가점차편리해지고있다는생각이든다. 필자의경우도 Google Chrome 을메인브라우저로사용하고있는이유도있겠지만, Google Chrome Developer Tools를이용하는일이많아진것같다. Developer Tools 의시작방법은향후버전업에따라바뀔가능성이있다. 21 1장.indd 오후 12:02

22 1장.indd 오후 12:02

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법