- ベストアンサー
jsファイルで配列を定義し、ｊｓファイルを切りかえて使う
お世話になります。 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'><!-- document.write DspData(); //--> </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を読み込むのでなく、必要に応じて読み込んで表示するようにしたいのですが。 よろしくお願いいたします。
- rqg2010
- お礼率77% (283/364)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
テスト成功おめでとう＾＾ ＞そして、この方法は、<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なら・・・・
その他の回答 (4)
寝ぼけたことを書いて済みませんでした！！ かなり間違っていますね。 ********** 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> ********************************************** <!-- このフォームで dspDataAry.html?js=選択されたoptionのvalueの値 と言う形式でリクエストされる ※selectにnameを追加しました。 --> <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'><!-- document.write DspData(); //--> </script> <input id="btn_b" type="button" value="bを表示" onClick="ｂを表示する関数"<br> </body> =====以降参考========================================== 実際にやっているサイトさん http://bon.shiriagari.com/map/index.html?cate=all&page=2 Firefox,IE6では見れています。 <script type="text/JavaScript" src="./js/file.js"></script> をダウンロードして研究してみてください。 なんでここまでjavascriptに拘るのか不明ですが・・・ ====テストするなら================== jsfileをalertで表示して確認。 配列ファイルにalertを仕込んでディレクトリ違いなどを確認。 こんなところでしょうか。
お礼
al785z29さん、こんなに早くレスありがとうございます。 今から必死に挑戦します。 結果は、また、報告させていただきます。 ＞なんでここまでjavascriptに拘るのか不明ですが・・・ 他を知らないだけです。 順次勉強しようと思っていますが、このような場合何がよいものやら。 どうすればよいものやら。と、いったところである程度わかるつもりのJavaScriptでやってみています。 スレッドのテーマと異なってしまいますがもしご教示いただければありがたいです。 まずは、お礼まで。
補足
al785z29さん、できました。 ありがとうございました。 このような方法があるとは。JavaScriptは、実に奥が深く感じられます。 そして、この方法は、 <input type="submit" value="送信"> により、 data_bとかdata_cを読み込み直すと同時に dspDataAry.html も読み込み直しているってことでしょうか。 そして、data_bとかdata_cのみを読み込み直して その内容を表示し直すにはやはり、Ajaxなどの技術が必要になるのでしょうか。 もし、できましたら教えていただけないでしょうか。
No2のname="js"とwindow.location="dspDataAry.html?js=data_a" を忘れました。
お礼
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"><!-- >URL=window.location ・・・・・・・ >} >//--> ></script> としなくても良いものでしょうか。 どうも、きわめて初歩的な質問となっていると思いますが、 <input type="submit"> と、いうことがなかなか理解できないもので もし、できましたら、追加で教えていただけないでしょうか。 よろしくお願いいたします。
補足
al785z29さん、レスありがとうございます。 現在、教えていただいた方法で動作を試しています。 まずは、お礼まで。
********** head内 ************************** <script type="text/javascript"> URL=window.location if(URL.indexOf('?') != -1){ jsfile = URL.split("?")[1].split("=")[1] document.write('<script type="text/javascript" src="'+jafile+'.js"></script>') }else{ window.location="dspDataAry.html?data_a" } </script> <script type='text/javascript' src='dspDataAry.js'></script> ********************************************** <form action="dspDataAry.html" method="get"> <select> <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"> </form> <script type='text/javascript'><!-- document.write DspData(); //--> </script> <input id="btn_b" type="button" value="bを表示" onClick="ｂを表示する関数"<br> </body>
- yambejp
- ベストアンサー率51% (3827/7415)
あとからソースを読みなおすわけですからajaxでやるしかないでしょう。 それがいやなら別ウィンドウを開いて、そのウィンドウの関数を 参照するというやりかたもないことはないです
お礼
yambejpさん、レスありがとうございます。 >あとからソースを読みなおすわけですからajaxでやるしかないでしょう。 そうですか。Ajaxの場合、配列を読むのは簡単ではないように聞いたのですが。Jsonとかいう方法でないとダメとか。 そして、そのJsonでの配列の定義がめんどくさいとか。 もし、他の方法があれば教えていただけるとありがたいのですが。
お礼
ご丁寧にわかりやすく教えていただきありがとうございました。 ＞これならwrite、location、indexOf、splitしか使っていませんのでほとんどのブラウザで動くのではないでしょうか。 そうですよね。 設計を上手に行えばかなり使い勝手の良いものになりそう。と、いうように思えます。 Ajaxとか、調べていましたが、とても魅力ある方法に思えます。 どうもありがとうございました。