15、大部屋


会員の名前を入力したら、URLやメールアドレスが検索できる本格的なデータ−ベースソフトに近づくきましたが、 並べ替えをすると、階数がそろわなくなってしまう。
これではまだデータベースとしては不完全です。
一つの置場にすべてのデータを結合して保存しておけば、並べ替えも一緒にできる!、そして、そのデータ使うときに分割して復元できれば解決できそうです。
1、データの結合

個々の立体置場の壁を取り払い大部屋にして、データを連結します。
このときデータの境目に仕切板を挟みます。仕切板に使う文字はデータの中に使われない文字を当てます。
(ただし¥@&は使わない方が無難)
例えば「 」を使って次のように連結します。

階数\置場会員,ホームページ,URL,メールアドレス(kaiin[ ]
0(n=0宮本幸雄還暦QPONhttp://www2a.biglobe.ne.jp/~qpon/qpon@testmail.com
1(n++やまと多趣味人間http://homepage1.nifty.com/PGA01511/morikazu.kojo@testmail.com
2(n++五十嵐冴子タッチおばさんhttp://www.tesio.net/~sae/sae@testmail.com
3(n++おかりん合切袋http://users.goo.ne.jp/gassaibukuro/gassaibukuro@testmail.com

具体的にJavaScriptでは、次のように書きます。
kaiin=new Array(); n=0;kaiin[n]='宮本幸雄,還暦QPON,http://www2a.biglobe.ne.jp/~qpon/,qpon@testmail.com'; n++;kaiin[n]='やまと,多趣味人間,http://homepage1.nifty.com/PGA01511/,morikazu.kojo@testmail.com'; n++;kaiin[n]='五十嵐冴子,タッチおばさん,http://www.tesio.net/~sae/,sae@testmail.com'; n++;kaiin[n]='おかりん,合切袋,http://users.goo.ne.jp/gassaibukuro/,gassaibukuro@testmail.com'; 実際にJSファイルを上記の方式で

http://www.ne.jp/asahi/qpob/b/java/nyumon/kaiin_1.js

に作っておきました。
このファイルを結合して、これから色んな活用をしてみます。

2、データの分割


分割データを収容する立体置場名=連結データのある置場名.split(”仕切り文字”);

と書くと仕切り文字毎に立体置場の各階に分割して納められます。

kaiin[0]='宮本幸雄,還暦QPON,qpon@testmail.com,http://www2a.biglobe.ne.jp/~qpon/';

を例にしてみますと

dt=kaiin[0].split(",");

を実行した場合

dt[0]には"宮本幸雄"
dt[1]には"還暦QPON"
dt[2]には"qpon@testmail.com"
dt[3]には"http://www2a.biglobe.ne.jp/~qpon/"

が入ります。

3、並べ替え

それではJSファイルのデータを分割しながら会員リストを作って見ましょう。
会員リスト
次に「あいうえお順」に並べ変たうえでデータを分割しなが作って見ましょう。
あいうえお順リスト
このソースは
<html> <head> <title>javascript入門no151</title> <script language="javascript" src="kaiin_2.js"></script> </head> <body> <center> QLINK会員一覧表<br>(あいうえお順)<br> <table border=1> <tr><th>no</th><th>会員</th><th>ホームページ</th><th>URL</th><th>メールアドレス</th></tr> <script language="javascript"> <!-- kaiin.sort(); //あいうえお順に並び替え(この行がないと登録順) for(i=0;i<=n;i++){ dt=kaiin[i].split(",");    // ","で分割しdtという立体置場に格納 document.write("<tr><td>",i+1,"</td><td>",dt[0],"</td><td>",dt[1],"</td>"); document.write("<td>",dt[2],"</td><td>",dt[3],"</td></tr>\n"); //HTMLに書出し } //--> </script> </table> </center> </body> </html>


3、検索

合体してあると検索も全データを対象にできる。
名前だけではなく、URLでもホームページタイトルでも、とにかく全データの中に一致する文字が含まれていれば教えてくれる。
次の検索キーワードに入力して体験してみてください。

検 索 キ ー ワー ド
.

会   員   名 さん
ホームページタイトル
ホームページアドレス
電 子メールアドレス

ソースは以下の通りです。
<html> <head> <title>javascript入門no15</title> <script language="javascript" src="http://qpon.quu.cc/java/nyumon/kaiin_2.js"> </script> <script language="javascript"> <!-- //あいうえお順 kaiin.sort(); //検索 dm_dt="";kaisu=0; function kensaku(){ kaisu=-1; se_dt=document.kaiin_form.input_name.value; for(i=0;i<=n;i++){ iti=kaiin[i].indexOf(se_dt,0); if(iti != -1){ kaisu=i; break; } } if(kaisu>=0){ dt=kaiin[kaisu].split(",") document.kaiin_form.out_name.value=dt[0]; document.kaiin_form.out_title.value=dt[1]; document.kaiin_form.out_url.value=dt[2]; document.kaiin_form.out_ml.value=dt[3]; }else{ document.kaiin_form.out_title.value=""; document.kaiin_form.out_name.value="該当者なし"; document.kaiin_form.out_url.value=""; document.kaiin_form.out_ml.value=""; } } </head> <body> <form name="kaiin_form"> <table> <tr><td>検 索 キ ー ワー ド<br>.</td><td><input type=text name="input_name" value="" size=16> <input type=button value="検 索" onClick="kensaku()"><hr></td></tr> <tr><td>会   員   名</td><td> <input type=text name="out_name" value="" size=16>さん</td></tr> <tr><td>ホームページタイトル</td><td><input type=text name="out_title" value="" size=40> </td></tr> <tr><td>ホームページアドレス</td><td><input type="text" name="out_url" value="" size=60> </td></tr> <tr><td>電 子メールアドレス</td><td><input type="text" name="out_ml" value="" size=60> </td></tr> </table> </form> <hr> <hr> </td></tr></table> </center> </body> </html>