jsファイルで配列を定義し、ｊｓファイルを切りかえて使う

解決済

質問者：rqg2010
質問日時：2006/11/12 07:29
回答数：5件

お世話になります。
jsファイルで配列を定義し、その配列の内容を表示しています。
いくつかのjsファイルで配列を定義し、そのjsファイを切りかえることにより、表示する配列の内容を切りかえることはできないでしょうか。

例えば
data_a.js
DataAry = new Array(
new WNData('2006/11/10','ああ','・・.html'),
new WNData('2006/11/10','いい','・・.html'),
・・・・・
);
data_b.js
DataAry = new Array(
new WNData('2006/11/10','aa','・・.html'),
new WNData('2006/11/10','bb','・・.html'),
・・・・・
);

dspDataAry.jsで
function WNData(Date,Cmnt,Href,Target){
this.Date=Date;
this.Cmnt=Cmnt;
this.Href=Href;
}
function DspData(){
strhtml="・・・・
（DataAryを表示するhtmlを作成）
return strhtml;
}

dspDataAry.htmlで
<script type='text/javascript' src='dspDataAry.js'></script>
<script type='text/javascript' src='data_a.js'></script>
<body>
<script type='text/javascript'>
</script>
<input id="btn_b" type="button" value="bを表示" onClick="ｂを表示する関数"<br>
</body>
とすれば、data_a.jsの配列の内容が表示されます。
ボタン「ｂを表示」を押すことにより、
data_b.jsを読み込んで、その内容を表示するようにできないものでしょうか。
onClick="ｂを表示する関数"この「ｂを表示する関数」をいう関数をどのように書いたらよいのかわかりません。

data_a.js、data_b.jsで定義する配列名は同じとします。
data_c.js、data_d.js・・・といくつかに分けたく思っています。
前もってdata_b.jsを読み込むのでなく、必要に応じて読み込んで表示するようにしたいのですが。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

No.1

回答者： yambejp
回答日時：2006/11/12 13:03

あとからソースを読みなおすわけですからajaxでやるしかないでしょう。

それがいやなら別ウィンドウを開いて、そのウィンドウの関数を
参照するというやりかたもないことはないです

- 0
- 件

通報する

この回答へのお礼

yambejpさん、レスありがとうございます。
>あとからソースを読みなおすわけですからajaxでやるしかないでしょう。
そうですか。Ajaxの場合、配列を読むのは簡単ではないように聞いたのですが。Jsonとかいう方法でないとダメとか。
そして、そのJsonでの配列の定義がめんどくさいとか。
もし、他の方法があれば教えていただけるとありがたいのですが。

通報する

お礼日時：2006/11/12 16:47

No.2

回答者： noname#23734
回答日時：2006/11/13 01:08

head内 ****************

- 0
- 件

通報する

No.3

回答者： noname#23734
回答日時：2006/11/13 01:11

No2のname="js"とwindow.location="dspDataAry.html?js=data_a"

を忘れました。

この回答への補足

al785z29さん、レスありがとうございます。
現在、教えていただいた方法で動作を試しています。
まずは、お礼まで。

補足日時：2006/11/13 13:13

通報する

- 0
- 件

通報する

この回答へのお礼

al785z29さん、こんにちは
教えていただいた方法を試してみましたが、動作しません。
No3で
>No2のname="js"とwindow.location="dspDataAry.html?js=data_a"
>を忘れました。
と、いうことですが
これをどこへ記述すれば良いのかも理解できないでいます。
また、No2で、
>********** head内 **************************
><script type="text/javascript">
>URL=window.location
・・・・・・・
>}
></script>
と、いうことですが、
「」は、必要ないのでしょうか。
つまり、
><script type="text/javascript">
></script>
としなくても良いものでしょうか。

どうも、きわめて初歩的な質問となっていると思いますが、
<input type="submit">
と、いうことがなかなか理解できないもので
もし、できましたら、追加で教えていただけないでしょうか。
よろしくお願いいたします。

通報する

お礼日時：2006/11/14 10:40

No.4

回答者： noname#23734
回答日時：2006/11/14 12:57

寝ぼけたことを書いて済みませんでした！！

