Ajax 마스터하기, Part 6: DOM-기반 웹 애플리케이션 구현하기 (한글) :: 에이젝스 일반[SSISO Community]
 
SSISO 카페 SSISO Source SSISO 구직 SSISO 쇼핑몰 SSISO 맛집
추천검색어 : JUnit   Log4j   ajax   spring   struts   struts-config.xml   Synchronized   책정보   Ajax 마스터하기   우측부분

에이젝스 일반
[1]
등록일:2008-04-02 15:17:16 (0%)
작성자:
제목:Ajax 마스터하기, Part 6: DOM-기반 웹 애플리케이션 구현하기 (한글)

DOM과 JavaScript를 결합하여 페이지 리로드 없이 웹 페이지의 사용자 인터페이스 변경하기

developerWorks
문서 옵션

JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다.

이 페이지를 이메일로 보내기

이 페이지를 이메일로 보내기

샘플 코드


제안 및 의견
피드백

난이도 : 중급

Brett McLaughlin, Author and Editor, O'Reilly Media Inc.

2006 년 12 월 12 일

Document Object Model (DOM)와 JavaScript 코드를 결합하여 인터랙티브 Ajax 애플리케이션을 구현해봅시다. 이전 글에서는, DOM 프로그래밍의 개념과 웹 브라우저가 어떻게 웹 페이지를 트리로서 보는지를 설명했습니다. 이제는 DOM에 사용되는 프로그래밍 구조를 이해할 차례입니다. 여러분이 배운 모든 것을 실제로 적용하여, 간단한 웹 페이지를 구현해 봅시다. 웹 페이지의 모든 효과들은 JavaScript를 사용하여 구현됩니다.

Document Object Model 또는 DOM을 소개한 두 개의 기술자료가 있다. 이제는 DOM이 어떻게 작동하는지 잘 알 수 있다. (참고자료) 이 글에서는 우리가 이해한 것을 실행에 옮길 차례이다. 사용자 액션에 기반하여 변하는 사용자 인터페이스를 가진 기본적인 웹 애플리케이션을 개발할 것이다. 물론, DOM을 사용하여 인터페이스도 변경할 것이다. 이 글을 다 마치면, DOM 기술과 개념을 실전에 적용할 정도의 실력을 갖추게 될 것이다.

지난 두 개의 기술자료를 다 읽었을 것이라고 간주하겠다. 그렇지 않다면, 잘 읽어보고 DOM과 웹 브라우저가 HTML과 CSS를 웹 페이지를 나타내는 하나의 트리 구조로 전환하는 방법을 이해하기 바란다. 지금까지, 내가 이야기했던 모든 DOM 원리들은 단순한 DOM 기반 동적 웹 페이지를 구현하는데 사용될 것이다. 이 글을 읽다가 조금이라도 이해가 되지 않는 부분이 있다면 이전 기술자료들을 다시 읽어보기 바란다.

샘플 애플리케이션으로 시작하기

코드에 대하여

DOM과 JavaScript 코드에 집중하기 위해, 인라인 스타일(예를 들어, h1p 엘리먼트에 대한 align 애트리뷰트 같은)로 HTML을 작성했다. 이렇게 하는 것도 좋지만, 시간을 들여서 여러분의 모든 스타일을 여러분이 개발하는 실행 애플리케이션용 외부 CSS 스타일시트에 두기를 권하고 싶다.

매우 기본적인 애플리케이션에 작은 DOM 매직을 추가해 보자. DOM이 폼을 제출하지 않고 웹 페이지 상에서 이동할 수 있다는 것을 유념하고(이것은 Ajax에 확실히 대조되는 부분이다.) 뒤집어진 모자와 Hocus Pocus!라는 레이블 버튼만 보여주는 페이지를 만들어 보자.

첫 HTML

Listing 1은 이 페이지에 대한 HTML이다. 헤딩과 폼을 가진 바디와 단순한 이미지와 누를 수 있는 버튼이 있을 뿐이다.


Listing 1. 샘플 애플리케이션용 HTML
				
