Explorer 4 에서의 DHTML

Explorer 4 에서의 DHTML은 Netscape에서보다 다양한 기능을 가지고 있으며 복잡하다. Explorer 4 에서의 DHTML은 어떤 태그(tag)에 의존하는 것이 아니고, 일반적으로 사용되는 <div>이나 <table>과 같은 HTML의 새로운 오브젝트(object)와 특성(property)들에 의하여 이루어 진다.

Explorer 4에서의 스타일(style) 오브젝트(object)

Explorer 4에서 HTML 엘레멘트(element)들은 현재 모두 스타일 오브젝트를 지원하며, 이는 그 엘레멘트가 탄력적이 되기 위한 필수적인 요소이다. Netscape에서 <layer> 태그를 사용하는 것과 같은 방식으로 Explorer에서도 "id" 애트리뷰트(attribute)로 지정하여, 스크립트 할 때 그 것을 인식(identify) 할 수 있도록 할 수 있다. 예를 들면:

<div id="thisdiv"></div>

이 스타일 오브젝트를 지명하기 위하여

thisdiv.style

스타일 오브젝트는 여러가지 특성(property)들을 가지고 있어, 이들 특성들을 다룸으로서 엘레멘트가 탄력적으로 보이도록 변화시킬 수 있다. 아래는 이들 몇가지 특성들이 소개되어 있다.

위의 특성들은 전체 특섣들 중의 일부 만 소개되어 있으나, 가장 일반적으로 사용되는 특섣들이다. 기본 문법은 스트일 특성이 어떤 스타일 특성에서나 아래서 설명 한 바와 같이 같다. 이와 같은 스타일 특성에 접속함으로서 대부분의 HTML 엘레멘트에서 그 모양과 스트일이 달라진다. 이는 Netscape에서 <layer> 태그에서 만 가능 한 것과는 대조적이다.

아래 예제에서 마우스를 올려 놓으면 텍스트의 색상이 바뀐다:

텍스트의 색상 바뀜

그 소스를 보면:

<p style="border:solid 1px blue; color:blue; width:200px;"><b><big>
<span onmouseover="this.style.color='red'"
  onmouseout="this.style.color='blue'">텍스트의 색상 바뀜</span>
</big></b></p>

텍스트의 색상을 변경시키기 위하여:

text.style.color='red'

먼저 엘레멘트를 인식하고 접속하기 위하여 id를 사용하고, 스타일 색상 특성을 지정하였으며, 필요하다면 쉽게 그 색상을 변경시킬 수 있다.

모든 스타일 특성들은 읽기/쓰기를 할 수 있으며,
'엘레멘트 인식자(id) ==>> 스타일 오브젝트 ==>> 특성 이름'
방식으로 접속 할 수 있다.

아래의 예제는 마우스를 올려 놓으면(onmouseover) 이미지가 커지고 마우스를 내리면(onmouseout) 다시 작아진다:

코드를 보면:

<p><img id="img" src="../../gif/bntrio101.gif"
   onmouseover="overit()" onmouseout="outit()">

<script language="JavaScript1.2">
function overit(){
  img.style.pixelWidth=120;
  img.style.pixelHeight=42;
}

function outit(){
  img.style.pixelWidth=100;
  img.style.pixelHeight=35;
}
</script></p>

이와 같은 이미지 변화는 문서를 다시 읽어들이지 않더라도 크기를 바꿔 페이지의 다른 부분의 표현에도 영향을 주지만, HTML이나 Javascript 만으로는 표현 할 수 없는 것을 표현하는 것이다.

Netscape 4 에서의 DHTML

Netscape 4 에서의 DHTML은 한가지 태그인 <layer>로 이루어 진다. 이 새로운 태그로, 문서의 다른 내용들과는 관계없이, 어디에나 위치시킬 수 있고, 움직일 수 있고, 내용을 새롭게 변화 할 수 있는등 여러가지 작용을 할 수 있게 하는 것이다.

기본 문법

<layer> 태그의 문법은 다른 HTML의 태그에서와 기본적으로 같다.

<layer>layer의 내용</layer>

<layer>을 웹 페이지에 표시하려면 그 내용(content)을 가져야 하는데 텍스트나, 테이블, 이미지 등이 될 수 있고, 이를 표시하여 보면, 그 layer 내용들이 문서의 다른 내용들과 중복되어 나타나 유동(floats)하는 것을 볼 수 있다. 이는 layer(층)가 그 이름이 말해 주듯이 새로운 층이 그 문서 페이지 위에 있는 것과 같은 것이다.

레이어의 애트리뷰트(Layer attributes)들

layer에는 그 위치를 x, y 좌표 체계로 지정 할 수 있게하고, 배경 이미지나 배경색을 지정하거나, 텍스트의 색상을 지정하고, 감추거나, 잘라내기(clip)를 하는 등 여러가지 조정을 할 수 있게하는 애트리뷰트들이 지원된다.

