Dynamic HTMLの基礎(3)


「Dynamic HTMLの基礎(2)」では Dynamic HTML に於ける画像の扱い方を、Internet Explorer 4.0x と Netscape 4.0x の違いを考慮しながら、簡単に見てみました。 今回は、文字列 --- 文章の扱い方について考えてみます。

この場合も、Netscape 4.x では LAYER タグを必要とする、という基本は同じです。LAYER 上に表示する文は、LAYER に HTML を読み込むという形で実行されます。 LAYER には text や value のようなプロパティがないからです。 一方、IE(4.x 以上)や Netscape 6 では LAYER は使われず、innerText や innerHTML の機能を使います。

まずは基本的な例を見てみましょう。下の「次へ」ボタンを押してみて下さい。 「ごあいさつ」の下にメッセージが表示され、ボタンを押す毎にメッセージが切り替わるでしょう。 一方、IE 3.x や Netscape 3.x では、テキストエリアが表示され、その中でメッセージが入れ替わるように設定されています。

バージョン 4.x 以上の IE と Netscape をお持ちの方は、上のメッセージを両ブラウザで見比べて下さい。ほとんど違いがないと思いますが、ソースの組み立て方にはかなりの違いがあります。

まずブラウザとそのバージョンの判別をしますが、ここでは dicument.all(IE)や document.layers(Netscape 4.x)、document.getElementById(Netscape 6 や Mozilla)といったメソッドに対して真を返すかどうかを応用します。 HTML のヘッダーに JavaScript で書きます。IE 4.x 以上なら 1、Netscape 4.x なら 2,Netscape 5.x 以上なら 3、その他の IE や Netscape のバージョンには 4 を変数 check に代入しておきます。

check=0;
Br = navigator.appName;
if(document.all) check=1;
else if(document.layers) check=2;
else if((document.getElementById) && navigator.appName.indexOf("Netscape")>-1) check=3;
else if((Br.indexOf("Netscape")>-1) || (Br.indexOf("Internet Explorer")>-1)) check=4;

続いて表示したいメッセージの配列を作ります。メッセージの数が7個あるとすれば、

msg = new Array();
msg[0] = "・・・・";
msg[1] = "・・・・";
msg[2] = "・・・・";
msg[3] = "・・・・";
msg[4] = "・・・・";
msg[5] = "・・・・";
msg[6] = "・・・・";
C = -1;

のように "・・・" の中に表示したいメッセージを入れ、配列の最初を必ず0にします。 0から始まるので、カウント用の変数Cの初期値をマイナス1に設定しています。ここまでは各ブラウザ共通です。

次に、IE 4.x 以上、Netscape 5.x 以上ならスタイルシート上の1ブロックに、Netscape 4.x なら LAYER 上にメッセージの書き込みをし、それ以外ならページ上への直接の書き込みは出来ないのでテキストエリアに書き込む、という使い分けをしなければなりませんから、メッセージの表示場所に JavaScript で次のように設定します。

<SCRIPT Language="JavaScript">
<!--
document.write("<DIV align='center'><FONT size=5>ごあいさつ</FONT></DIV>");
if((check==1)||(check==3)) document.write("<P id='greet' style='color:red'></P>");
else if(check==2) document.write("<P style='margin-top:3em'><LAYER name='greet'></LAYER></P>");
else if(check==4) document.write("<FORM name='greet'><TEXTAREA name='msg' cols='80' rows='2' wrap='physical'></TEXTAREA></FORM>");
//-->
</SCRIPT>

IE 4.x(check==1 の場合)と Netscape 6(check==3 の場合)は同じ P ブロックに書き込むように設定しています。 Netscape 4.x(check==2 の場合)も P ブロックを使用しますが実際には LAYER に書き込みます。いずれの場合も表示場所を操作できるように、id とか name とかで名前指定しています。ここのサンプルでは「次へ」ボタンが押されるとメッセージが順次表示される設定なので、ボタンが押されると(onClick)呼び出される varTxt() 関数を HTML のヘッダー部分で次のように定義しています。

function varTxt() {
C++;
if(C>6) C=0;
if(check==1) document.all.greet.innerText=msg[C];
else if(check==2)
{
document.layers["greet"].document.write("<HTML><BODY><BR><BR><FONT color='red'>",msg[C],"</FONT><BR><BR></BODY></HTML>");
document.layers["greet"].document.close();
}
else if(check==3) document.getElementById("greet").innerHTML = msg[C];
else if(check==4) document.greet.msg.value = msg[C];
}

ボタンが押される毎に0で始まる数字が順次変数Cに代入され、配列で用意したC番目のメッセージが読み込まれると言うプログラムです。メッセージの数が7個なので、6の次は自動的に0に戻るよう設定しています。

Netscape 4.x では HTML ファイルを作って読み込み、これを LAYER 上に表示するという仕組みになっています。 ここでは簡単なメッセージの表示なので、こうしていますが、実は既成の HTML ファイルを document.layers [ (LAYER名) ].src = "(HTML ファイル名)" などとして LAYER 上に読み込むことも出来るわけです。