<html>
<head>
<title>Magic Hat</title>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>

아래 다운로드 섹션에서는, 이 글에 사용되는 모든 이미지와 HTML이 제공된다. 하지만, 이미지만 다운로드하고, 내가 이 글에서 구현한 애플리케이션 샘플을 보면서 여러분이 직접 HTML을 작성하길 바란다. 이렇게 하면 DOM 코드를 훨씬 더 잘 이해할 수 있을 것이다.

샘플 웹 페이지 보기

여기에는 트릭이 전혀 없다. 페이지를 열면 그림 1과 같은 모습이 보인다.


그림 1. 평범한 모자
A rather boring-looking top hat

HTML의 마지막 포인트

여러분이 기억해야 할 한 가지 중요한 포인트는 Listing 1그림 1의 폼에 있는 버튼이 제출 버튼이 아닌 button 유형이라는 것이다. 제출 버튼을 사용할 경우, 버튼을 누르면 브라우저가 폼을 제출하게 된다. 물론, 이 폼은 어떤 action 애트리뷰트(완전히 의도적인)가 없기 때문에, 이것은 어떤 액티비티도 없는 무한 루프만을 만들게 된다. (직접 실험해 봐도 좋다.) 정상적인 인풋 버튼을 사용하고, 제출 버튼을 피하면, JavaScript 함수를 버튼에 연결하고 폼을 제출하지 않고 브라우저와 인터랙팅 한다.




위로


샘플 애플리케이션에 더 많은 것 추가하기

이제 JavaScript, DOM 조작, 이미지 마법사를 가진 웹 페이지로 꾸며보자.

getElementById() 함수 사용하기

마법사 모자에는 토끼가 빠지면 안되는 법이다. 이 경우, 기존 페이지(그림 1에 있는 이미지를 토끼 이미지(그림 2)로 바꾼다.


그림 2. 똑 같은 모자에 토끼가 생겼다.
The same top hat, this time with a rabbit

DOM에 트릭을 추가하는 첫 번째 단계에는 웹 페이지에 img 엘리먼트를 나타내는 DOM 노드를 찾는 것도 포함된다. 일반적으로, 가장 쉬운 방법은 getElementById() 메소드를 사용하는 것이다. 이는 웹 페이지를 나타내는 document 객체에 대해 사용할 수 있다. 여러분은 전에 이 메소드를 보았다. 다음과 같이 작동한다.

var elementNode = document.getElementById("id-of-element");

HTML에 id 애트리뷰트 추가하기

이것은 매우 기본적인 JavaScript이지만, HTML에서는 몇 가지 작업이 필요하다. id 애트리뷰트를 액세스 하고자 하는 엘리먼트에 추가한다. 이것은 대체하고자 하는 img 엘리먼트이다. (토끼를 포함하고 있는 새로운 이미지이다.) 따라서 Listing 2처럼, HTML을 변경해야 한다.


Listing 2. id 애트리뷰트 추가하기
				

<html>
<head>
<title>Magic Hat</title>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>

페이지를 리로드(reload)하면, 아무런 변화도 볼 수 없다. id 애트리뷰트를 추가한다고 해서 웹 페이지에 시각적인 효과가 생기지 않는다. 하지만, JavaScript와 DOM을 보다 쉽게 사용하여 엘리먼트로 작업할 수 있다.

img 엘리먼트

이제 getElementById()를 쉽게 사용할 수 있다. 원하는 엘리먼트의 아이디인 -- topHat-- 이 생겼고, 새로운 JavaScript 변수에 이것을 저장할 수 있다. Listing 3의 코드를 HTML 페이지에 추가한다.


Listing 3. img 엘리먼트에 액세스 하기
				

<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
}
</script>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>

이 지점에서 웹 페이지를 로딩 또는 재로딩 한다 해도 별다른 차이를 볼 수 없다. 이 이미지에 액세스 하더라도 어던 것도 할 수 없다.




위로


이미지 변경하기: 어려운 길

