S-JIS[2004-01-10/2005-04-23] 変更履歴

DynamicHTML

動的にHTMLを変えることが出来る。こういうのをDHTMLって言うのかな？

基礎
特定部分を変更する [2005-04-23]
画面全体を変更する [/2005-03-24]

使い方

HTMLの途中で「document.write()」を使ってタグを書き出すことにより、HTMLを作り出す。

↓例↓

HTML：

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
    document.write("<TITLE>");
    document.write("DHTMLのサンプル");
    document.writeln("</TITLE>");
//-->
</SCRIPT>
</HEAD>

<BODY>
<TABLE BORDER="1">
<TR>
<SCRIPT language="JavaScript">
<!--
    for(var i=0; i<50; i++){
        document.write("<TD>");
        document.write(i + 1);
        document.writeln("</TD>");
    }
//-->
</SCRIPT>
</TR>
</TABLE>
</BODY>

</HTML>

サンプル

特定部分を変える方法

タグ内のＨＴＭＬを書き換えてやることにより、特定部分だけを変更することが出来る。[2005-04-23]

サンプル：クリックした時だけ一部を表示し、もう１度クリックしたら隠す

ここをクリックすると…

function part_change(id){
	var dst=document.getElementById(id+"_dst");
	var src=document.getElementById(id+"_src");
	if(dst.style.visibility != "visible"){
		dst.style.visibility = "visible";
		dst.innerHTML = src.innerHTML;
	}else{
		dst.style.visibility = "hidden";
		dst.innerHTML = "　";
	}
}

<table border="1">
	<tr>
		<td><a href="javascript:part_change('span_id')">ここをクリックすると…</a></td>
		<td><span id="span_id_dst">　</span>
		    <span id="span_id_src" style="display:none">
			<table border="1">
				<tr><td>abc</td><td>123</td></tr>
				<tr><td>def</td><td>456</td></tr>
			</table>
		    </span>
		</td>
	</tr>
</table>

画面全体を値に応じて変える方法

ブラウザ内部でデータを保持し、データに応じて画面を変えることが出来る。けっこう面倒だけど。

HTMLファイルを2つ用意し、片方をフレーム用、他方を表示プログラム用とする。

フレーム用は、データ保持領域と画面表示用の2つのフレームを用意する。
表示プログラム用は上述の方法で全HTMLを作成するようにする。ただし、画面表示用フレームに出力する。

↓例↓

フレーム用HTML：

<HTML>
<HEAD>
<TITLE>DHTMLテスト</TITLE>
</HEAD>

<FRAMESET rows="1,*" border="0" frameSpacing="0" frameBorder="0">
<FRAME name="dprog" src="dhtml_test_main.html" noResize scrolling="no"/>
<FRAME name="dbody"/>
</FRAMESET>
</HTML>

↑この例では、データ保持領域の名前をdprogとしている。この分のフレームは画面に表示されないように徹底的にパラメータを指定する。
　画面表示をする為の領域の名前はdbodyとしている。

表示プログラム用HTML：

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
        var cell_count=1;       //セル数

        draw(); //初回表示

//HTML作成
function draw(){
        with(parent.dbody){     //表示用フレームのドキュメントにHTMLを書き込む
                document.open();
                document.writeln("<HTML><HEAD>");
                document.writeln("<TITLE>DHTMLテスト（セル数：" + cell_count + "）</TITLE>");
                document.writeln("</HEAD><BODY>");
                document.writeln("<TABLE BORDER='1'><TR>");
                for(var i=0;i<cell_count;i++){
                        document.write("<TD>");
                        document.write(i+1);
                        document.writeln("</TD>");
                }
                document.writeln("</TR></TABLE>");
                document.writeln("<P><INPUT TYPE='BUTTON' VALUE='セルの個数を増やす' onClick='parent.dprog.inc()'></P>");
                document.writeln("</BODY><HTML>");
                document.close();
        }
}

//ボタン押下時の動作
function inc(){
        cell_count++;
        draw();
}
//-->
</SCRIPT>
</HEAD>
</HTML>

サンプル

グローバル変数にデータを保持しておく。
表示用関数draw()は、親フレームの表示用領域（dbody）のdocumentに対して全HTML（タグ）を書き込む。
なお、writeln()は出力後改行するがwrite()は改行しない。（サンプルを「ソースの表示」で見てみると違いが分かる）
タイトルはここで書き出してもウィンドウのバーには使われない（フレームの中だから）が、履歴の「戻る」「進む」には出てくる。[/2005-03-24]
出力したボタンがクリックされた場合の動作inc()を呼び出すには、データ保持領域（dprog：ここにプログラムも格納されている）を指定する必要がある。
ボタン自体は表示用領域に出力されている為。「onClick='inc()'」で実行したいなら、表示用領域にJavaScriptも出力してやればいいが…。

すなわち、プログラムはdprogフレームで実行され、dbodyフレームに出力している。ボタンはdbodyフレーム内にあるため、dprogフレーム内の関数にアクセスする為にはきちんとフレーム名を指定しなければならない。

JavaScriptへ戻る / 技術メモへ戻る

メールの送信先：ひしだま