DHTML -2-

　スクリプトエラーは、ブラウザ側のチェックで対処することが出来ますが、プログラム上にはエラーは無いが、意図した動作を行えていない場合などは、ブラウザのチェックを行っても解決することは出来ません。

  for (x = 0 ;  x < 10 ; x ++){
     count = count + x;
  }
  document.write (count)

　上記のスクリプトは、構文的に間違っている部分はありませんが、もし、ユーザーが [ count = count + 1 ] のつもりで作成していた場合、最終の[ count ] の値は意図したものではないので、バグということになります。
　ＨＴＭＬは基本的に静的なものですので、情報をリアルタイムに更新するといったことは簡単には行きませんが、複雑なスクリプトを開発する場合は、数値が入力されているか、データが取得できているかといった情報を、すぐに見れるようにする必要があります。
　スクリプトデバッガの力を借りることは出来ませんので、ここでは簡単なデバッガを作成してみることにしましょう。

マウスリアルタイム情報取得

<Html>
<Head>
  <Script Language = "Javascript">
    isNS4 = (document.layers) ? 1 : 0;
    isNS6 = navigator.appVersion.charAt(0) == 5 &&
                    navigator.appName.charAt(0) == "N";
    isIE4 = (document.all) ? 1 : 0;
    function DeBug(Chara)
    {
      if (isIE4 || isNS6){
        el = document.getElementById("LINKMSG1");
        el.style.display = "block"; el.innerHTML = Chara;
      }else if(isNS4) {
        lay = document.layers["PARENT_LINKMSG1"].
                              document.layers["LINKMSG1"];
        lay.document.open();
        lay.document.write(Chara);
        lay.document.close();
      }
    }

    if (isNS4){
      document.captureEvents(Event.MOUSEMOVE);
      document.onmousemove = mousemove;
    }

    function mousemove(myEvents){
      if (isIE4){
        mouseX = event.x; mouseY = event.y;
      }else if(isNS6 || isNS4) {
        mouseX = myEvents.pageX;
        mouseY = myEvents.pageY;
      }
      DeBug( ("MOUSE X= " + mouseX + " / Y= " + mouseY) );
    }
  </Script>
</Head>
<Body OnMouseMove="mousemove(event)" >

  <Table border=01 width=640>
    <Tr><Td height=150>
      <ilayer name="PARENT_LINKMSG1" width="490" height="150">
        <layer name="LINKMSG1"></layer>
        <span id="LINKMSG1"></span>
      </ilayer>
    </Td></Tr>
  </Table>

</Body>
</Html>

■動作例

　緑色でかかれている部分が、直接リアルタイムに情報を取得するためのスクリプト部分です。
　[ function DeBug(Chara) ] は、 [ Chara ] へ送り込まれた信号を、リアルタイム出力用の文字列に変換するファンクションで、<Body> 内に記述されている <ilayer>、<layer>、<span>へ情報を書き出しています。
　マウスイベントは第６章で述べるのでここでは割愛し、リアルタイム情報取得の部分を解説します。

　マウスを動かすと、イベントとして mousemove() が起動し、ここから[ DeBug ] ファンクションが呼び出されます。

DeBug( ("MOUSE X= " + mouseX + " / Y= " + mouseY) );

　この呼び出しを行うことで、 [ Debug (Chara) ] へ、 "MOUSE X=値 / Y=値" といった文字列が代入されたことになります。

　代入された文字列は、それぞれのブラウザに合ったファンクション記述形式にあわせるため、ＩＥ４以降とＮＳ６、ＮＳ４用の２つの分岐を行います。


  if (isIE4 || isNS6){
    el = document.getElementById("LINKMSG1");
    el.style.display = "block"; el.innerHTML = Chara;
  }

　ＩＥ４以降、ＮＳ６では、[ document ]オブジェクトへの書き出しに、 getElementByIdメソッドを用います。　この記述は、指定したレイヤーＩＤ（レイヤー名）のドキュメントを開く意味を持ち、指定したレイヤーの [ innerHTML ]オブジェクトへ内容を書き込むことが可能になります。
　[ innerHTML ]オブジェクトは、中に書かれている [ document ]オブジェクトの内容を書き換えることを意味しており、結果としてリアルタイム性のあるデータ変更が可能になります。

　ＮＳ４では、 getElementByIdメソッドによる指定が出来ないので、 [ document.layer ]メソッドを用いて命令を代用します。


  if(isNS4) {
    lay = document.layers["PARENT_LINKMSG1"].
                          document.layers["LINKMSG1"];
    lay.document.open();
    lay.document.write(Chara);
    lay.document.close();
  }

　レイヤーを指定して、そのレイヤーの中の情報を書き換えるといった意味では、上記のＩＥの場合と同じですが、ブラウザが異なるため、記述の方法が異なります。
　ＮＳ４の場合は、記述させるために指定のレイヤーの OPEN と CLOASE を指定する必要があるため、内容を記述する [ document.write ]メソッドの上下に、オープンとクローズの命令が追加されています。

ページの最上段へ移動します