두 가지 방법으로 변경할 수 있다. 어려운 길과 쉬운 길이 있다. 모든 프로그래머가 그렇겠지만, 쉬운 방법을 선호한다. 하지만, 어려운 방법일 수록 DOM을 연습하는 최상의 방법이다. 우선 어려운 방법으로 이미지를 변경하는 방법부터 살펴보자. 나중에, 더 쉬운 방법으로 같은 작업을 하는 방법도 설명하겠다.

다음은 기존 이미지를 새로운, 토끼가 있는 이미지로 대체하기 위해서는;

  1. 새로운 img 엘리먼트를 만든다.
  2. 부모 엘리먼트에 액세스 한다. 즉, 현재 img 엘리먼트의 컨테이너에 액세스 한다.
  3. 기존 img 엘리먼트 바로 전에 컨테이너의 자식으로서 새로운 img 엘리먼트를 삽입한다.
  4. 이전 img 엘리먼트를 제거한다.
  5. 사용자가 Hocus Pocus! 버튼을 클릭하면 여러분이 만들었던 JavaScript 함수가 호출될 수 있도록 설정한다.

새로운 img 엘리먼트 만들기

여러분도 기억하겠지만, DOM의 핵심은 document 객체이다. 이것은 전체 웹 페이지를 나타내고, getElementById() 같은 강력한 메소드로 액세스 할 수 있도록 해주며, 새로운 노드를 만들 수 있도록 한다. 이것이 바로 지금 사용 할 마지막 속성이다.

새로운 img 엘리먼트를 만들어야 한다. 돔에서, 모든 것은 노드이지만, 노드들은 세 개의 기본적인 그룹으로 나뉜다:

  • 엘리먼트
  • 애트리뷰트
  • 텍스트 노드

다른 그룹들도 있지만 이 세 가지가 99퍼센트를 차지한다. 이 경우, img 유형의 새로운 엘리먼트가 필요하다. 따라서, JavaScript에 이 코드가 필요하다:

var newImage = document.createElement("img");

이것은 img라는 엘리먼트 이름을 가진 element 유형의 새로운 노드를 만든다. HTML에서는 다음과 같은 것이 된다:

<img />

DOM은 잘 구성된 HTML을 만들 것이고, 엘리먼트는 시작 태그와 엔딩 태그와 함께, 현재 비어있다. 이 엘리먼트에 콘텐트와 애트리뷰트를 추가하고, 이를 웹 페이지에 삽입한다.

콘텐트의 경우, img 엘리먼트는 빈 엘리먼트이다. 하지만 애트리뷰트를 추가해야 한다: src 애트리뷰트는 로딩 할 이미지를 지정한다. 여기에서 addAttribute() 같은 메소드를 사용해야 한다고 생각하겠지만, 틀렸다. DOM 스팩 작성자는, 프로그래머들은 지름길(shortcut)을 좋아한다고 생각했기 때문에, 새로운 애트리뷰트를 추가하고 기존 애트리뷰트의 값을 변경할 수 있는 하나의 메소드인 setAttribute()를 만들었다.

setAttribute()를 호출하고 기존 애트리뷰트를 제공한다면, 값은 여러분이 제공한 값으로 변한다. 하지만, setAttribute()를 호출하고 존재하지 않는 애트리뷰트를 제공하면, DOM은 여러분이 제공한 값을 사용하여 애트리뷰트를 추가한다. 한 가지 메소드로 두 가지 목적을 달성했다. 따라서, 다음을 JavaScript에 추가해야 한다.

var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");

이것은 이미지를 만들고, 소스를 알맞게 설정한다. 이제 여러분의 HTML은 Listing 4와 같을 것이다.


Listing 4. DOM을 사용하여 새로운 이미지 만들기
				
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
}
</script>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>

이 페이지를 로딩할 수 있지만, 어떤 액션도 기대할 수는 없다. 실제 웹 페이지에 효과를 줄 어떤 것도 수행하지 않았다. step 5를 돌아보면, JavaScript 함수가 아직 호출되지도 않았다는 것을 알 수 있다.

