6. Javascript와 연동

이번 장에서는 Explorer위주로 DHTML의 기능들을 어떻게 적용하는지에 대한 설명을 하도록 하겠다. 사실 네비게이터는 레이어말고는 쓸 만한 기능이 없으며, 앞으로 설명되는 모든 예들은 주로 익스플로러가 주 대상이 될 것이다.

간단하게 설명하려면, 이전에 자바스크립트와 Navigator객체와의 관계를 한번 떠올려 보자. Navigator객체는 다음과 같은 형태로 구조화 되어 있었던 것을 기억할 것이다.

window - document - form - elements(input, select, textarea)

위와 같은 구조에서 window, document는 유일한(Unique)한 객체(Object)였기 때문에 별도의 지정이나 생성없이도 바로 사용해서 쓸수 있었지만, form부터는 NAME이라는 속성에 주어진 이름에 따라서 특정한 요소(Elements)를 지칭할 수 있었다. 즉, fm이라는 FORM태그의 하위에 있는 txt라는 text박스가 있다고 가정할 경우, 그 값을 변경하기 위해서는 다음과 같이 작성했었다.

document.fm.txt.value = 'deadfire';

DHTML의 요소도 자바스크립트의 계층구조방식과 꼭같다고 생각하면 된다. 즉, 모든 요소는 document의 바로 아래에 위치하게 되면, 유일한 식별자로 id를 사용하게 된다. 이 ID를 이용해서 특정한 요소를 찾아내고 나서는 해당 요소의 STYLE을 바꾸고자 한다면, id.style이라는 객체를 통해서 수행하게 된다.

먼저 이렇게 자바스크립트로 직접 통제하지 않고, 인라인으로OnMouseOver, OnMouseOut이벤트를 통해서 내부에 직접 구현해 보자. 다음은 예제이다. 밑에 "마우스를 이곳에..!"에 마우스를 올려놓으면 글자의 크기가 50 픽셀로 변경되는 것을 볼 수 있을 것이다.

<P onmouseover="this.style.fontSize=50" onmouseout="this.style.fontSize=12"> 테스트 </P>

마우스를 이곳에..!

* 위의 예제에서의 키는 this.style.fontSize=50부분이다. this란, 현재의 객체 즉, P를 말하며, 이 this.style이라는 객체를 통해서 하위의 속성 즉, fontSize에 접근할 수 있는 것이다. 이러한 속성을 이용하면, fontFamily, fontWeight등 모든 속성을 조정할 수 있게 되는 것이다.

이번에는 좀더 응용을 해보도록 하자. Click here라는 글자를 클릭할 때마다 color, style, size가 계속 변하는 예제이다.

<SCRIPT>
var clickcnt = 0;
function ColorMe() {
clickcnt++;
switch( clickcnt%2 ){
case 0: newStyle = "normal"; break;
case 1: newStyle = "italic"; break;
}
switch( clickcnt%5 ){
case 0: newColor = "red";break;
case 1: newColor = "blue";break;
case 2: newColor = "cyan";break;
case 3: newColor = "orange";break;
case 4: newColor = "green";break;
}
PG1.style.color= newColor;
PG1.style.fontStyle = newStyle;
PG1.style.fontSize = 9 + clickcnt*5;
if( clickcnt > 10 ) clickcnt = 0;
}
<SCRIPT>
<P align="center" id="PG1" onclick="ColorMe();">Click Here</P>

Click Here

* 위의 예제에서는 P Tag의 ID가 PG1으로 지정된 것과, 자바스크립트에서 PG1.style.color와 같이 접근하는 방식을 보여주고있다.

이번 예제에서는 STYLE태그와 자바스크립트를 모두 조합한 방법으로 구성해 봤다. 왼쪽에 나타나있는 부분에 마우스를 가져가면 오른쪽에 기사가 나타난다.