수안이의 컴퓨터 연구실

웹 개발은 비베 스크립트를 쥐는 자가 평정합니다. - 조준철

몇 년전부터 MS에서 발표하는 제품이나 기술을 보면 갑작스런 많은 변화를 보이고 있다는걸 알 수 있습니다. 공식적인 표준이 발표되고, 시장성이 있다고 판단되면 언제나 OS를 가지고 있는 우위를 이용해 그것을 독자적으로 커스텀해서 자사 전용 표준을 새로 만든 다

음 시장을 선점해오던 옛 방식을 벗어나(아주 맘에드는 방법이었죠) 향후 공개적인 웹과 인터넷으로 개발되어지는 웹 어플리케이션이 대세이면서, OS를 가지고 있다는 우위가 별 소용이 없는 분야인것을 깨닫았는지, 추후 웹에 관련된 기술만큼은 W3C 표준 방식을 적

극 지원하고, 조금은 속보이지만 C#언어를 공식 표준으로 W3C에 제안하는 등, 계속적으로 변화하는 새로운 트랜드에 맞춰서 개발자들이 따라가기 조차 힘들정도로 작업 환경(Tool, Framework)이나 기술의 변화에 능동적으로 대처해가고 있는건 참 바람직 하게 보입니다.

그에 따라 MS제품들이 똑같은 업무나 다양한 목표를 지향 할지라도 .NET을 중심으로한 각 클라이언트/서버 제품군들을 이용함으로써 각각의 다양한 기술로도 고객이 원하는 기능을 만들 수 있도록 개발되는것을 볼 수가 있고, 어찌보면 MS사에 마지막 사활이 걸린듯이 유례없는 .NET에 대한 전폭적인 지원으로 .NET 전략에 대한 인식이 점점 개발자에서 일반인들에게 대중적으로 널리 알려지게 되었으며, 그에 비례해 많은 자료들도 같이 쏟아져 나오고 있습니다.

변화하는 신기술들의 꾸준한 버전업이 이루어지는 상황에서 적응하기도 정신없는 이 땅의 젊은 웹 개발자들에게 비베 스크립트를 다시 논 한다는건 의미없다고 생각할 수도 있겠지만! 3가지 의미에서 다시 논 할 필요가 있습니다.

첫째로 웹 개발에서 가장 중요한 요소를 꼽으라면 그중에서 단연 웹 브라우저상에서 실행되는 비베 스크립트라고 할 수 있고, 지난 3년간 경쟁 브라우저의 부재로 익스플로어 6.0대로 업그레이드 한번 없다가 차후 롱혼에 내장되어 출시 되어질 익스플로어 7.0에서 기술이 어떻게 변화할지 모르지만 (그러한 소문이 무성하죠), 아직까지 MS 익스플로어 웹 브라우저상에서 데이터와 HTML을 효과적으로 제어하기위한 기술의 중심은 스크립트, 그것도 비베 스크립트 와 XML이기 때문에 MS 제품군을 이용한 웹 어플리케이션을 개발 한

다면 그에 대한 기초적인 이론부터 공부를 해야 합니다.

둘째는 실제로 국내에서는 ASP.NET으로 개발된 사이트로 ASP나 JSP만큼 구축 된 곳이 아직 많지 않습니다. 금융권이나 포탈사이트 그리고 많은 SI 업체와 웹 에이전시에서 계속 연구하며 적용하는 사례가 많다고는 하지만, 개인적으로는 대부분 겉만 닷넷이지 안은

레거시와 같은 포장만 그럴싸한 제품이 대부분이었다고 생각됩니다.

이렇게 ASP나 그외 언어로 시장에 수용되었던 기간에 비한다면 상당히 더딘 점이 있는 건 분명하고, 그만큼 .NET 이라는 기술이 MS가 쉽게 예기하는 것처럼 쉽지만은 않다는 반증을  보여준다고 생각되는 부분이죠.

마지막으로 셋째는 이미 존재하는 다른 기술들을 가지고도(MS기술도 포함), 아직까지는 고객의 요구사항이나 제시되는 트랜드를 충분히 구현 할 수 있기 때문에, 가뜩이나 요즘 경기침체로 인해 한푼이 아쉬운  대부분 IT 중소업체들이 굳이 비싼 돈을 치뤄가며, 보장

할 수 없는 미래에 모험을 하고 싶지 않는 것인지도 모릅니다.

(예를 들면 오피스 2003의기능을 완벽하게 활용하려면 클라이언트에서 서버까지 제품군 전체를 새로운 버전으로 바꿔 버려야 합니다)

그래서 국내 회사에서 근무하는 대부분의 MS 계열 개발자들이 .NET을 마이그레이션하기에는 회사입장에서 이러한 기술에 대한 관심이 우선순위로 되지 않으면 현실적으로나 문화적으로 연구개발을 할수 있는 분위기가 정착되기 어렵다는 판단하에 있다는 생각입니

다. 하지만 몇몇 고급개발자분 들은 말합니다.

"그러한 기업입장은 충분히 맞는 것이며, 당연한 논리라고 생각한다. 하지만 그것을 이유로 새로운 기술 습득을 미룬다면그건 개인적인 변명밖에 되지 않는다. 회사가 개인의 인생을 책임질거라 생각하는가?" - 몇몇 고급개발자분

냉정하지만 당연하기에 수많은 개발자들은 끊임없이 연구에 연구를 거듭해서 시대의 흐름에 따라가려고 노력하고 조금만 시간이 지난 기술들은 쉽게 기억에서 잊혀지는 분위기가 자연스럽게 형성되버리고 말았는데, 아마도 그중의 하나인 기술이 비베 스크립트가 아닐

까 합니다, 비베 스크립트로 할 수 있는게 워낙 한정적이라고 말하지만, 실제로는 비베 스크립트를 마음대로 다룰줄만 알면 웹 개발분야뿐만이 아니라 OS관련 어플리케이션까지 전천후로 개발할 수 있기 때문에 웹 분야 만큼은 파워 풀한 기능이 많습니다.

개인적으로 정확하게 표현하면 비베 스크립트를 쥐는 자가 웹을 평정한다라고 할 수 있죠.

하지만 비베 스크립트는 간단하며, 사용하기 쉽고, 제약이 많다는 것(웹이라는 기본적인 제약과 J스크립트보다도 언어상의 제약도 많습니다)을 부정할 수는 없기 때문에 고급 개발자들은 웹 개발시 비베 스크립트 보다도 J스크립트를 많이 선호하게 되었고, 실제 MS 웹

사이트에서도 비베 스크립트는 주로 업무용을 포커스를 맞추어 개발하기 쉬운언어이며, J스크립트는 자바 문법을 기초로 동적이며, 화려한 기능을 개발하기에 적합한 언어라고 컨셉과 언어상에 대한 이점에 대해 잘 설명하고 있습니다.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnclinic/html/vbsvjs.asp