원래 이미지의 부모에 액세스 하기

이 미지를 삽입할 준비가 되었으니, 이를 어딘가에는 삽입해야 한다. 하지만, 기존 이미지에 삽입하지 않는다. 대신, 이것을 기존 이미지 앞에 두고, 기존 이미지를 제거한다. 이렇게 하려면, 기존 이미지의 부모가 필요하다. 이는 삽입과 제거의 핵심이다.

DOM 은 웹 페이지를 노드의 계층인 트리로 간주한다. 모든 노드는 부모를 갖고 있고, 부모에는 자식 노드들이 있다. 이 이미지의 경우, 어떤 자식들도 없다. 이미지가 비어있는 엘리먼트라는 것을 기억하는가? 하지만 확실히 부모는 있다. 부모가 어떤 것인지에 대해서 신경 쓰지 않는다. 다만 여기에 액세스 할 뿐이다.

이렇게 하려면 모든 DOM 노드가 갖고 있는 parentNode속성을 사용한다:

var imgParent = hatImage.parentNode;

아주 간단하다. 부모는 자식들을 가질 수 있다는 것을 알고 있다. 이미 하나를 갖고 있다. 바로 기존 이미지이다. 부모가 div 인지 p 인지, 또는 페이지의 body 인지 알 필요가 없다; 전혀 문제가 되지 않는다!

새로운 이미지 삽입하기

오랜 이미지의 부모가 있으므로, 새로운 이미지를 삽입할 수 있다. 매우 쉽다. 자식을 추가 할 여러 메소드를 사용할 수 있기 때문이다:

  • insertBefore(newNode, oldNode)
  • appendChild(newNode)

오래된 이미지가 있는 곳에 새로운 이미지가 나타나도록 할 것이기 때문에 insertBefore()가 필요하다. (removeChild() 메소드도 사용해야 한다.) 다음은 기존 이미지 앞에 새로운 이미지 엘리먼트를 사용할 JavaScript 라인이다:

var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);

오래된 이미지의 부모는 두 개의 자식 이미지를 갖고 있다: 새로운 이미지 바로 다음에 오랜 이미지가 따라온다. 이러한 이미지들 주위에 있는 콘텐트는 변하지 않고, 콘텐트의 순서는 삽입되기 전과 똑같다. 이제 부모는 오랜 이미지 바로 앞에 새로운 이미지를 더 갖게 된다.

오랜 이미지 제거하기

이제 제거해야 하는 것은 오랜 이미지이다. 웹 페이지에 새로운 이미지만 필요하다. 이 샘플에서, 이미 오랜 이미지 엘리먼트의 부모가 있다. removeChild()를 호출하고 제거하기 원하는 노드로 전달한다:

var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
imgParent.removeChild(hatImage);

여기에서, 오랜 이미지를 새로운 이미지로 대체해야 한다. HTML은 Listing 5처럼 된다.


Listing 5. 오랜 이미지를 새로운 이미지로 대체하기
				

<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
imgParent.removeChild(hatImage);
}
</script>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>

JavaScript 연결하기

마지막 단계이자, 가장 쉬운 단계는 HTML 폼을 여러분이 작성한 JavaScript 함수로 연결하는 것이다. 사용자가 Hocus Pocus! 버튼을 클릭할 때마다 실행 될 showRabbit() 함수가 필요하다. onClick 이벤트 핸들러를 HTML에 추가한다:

<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />

JavaScript 프로그래밍에서, 이는 매우 일상적인 일이다. 이것을 HTML 페이지에 추가하고, 페이지를 저장하고, 페이지를 웹 브라우저로 로딩한다. 이 페이지는 처음에는 그림 1처럼 보인다; Hocus Pocus!를 클릭하면 그림 3과 같이 된다.


그림 3. 토끼가 등장하다!
The rabbit has come out to play



위로


이미지 변경하기: 보다 쉬운 방법

