John Resig 이 소개하는 jQuery 사용법에 대해서 알아보겠습니다. 튜토리얼의 처음인데요. 친절히 레식아저씨께서 적어 주셨네요.
jQuery.com의 GETTING STARTED 메뉴의 How jQuery Works(바로가기) 메뉴입니다.
내용이 좀 길어질수도 있겠네요. 좀 지루하실수도 있겠지만 jQuery 를 사용하기 위한 아주 기초적인 약속에 대해 보실 수 있는 부분이니 잘 보시면 나중에 분명 도움이 되실 것 같습니다.
jQuery: The Basics
Basic의 발음이 베이식인거 알고들 계신가요? 베이직이 아닌 베이식이더라구요. 어떨때는 제가 아는 모든게 다 잘못되어 있을 수도 있겠다라는 생각이 들곤 합니다. ^^;; 자~ 베이직이든 베이식이든 우리 말로 하면 기본이 됩니다. jQuery 기본에 대해서 John Resig이 뭐라 했는지 보시겠습니다. 참고로 여기에 나온 모든 코드는 jQuery.com의 코드임을 말씀드립니다.
HTML 문서를 하나 만들어 보겠습니다. 저는 D 드라이브에 jQuery 라는 폴더를 만들어서 관리하려 합니다. 제 작업경로는 D:\jQuery\00.The Basics 입니다. 이 경로에 basic.html 파일을 만들어서 아래 소스를 넣겠습니다. 물론 경로는 아무렇게나 하셔도 상관없습니다. 단, 소스상에서 경로를 꼭 맞춰주셔야 하는 부분도 있으니 염두에 두시길 바라겠습니다. html 파일에 들어갈 내용입니다.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Launching Code on Document Ready : 문서가 로딩되면 코드 실행하기
4라인을 보시면 jquery.js가 있습니다. Downloading jQuery 에서 다운받으셔서 반드시 basic.html 파일과 같은 폴더안에 넣어주세요. 사실 CDN을 사용하면 다운받을 필요는 없습니다. 하지만 레식 아저씨가 하라고 하니 한번 해보죠. 저는 jquery-1.4.4.js Uncompressed 버젼을 다운 받았습니다. 다운받은 파일명을 jquery.js 로 변경하신 후 basic.html 과 같은 폴더에 저장하시면 됩니다.
실행시켜 보시면 아래와 같이 경고창이 뜹니다. javascript 때문인데요. 간단하게 컨텐츠 허용을 해주시기 바랍니다.
basic.html 7라인에 아래 코드를 적어 넣습니다.
window.onload = function(){ alert("welcome"); }
basic.html 을 새로고침 하면 welcome이라는 경고창이 나옵니다. alert 창이죠. 이 부분은 클래식 javascript 로 익스플로러가 onload 즉, 열렸으면 welcome이라고 적힌 경고창을 띄워라라는 구문입니다.
그런데 이 window.onload 라는 함수는 우리가 예상한대로 움직이지 않을 수도 있다고 John Resig 이 얘기하네요. 페이지에 이미지가 많거나 로딩이 원활이 되지 않으면 우리는 welcome이라는 경고창을 볼 수 없을지도 모른다고도 얘기하고 있습니다. 사실 이런 경우가 많지는 않습니다만 window.onload 가 그리 좋은 코드가 아닌 것은 분명합니다. 개발자가 의도한 대로 움직이지 않는 경우가 많이 있죠. 그래서 jQuery에서는 ready 라는 메소드를 제공한다고 하네요.
$(document).ready(function(){
// Your code here
});
위의 코드는 window.onload 와 같은 역할을 합니다. 단, 이미지가 모두 표시되지(로드되지) 않았다고 해도 ready 함수가 호출이 됩니다. window.onload 보다는 더 빨리 실행될 수 있겠네요. 이 함수를 이용한 코드를 보시겠습니다.
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
자바스크립트를 잘 모르시는 분이시면 어려울 수도 있습니다. 위에 있는 html 코드를 보면 11라인에 A 태그가 있습니다. 문서가 읽혀진 다음에는 문서상에 A 태그를 click하면 발생할 일이 정의해 놓은 구문입니다. 즉 jQuery를 클릭하시면 영어로 길게 표시되는 경고창을 보실 수 있습니다.
그런데 조금 이상합니다. 11라인의 A 태그에는 분명 http://jquery.com 으로 이동되는 href 값이 있습니다. 링크를 클릭해 보시면 나오는 경고창의 메시지는 "만약 이 경고문을 봤다면, jquery.com 으로 이동되지 않습니다."라는 표현이었네요. 이게 가능한 이유는 event.preventDefault() 구문 때문입니다. 이 구문은 해당 객체의 기본적인 이벤트 발생을 막는 역할을 합니다. 즉, A 태그와 같은 경우는 링크 이동이 되는 이벤트를 막아 버리는 것이죠. 이 구문을 주석처리 하시면 경고창이 뜬 후에 jquey.com으로 이동되는 것을 보실 수 있습니다.
Complete Example - 완성된 basic.html 파일 보기
완성된 코드를 보시겠습니다. 이 코드의 5라인의 jQuery 호출부를 보시면 기존하고 다른 것을 아실 수 있습니다. 즉, Google CDN을 통해 jQuery를 호출하고 있네요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
미리보기 1 [새로고침]
Adding and Removing an HTML Class
이 부분은 HTML 태그에 Style 의 Class 을 동적으로 부여/삭제 하는 방법에 대해서 간략히 기술되어 있습니다. 스크립트를 추가하기 전에 아래 문구를 해당 라인에 추가하도록 하겠습니다.
<STYLE type=text/css> a.test { font-weight: bold; }</STYLE>
스타일시트에 대해 잘 모르셔도 그냥 진행하시겠습니다. 이 구문의 뜻은 문자를 진하게 표시하라는 내용입니다. 자 ready 함수안의 내용을 아래와 같이 바꾸겠습니다.
$(document).ready(function(){
$("a").click(function(event){
$("a").addClass("test");
});
});
미리보기 2 [새로고침]
jQuery 를 클릭하시면 문자가 진하게 표시되는 것을 보실 수 있습니다. 이번에는 9라인을 $("a").removeClass("test"); 라고 수정해보겠습니다. 그리고 17라인의 A 태그를 <a href="http://jquery.com" class="test">jQuery<a>라고 수정하겠습니다. 화면을 새로고침 하시면 jQuery라는 글자가 굵게 표현되어 있는 것을 보실 수 있을겁니다. 이번에 클릭을 하시면 진한 글씨게 평범한 글씨체로 바뀝니다.
미리보기 3 [새로고침]
addClass 와 removeClass 함수로 특정한 곳에 스타일을 부여/삭제 할수가 있네요. 그냥 아~ 그렇구나 정도로만 넘어가시면 되겠습니다.
Special Effects : 특별한 효과내기
ready 함수안의 내용을 다음과 같이 바꿉니다.
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
미리보기 4 [새로고침]
jQuery 를 클릭해 보세요. 아주 멋지게 사라지는 것을 보실 수 있습니다. ^^;; 이런 부분이 잘 짜여진 라이브러리를 사용하는 가장 주된 이유중의 하나일 겁니다. 단 몇줄로 이 기능을 구현한 것처럼 보이지 않습니까? 사실 이런걸 직접 구현하려면 무지 길고 무지 시간이 오래 걸립니다. 다시한번 jQuery 팀에게 박수를~~ 짝짝
Callback and Functions
콜백함수는 나중에 AJAX 함수를 다룰 때 같이 설명드리는 걸로 하겠습니다. 조금 어려울 수도 있습니다. 지금 딱히 필요한 부분도 아니구요.
음. 이렇게 John Resig 아저씨의 jQuery 사용하기 튜토리얼을 보았습니다. 그리 어렵지 않습니다. 그냥 한번 쭉 훑어 보시면 되겠습니다.
이번에는 내용이 좀 길어져 버렸습니다. 긴 포스트는 스크롤 압박으로 전혀 읽혀지지 않는데요 ^^;; 큰일입니다. 그래도 어떤분은 필요하실 수 있으니까요. 다음 내용을 준비해서 빠른 시간안에 돌아오겠습니다.~~
그럼 즐프하세요.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery 쉽게하기 - 기본부터 시작하자, string 편 (13) | 2011.01.14 |
|---|---|
| jQuery 쉽게하기 - 파이어폭스의 파어어버그 사용하여 디버깅하기 (6) | 2011.01.14 |
| jQuery 쉽게하기 - 다른 라이브러리와 같이 쓰기 (12) | 2011.01.13 |
| jQuery 쉽게하기 - 자주 묻는 질문과 답변, 두번째 (11) | 2011.01.13 |
| jQuery 쉽게하기 - 자주 묻는 질문과 답변, 그 첫번째 (11) | 2011.01.12 |
| jQuery 쉽게하기 - jQuery 를 다운받아 보자. (12) | 2011.01.10 |
| jQuery 쉽게하기 - Documentation 의 Main Page (13) | 2011.01.10 |
| JQuery 쉽게하기 - 시작하기에 앞서 (35) | 2011.01.06 |
