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태그와 자바스크립트를 모두 조합한 방법으로 구성해 봤다. 왼쪽에 나타나있는 부분에 마우스를 가져가면 오른쪽에 기사가 나타난다.

    <style>
    .normal {color:black; display: none}
    .strong {color:blue; font-weight: bold; background:yellow; display: visible}
    </style>
    <SCRIPT> function Zoom(no) {
    PX1.className = "normal";
    PX2.className = "normal";
    PX3.className = "normal";
    switch(no){
    case 1: PX1.className = "strong"; break;
    case 2: PX2.className = "strong"; break;
    case 3: PX3.className = "strong"; break;
    }
    }
    </SCRIPT>
    <table border width="600">
       <tr>
         <td width="200" align="center">      <p id="first" onmouseover="Zoom(1);">Mouse Over</p>
         <p id="second" onmouseover="Zoom(2);">Mouse Over</p>
         <p id="third" onmouseover="Zoom(3);">Mouse Over</td>
         <td>      <p class="normal" id="PG1">첫번째 기사자료 입니다.</p>
         <p class="normal" id="PG2">두번째 기사자료 입니다.</p>
         <p class="normal" id="PG3">세번째 기사자료 입니다.</td>
       </tr> </table>

    Mouse Over

    Mouse Over

    Mouse Over


    첫번째 기사자료 입니다.

    두번째 기사자료 입니다.

    세번째 기사자료 입니다.



    * 이 예제에서는 STYLE태그 안에서 먼저 .normal, .strong이라는 사용자 정의 속성을 규정하고, 자바스크립트에서 이를 응용하고 있다.

- Last Update : 2001.7.2 by Deadfire(http://www.deadfire.net)

DHTML 강좌
DHTML이란?
CSS
     - CSS정의방법
     - 적용우선순위
     - 텍스트관련속성
     - 텍스트간의설정
     - 여백 지정하기
     - 테두리지정하기
     - 색상 지정하기
     - 기 타
CSS그룹핑
     - 스타일시트그룹
     - 클래스
     - 사용자지정스타일
JSSS
     - 새로추가된JSSS객체
     - JSSS와CSS간의비교
Layer
     - Layer Tag의사용
     - Layer 세부사항
     - Explorer용Layer
Javascript와연동
동적인 변화
     - 텍스트/이미지변환
     - 위치 이동
동적 테이블
     - 동적테이블생성
     - 동적테이블정렬
기 타
     - Font Download
     - Filter
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master