이미지를 변경할 때 여러 가지 방법을 사용할 수 있다고 배웠다. replaceNode() 메소드를 사용하여 하나의 노드를 다른 노드로 대체할 수 있다. 다음과 같은 순서로 실행한다:

  1. 새로운 img 엘리먼트를 만든다.
  2. 부모 엘리먼트에 액세스 한다. 현재 img 엘리먼트의 컨테이너에 액세스 한다.
  3. 기존 img 엘리먼트 바로 전에 컨테이너의 자식으로서 새로운 img 엘리먼트를 삽입한다.
  4. 이전 img 엘리먼트를 제거한다.
  5. 사용자가 Hocus Pocus! 버튼을 클릭하면 여러분이 만들었던 JavaScript 함수가 호출될 수 있도록 설정한다.

replaceNode()를 사용하면, 위 단계들을 줄일 수 있다. 3단계와 4 단계를 통합하여 다음과 같이 수행한다.

  1. 새로운 img 엘리먼트를 만든다.
  2. 부모 엘리먼트에 액세스 한다. 현재 img 엘리먼트의 컨테이너에 액세스 한다.
  3. 오랜 img 엘리먼트를 새로운 것으로 대체한다.
  4. 사용자가 Hocus Pocus! 버튼을 클릭하면 여러분이 만들었던 JavaScript 함수가 호출될 수 있도록 설정한다.

대단한 것 같지는 않지만, 코드가 확실히 간단해 졌다. Listing 6은 변경 방법이다: insertBefore()removeChild() 메소드 호출을 제거했다.


Listing 6. 오랜 이미지를 새로운 이미지로 대체하기
				

<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
var imgParent = hatImage.parentNode;
imgParent.replaceChild(newImage, hatImage);
}
</script>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />
</p>
</form>
</body>
</html>

큰 변화가 없어 보이지만, DOM 코딩에서는 다소 중요한 포인트이다. 여러분은 주어진 태스크를 수행할 때 몇 가지 방법을 모색한다. DOM 메소드를 신중히 검토한다면, 네 개 또는 다섯 단계를 두 단계 또는 세 단계로 줄일 수 있다.




위로


이미지 변경하기: 가장 쉬운 방법

태스크를 수행하는데 더 쉬운 방법은 늘 있다고 말해왔기 때문에, 이제는 이미지를 변경하는 가장 쉬운 방법을 설명하겠다. 어떤 방법일지 알 수 있겠는가? 힌트는 애트리뷰트이다.

이미지 엘리먼트는 src 애트리뷰트로 제어된다. 이는 어딘가에 있는(로컬 URI 또는 외부 URL) 파일을 참조한다. 지금까지, 이미지 노드를 새로운 이미지로 대체했다. 하지만, 기존 이미지의 src 애트리뷰트를 변경하는 것이 훨씬 쉬운 방법이다! 새로운 노드를 만들고, 부모를 찾고, 오랜 노드를 대체하는 작업을 한 단계로 줄인다:

hatImage.setAttribute("src", "rabbit-hat.gif");

이것이 끝이다. Listing 7에서, 전체 웹 페이지의 정황에서 이 해법을 볼 수 있다.


Listing 7. src 애트리뷰트 변경하기
				

<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
}
</script>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />
</p>
</form>
</body>
</html>

이것은 DOM의 가장 훌륭한 측면이다. 애트리뷰트를 업데이트 할 때, 웹 페이지도 즉시 변한다. 이미지가 새로운 파일을 가리키면, 브라우저는 그 파일을 로딩하고, 페이지가 업데이트 된다. 리로딩이 필요 없고, 새로운 이미지 엘리먼트를 만들 필요가 없다. 결과는 그림 3과 동일하다. -- 단지 코드만 단순해졌을 뿐이다.




위로


토끼 숨기기

현재, 웹 페이지는 너무 단순하고 엉성하다. 토끼가 모자에서 나왔지만, 스크린 밑에 있는 버튼은 여전히 Hocus Pocus!이다. 토끼가 나왔는데도 showRabbit()을 호출하는 형국이다. 토끼가 나온 후에도 버튼을 클릭하면, 프로세싱 시간만 낭비하는 것이다. 이것은 불필요한 것이다. DOM을 사용하면. 토끼가 안에 있거나 밖으로 나왔을 경우 유용한 버튼을 만들 수 있다.

