DHTML -2-

　前のページで、２枚のレイヤーを配置するスクリプトを紹介しましたが、この方法をちょっといじれば、別にここで記載しなくても複数のレイヤーを配置することは出来ると思います。
　しかし、レイヤーの数が後から増減した場合に、毎回「 for 」のルーチンを書き換えるというのはあまり現実的な話ではありません。　そういった意味でここでは、レイヤーの増減にフレキシブルに対応することの出来るスクリプトを紹介しましょう。

レイヤー自動処理の概念
　複数のレイヤーを制御するためには、共通ＨＴＭＬ部を配列化する必要がありますが、これは、第２章で述べたとおり、変数と同じ宣言で造れますので問題は無いでしょう。 aaa[1] = "HTML" / aaa[2] = "HTML" といった具合で書き込んでいくことになります。

レイヤーの個数を判別する

<Html>
<Head>
  <Script Language = "Javascript">
    isIE4 = (document.all) ? 1 : 0;
    isNS4 = (document.layers) ? 1 : 0;
    isNS6 = navigator.appVersion.charAt(0) == 5 
                  && navigator.appName.charAt(0) == "N";


    function Input_HopupMessage() {
      this.msg    = new Array();
      this.msg[0] = "";
      this.msg[1] = "<Table border=0 width=100 height=100 
                Bgcolor='#8899bb'><Tr><Td>TEST</Td></Tr></Table>";
      this.msg[2] = "<Table border=0 width=100 height=100 
                Bgcolor='#88bb99'><Tr><Td>TEST</Td></Tr></Table>";
      this.msg[5] = "<Table border=0 width=100 height=100 
                Bgcolor='#bb8899'><Tr><Td>TEST</Td></Tr></Table>";
    }


    var HopupMessage = new Input_HopupMessage();
    for(xx=0; xx < HopupMessage.msg.length ; xx++) {
      if ( isIE4 || isNS6 ){
        document.write("<Div style='position:absolute;display:
                     block;top:"+ (xx * 30) + ";left:"+ (xx * 50) +"'>");
        document.write( HopupMessage.msg[xx] );
        document.write("</Div>");
      } else if( isNS4 ) {
        document.write("<Layer visibility='show'top='"
                            + (xx * 30) +"'left='"+ (xx * 50) +"'>");
        document.write( HopupMessage.msg[xx] );
        document.write("</Layer>");
      }
    }

  </Script>
</Head>
<Body>
</Body>
</Html>

■動作例

　「 function Input_HopupMessage(){ ～ } 」は、中に書き込むＨＴＭＬ配列をトータルで認知させるためにファンクションで囲んであります。　このルーチンは、その下の「 var HopupMessage = new Input_HopupMessage(); 」から呼び出されることで、　中に格納されている配列「 this.msg 」の最後の配列番号を返してきます。
　このスクリプトで与えられた「 HupupMessage 」を、「 for 」ルーチンの終了値として指定すれば、レイヤーの増減数に応じて、自動的に作成されるレイヤーの総数が変化することになります。

動作例：キャプチャー (IE5.5)
　さて、上記のスクリプトを動作させると、上のキャプチャー画面のような表示になります。レイヤーを３つ作成したわけですが、その間に「 undefined 」という不可解な文字列がはさまれているのにお気づきでしょうか。　これは、作成したレイヤーの番号と深い関係があります。　上記のスクリプトの「　□　」の部分が、レイヤーの中に書き込むＨＴＭＬを配列に格納している部分ですが、レイヤー番号が「１」、「２」、「５」となっているため、「 var HopupMessage = new Input_HopupMessage(); 」で呼び出される配列最終の番号が「５」となり、結果として「 for 」は、ループを０～５までの６回繰り返すことになります。
　しかし、スクリプト上で　「 this.msg[3] 」、「 this.msg[4] 」を宣言していない　為、その配列には何も格納されていない「 undefined 」が代入されてしまっているわけです。
　これを回避するには、「 for(){ ～ }」の中に文字列が挿入されているかどうかを判定する式を挿入し、文字列が確認された場合にのみ表示するというスクリプトを組まなくてはなりません。

レイヤーの個数を判別する

<Html>
<Head>
  <Script Language = "Javascript">
    isIE4 = (document.all) ? 1 : 0;
    isNS4 = (document.layers) ? 1 : 0;
    isNS6 = navigator.appVersion.charAt(0) == 5 
                  && navigator.appName.charAt(0) == "N";

    function Input_HopupMessage() {
      this.msg    = new Array();
      this.msg[0] = "";
      this.msg[1] = "<Table border=0 width=100 height=100 
                Bgcolor='#8899bb'><Tr><Td>TEST</Td></Tr></Table>";
      this.msg[2] = "<Table border=0 width=100 height=100 
                Bgcolor='#88bb99'><Tr><Td>TEST</Td></Tr></Table>";
      this.msg[5] = "<Table border=0 width=100 height=100 
                Bgcolor='#bb8899'><Tr><Td>TEST</Td></Tr></Table>";
    }

    var HopupMessage = new Input_HopupMessage();
    var count = 0;
    for(xx=0; xx < HopupMessage.msg.length ; xx++) {
      if (HopupMessage.msg[xx] ) {
        if ( isIE4 || isNS6 ){
          document.write("<Div style='position:absolute;display:
                     block;top:"+ (count * 30) + ";left:"+ (count * 50) +"'>");
          document.write( HopupMessage.msg[xx] );
          document.write("</Div>");
        } else if( isNS4 ) {
          document.write("<Layer visibility='show'top='"
                            + (count * 30) +"'left='"+ (count * 50) +"'>");
          document.write( HopupMessage.msg[xx] );
          document.write("</Layer>");
        }
        count ++;
      }
    }

  </Script>
</Head>
<Body>
</Body>
</Html>

■動作例

動作例：キャプチャー (IE5.5)
「 if (HopupMessage.msg[xx] ) 」 は、「ｘｘ」番号の配列に文字が格納されている場合「 true 」　そうでないばあいは「 false 」を返す判定式です。　この場合、「 this.msg[0] = "" 」は、宣言されていますが文字が格納されていないヌルの状態ですので、条件式では「 false 」となります。　また、「 this.msg[3] 」、「 this.msg[4] 」に関しては、宣言すらされていない状態ですので当然「 false 」となります。　条件式では、「 true 」の場合のみレイヤーを作成するルーチンが動作しますので、この場合は「 this.msg[1] 」、「this.msg[2] 」、 「this.msg[5] 」のみが画面上に作成されることになります。
　レイヤーの配置位置を決定するルーチンもついでに、レイヤーが存在している場合に限ってカウントするよう、「 for() { ～ } 」のルーチンとは別に、「 count 」変数を作成し、条件文が合致した場合に限って、「 count ++ 」を実行するようにしています。

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