웹마스터 팁
DHTML의 시작 - HTML 구조 및 자바스크립트 객체지정법
2002.04.11 18:23
DHTML에서 중요하다고 생각되는 몇가지 개념들을 모르고 소스 분석부터 시작할 때 부딪히게
되는 사항중에 가장 어려운 부분이 오브젝트와 속성, 그리고 메쏘드 부분일 것이고 다음으로
오브젝트간의 상호관계일 것입니다.
좀더 쉽게 DHTML을 배우려면 꼭 알고 있어야 하는 것이 HTML의 구조와 태그 사이의 관계라
생각되어 소스 위주의 내용 보다는 기본 개념위주의 강의를 시작해보고자 합니다.
크게 어려운 부분은 없으니 초보자도 쉽게 이해 할 수 있을 것입니다.
먼저 태그와 오브젝트 관계를 알아보지요..
<태그 name="a" id="b" src="소스" value="값" style="스타일:값" width="가로" ....>
name은 오브젝트를 지정하는 것입니다.
나머지는 지정된 오브젝트의 속성이지요.
a.src="소스", a.value="값", a.style.스타일="값"
이런식으로 표현이 가능하지요.
( 객체 개념은 다들 알고 있으리라 생각하고 생략~
객체관계를 지정할때는 . 으로 지정함은 다 알고 있을 것입니다.
위의 예 : 상위객체.하위객체, 객체.속성, 객체.메쏘드() )
일단 창의 구조를 트리 모양으로 그려본 것을 보면서 살펴보도록 하지요..
window <<------>> window
|
-------------------------------------
| | |
frame(0) frame(1) frame(2) <<-- frames
| | |
HTML HTML HTML <<-- document
|
-------------------
| |
HEAD BODY
| |
TITLE {여러태그들}
대충 그려보면 위와 같은 구조로 이루어져 있으리라 생각될 것입니다.
이제 서로간의 관계를 살펴보도록 하지요.
가장 윗부분을 보면 window <<-->> window 가 있습니다. 이 관계를 먼저 살펴보지요.
우리가 익스플로러 아이콘을 따로 눌러 2개의 창을 띄웠다고 하면 두 창의 관계는 대등한
관계지요..
하지만 링크를 통해 새창을 띄우는 경우가 있습니다. 이 럴때는 어떤 관계 일까?
새창을 띄우는 창은 새창으로 띄워진 창의 opener가 되는 것이지요.
A가 B를 띄웠으면 A는 B의 opener가 되는 것이죠.
B의 최상위 객체 window를 기주으로 볼대 A는 window.opener로 지칭할 수 있겠지요..
또 다른 하나는 내부에 프레임으로 띄우는 것이지요.
이 경우는 프레임 관계일 수도 있으나 창과 창의 관계로도 볼 수 있습니다.
새창을 프레임으로 띄운 경우이니까요.. 이경우는 A라는 창이 B라는 창을 자신의
내부 프레임으로 띄운 경우이므로 A는 B의 parent가 되는 것이지요..
B는 A에 frame에 담겨 있으므의 A는 그냥 parent가 되는 것이지요.
이제 다음 단계로 가면 frame의 관계로 가보도록 하지요..
프로그램에서 배열의 시작은 보통 0으로 시작하므로 번호를 0부터 붙여봤습니다.
그럼 각각의 객체를 지정하는지 알아보지요..
이름이 없으면 객체가 아니지만 자바스크립트에서는 객체그룹을 따로 제공하기 때문에 이름이 없어도
객체로 지정하는 것이 가능합니다. 어떻게 하냐하면 일단 최상위 객체를 먼저 쓰고 하위 객체를 .으로 연결하여 씁니다.
window.frames[0], window.frames[1], window.frames[2] 이렇게 부를 수 있지요.
다음으로 HTML내의 특정 태그를 지정해 봅시다..
name이나 id로 객체화 되지 않은 태그는 객체그룹을 통해 지정이 가능하지만 모든 태그가 객체 그룹을 제공하는 것은 아닙니다.
(객체그룹이 없는 태그도 객체 지정이 가능한 방법이 제공됩니다. 그건 다음에..)
window.frames[0].document.images[0] 이렇게 첫번째 이미지를 지정합니다.
window.frames[0].document.links[1] 같은 방법으로 두번째 링크를 지정합니다.
** 잠깐 **
document.all과 document.layers 두가지의 존재여부는 스크립트에서 브라우저가 익스플로러인지
넷스케이프인지 판단하는 기준이 됩니다.
document.all은 문서내의 모든 오브젝트를 담는 최상위 오브젝트입니다. 익스 4.0부터 생긴 것으로
넷스케이프에는 없는 것이지요..
if (document.all)이라고 하면 익스플로러이면 이란 뜻이지요..
반대로
if (document.layers)라는 것은 넷스케이프에 만 존재하는 것으로 네스케이프라면 이라고 알아
두시면 됩니다.
-----------------------
다시 위의 설명들은 우리는 기준을 최상위 객체인 window를 기준으로 객체를 지정하는 방법이었지요..
다음으로 실제 스크립트의 기준은 어디인지 알아보지요..
스크립트는 문서내에 <script>라는 태그로 embed시킵니다. <head>, <body>에 들어가는 2가지의
스크립트가 있지요. 둘의 차이점이 뭐냐구요? 헤드에 들어가는 것은 문서 스크립트, 바디에
들어가는 것은 본문 스크립트라고 하지요.. 차이는 헤드에 넣으면 문서 전체에 적용되는 것이고
본문에 넣으면 문서의 일부에 적용된다는 점이지요.. 잘 모르시겠다구요..
스크립트로 만든 함수가 하나 있다고 합시다. 이 스크립트를 헤더 부분에 넣으면 문서 부분의 어느부분에서나 그 함수를 호출하는 것이 가능합니다. 하지만 바디에 넣을 경우 이 함수는 스크립트보다 항상 뒤에서 호출해야 합니다. 안그럼 에러가 발생하겠지요. 이외 스크립트 자체의 차이점은 없습니다.
(주로 문서스크립트는 함수 정의를 많이 하고 본문스크리트는 그 정의한 함수를 호출하는 용도로 많이 사용되지요.)
다시 본론으로 돌아와서 한마디로 기준은 스크립트역시 document라는 곳에 embed 되는 것이므로 document가 기준이 된다는 것입니다.
그러므로 window.frames[0].document.images[0] 이렇게 이미지를 지정할 필요없이
document.images[0] 식으로 document 상위의 오브젝트들은 생략하고 표현이 가능하지요..
물론 다 붙여도 상관은 없습니다. 그리고 document를 벗어나면 꼭 다 붙여주어야 하구요..
휴~ 힘들군요..
암튼 DHTML시작을 위한 HTML과 자바스크립트 기본 개념은 이 정도면 될 듯하군요.
언제 뒤를 이어서 계속 할지는 모르지만 암튼 다음에 다시 뵙지요..
(PS. 여기는 배우는 곳이지 서로 전쟁하려는 곳은 아니니 겐세이 놓는 코멘트는 참으셔요. ^^;)
되는 사항중에 가장 어려운 부분이 오브젝트와 속성, 그리고 메쏘드 부분일 것이고 다음으로
오브젝트간의 상호관계일 것입니다.
좀더 쉽게 DHTML을 배우려면 꼭 알고 있어야 하는 것이 HTML의 구조와 태그 사이의 관계라
생각되어 소스 위주의 내용 보다는 기본 개념위주의 강의를 시작해보고자 합니다.
크게 어려운 부분은 없으니 초보자도 쉽게 이해 할 수 있을 것입니다.
먼저 태그와 오브젝트 관계를 알아보지요..
<태그 name="a" id="b" src="소스" value="값" style="스타일:값" width="가로" ....>
name은 오브젝트를 지정하는 것입니다.
나머지는 지정된 오브젝트의 속성이지요.
a.src="소스", a.value="값", a.style.스타일="값"
이런식으로 표현이 가능하지요.
( 객체 개념은 다들 알고 있으리라 생각하고 생략~
객체관계를 지정할때는 . 으로 지정함은 다 알고 있을 것입니다.
위의 예 : 상위객체.하위객체, 객체.속성, 객체.메쏘드() )
일단 창의 구조를 트리 모양으로 그려본 것을 보면서 살펴보도록 하지요..
window <<------>> window
|
-------------------------------------
| | |
frame(0) frame(1) frame(2) <<-- frames
| | |
HTML HTML HTML <<-- document
|
-------------------
| |
HEAD BODY
| |
TITLE {여러태그들}
대충 그려보면 위와 같은 구조로 이루어져 있으리라 생각될 것입니다.
이제 서로간의 관계를 살펴보도록 하지요.
가장 윗부분을 보면 window <<-->> window 가 있습니다. 이 관계를 먼저 살펴보지요.
우리가 익스플로러 아이콘을 따로 눌러 2개의 창을 띄웠다고 하면 두 창의 관계는 대등한
관계지요..
하지만 링크를 통해 새창을 띄우는 경우가 있습니다. 이 럴때는 어떤 관계 일까?
새창을 띄우는 창은 새창으로 띄워진 창의 opener가 되는 것이지요.
A가 B를 띄웠으면 A는 B의 opener가 되는 것이죠.
B의 최상위 객체 window를 기주으로 볼대 A는 window.opener로 지칭할 수 있겠지요..
또 다른 하나는 내부에 프레임으로 띄우는 것이지요.
이 경우는 프레임 관계일 수도 있으나 창과 창의 관계로도 볼 수 있습니다.
새창을 프레임으로 띄운 경우이니까요.. 이경우는 A라는 창이 B라는 창을 자신의
내부 프레임으로 띄운 경우이므로 A는 B의 parent가 되는 것이지요..
B는 A에 frame에 담겨 있으므의 A는 그냥 parent가 되는 것이지요.
이제 다음 단계로 가면 frame의 관계로 가보도록 하지요..
프로그램에서 배열의 시작은 보통 0으로 시작하므로 번호를 0부터 붙여봤습니다.
그럼 각각의 객체를 지정하는지 알아보지요..
이름이 없으면 객체가 아니지만 자바스크립트에서는 객체그룹을 따로 제공하기 때문에 이름이 없어도
객체로 지정하는 것이 가능합니다. 어떻게 하냐하면 일단 최상위 객체를 먼저 쓰고 하위 객체를 .으로 연결하여 씁니다.
window.frames[0], window.frames[1], window.frames[2] 이렇게 부를 수 있지요.
다음으로 HTML내의 특정 태그를 지정해 봅시다..
name이나 id로 객체화 되지 않은 태그는 객체그룹을 통해 지정이 가능하지만 모든 태그가 객체 그룹을 제공하는 것은 아닙니다.
(객체그룹이 없는 태그도 객체 지정이 가능한 방법이 제공됩니다. 그건 다음에..)
window.frames[0].document.images[0] 이렇게 첫번째 이미지를 지정합니다.
window.frames[0].document.links[1] 같은 방법으로 두번째 링크를 지정합니다.
** 잠깐 **
document.all과 document.layers 두가지의 존재여부는 스크립트에서 브라우저가 익스플로러인지
넷스케이프인지 판단하는 기준이 됩니다.
document.all은 문서내의 모든 오브젝트를 담는 최상위 오브젝트입니다. 익스 4.0부터 생긴 것으로
넷스케이프에는 없는 것이지요..
if (document.all)이라고 하면 익스플로러이면 이란 뜻이지요..
반대로
if (document.layers)라는 것은 넷스케이프에 만 존재하는 것으로 네스케이프라면 이라고 알아
두시면 됩니다.
-----------------------
다시 위의 설명들은 우리는 기준을 최상위 객체인 window를 기준으로 객체를 지정하는 방법이었지요..
다음으로 실제 스크립트의 기준은 어디인지 알아보지요..
스크립트는 문서내에 <script>라는 태그로 embed시킵니다. <head>, <body>에 들어가는 2가지의
스크립트가 있지요. 둘의 차이점이 뭐냐구요? 헤드에 들어가는 것은 문서 스크립트, 바디에
들어가는 것은 본문 스크립트라고 하지요.. 차이는 헤드에 넣으면 문서 전체에 적용되는 것이고
본문에 넣으면 문서의 일부에 적용된다는 점이지요.. 잘 모르시겠다구요..
스크립트로 만든 함수가 하나 있다고 합시다. 이 스크립트를 헤더 부분에 넣으면 문서 부분의 어느부분에서나 그 함수를 호출하는 것이 가능합니다. 하지만 바디에 넣을 경우 이 함수는 스크립트보다 항상 뒤에서 호출해야 합니다. 안그럼 에러가 발생하겠지요. 이외 스크립트 자체의 차이점은 없습니다.
(주로 문서스크립트는 함수 정의를 많이 하고 본문스크리트는 그 정의한 함수를 호출하는 용도로 많이 사용되지요.)
다시 본론으로 돌아와서 한마디로 기준은 스크립트역시 document라는 곳에 embed 되는 것이므로 document가 기준이 된다는 것입니다.
그러므로 window.frames[0].document.images[0] 이렇게 이미지를 지정할 필요없이
document.images[0] 식으로 document 상위의 오브젝트들은 생략하고 표현이 가능하지요..
물론 다 붙여도 상관은 없습니다. 그리고 document를 벗어나면 꼭 다 붙여주어야 하구요..
휴~ 힘들군요..
암튼 DHTML시작을 위한 HTML과 자바스크립트 기본 개념은 이 정도면 될 듯하군요.
언제 뒤를 이어서 계속 할지는 모르지만 암튼 다음에 다시 뵙지요..
(PS. 여기는 배우는 곳이지 서로 전쟁하려는 곳은 아니니 겐세이 놓는 코멘트는 참으셔요. ^^;)
댓글 4
-
Legend
2002.04.11 20:22
네.. 다음 내용으로 폼에 대한 내용을 다루도록 하지요.. -
이승재
2002.04.11 18:55
잘봤습니다..
앞으로도 좋은 강좌 부탁드리고요..
폼과 연관해서 자바스크립트를 응용할 수 있는 예제를 다뤘으면 하는 소망이 있네요 ^^ -
("メ)....inRain
2002.04.21 23:58
좋은강좌 잘 보았습니다 :)
혹시 이 강좌 퍼갈 수 있나요?
물론 출처는 밝힙니다. -
woo me chi
2004.07.20 15:18
좋은 강좌 감사 합니다.