버튼 레이블 변경하기

가 장 쉬운 방법은 사용자가 클릭을 한 후에 버튼의 레이블을 변경하는 것이다. 이렇게 한다고 해서, 더 이상의 마법이 발생하지 않는 것은 아니다. 웹 페이지에서 발생할 수 있는 최악의 상황은 정확하지 않은 어떤 것을 삽입하는 것이다. 버튼 레이블을 변경하기 전에, 노드에 액세스 해야 한다. 그 이전에, 버튼을 참조할 ID가 필요하다. 그것이 바로 오랜 모자이다. Listing 8은 버튼에 id 애트리뷰트를 추가하는 모습이다.


Listing 8. id 애트리뷰트 추가하기
				

<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
}
</script>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" id="hocusPocus"
onClick="showRabbit();" />
</p>
</form>
</body>
</html>

JavaScript의 버튼에 액세스 하는 것은 쉽다:

function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
var button = document.getElementById("hocusPocus");
}

물론, JavaScript의 다음 라인에 버튼 레이블의 값을 변경하기 위해 타이핑을 했을 것이다. setAttribute()가 작동한다:

function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Get back in that hat!");
}

이렇게 간단한 DOM 조작으로, 버튼의 레이블은 토끼가 나타나자마자 변한다. HTML과 완료된 showRabbit() 함수는 Listing 9처럼 보인다.


Listing 9. 완료된 웹 페이지
				

<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
button.setAttribute("value", "Get back in that hat!");
}
</script>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" id="hocusPocus"
onClick="showRabbit();" />
</p>
</form>
</body>
</html>

토끼를 다시 집어넣기

새로운 버튼 레이블을 보면 알겠지만, 토끼를 다시 모자 속으로 집어넣어야 한다. 토끼를 나타내게 했던 프로세스를 거꾸로 실행하면 된다. 이미지의 src 애트리뷰트를 오랜 이미지로 바꾼다. 새로운 JavaScript 함수를 만들어야 한다:

function hideRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "topHat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Hocus Pocus!");
}

showRabbit() 함수가 했던 모든 것을 역으로 하면 된다. 이미지를 토끼가 없었던 모자 이미지로 설정하고, 버튼을 그랩(grab)하고, 레이블을 다시 Hocus Pocus!로 바꾼다.




위로


이벤트 핸들러 다루기

샘플 애플리케이션에 한 가지 큰 문제가 생겼다. 버튼 레이블이 변하더라도, 버튼을 클릭할 때 발생하는 액션은 변하지 않았다. 다행히, DOM을 사용하면 사용자가 버튼을 클릭할 때, 이벤트(발생하는 액션)를 변경할 수 있다. 버튼이 Get back in that hat!,을 읽으면, 클릭될 때 hideRabbit()을 실행한다. 토끼가 숨겨지면, 버튼은 showRabbit()을 실행하는 것으로 리턴된다.

addEventHandler() 피하기

onclick 속성 이외에도, onClick이나 onBlur 같은 이벤트 핸들러를 추가하는데 사용되는 메소드가 있다; 바로 addEventHandler()이 다. 하지만, Microsoft™ Internet Explorer™는 이 메소드를 지원하지 않으므로, JavaScript에서 이를 사용한다면, 수많은 Internet Explorer 사용자들은 에러 밖에 얻을 것이 없다. 이 메소드를 사용하지 않도록 한다. 이 글에서는 이 방식으로 같은 결과를 얻을 수 있지만, Internet Explorer에서는 그럴 수 없다.

HTML을 보면, 여기에서 여러분이 다루는 이벤트가 onClick이라는 것을 알 수 있다. JavaScript에서, 이 이벤트는 버튼의 onclick 속성을 사용하여 이벤트를 참조할 수 있다. (HTML에서, 이 속성은 onClick으로 참조된다. 대문자 C라는 것을 주목하라. JavaScript에서는 소문자 c를 사용한 onclick 이다.) 따라서, 버튼에 대해 실행되는 이벤트를 변경할 수 있다: 새로운 함수를 onclick 속성으로 할당하면 된다.

onclick 속성에는 함수의 스트링 이름이 아닌 함수 레퍼런스가 입력되어야 한다. 하지만 함수 자체에 대한 레퍼런스이다. JavaScript에서는 함수를 괄호가 없는 이름으로 참조할 수 있다. 따라서 버튼이 클릭될 때 실행되는 함수를 다음과 같이 변경할 수 있다:

button.onclick = myFunction;

HTML에서, 변경은 매우 단순하다. Listing 10에서, 버튼 실행 함수를 보자.


Listing 10. 버튼의 onClick 함수 변경하기
				

<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Get back in that hat!");
button.onclick = hideRabbit;
}

function hideRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "topHat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Hocus Pocus!");
button.onclick = showRabbit;
}
</script>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" id="hocusPocus"
onClick="showRabbit();" />
</p>
</form>
</body>
</html>

이제 DOM 애플리케이션이 완성되었다. 직접 시험해 보기 바란다!




위로


맺음말

소셜 북마크

mar.gar.in mar.gar.in
digg Digg
del.icio.us del.icio.us
Slashdot Slashdot

이제는 DOM에 어느 정도 익숙해 졌으리라 믿는다. 이전 글에서는, DOM의 기본적인 개념과 API에 대해 설명했다. 오늘은 단순한 DOM 기반 애플리케이션을 설명했다. 이 글을 다시 복습하기 바란다.

이 것으로 본 시리즈에서 Document Object Model을 다루는 일은 더 이상 없겠지만, 여러분의 임무는 끝나지 않았다. 사실, 여러분은 DOM을 사용하지 않고 Ajax와 JavaScript로 훨씬 더 많은 작업을 해야 할 상황에 처하게 될 것이다. 복잡한 하이라이팅과 움직임 효과를 만들든지, 텍스트 블록이나 이미지로 작업하든지 간에, DOM 방식을 사용하면 매우 쉽게 수행할 수 있다.

DOM을 사용하는 것이 아직 어색하다면, 세 개의 기술자료들을 복습하기 바란다. 나머지 기술자료에서는 DOM에 대해서는 자세히 설명하지 않을 것이다. DOM을 사용하고, DOM 기반 애플리케이션을 직접 작성해보면 여러분도 데이터 포맷에 좀더 익숙해 질 것이다.

기사의 원문보기





위로


다운로드 하십시오

설명이름크기다운로드 방식
Example graphics onlywa-ajaxintro6/ajax_6-images_download.zip91 KBHTTP
Complete example, including HTML and graphicswa-ajaxintro6/ajax_6-complete_examples.zip93 KBHTTP
다운로드 방식에 대한 정보


참고자료

교육

제품 및 기술 얻기

토론


필자소개

Photo of Brett McLaughlin

Nextel Communications에서는 복잡한 엔터프라이즈 시스템을 구현했고, Lutris Technologies에서는 애플리케이션 서버를 개발했다. O'Reilly Media에서는 기고 및 편집 활동을 하고 있다. 베스트 셀러 작가인 Eric과 Beth Freeman과 공동 집필한 Head Rush Ajax는 Ajax에 혁신적인 Head First 방식을 취하고 있다. 그의 신간 Java 1.5 Tiger: A Developer's Notebook은 최신 자바 버전을 다룬 첫 번째 책이며, 그의 고전 Java and XML은 자바 언어에서 XML을 사용하는 방법에 대한 바이블로 통하고 있다.

[본문링크] Ajax 마스터하기, Part 6: DOM-기반 웹 애플리케이션 구현하기 (한글)
[1]
코멘트(이글의 트랙백 주소:/cafe/tb_receive.php?no=7080
작성자
비밀번호

 

SSISOCommunity

[이전]

Copyright byCopyright ⓒ2005, SSISO Community All Rights Reserved.