javascript入門no30

３０、多項目のデータ伝達

前ページでは一つの項目の伝達について説明しましたが、多項目のデーターを転送する場合はどうすればよいのでしょう。

入力窓をたくさん準備して個々に送れば伝えることは出来ます。

具体的には次のデモのようになります。

フレーム

しかしこれでは、項目が多くなるとプログラムも大変です。

そこで、多くの項目を、一つの文字列に連結してしまえば、前ページと同じように伝えられます。

そして、受取った側で、分割して使えばいいのです。

結合と分割の命令は例は次のように作っておいて、これを呼び出して使います。

データ結合 join(",")

データ分割　split(",")

dt=new Array();//立体置き場を作る

function set(){
	//各入力窓の値を立体置き場に入れる
dt[0]=document.hidari_form.hidari_mado0.value;
dt[1]=document.hidari_form.hidari_mado1.value;
dt[2]=document.hidari_form.hidari_mado2.value;
dt[3]=document.hidari_form.hidari_mado3.value;
dt[4]=document.hidari_form.hidari_mado4.value;
	//各階の値を「，」を挟んで結合する。
dd=dt.join(",");
	//結合データを５階にセットする。
document.hidari_form.hidari_mado5.value;
}

//結合は　
//dd=dt[0]+","+dt[1]+","+dt[2]+","+dt[3]+","+dt[4];
//と書くことも出来ます。


function cut(){
	//各入力窓の値を立体置き場に入れる
dd=document.hidari_form.hidari_mado5.value;
	//「 ，」で分割し、立体置き場に収める
dt=dd.split(",");
	//立体置き場から書く窓に入れる
document.hidari_form.hidari_mado0.value=dt[0];
document.hidari_form.hidari_mado1.value=dt[1];
document.hidari_form.hidari_mado2.value=dt[2];
document.hidari_form.hidari_mado3.value=dt[3];
document.hidari_form.hidari_mado4.value=dt[4];

}

具体的には次のデモのようになります。

フレーム

実用的には、さらに各項目をつないだデータを立体置き場に準備しておきその中の一つを選んで別のページに伝え、受け取ったページで項目ごとに分割して使う例が多いと思います。

たとえば

ｄｔ［０］＝”写真ファイル，横幅，縦幅，花の名前，開花時期”；

というようなデータを立体置き場に収めるプログラムを書いておきます。

具体的には

立体置き場に準備

データ分割　split(",")


dt=new Array();//立体置き場の準備

//    写ファイル,横幅,縦幅,花名,開花
dt[0]="001.jpg,120,120,すみれ,３月";
dt[1]="002.jpg,90,120,たんぽぽ,３月";
dt[2]="003.jpg,100,100,れんげそう,４月";
dt[3]="004.jpg,100,140,のぎく,９月";
dt[4]="005.jpg,120,160,すすき,１０月";


function cut(){
	//各入力窓の値を立体置き場に入れる
dd=document.hidari_form.hidari_mado5.value;
	//「 ，」で分割し、立体置き場に収める
dt=dd.split(",");
}
//各窓へはデモのためにセットしてありますが、
//実際は立体置場から直接使うためプログラム不要

表示変更


function get(){
document.syasin.src=dt[0];
document.syasin.width=dt[1];
document.syasin.height=dt[2];
document.migi_form.migi_mado6.value=dt[3];
document.migi_form.migi_mado7.value=dt[4];
}

フレーム
左側の各階のボタンの変わりにサムネル写真を使えば写真の拡大表示のプログラムになります。