かなり間違っていますね。
********** head内 **************************
<script type="text/javascript">
/*--URLを文字として扱うために（+ ""）を追加--*/
URL=window.location + ""
if(URL.indexOf('?') != -1){
/*---
クエリ列の値を取得
URLを?で分割してその後を取得しさらにそれを=で分割しその後を取得
------*/
jsfile = URL.split("?")[1].split("=")[1]
/*---
jsfileが配列のファイル名なのでそれを使ってscriptタグを書き込む
※Firefox対策に/の前に\を入れる
URLがdspDataAry.html?js=data_aなら
※ファイル名はURLで使える文字にしてくださいね。
<script type="text/javascript" src="./data_a.js"></script>
となります。
------*/
document.write('<script type="text\/javascript" src=".\/'+jsfile+'.js"><\/script>')
}else{
/*---
クエリ列なしの時は強制的にクエリ列を付けてリクエスト
実は、=の前のjsはなんでも良いのです。
------*/
window.location="dspDataAry.html?js=data_a"
}
</script>
<script type='text/javascript' src='dspDataAry.js'></script>
**********************************************

<form action="dspDataAry.html" method="get">
<select name="js">
<option value="data_a">data_a</option>
<option value="data_b">data_b</option>
<option value="data_c">data_c</option>
<option value="data_d">data_d</option>
</select>
<input type="submit" value="送信">
</form>
<script type='text/javascript'>
</script>
<input id="btn_b" type="button" value="bを表示" onClick="ｂを表示する関数"<br>
</body>

=====以降参考==========================================
実際にやっているサイトさん
http://bon.shiriagari.com/map/index.html?cate=al …
Firefox,IE6では見れています。
<script type="text/JavaScript" src="./js/file.js"></script>
をダウンロードして研究してみてください。

なんでここまでjavascriptに拘るのか不明ですが・・・

====テストするなら==================
jsfileをalertで表示して確認。
配列ファイルにalertを仕込んでディレクトリ違いなどを確認。
こんなところでしょうか。

この回答への補足

al785z29さん、できました。
ありがとうございました。
このような方法があるとは。JavaScriptは、実に奥が深く感じられます。

そして、この方法は、
<input type="submit" value="送信">
により、
data_bとかdata_cを読み込み直すと同時に
dspDataAry.html　も読み込み直しているってことでしょうか。
そして、data_bとかdata_cのみを読み込み直して
その内容を表示し直すにはやはり、Ajaxなどの技術が必要になるのでしょうか。
もし、できましたら教えていただけないでしょうか。

補足日時：2006/11/14 16:38

通報する

- 0
- 件

通報する

この回答へのお礼

al785z29さん、こんなに早くレスありがとうございます。
今から必死に挑戦します。
結果は、また、報告させていただきます。

＞なんでここまでjavascriptに拘るのか不明ですが・・・
他を知らないだけです。
順次勉強しようと思っていますが、このような場合何がよいものやら。
どうすればよいものやら。と、いったところである程度わかるつもりのJavaScriptでやってみています。
スレッドのテーマと異なってしまいますがもしご教示いただければありがたいです。
まずは、お礼まで。

通報する

お礼日時：2006/11/14 13:47

No.5ベストアンサー

回答者： noname#23734
回答日時：2006/11/14 18:39

テスト成功おめでとう＾＾

＞そして、この方法は、<input type="submit" value="送信">により、data_bとかdata_cを読み込み直すと同時にdspDataAry.htmlも読み込み直しているってことでしょうか。

dspDataAry.htmlを読み込み直しているからdocument.writeで書かれる配列ファイルが変わると解釈した方が普通だと思います。
ブラウザの戻るボタンを見てください。
IEなら▽を押すと同じタイトルがボタンを押すたびにどんどん増えると思います。

＞その内容を表示し直すには・・・
普通にdocument.writeでbody内に配列から値を取り出して書き出せば良いです。
例えば、
document.write('<ul>')
for(var i = 0;i < DataAry.length;i++){
document.write('<li>' + DataAry[i][0] + '<a href="' + DataAry[i][2] + '">' + DataAry[i][1] + '</a></li>'
}
document.write('</ul>')
こんなものをbody内に仕込んでおけば、URLの?以降をユーザーが勝手に変更してくれる（<select>を選んで<input type="submit">を押す）ので配列が変わって、そして配列が変わるから書き出されるデータが勝手に変わってくれます。

これならwrite、location、indexOf、splitしか使っていませんのでほとんどのブラウザで動くのではないでしょうか。
JavaScriptがONなら・・・・

- 0
- 件

通報する

この回答へのお礼

ご丁寧にわかりやすく教えていただきありがとうございました。
＞これならwrite、location、indexOf、splitしか使っていませんのでほとんどのブラウザで動くのではないでしょうか。
そうですよね。
設計を上手に行えばかなり使い勝手の良いものになりそう。と、いうように思えます。

Ajaxとか、調べていましたが、とても魅力ある方法に思えます。
どうもありがとうございました。

通報する

お礼日時：2006/11/14 19:42

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！