이와 같은 애트리뷰트들을 조합하여 원하는 위치에, 원하는 모양으로, 혹은 스크립트로 이동, 변화 시킬 수 있다. 간단한 예제를 보면:

<layer name="mylayer" width="100px" height="70px"
  bgColor="#ff00ff"><h3>layer 예제</h3>
</layer>

예제에서 와 애트리뷰트를 지정하지 않았는데, 생략되면 디폴트로 그 layer를 삽입한 위치에서 표현된다.

layer의 코딩(scripting)

layer를 활성화 시키기 위하여, layer에 접속하기 위해서는 다음 기본 문법을 사용한다.

document.layername

한 에 접속하여 탄력적(dynamic) 효과를 내기 위해서는 일련의 애트리뷰트들을 변화 시키면서 계속 접속 반복을 하는 과정이 필요하게 된다. 그렇게 함으로서 이미지가 바뀌거나, 배경색이나 텍스트 색상이 바뀌거나, 위치가 변경되어 움직이는 것처럼 보이게 할 수 있는 것이다.

그 소스 코드를 보면:

<table border="0" cellspacing="0" cellpadding="0"><tr><td>
<ilayer name="ilay">
<layer name="mylay" width=100px height=100px>탄력적 효과 예제</layer>
</ilayer>
</td></tr></table>

<p>
<script language="JavaScript1.2">
<!--
var thecolor=true;
if (document.layers) document.ilay.document.mylay.bgColor="blue";

function changecol(){
  if (thecolor) document.ilay.document.mylay.bgColor="blue";
  else document.ilay.document.mylay.bgColor="red";
  thecolor=!thecolor;
  setTimeout("changecol()",1000);
}
if (document.layers) changecol();
//-->
</script>
</p>

모든 layer 애트리뷰트들은 읽기, 쓰기를 할 수 있다.

탄력적(dynamic) 내용

Explorer 4와 Netscape 4의 DHTML에서 기본적인 탄력적(dynamic) 내용을 작성하는 방법을 더 살펴보자.

Netscape 4에서의 탄력적(dynamic) 내용

Netscape 4에서 내용이 바뀌는 layer 태그는 Netscape 브라우저에 의하여 기존 문서 페이지와는 완전히 별도로 취급되고, 별도의 독립된 자체의 오브젝트(object)로 처리된다. 이는 또 다른 오브젝트를 포함 할 수 있다. 이와 같이 완전히 별도로 취급되는 오브젝트 때문에 탄력적 표현이 가능 한 것이다. 아래 기본적인 예제를 보자:

<layer id="alayer" width=50% height=30></layer>

이 레이어에 접속하기 위한 문법은:

document.alayer.document

이 레이어의 색상을 변경시키는 스크립트를 작성하기 위해서는:

<table border="0" width=50% cellspacing="0"
  cellpadding="0" bgcolor="#ffeeff">
<tr><td height="30">
<ilayer id="ilayid" width=100% height=30>
<layer id="alayer" width=100% height=30>
</layer>
</ilayer>

<script language="JavaScript1.2">
<!--
var msgs=new Array();
msgs[0]="오늘은 즐거운 일요일이다.";
msgs[1]="산으로 가서 자연을 만끽할까?.";
msgs[2]="바다로 가서 해수욕이나 할까?";
var numb=0;
function shiftit(){
  document.alayer.document.write(msgs[numb]);
  document.alayer.document.close();
  if (numb==2) numb=0;
  else numb++;
  setTimeout("shiftit()",3000); // 약 3초
}
window.onload=shiftit;
//-->
</script>

</td></tr></table>

이로서 문서의 다시 읽기를 하지 않고, 내용이 표현되고 지워지기를 탄력적으로 수행한다. 그러나 이는 Explorer에서는 표현되지 않는다.

Explorer 4에서의 탄력적(dynamic) 내용

Explorer 4에서는 탄력적 내용이 <span>, <div> 등의 태그 안에 있는 특수한 특성 innerHTML로 불려진다. 이 특성으로 그 <span>이나 <div>의 내용이 순간적으로 새 값으로 바뀌게 된다. 위의 Netscape 예제를 Explorer 4에서 표현하려면:

<div id="mydiv" style="background-color:#ffeeff: height:18px;"></div>

<script language="JavaScript1.2">
<!--
var iemsgs=new Array();
iemsgs[0]='오늘은 즐거운 일요일이다.';
iemsgs[1]='산으로 가서 자연을 만끽할까?';
iemsgs[2]='바다로 가서 해수욕이나 할까?';
var numb=0;
function shiftit(){
  mydiv.innerHTML=iemsgs[numb];
  if (numb==2) numb=0
  else numb++;
  setTimeout("shiftit()",3000);
}
window.onload=shiftit;
//-->
</script>

이것은 Explorer 4에서는 작동하나 Netscape 4에서는 작동하지 않는다.

Explorer 4에서나 Netscape 4에서 다 작동하려면

Explorer 4에서나 Netscape 4에서 다 작동하려면 위의 두가지를 결합하여야 한다. 위의 예제들을 결합하면: