10、データベース


前の例題ではデータが沢山なければあまり意味がありませんでした。
一般にデータを保存して、目的に合わせてその都度加工して取り出して使うシステムをデータ−ベースといいます。
この場合、データは1箇所に保存し、使う人は別の所でプログラムをしてデータを使うのですから データとプログラムは別ファイルになっていて、それを必要なときに結合して使えなければなりません。


1、JSファイル

JavaScript言語だけで書かれたソースのファイルは「****.js」という拡張子を付けて保存します。
このファイルの場合のソースの記述とHTMLでの記述の違いは
HTMLファイルJSファイル
<script language="javascript"> <!-- kaiin=new Array(); // no=0;kaiin[no]="宮本幸雄"; //no++;kaiin[no]="西部明郎"; no++;kaiin[no]="やまと"; no++;kaiin[no]="五十嵐冴子"; no++;kaiin[no]="おかりん"; no++;kaiin[no]="熊谷みきお"; //--> </script> kaiin=new Array(); // no=0;kaiin[no]="宮本幸雄"; //no++;kaiin[no]="西部明郎"; no++;kaiin[no]="やまと"; no++;kaiin[no]="五十嵐冴子"; no++;kaiin[no]="おかりん"; no++;kaiin[no]="熊谷みきお";

のように、当然のことながらJavaScript専用ファイルですので「言語の宣言」は書かず、中身だけ書きます。

2、結合

実際のホームページに使うためにはJSファイルに書かれたJavaScriptをHTMLの中に挿入して合体しないと使えません。
そのためには
<script language="javascript" src="JSファイル名"></script> のように書けば、この位置に
<script language="javascript"> <!-- JSファイルの記述 --> </script> が挿入され、結合されます。

この「JSファイル名」の部分を「URL/JSファイル名」と書けば、
他のサーバーにあるファイルだって使えます。
ちなみに私のサーバーにある会員名のデータベースファイルを(デモ用にしてあります)

<script language="javascript" src="http://qpon-toyota.com/java/nyumon/kaiin.js"> </script>
と書いて結合して使ってみます。
階数を入力して呼出ボタンをクリックしてみてください。

階より上の会員10人を
はーい!

です。


3、体験してみよう

それでは次のソースをコピーして「メモ帳」に貼り付け、HTMLファイルとして保存した上で、そのファイルをダブルクリックして開いてみてください。
どこにも名簿が書かれていないのに、QLINKの仲間の名前が呼び出せるはずです。
<html> <head> <title>javascript_no7</title> <script language="javascript" src="http://qpon-toyota.com/java/nyumon/kaiin.js"> </script> <script language="javascript"> <!-- //10人呼出 function yobidasi_10(){ kaisu=document.kaiin_form.input_kai.value; kaisu=parseInt(kaisu); dt="";    //10人の名前を連結して保存する置場 max=kaisu+10; for(kai=kaisu;kai<max;kai++){ if(kaisu>n){ //データベースでは会員数を「n」置場に格納 na="屋上です・"; }else{ na=kaiin[kai]+"・"; } dt=dt+na; } document.kaiin_form.out_kai.value=dt; //<FORM>の窓に10人を表示する } //--> </script> </head> <body> <form name="kaiin_form"> <input type=text name="input_kai" value="" size=2>階より上の会員10人を <input type=button value="呼出" onClick="yobidasi_10()"><br> はーい!<br> <input type="text" name="out_kai" value="" size=140><br>です。 </form> </body> </html>