얼핏 보면 비베 스크립트는 자바 스크립트에 비해 표현하는 능력이나 성능에서도 뒤 떨어지지만 그럼에도 불구하고 굳이 비베 스크립트를 익혀야 하는 분명한 이유가 있습니다.

1> J스크립트는 웹에 최적화 되었으며, 유지보수가 힘들다.

MSDN에서도 나와 있듯이 동적인 웹 사이트 개발하는 데 유리하다고 나와 있습니다. 스크립트는 웹 브라우저상뿐만 아니라 OS기반이에서도 충분히 역할을 수행할 수 있는 기술이지요. 웹 브라우저를 떠나 OS기반 스크립트 개발시 J스크립트는 업무용으로 개발된 비베

스크립트 보다 효율성이 많이 떨어지며, 유지보수성도 떨어지고, 그 만큼 소스코드를 분석하기가 매우 어렵다는걸 알 수있습니다.

그것은 웹이라해서 크게 다르지 않은데 이를테면 마이크로소프트의 MSDN TOC 메뉴(http://msdn.microsoft.com/library/default.asp)도 J스크립트로 개발되었으며 이 소스를 분석해보면 감탄할 만큼 어렵습니다. 그렇다고 비베 스크립트로 이 TOC를 만드는 것이 불가능한것도 아닙니다.

2> 비베 스크립트는 누구나 쉽게 접근 할 수 있다.

비베 스크립트는 실제 스펙상에도 몇십페이지 정도 분량밖에 되지 않을정도로 간단한 문법과 기능을 가지고 있습니다. 그만큼 쉽기 때문에 로직을 이해하기도 편하며, 언어와 기능상의 제약을 넘어서기 위해 대안으로 각종 COM Interop을 손쉽게 할 수 있습니다.

3> 비베 스크립트는 하나를 알면 열은 안다.

비베 스크립트는 특성상 비베에 기반을 두고 있는 모든 기술을 사용할 때도 쉽분 활용 할 수 있습니다.(VBScript, ASP, VB, T-SQL, VB.NET)

4> 다양한 기반에 사용되는 스크립트라도 그대로 적용가능하다.

일반적으로 개발자가 만드는 모든 스크립트는 WSH (Window Script Host)라는 하나의 실행 엔진을 사용하고 있습니다.

즉 웹 브라우저 상에서 실행되거나 IIS 상에서 구동되거나, OS 상에서 구동되는 모든 스크립트는 하나의 실행엔진을 사용하기 때문에 문법상에서는 100% 호환이 가능합니다.

스크립트만으로 로컬컴퓨터는 물론 원격지에 있는 컴퓨터의 자원에도 네트웍으로 Admin권한으로 접근할 수 있으며, 그만큼 다양한 분야에 활용할 수도 있기때문에 이렇듯 스크립트는 웹만을 위한 언어가 아니라고 할 수있습니다.

스크립트를 개발 해오다 알게 된 간단한 사실이 스크립트의 목적에 따라 작업 환경이 변하며 작업 환경에 따라 제공되는 개발 인터페이스도 가지각색이라는 것이었습니다. 너무 당연한 거지만 처음엔 몰랐던 부분인데, 다른 언어도 마찬가지라서 이 개발 인터페이스에 대한 이해가 무조건 선수 되지 않으면 업무 로직 개발에 그만큼 시야가 좁아질수 밖에 없고, 이해된다고 해도 계속 사용하면서 터득하는 경험치에 대한 건 또 다른 것이기에 그만큼 내가 작업하는 기술에 대한 기초가 중요하다는 것입니다.

예를들어 간단하게 그러한 개발 인터페이스를 짚어보면 다음과 같습니다.

1> 웹 브라우저

기본 제공 객체

window, document, navigator, location...

HTML 핸들링 제어하기 위한 스펙

DHTML, DOM

XML 제어와 클라이언트서버간의 통신하기 위한 객체

MSXML, XMLHTTP

데이터베이스관련 객체

ADO

웹 전용 기술

HTC(HTML Templete Component), HTA(HTML Templete Application), WSC(Window Script Component)

2> IIS

기본 제공 객체

Request, Response, Server, Session, Application...

XML 제어와 클라이언트서버간의 통신하기 위한 객체

MSXML, XMLHTTP

데이터베이스관련 객체

ADO

파일관련 객체

FSO

COM+

IIS서버상에서 실행권한을 같는 모든 COM+

3> OS

XML 제어와 클라이언트서버간의 통신하기 위한 객체

MSXML, XMLHTTP

데이터베이스관련 객체

ADO

파일관련 객체

FSO

COM+

컴퓨터상에서 실행권한을 같는 모든 COM+

이렇듯 비베 스크립트가 어디에서 실행되느냐에 따라 작업 환경이나 권한도 틀려집니다. 예를 들면 웹 브라우저상(explorer.exe)에서 실행되는 스크립트는 시스템 자원 접근에 엄격한 보안상 제약을 가집니다. 하지만 똑같은 스크립트를 포함하는 HTM 파일을 확장자만 HTA로 변경한다음 실행하면 OS상(mshta.exe)에서 웹 페이지를 실행하게 되며, 이렇게 실행된 웹 페이지내에 있는 스크립트는 비주얼 베이직으로 작성된 어플리케이션 수준의 시스템 자원 접근을 허용하게 됩니다.

또한 HTA로 만들어진 어플리케이션은 일반 웹 페이지와 상호연동도 가능합니다.

필자의 경우 생산관리 어플리케이션에서 제품 입,출고에 바코드 리더 연동 어플리케이션을 HTA로 만듬으로서 기존의 개발 프레임웍과 코드 재사용성, 유지보수에 많은 이익을 봤습니다. 만일 이것을 위해 비주얼베이직으로 재작성을 했더라면 많은 웹용으로 작성되어진 공통 라이브러리를 비주얼베이직용으로 재개발하거나 일부 기능을 포기해야하는 상황이 되었을 수도 있었기 때문입니다.

지금까지 읽어주셔서 감사드리며, 자주는 못올리겠지만 다음 게시물부터는 실질적인 내용을 가지고 찾아 뵙겠습니다.

요 근래 윈도우 XP SP2 때문에 몇몇 골치 아픈일이 많이 발생하는 걸 보고, 그에 따른 뒷 처리를 보강하는 작업을 하고 있는데, 조금은 비 생산적인 일을 하고 있다는 생각을 지울 수가 없네요. 아무리 "신뢰할 수 있는 컴퓨팅" 이라는 이니셔티브 때문에 보안을 강화하였고, 이에 따른 어느정도의 불편함도 결과적으로는 사용자의 이득을 위해서다. 라고... 하지만 이래저래 좀 수정되었다 싶으면 자꾸 터지니까, 이건 제대로 "MS는 수익을 목적으로 하는 기업이다라는 걸 분명히 알리기 위한 포석이"라는 생각이 드네요. 이 부분이 어느 정도 관철되면 앞으로 이와 비슷한 일을 편한 마음으로 더 할 수 있을테니까. 보안을 위해 정말 다른 방법이나 대안이 없었는지 아쉬울 따름입니다.

그래서 요즘 새롭게 부상중인 파이어폭스나 모질라같은 웹 브라우저의 선전을 많이 기대하고 있습니다.

역시 경쟁이 있어야 서로 간에 발전이 있으니까요. (개인적으로 음모론 같은 가정을 즐깁니다. 별뜻 없습니다 ^^;;;)

이번 강좌에서는 지난 강좌에 이어 컬렉션 태그와 컨테이너 태그 그리고 비베 스크립트에서 HTML 객체에 접근하기 위해 제공하는 대표적인 기능 몇가지를 알아 보겠습니다. 이것들을 알아야 앞으로 개발 할 때 많은 도움을 받을 수 있기 때문인데,  난이도를 중,고급으로 해놓았지만 되도록 쉽게 설명하도록 하겠습니다.

익스플로러에서는 Dynamic HTML (DHTML) Object Model 에 근거한 <FORM>태그를 컬렉션 태그로 활용 할 수 있습니다. 그래서 단순히 서버에 각 컨트롤의 데이터를 넘겨주기 위한 역할만 하는 것이 아닌 다양한 부분에 활용할 수가 있는데, 이와 같은 컬렉션 태그 말고도, 얼핏 비슷하게 컨테이너 역할을 하는 자사 전용 확장 태그도 사용할 수 있습니다. (근래에 모질라에서도 몇몇 지원을 합니다만, 대부분 완벽하게 동작하지 않는 태그가 많습니다.)

컨테이너 태그라는 건

컨테이너라는 단어에서 알수 있듯이 HTML내에서 다양한 타입의 자식 태그들을 담아서 관리 할 수 있는 기능을 가질 수있고, 또는 다양한 물건을 넣고 빼듯 임시적으로 데이터를 관리하고자 할 때, 사용 할 수 있는 태그입니다.

<FORM> 태그는 컬렉션 태그중 가장 많이 쓰이지만, 일반적인 컬렉션 태그와는 달리 자신의 태그안에 사용자 입력을 받는 다양한 컨트롤들을 그룹으로 묶어 서버의 전송하는 역할을 하고, 컨테이너 태그와는 다르게 스크립트에서 객체에 접근 할 때 보다 직관적인 인터페이스를 제공하므로 개발에 사용하기가 용이합니다.

컬렉션과 컨테이너 태그 두 개념은 주어진 업무 상황에 따라 차이가 있습니다만, 웹 개발시 반복되는 코드나 빈번하게 작업되는 로직을 구현 할 때 유용하게 사용할 수 있습니다. 그래서 웹 개발시 HTML 컬렉션 태그와 컨테이터 태그의 각 목적과 용도가 무엇인지 알아 둘 필요가 있습니다.

>> HTML 컬렉션 태그

컬렉션은 언어마다 해석이 조금씩 틀리지만, 웹 개발 분야에서 사용하는 컬렉션이라는 단어가 주는 의미는 "자신과 관련된 객체들을 가지고 있는 객체" 라고 생각하시면 됩니다. 그 어떤 태그를 넣어도 되는 컨테이너 태그와는 조금 틀리죠. HTML 컬렉션 태그로 사용할 수 있는건 20개 이상되지만, 이 모든 태그에 근본이라고 할 수있는 FORM 태그에 대해 많은 연구를 해보실 것을 추천합니다.

FORM 태그 : http://msdn.microsoft.com/workshop/auth ··· view.asp

그럼 예제를 만들면서 컬렉션 태그를 활용하는 기초를 보겠습니다.

<INPUT type="text" id="txtTest" value="안녕하세요">

위와 같이 HTML이 있습니다. 그렇다면 비베 스크립트 에서는

MsgBox txtTest.value

와 같이 txtTest 객체를 가지고 작업 하실 수 있습니다. 그럼 다음과 같이 HTML이 구성된 경우는 어떻게 해야 할까요?

......

<INPUT type="text" id="txtTest" value="안녕하세요1">

<INPUT type="text" id="txtTest" value="안녕하세요2">

<INPUT type="text" id="txtTest" value="안녕하세요3">

......

아까와 같이

MsgBox txtTest.value

이렇게 코드를 작성하면 "개체가 이 속성 또는 메소드를 지원하지 않습니다." 라는 에러 창이 뜨게 됩니다. 스크립트에서 객체로 접근하기 위한 name, id 값은 언제나 유일해야 하지만 위와 같이 중복된 값이 들어가게 된다면, 익스플로러는 위의 태그를 txtTest 라는 컬렉션으로 구성하게 됩니다.

컬렉션은 그 자신만으로는 별다른 작업을 할 수 없기 때문에 컬렉션으로 구성 된 태그에 접근하기 위해서 Item, Length 키워드를 사용하여 작업해야 합니다. 위의 코드를 약간 수정해보면

MsgBox txtTest.Item(0).value

MsgBox txtTest.Item(1).value

MsgBox txtTest.Item(2).value

또는

For iIndex = 0 To txtTest.Length

   MsgBox txtTest.Item( iIndex ).value

Next

이렇게 해야 에러가 나지 않습니다. 이와 같은 특성을 이용하여 아래와 같이 id와 name을 같이 사용하면 개발 시 많은 도움을 받을 수 있습니다. 그럼 하나의 예를 더 들어보겠습니다.

<INPUT type="text" id=txtTest1 name="collect">

<INPUT type="text" id=txtTest2 name="collect">

위와 같이 HTML이 구성되어 있다면, 지난 강좌에서 얘기했듯이 이제 비베 스크립트에서 객체에 접근하기위해 txtTest1, txtTest2를 이용 할 수도 있고 collect 명으로 컬렉션에 접근하여 동일한 작업을 수행 할 수도 있다는 것을 아실 겁니다.

흔히 체크박스가 많은 웹 페이지에서 몇 개의 체크박스가 선택 되었는지, 특정 체크 박스가 선택됨에 따라 업무로직을 별도로 삽입해야 한다면, collect 로 반복문을 돌면서 id 값으로 조건문을 주어 작업 하실 수 있게 되는 겁니다. 이렇게 비베 스크립트만으로 구현하기 까다로운 부분을 HTML 컬렉션과 적절히 연동하면 쉽게 해결되는 부분이 많습니다.

컬렉션을 이용한 중, 고급에 해당하는 내용을 보고 싶으시면, 여기를 참조하세요.

http://msdn.microsoft.com/workshop/auth ··· e%3Dtrue

--------------------------------------------------------------------------------------------------------------

>> 컨테이너 태그

컨테이너 태그는 대표적으로 <DIV>, <SPAN> 태그가 그 예로 들 수 있는데, 이 태그는 자신의 태그 안에 그 어떤 태그들도 자식으로 활용 할 수 있습니다.  이 기능을 잘 사용한 사이트가 MSDN TOC 라는 생각이 드는데요. 이 MSDN TOC 의 핵심은 하나의 메뉴를 가지고 있는 항목을 클라이언트 스크립트를 이용하여 아래와 같은 태그로 구성하게 만드는 것입니다.

MSDN 라이브러리 온라인 : http://msdn.microsoft.com/library/default.asp

MSDN 라이브러리 온라인에서 가장 처음에 있는

이 메뉴는 HTML을 풀어보면 아래와 같이 구성되어 있습니다.

......

<div class='clsItem' type='leaf'>

   <span class='clsSpace' type='img'>

       <span class='clsLeaf' type=''>+</span>

   </span>

   <span class='clsLabel' type='label' classType=''>Welcome to the MSDN Library

       <span type='' classType='' class='clsUnavailable'>(DIV 반복 태그 예 : <div class='clsItem'... )</span>

   </span>

</div>

......

그 다음 사용자가 메뉴 클릭시 자식 메뉴들(그것도 하나하나의 메뉴가 위와 같은 구조입니다)을 가져와 DIV 반복 태그구역에 innerHTML 을 이용해서 추가가 됩니다. 이렇듯 다양한 타입의 자식 태그를 가질수 있기 때문에 동적인 효과를 보여줄 때 자주 사용하기도 합니다.

이번엔 좀 더 실질적인 예제를 가지고 DIV 태그의 활용성에 대해 생각해 보겠습니다. 오른쪽 마우스 버튼을 누르면 팝업 이벤트를 잡아 제가만든 팝업메뉴로 띄운다음 메뉴를 선택하면 몇번째의 메뉴를 선택했는지 에 대한 메시지 박스를 출력하는 간단한 프로그램을 함수 3개로 만들어 보겠습니다.

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY type="">

<div id="menu">

</BODY>

</HTML>

여기에 비베 스크립트 구역을 하나 선언하고 컨텍스트 메뉴 호출 이벤트에 대응하는 핸들러 함수를 하나 선언합니다. 아래 코드는 화면에서 컨트롤 키를 누르고 오른쪽 마우스를 클릭해야 본래 팝업이 띄게 해놓았습니다.

<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>

<!--

document.oncontextmenu = GetRef("ContextMenu_Handler")

Function ContextMenu_Handler()

   show_context()

   If window.event.ctrlKey Then

       ContextMenu_Handler = True

   Else

       ContextMenu_Handler = False

   End If

End Function

-->

</SCRIPT>

그리고 메뉴 클릭시 몇번째의 메뉴를 선택했는지에 필요한 이벤트 함수 선언을 추가 합니다.

Sub document_onclick()

   If IsObject( context_menu ) = True Then

       context_menu.style.display = "none"

       Set objUnknown = window.event.srcElement    

       If objUnknown.type = "context_item" Then

           MsgBox objUnknown.id & " 의 메뉴를 선택했습니다."  

       End If

   End If

End Sub

위의 코드를 보면 context_menu 객체를 화면에서 숨겨주는 스타일시트를 넣었지만, 기본적인 BODY 태그안에 있는 HTML은

<div id="menu"> 이게 전부입니다. 상식적으로 이 코드는 에러가 발생해야 정상이지요. 하지만 스크립트로 id가 context_menu 인 DIV 태그를 만들어 BODY 태그안에 이 로직이 실행되기전에 선언을 해주면 됩니다.

이렇게 선언된 DIV 객체는 DOM에 근거한 이벤트를 가질 수 있게 되기 때문에 DIV 태그 위에 마우스가 오버하면 onmouseover 이벤트가 발생하며, window 최상위 객체는 이벤트가 발생한 자식객체를 알아내어 objUnknown 객체로 참조값을 넘길 수 있게 됩니다. 그래서 If objUnknown.type = "context_item" Then 이 코드에서 클릭 이벤트 발생시 팝업 메뉴위에서 이벤트가 발생했는지의 여부를가지고 몇번째의 메뉴를 선택했는지 메시지 박스로 출력 하게 됩니다.

이제 가장 중요한 함수 하나가 남았습니다. 먼저 화면에 팝업 메뉴가 뜬적이 있는지 여부를 가지는 전역변수와 팝업 메뉴 HTML을 가지는 전역 객체를 하나 선언 합니다.

Dim contextYN, oDivTag

contextYN = False

Function show_context()

   If contextYN = True Then

       menu.removeChild oDivTag

       Set oDivTag = Nothing

   End If  

   Set oDivTag = document.createElement("div")

   oDivTag.id = "contextDiv"

   oDivTag.setAttribute "type", "conDiv"

   oDivTag.innerHTML = ("<div id='context_menu' type='context' style='DISPLAY:none;BORDER-RIGHT: menu 2px outset; PADDING-RIGHT: 1pt; BORDER-TOP: menu 2px outset;PADDING-LEFT: 1pt; FONT-SIZE: 9pt; PADDING-BOTTOM: 1pt; BORDER-LEFT: menu 2px outset; WIDTH: 100px; CURSOR: default; PADDING-TOP: 1pt; BORDER-BOTTOM: menu 2px outset; POSITION: absolute; BACKGROUND-COLOR: menu;' align=center>" _

                   & "<span id='menu1' class='menuitem' type='context_item' style='BORDER-LEFT-COLOR: menu; BORDER-BOTTOM-COLOR: menu; WIDTH: 100px; BORDER-TOP-COLOR: menu; TEXT-ALIGN: center; BORDER-RIGHT-COLOR: menu'>1번째 메뉴</span>" _

                   & "<span id='menu2' class='menuitem' type='context_item' style='BORDER-LEFT-COLOR: menu; BORDER-BOTTOM-COLOR: menu; WIDTH: 100px; BORDER-TOP-COLOR: menu; TEXT-ALIGN: center; BORDER-RIGHT-COLOR: menu'>2번째 메뉴</span>" _

                   & "<span id='menu3' class='menuitem' type='context_item' style='BORDER-LEFT-COLOR: menu; BORDER-BOTTOM-COLOR: menu; WIDTH: 100px; BORDER-TOP-COLOR: menu; TEXT-ALIGN: center; BORDER-RIGHT-COLOR: menu'>3번째 메뉴</span>" _

                   & "</div>")

   menu.appendChild oDivTag

   context_menu.style.posLeft = window.event.clientX

   context_menu.style.posTop  = window.event.clientY

   context_menu.style.display = "block"    

   context_menu.setCapture()

   contextYN = True

End Function

위의 스크립트에서 아래와 같은 코드로 DIV 태그를 하나 만듭니다.

Set oDivTag = document.createElement("div")

oDivTag.id = "contextDiv"

oDivTag.setAttribute "type", "conDiv"

결과 : <div id=contextDiv type=conDiv></div>

그 다음 context_menu id 값을 가지고 있는 DIV HTML을 contextDiv 객체 안에 넣고 실제 BODY 태그안에 있는 menu 객체에 그 값을 넣으면 이 시점에서 익스플로러는 화면을 재구성을 합니다. 이 다음 부분에서

alert document.body.innerHTML

을 하게 되면 BODY 태그내에 HTML 소스가 변경이 되고 익스플로러는 화면을 재구성하게 됩니다.

! 중요체크

여기서 잠시 논외로 재구성이라는 것에 주목할 필요가 있습니다.

비베 스크립트나 J 스크립트내에서 가장 비싼 비용을 소모하는 코드는 물론 생각없이 만든 메모리 누수 코드이고, 그 다음으로 비용을 치르는 코드가 이 화면 재구성에 필요한 리소스에 해당되는 코드입니다.

좀 더 쉽게 얘기하면 BODY 태그내에 복잡한 HTML이 있으면 있을수록 화면 재구성에는 비용이 많이 듭니다. 이건 근본적인 DOM 모델 방식의 단점이지요. DOM은 언제나 데이터를 가공하기 위해 문서를 FULL로 로딩한 다음 가공합니다. 그래서 화면상에 디자인이 조금이라도 바뀌게 되면, 메모리 상에서 기존의 문서를 지우고, 다시 로딩을 해야하기 때문에, 사용자는 모르지만 내부적으로 많은 리소스를 소모하게 되지요.

실제 비베 스크립트에 백만건의 배열에 랜덤한 값을 넣고, 간단한 버블 소트 알고리즘으로 순차적으로 재구성후 화면에 출력하는 기능을 가진 로직을 수행 할 때 걸리는 시간은 2초이상 걸리지 않습니다. 하지만 아무리 간단하더라도 화면 재구성이 있는 코드안에 만건정도의 반복문 안에다가 돌리게되면 잠시 화면이 멍해지고, 이 순간 만큼은 CPU는 100% 점유율을 가지게 됩니다. 개발하다보면 많이 경험하는 부분인데, 결과값은 한번에 처리해 주는게 좋습니다.

언뜻 잠시 다른 얘기가 나왔지요? 그 다음은 크게 어려운 코드가 아니기 때문에 이해하시는데 별 어려움이 없으실겁니다. 이 예제는 첨부파일로 등록해두었으니 다운받아 천천히 분석해 보세요. 이렇듯 컨테이너 태그를 활용하면 다양한 프로그램을 만들어 낼 수 있습니다. 다른 태그가 할 수 없는 아주 매력적인 기능이지요.

DIV 태그에 대한 레퍼런스는 아래를 참조하세요.

http://msdn.microsoft.com/workshop/auth ··· Fdiv.asp

엄청 느리고, 쓸모는 크게 없지만, 스크립트만으로도 MSDHTML 컴포넌트를 사용하지 않고, 폼 마법사같은 위지윅 툴도 흉내낼수 있을 정도로 다양한 기능을 구현 할 수 있습니다. 위의 코드와 설명을 이해하셨다면 스스로 컬렉션 태그및 컨테이너 태그에 대한 연구는 어렵지 않게 진행하실 수 있습니다.

이제 마지막으로, 비베 스크립트내에서 DHTML 객체를 잡아 내기 위해 지원하는 함수와 간단한 응용법에 대해 알아 보겠습니다.

이 주제는 웹 개발에 입문한지 얼마되지 않는 분들을 위해 만들었습니다. ( 만들어진 코드는 J 스크립트내에서도 언어상의 구문 차이를 제외한 모든 기능을 그대로 지원하고 있습니다)

예제 HTML

......

<BODY>

<FORM id="MASTER">

<INPUT type="text"        id="test1">

<INPUT type="button"    id="test2">

<INPUT type="hidden"   id="test3">

<INPUT type="checkbox" id="test4">

<INPUT type="radio"      id="test5">

</FORM>

</BODY>

......

아래의 예제는 각 INPUT 객체의 타입을 메시지 박스로 출력하는 동일한 기능을 3가지의 경우로 나누어 만든 것입니다.

eval()

For iIndex = 1 To 5

   ' MASTER.test1, MASTER.test2...... 의 객체를 잡아낸다.

   Set oUnKnow = eval("MASTER.test" & iIndex )

   MsgBox oUnKnow.type

Next

formID

'FORM 태그안에 있을경우 아래처럼 FORM id를 먼저 기술해야 합니다.

MsgBox MASTER.test1.type

MsgBox MASTER.test2.type

MsgBox MASTER.test3.type

MsgBox MASTER.test4.type

MsgBox MASTER.test5.type

document

'BODY 태그안에 있는 모든 INPUT 컨트롤을 가져온다.

Set oInput = document.getElementsByTagName("INPUT")

For iIndex = 0 To oInput.Length - 1

   MsgBox oInput( iIndex ).type

Next

위의 코드들을 적절할 때 사용해주면 많은 자동화 기능에 활용할 수 있습니다. 예를 들어 업무 프로그램 개발시 HTML상의 id 값들과 데이터베이스의 테이블 컬럼 아이디를 동일하게 만들어 놓고 프로그램 로딩시 테이블의 스키마(길이, 타입등등)를 얻어와 MaxLength라던가 타입 비교에 따라 추가적으로 기본값들을 미리 지정해놓을 수 있으며, 반대로 화면상에 있는 각 컨트롤들의 값을 서버로 넘기고자 할 때, 데이터를 업데이트를 위한 각 컨트롤의 값들을 쉽게 가져올수 있습니다.

>> 정리

컬렉션, 컨테이너 태그의 용도와 활용법 그리고 객체를 잡아내기 위한 스크립트에서 작업하는 방법에 대해 알아봤습니다. 내용이 부족하지만 웹 개발시 조금이라도 도움이 되었으면 합니다. 내용이 어렵다고 생각하시는 분들에겐 좋은 고민거리가 될 수 있을겁니다. 저도 강좌를 쓰는게 하도 오랫만이라 부족한게 많이 보여 아쉬운 점이 많네요. 보충이 필요한 부분이 있으면 답글 달아주세요. 그 부분에 대한 보강을 넣겠습니다.

요즘 전 일렉기타를 공부하고 있습니다. 왠만한 잡일에는 쉽게 질리는 체질인데도 기타는 거의 1년이 다 되어 가네요. 그래도 아직 기초도 제대로 소화하지 못하고 있습니다. 어떤 분이 말하길 훌륭한 기타 플레이어가 되기 까지는 연습만 하루 5시간으로 15년만 하면 누구든지 할 수 있다고 합니다. 노력한 만큼 거둔다는 이 말에 감동해서 일렉기타를 포기 못 하는 이유이기도 하죠. ^^;; 읽어주셔서 감사드리고 담에는 좀 더 유익한 내용으로 찾아 뵙겠습니다.

고수닷넷 - Junworks77님

Document Object Model (이하 DOM) 은 HTML이나 XML같이 정형화 되어 있는 문서를 객체화하여 개발언어(스크립트도 당연히 포함 됩니다)에서 문서를 효과적으로 조작하기 위한 하나의 모델 입니다. - 조준철

좀 정의가 어렵지요? 원래 W3C(http://www.w3c.org) 에서 발표한 정의와는 다릅니다만 본질적으로는 그렇습니다. 지난 번에 말씀드렸듯 앞으로 웹 브라우저에서 동작하는 비베 스크립트를 중심으로 다룬다고 했는데 갑자기 웬 DOM? 이라고 생각 할 수 있겠지만, 비베 스크립트로 웹 개발을 "잘" 하기 위해서는 DOM 이라는 모델을 첫번째로 이해 하고 넘어가야 합니다.

웹 개발에 DOM? 이라고 생각 하시는 분도 계실거고, 이야 DOM에 대해 감히 예기하네? 라고 생각하시는 분도 있으실거라 생각됩니다. 제 기억에 지난 몇년동안 스크립트를 공부하면서 DOM 에 대해서 심도있게 강좌하는 글을 딱히 본 것도 없고, 들어 본 기억이 없습니다. 그 만큼 저도 나름대로의 영어 해독해가며 야매(?)로 익힌거라 원 하는 의미를 제대로 전달할 수 없을 수도 있습니다. 그래서 제가 이해 한 대로 의미를 풀어가려고 합니다.

만약 처음 이 단어를 접하신 분이라면 초보든 경력자든 좀 생소해 하실 것입니다. 들어 보셨던 단어라해도 그 의미에 대해 깊게 생각하셨던 분은 드물것 같지만, 스크립트 경력 3개월 이상되시는 분이라면 누구나 사용하고 있는 개념이기도 합니다. 즉 이해하거나, 사용하기 어려운 모델이 아니라는거죠.

흔한 예기처럼 "알고 하는 거와 모르고 하는 거의 차이" 를 매우자는 의미에서 첫 정식강좌의 타이틀로 정했습니다.

웹 어플리케이션을 개발하다보면 HTML이나 XML 문서를 디자인타임이 아닌 런타임에서 만들거나, 구조를 검색하고, 내용을 추가하거나, 수정, 삭제하는등 다양한 액션을 취할 경우가 생깁니다. 결국 개발자는 DOM 모델을 이용하여 이러한 작업을 하게 되는 건데요. 순수한 DOM 모델만으로는 제약적인 부분이 많아, MS에서는 익스플로어 내의 스크립트 에서 이러한 작업을 효과적으로 하기 위해 DOM 모델에 몇가지 비표준 기능을 추가 하게 되었습니다. 그것이 HTML문서 태그를 객체화 하는 것이죠.

물론 이러한 개념은 공식적인 HTML 버전이 4.0 까지 계속 메이저, 마이너 업그레이드되면서 DOM 도 마찬가지로 동시에 3.0대까지 같이 업그레이드 되어 왔습니다. 버전차이가 나듯 1세대 인터넷 당시처럼 간단한 텍스트와 이미지만을 보여주던 시대에는 이런 개념이 필요 없었고, 2세대 부터인가 처음으로 사용자의 요구사항을 효과적으로 대응하기 위해 제안되었던 모델이지요. 그러다가 3세대에 와서야 본격적으로 사용되기 시작되었고, 현대에서는 유명한 사이트에 동적인 효과를 주는 곳이면 반드시 사용될만큼 대중적이 되었습니다.

하지만 이제는 매크로미디어의 플레시같은 서드 파티나 유명하진 않지만 참신한 클라이언트 기술들이 좀 더 적은 리소스로 많은 효과를 보여줄 수 있게 됨으로써, DOM 모델에 대한 작업이 약간 시들해지고 있기는 합니다. ^^

여러가지 이유로 DOM 모델은 익스플로어 내에서만 동작하게 수정되었고 MS는 이 논란의 여지를 일축 할만한 추가기능을 더해 자사 전용 표준으로 다시 태어나게 됩니다. 덕분에 여기서 예기하는 DOM개념과 스크립트는 익스플로어 기반에서만 적용된다 라는건 전혀 새로운 사실이 아니지요. DOM 모델은 정확하게는 기억이 나지 않습니다만 익스플로어 4.0대인가 부터 적용하기 시작했습니다.

그땐 참 초보적인 개념에 기능만 가능했는데, 이제는 화면에 보여주기 위한 목적에서는 못하는게 없네요. 그럼 도대체 DOM 모델 이라는게 어떻게 HTML을 객체화하고 효과적으로 제어하기 위해 HTML문서를 처리 할까요? 구구 절절한 설명은 빼고 크게 두가지 정도만 설명을 들으시면 됩니다. DOM 개념으로 만들어진 엔진이 HTML을 로드하여 어떻게 내부적으로 처리하는지와, 어떻게 HTML태그를 객체로 선언하는 방법이지요.

예로 아래와 같은 간단한 잘 정의된 HTML문서를

...

<table>

<tbody>

   <tr>

     <td>Shady Grove</td>

     <td>Aeolian</td>

   </tr>

   <tr>

     <td>Over the River, Charlie</td>        

     <td>Dorian</td>

   </tr>

</tbody>

</table>

...

DOM은 아래 그림과 같이 HTML문서를 조직적으로 재 구성합니다.(익스플로어는 추가적으로 재구성을 하지만 중요하지는 않습니다)

이렇게 로드된 HTML을 비베 스크립트로 제어 할수 있습니다. 이 HTML문서에서 비베 스크립트로 Dorian 이라는 단어를 메시지 박스로 출력하고 싶다면 이렇게 할 수 있습니다.

....

Set oTable = document.getElementsByTagName("table")

MsgBox oTable.Item(0).childNodes(0).childNodes(1).childNodes(1).innerText

....

위에서 사용된 코드는 익스플로어에서 기본 제공되는 document 객체의 기능을 이용하여 HTML 내에 있는 데이터를 뽑아온것입니다. 이렇듯 document 객체는 DOM 모델을 기반으로 만들어져서 업그레이드 되어 왔고, 그만큼 HTML을 제어하기 위한 메소드, 프로퍼티가 많이 늘어나게 되었습니다. 다만 몰라서 안쓰는 것 뿐이죠. 하지만 막상 보면 어렵지 않습니다.

그럼 잠시 위의 코드에 대한 설명을 드리면

이 코드에서 oTable 에는 <table> 태그를 가지는 "컬렉션"을 반환합니다.

Set oTable = document.getElementsByTagName("table")

'<table> 태그는 하나 밖에 없으므로 첫번째의 table을 참조하는 객체를 반환합니다.

oTable.Item(0)

'<tbody> 태그로 위치를 이동합니다.

oTable.Item(0).childNodes(0)

'<tr> 두번째 태그로 위치를 이동합니다.

MsgBox oTable.Item(0).childNodes(0).childNodes(1)

'<td> 두번째 태그로 위치를 이동합니다.

oTable.Item(0).childNodes(0).childNodes(1).childNodes(1)

'<td> 태그안에 있는 텍스트를 출력합니다.

MsgBox oTable.Item(0).childNodes(0).childNodes(1).childNodes(1).innerText

자... 태그 계산이 귀찮기는 하지만 생각 보다 어렵지 않습니다. 오히려 이렇게 HTML을 스크립트로 다루는 게 편해보일 정도지요. 아직까지 이 방법보다 편하게 스크립트로 HTML을 편집하는 모델은 나오지 않았고, 만들어진다는 소식도 없습니다. 이글을 읽으시는 분중 비베 스크립트를 입문한지 얼마되지 않는 다면 위의 코드나 설명이 조금 어려울 수도 있습니다. 그래서 초보 개발자 분들을 위해 코드에 대한 설명을 추가하자면 위의 코드에서는 컬렉션과 배열을 사용 합니다. 그 의미로 조금 중요한데, 자칫 컬렉션과, 배열이 비슷한 점이 많아 의미가 혼동 될 소지가 있기 때문입니다.

컬렉션은 언어마다 해석이 틀립니다만, 적어도 비베 스크립트에서는

자신과 관련된 객체들을 가지는 "객체일뿐"라고 정의 할 수 있습니다.

그래서 컬렉션 자체만으로는 아무런 작업을 할 수 없으며 반드시 컬렉션내에 있는 객체에 접근하여 작업을 해야 합니다. 그러기 위해서 제공되는 기능이 Item 과 Length 이지요. 이것은 비베 스크립트 뿐만 아니라 비베 계열의 모든 언어에서 컬렉션을 작업하게 위해 공통적으로 사용하는 방법 이기도 합니다.

그리고 비베 스크립트에서는 배열구성시 첫 데이터가 0 부터 시작하기 때문에 위와 같이 작성되었습니다. 두번째 데이터를 가리키려면 배열 인자값이 1 이 되겠지요?

자... 그럼 위의 코드를 약간의 응용 해서 Dorian 의 텍스트를 볼드체로 붉은 글자로 변경하고 싶네요.

아래와 같이 작성할 수 있습니다.

...

Set oTable = document.getElementsByTagName("table")

oTable.Item(0).childNodes(0).childNodes(1).childNodes(1).innerHTML = "<font color='red'><b>Dorian</b></font>"

...

이런 식으로 서버와의 통신을 하지 않으면서 DOM 모델을 이용해 스크립트만으로 화면의 디자인을 얼마든지 만들어 내거나, 변경을 할 수 있습니다. 웹 어플리케이션 개발에서 동적으로 화면을 재구성하는 건 모두 이 방식을 따르는 것이지요.

중요한것은 위의 문법은 언어적인 특성을 빼면 비베 스크립트나 J 스크립트모두 비슷하게 작성한다는 겁니다. 스크립트에서 제공하는 기능이 아닌 DOM 모델을 준수하는 "document 객체내의" 메소드와 프로퍼티를 사용하기 때문인데요. INPUT, SELECT, TEXTAREA 와 같은 사용자의 입력을 받는 컨트롤이나 개발자가 별도로 지정한 HTML 객체는 모두 DOM 모델을 준수하는 document 객체의 자식들이기 때문에 메소드와 프로퍼티, 그리고 이벤트를 상속받아 그대로 사용 할 수있게 되는 겁니다.

그래서 익스플로어에서 제공되는 다른 객체도 중요하지만 특히 document 객체는 역할상 상당히 중요한 것이지요.

익스플로어에서 DHTML 개발의 편의 성을 돕기 위해 제공 되는 기본객체중 자주 사용하는 객체는 다음과 같습니다.

> window 객체

인터넷 익스플로러 어플리케이션의 행동을 조절할 수 있는 다양한 객체들의 계층 구조를 이루고 있습니다.  window 객체는 이 계층 구조의 최상위 레벨 객체이고, 다른 모든 객체의 컨테이너 역할을 담당합니다. 그래서 익스플로어를 조작하기 위한 API를 이용해 상태바에 텍스트를 보인다던지 윈도우창의 사이즈를 변경하거나, 새창을 열거나, 닫거나, 모달창으로 화면을 제어하는 등의 작업을 이 객체를 이용함 으로써 할 수 있습니다.

> document 객체

스크립팅 모델에서 두번째로 중요한 객체는 document 객체입니다. 이 객체는 웹 페이지 프로그래밍에서 가장 자주 사용하는 객체입니다.  document 객체는 화백이라고 생각 하면 됩니다. HTML을 직접적으로 연관된 객체라고 생각하면 연상이 쉽습니다. 그래서 HTML을 로드한 상태에서 아래와 같이 코딩해주면

Set oDoc = document.all("body")

oDoc 객체는 <body> 태그의 참조를 가지고 있고, <table>태그의 예제와 마찬가지로 자식 태그내의 데이터를 마음대로 조작 할 수있게 됩니다.

> history 객체

history 객체는 문서의 히스토리를 이용해 웹 페이지를 검색할 수 있는 방법을 제공하는 보이지 않는 객체입니다. 이것은 브라우저의 네비게이션 버튼 같은 기능을 제공하는데, 프로그래밍을 통해 이러한 기능을 사용 할 수 있습니다.

> navigator 객체

이 객체는 history 객체와 마찬가지로 볼 수 없으며, 브라우저에 관한 정보를 반환 합니다. 읽기 전용인 navigator 객체의 속성을 사용해 클라이언트 브라우저, OS, 각 컴포넌트 버전에 관련된 정보에 액세스 할 수 있습니다.

이제 DOM 개념으로 만들어진 엔진이 HTML을 로드하여 어떻게 내부적으로 처리하는 것과 비베 스크립트로 어떤 식으로 처리하는지 감이 오실겁니다. 감이 오셨다면 전 목표는 달성한 거죠. ^^

하지만 위의 예제 코드는 실용성이 매우 떨어지지요. 규모가 큰 포탈이나 쇼핑몰, 하다 못해 게시판같은데에 사용된 HTML도 상당히 복잡하게 되어 있어, 위와 같이 개발자에게 작업하라고 하면, 위지윅 에디터 툴로 불러 온다 해도 머릿속으로 태그 계산하는게 만만한 작업이 아닐 겁니다. 그래서 DOM 모델에는 HTML 태그를 객체로 선언 해서 다이렉트로 스크립트로 접근할 수있는 기능에 대한 표준이 정의 되어 있는데, 흔히 사용하고 있는 태그내의 name 속성이 그 역할을 담당 합니다. 하지만 만일 여러분이 익스플로어 전용으로 웹 어플리케이션을 개발하신다면 DOM에서 제안된 name 속성보다는 MS가 DOM 표준을 자사의 기술에 맞게 수정한 id 속성값을 사용하시는걸 적극 권장합니다.

이 두가지의 속성은 같은 DOM 모델에 의해 설계되었기 때문에 언뜻 HTML을 객체화한다는 개념에는 비슷한 기능을 하지만, 사용 목적이 서로 틀립니다. name 속성은 지금까지 흔히 작업하듯 ASP나 JSP에게 데이터를 넘길 때 서버코드에서 인식할 수 있도록 사용 되는 태그(INPUT, SELECT, TEXTAREA )내에서만 사용가능하며, id는 서버에서 인식할 수는 없지만 HTML 모든 태그내에 사용가능 하다는 장점이 있습니다.

그래서 두가지를 적절히 잘 섞어서 사용해야 합니다.

예제를 하나 더 보도록하지요.

잘 정의된 HTML문서 td 태그에 MASTER 라는 id 속성를 부여 했습니다.

...

<table>

<tbody>

   <tr>

     <td>Shady Grove</td>

     <td>Aeolian</td>

   </tr>

   <tr>

     <td>Over the River, Charlie</td>        

     <td id="MASTER">Dorian</td>

   </tr>

</tbody>

</table>

...

이렇게 로드된 HTML을 아까와 같이 비베 스크립트로 Dorian 이라는 단어를 메시지 박스로 출력하고 싶다면 이렇게 할 수 있습니다.

MsgBox MASTER.innerText

단지 하나의 id 속성을 적절하게 부여하는 것만으로도 이전에 비해 많은 계산이 필요했던거와 비교할수 없을 정도로 원하는 기능을 구현 할 수 있습니다. 이제 개발자에게 남은 것은 이렇게 객체화 된 HTML에서 사용할 수 있는 기능들에 대한 레퍼런스만 알면 나머지는 스스로 응용하실 수 있을 겁니다. 하지만 국내에서 이에 관련된 책은 단 한권도 없고, 정보를 구할 곳도 없습니다. 다행히 MSDN에 가서 보면 레퍼런스가 다른 곳에서 찾아 볼 필요도 없을 만큼 잘 정의 되어있습니다. 이에 대한 주소를 알려드리기전에 먼저 이걸 아시면 이해가 더 쉽게 되실겁니다.

객체라는 단어는 개발자라면 귀에 딱지가 않을 만큼 많이 듣는 단어인데 객체지향 방법론에 의하면 객체는 메소드, 이벤트, 프로퍼티 3가지의 기본조건을 충족해야 한다고 되어 있습니다. 그리고 지금까지 DOM 모델에 의해 코딩하는 HTML요소들도 모두 객체라고 불렀지요? 그래서 비록 익스플로어 내에서만 정상적으로 동작하는게 아쉽기는 하지만 HTML에 id가 부여되면 내부적으로 자동으로 객체화 되며, 이렇게 객체화된 HTML요소는 DOM 모델에 근거한 메소드, 이벤트, 프로퍼티를 알아서 가지게 되는 겁니다. 이렇듯 어떤 객체라해도 근본은 같기 때문에 거의 사용법도 비슷하고, 나중에 비베 스크립트로 XML을 핸들링할때 다시 논의 하겠지만, 사용하는 기본 모델이 DOM 모델이기 때문에 처음 보다 쉽게 이해 하실 수 있습니다.

그럼 자주 사용되는 HTML 태그를 가지고 하나의 예를 더 만들어보죠.

...

<INPUT type="text"     id="txtTest">

<INPUT type="checkbox" id=chkTest>

<INPUT type="radio"    id=rdoTest>

<SELECT   id="selTest"></SELECT>

<TEXTAREA id="selTest"></TEXTAREA>

...

지금은 예제이기 때문에 다섯 개의 HTML 태그에 id를 부여하여 비베 스크립트에서 잡아낼수 있도록 간단하게 선언되었습니다만, HTML 4.0 에 근거한 모든 태그에 id를 부여할수 있으며, MS 내에서만 동작하는 확장태그(DIV, SPAN...)에도 모두 부여 가능 합니다. 하지만 MSDN에는 부여 가능한 모든 목록이 있으니 관심있으신 분은 아래 링크를 선택하세요.

http://msdn.microsoft.com/library/defau ··· ects.asp

그리고 이렇게 객체화된 요소들이 가질수 있는 기본 적인 모든 이벤트에 대한 목록을 보고 싶으시면 아래 링크를 선택하세요.

여기서 주의 하실 점은 "기본 적인" 모든 이벤트라는 겁니다. 이것은 메소드나, 프로퍼티도 마찬가지 인데 위에 선언된 객체중 txtTest 는 텍스트 박스로 선언되었기 때문에 onclick, onfocus, ondrag, ondrop, oncopy 같은 이벤트가 사용가능하지만 chkTest, rdoTest 같이 사용자 키보드 입력을 받을 수 없는 컨트롤에는 ondrag, ondrop, oncopy 같은 이벤트를 사용할 수 없습니다.(당연하겠죠?) 이것 역시 세부적인 메뉴로 들어가면 관련 사항에 대한 자세한 설명이 나와있습니다.

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/events.asp

객체화된 요소들이 가질수 있는 기본 적인 모든 메소드 대한 목록을 보고 싶으시면 아래 링크를 선택하세요.

http://msdn.microsoft.com/library/defau ··· hods.asp

마지막으로 객체화된 요소들이 가질수 있는 기본 적인 모든 프로퍼티 대한 목록을 보고 싶으시면 아래 링크를 선택하세요.

http://msdn.microsoft.com/library/defau ··· ntry.asp

정리

DOM에 대한 내용이 잘 전달 되었는지 궁금하네요. 추가적인 정보는 MSDN에 설명된 모든 태그 하나하나에 대한 자세한 설명과 예제 스크립트 가 있습니다. 여기있는 것만 알면 기본적으로 스크립트로 HTML을 조작하기위한 기본적인 사항은 모두 숙지 하실수 있습니다. 그럼 첨부터 이거 알려주면 되지 왜 이렇게 바쁜시간 쪼개서 보는데 질질 끌었냐면, MSDN에는 없는 DOM 모델에 대한 응용을 하기 위해서입니다.

다음 에는 위의 내용을 기반해서 MS에서는 밝히지 않는 컨테이너용 태그(FORM, DIV, SPAN)의 중요성과 이를 적극 활용하는 기능, 그리고 비베 스크립트내에서 DHTML 동작을 위해 지원하는 전용 내장 함수의 사용법을 가지고 언제가 될지 모르지만 다시 찾아뵙겠습니다. 읽어주셔서 감사합니다.