ページ上の表示を読込後に変化するよう操作できるというのは、まさに画期的ですが、次のような疑問が生まれてきます。こうした方法を使えば、これまでテキストボックスの中か、ステータスバーにしか表示できなかった時間のリアルタイム表示を通常の HTML ページ上に表示できるのではないか? また、Internet Explorer がサポートしていない <BLINK> タグの代わりに文字を点滅させたり、Netscape がサポートしていない <MARQEE> タグの代わりにページ上でメッセージをスクロール表示させることも出来るのではないか、と?答えは、yes です。

下の各ボタンを押すと、それぞれ現在時間のリアルタイム表示・文字の点滅・文のスクロール表示が交替で実行されます。Internet Explorer 4.0x 以上、、Netscape 4.x 、Netscape 6 で全く同じように動きます。 一方 IE 3.x や Netscape 3.x ではテキストボックスの中に表示することで代用しています。

     

まずした準備として、HTML ヘッダー部の JavaScript セクションに以下の変数を定義しておきます。

//タイマー用の変数 timer
timer = 0;
//点滅表示のタイミングを決める変数 count
count = 0;
//スクロール文用の変数 message には、メッセージの前に同じ文字数の全角スペースを入れておく
message = "     (全角スペース)               いかがでしたか?今後とも梅ちゃん堂をよろしくお願いします。";

次にページ中の各メッセージ表示部分に JavaScript で次のように表示の土台を作ります。

if((check==1)||(check==3)) document.write("<P id='message'> </P>");
else if(check==2) document.write("<P style='margin-bottom:2em'><LAYER name='message'></LAYER></P>");
else if(check==4) document.write("<FORM name='message'><INPUT type='text' name='view' size='80'></FORM>");

各ボタンを押すと起動するルーチンは関数にまとめてHTML ヘッダー部の JavaScript セクションに定義します。まず「現在の時間」で呼び出される clock() 関数:

function clock() {
clearTimeout(timer);
timer = setTimeout("clock()", 1000);
Dt = new Date();
tid = Dt.toLocaleString();
if(check == 1) document.all.msie.innerText = "現在時間は "+tid;
else if(check == 2)
{
document.layers["netscape"].document.write("<HTML><BODY><DIV align='center'>現在時間は ",tid,"</DIV></BODY> </HTML>");
document.layers["netscape"].document.close();
}
else if(check==3) document.getElementById("message").innerHTML ="現在時間は "+tid;
else if(check==4) document.message.view.value = 現在時間は "+tid;
}

「文字の点滅」で呼び出される blinker() 関数:

function blinker() {
var Ron = "論より証拠(点滅させたい語)";
clearTimeout(timer);
timer = setTimeout("blinker()",500);
count++;
if(check == 1)
{
if(count % 2 == 0) document.all.msie.innerText=Ron;
else document.all.msie.innerText="  ";
}
else if(check==2)
{
if(count % 2 == 0)
{
document.layers["netscape"].document.write("<HTML><BODY><DIV align='center'>",Ron,"</DIV></BODY></HTML>");
document.layers["netscape"].document.close();
}
else
{
document.layers["netscape"].document.write("<HTML><BODY><DIV align='center'>  </DIV></BODY></HTML>");
document.layers["netscape"].document.close();
}
}
else if(check==3)
{
if(count%2==0) document.getElementById("message").innerHTML=Ron;
else document.getElementById("message").innerHTML="  ";
}
else if(check==4)
{
if(count%2==0) document.message.view.value=Ron;
else document.message.view.value="  ";
}
}

「文字を流す」で呼び出される marquee() 関数:

function marquee() {
clearTimeout(timer);
timer = setTimeout("marquee()", 200);
if(check == 1)
{
document.all.msie.innerText = message;
message = message.substring(2,message.length)+message.substring(0,2);
document.all.msie.innerText = message;
}
else if(check == 2)
{
document.layers["netscape"].document.write("<HTML><BODY><DIV align='center'>",message,"</DIV></BODY></HTML>");
document.layers["netscape"].document.close();
message = message.substring(2,message.length)+message.substring(0,2);
document.layers["netscape"].document.write("<HTML><BODY> <DIV align='center'>",message,"</DIV></BODY></HTML>");
document.layers["netscape"].document.close();
}
else if(check==3)
{
document.getElementById("message").innerHTML=comment;
comment=comment.substring(2,comment.length)+comment.substring(0,2);
document.getElementById("message").innerHTML=comment;
}
else if(check==4)
{
document.message.view.value=comment;
comment=comment.substring(2,comment.length)+comment.substring(0,2);
document.message.view.value=comment;
}
}

「文字の点滅」を、もし文の中の1語に使いたいようなときは、<P> タグの代わりに <SPAN> タグを使えばよいと思います。




次のトピックは「入力文字のチェック」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで