• ベストアンサー

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を読み込むのでなく、必要に応じて読み込んで表示するようにしたいのですが。 よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
noname#23734
noname#23734
回答No.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なら・・・・

rqg2010
質問者

お礼

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

その他の回答 (4)

noname#23734
noname#23734
回答No.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を仕込んでディレクトリ違いなどを確認。 こんなところでしょうか。

rqg2010
質問者

お礼

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

rqg2010
質問者

補足

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

noname#23734
noname#23734
回答No.3

No2のname="js"とwindow.location="dspDataAry.html?js=data_a" を忘れました。

rqg2010
質問者

お礼

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"> と、いうことがなかなか理解できないもので もし、できましたら、追加で教えていただけないでしょうか。 よろしくお願いいたします。

rqg2010
質問者

補足

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

noname#23734
noname#23734
回答No.2

********** 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)
回答No.1

あとからソースを読みなおすわけですからajaxでやるしかないでしょう。 それがいやなら別ウィンドウを開いて、そのウィンドウの関数を 参照するというやりかたもないことはないです

rqg2010
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • *.js ファイルの読み込みについて

    お世話になります。 *.jsファイルを読み込むのに <script type='text/javascript' src='abc.js'></script> とすれば、できます。 これを、 <script type="text/JavaScript"> <!-- src='abc.js; ・・・・・・・・・ ここにabc.js内の関数などを記載 ・・・・・・・・・ //--> </script> と、いう形にできないものでしょうか。 このままだと、abc.jsは読み込まれません。 よろしくお願いします。

  • shadowbox.jsについて

    shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>

    • ベストアンサー
    • CSS
  • ＪＳの記述を別ファイルに移す

    下記のＨＴＭＬ内の　<script type="text/javascript">～</script>　をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>

  • 呼出したjsファイル内で他jsファイルを呼出したい

    hoge.htmlに ----------------------------------------------- <script type="text/javascript" src="piyo.js"></script> ----------------------------------------------- を記述してpiyo.jsを読み込ませました。 この状況で、piyo.js内でfuga.jsを読み込むにはどのような記述をすればよいでしょうか？

  • 外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー

    実に不思議なのですが、 以下のように4つのJSファイルをインクルードしているHTMLファイルを ローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。 ですが、script1～4.js　の行を全てコメントアウトすると、エラーはでません。 1～4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、 どの行を外しても、やはり「文字が正しくありません」と出てしまいます。 ローカルの然るべきパスに1～4はあります。また、HTML同様、JSもEUCになってます。 何が原因なのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>

  • 複数の.jsファイルって実行できますか？

    初心者：Ajax勉強中です。 prototype Rico batefx を一つの画面で使用したいと思っています。 読み込み順はこんな感じになっています －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ <script src="prototype.js" type="text/javascript"></script> <script src="rico.js" type="text/javascript"></script> <script src="bytefx_OS.js" type="text/javascript"></script> <script src="index.js" type="text/javascript"></script> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ index.jsは －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ function k(){ dndMgr.registerDraggable( new Rico.Draggable("sample","box") ); dndMgr.registerDropZone( new Rico.Dropzone("dropbox") ); dndMgr.registerDropZone( new Rico.Dropzone("dropbox1") ); } function start(){ bytefx.size(document.getElementById("txt_box"), {width:600, height:0}, 100); } function n(name,objW,objH){ bytefx.size(document.getElementById(name), {width:objW, height:objH}, 10); } －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 最初に表示される画面ではbatefxのリサイズ処理は正常に動作します。 その後のRicoによる、Draggable、Dropzoneを実行します。 そうすると最初に動作していたbatefxのリサイズ処理が動作しなくなってしまいます。 原因を調べていてもいまいちよくわかりません。 解かる方おりましたら、是非ご教授のほどをおねがいいたします。

  • HTMLの外部jsのようなcgiファイルについて

    はじめまして。かなりレアなケースになると思うのですが、すでにリリースしており、泣き寝入りする事態が起きまして、CGIの出力のところがわからなくて困っております。 １、あるHTMLをブラウザで開くと<head>内のCGIが実行される。 <script language="JavaScript" type="text/javascript" src="○○.cgi"></script> ２、このCGIが実行されるとMySQLのデータを取得し、HTMLでデータを取り扱えるよう、取得した値をJavaScriptの配列の形式に加工され、「Temporary Internet Files」に○○.cgiが保存されます。 var 配列A=new Array(); 配列A[0]="0000001,名前,住所"; 配列A[1]="0000001,名前,住所"; ※○○.cgiを開くと右のような配列の表記が記載されている。 ３、このHTML内で、上記の配列をJavaScriptで呼び出せば、Temporary Internet Filesに保存されたcgiファイルのデータ（配列形式の）が表示されるので、まるで外部JSの配列を扱っているかのようにDBのデータを取得することができます。 mysqlのデータを取得した後、CGIでHTMLに吐き出すぐらいはわかるのですが、 画面上に表示させるのではなく、外部JSなら普通どこかサーバにあるJSファイルを見にいくと思うのですが、Temporary Internet Filesに保存され、それが値として操作できるところです。 このCGIの出力の記述がまったくわからないので困っております。 わかりにくい文章で本当に申し訳ございません。どうかよろしくお願いします。

    • 締切済み
    • CGI
  • jsファイルの記述順について

    レスポンシブデザインでホームページを制作しています。 解決できない問題に直面してしまいました。 どなたか詳しい方がいらっしゃいましたらアドバイスをお願い致します。 同一ページ内に qTip … ttp://craigsworks.com/projects/qtip/demos/content/loading と Naver … ttp://formstone.it/components/Naver/demo/index.html を使用したいと考えています。 しかし、色々と試してはいるのですが片方しか作動しません。 どちらも単体ではきちんと作動していますので、記述の順序の問題なのでしょうか。 該当部分は以下の通りです。 <head> <link type="text/css" rel="stylesheet" href="css/jquery.fs.naver.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/scrolltopcontrol.js"></script> <script type="text/javascript" src="js/smart-crossfade.js"></script> <script type="text/javascript" src="js/jquery.smoothScroll.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- qTip --> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> // Create the tooltips only on document load $(document).ready(function() { // Use the each() method to gain access to each elements attributes $('.col-lg-12 a[rel]').each(function() { $(this).qtip( { content: { // Set the text to an image HTML string with the correct src URL to the loading image you want to use text: '<img class="throbber" src="http://craigsworks.com/projects/qtip/images/throbber.gif" alt="Loading..." />', url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load title: { text: 'WORKS' + $(this).text(), // Give the tooltip a title using each elements text button: '×' // Show a close link in the title } }, position: { corner: { target: 'bottomMiddle', // Position the tooltip above the link tooltip: 'topMiddle' }, adjust: { screen: true // Keep the tooltip on-screen at all times } }, show: { when: 'click', solo: true // Only show one tooltip at a time }, hide: 'unfocus', style: { tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner border: { width: 0, radius: 4 }, name: 'light', // Use the default light style width: 280 // Set the tooltip width } }) }); }); </script> <!-- Naver --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.fs.naver.js"></script> <script type="text/javascript"> $(function(){ $("nav").naver({ animated: true, labelClosed: "", labelOpen: "" }); }); </script> </head> <body>直前に … <script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.js"></script> </body> 力不足で本当にお恥ずかしいのですが、よろしくお願い致します。

  • phpからjsへ

    はじめまして。 jQueryの$.ajax関数のGETを使って phpからjavascriptに echo 'document.write("<script type='text/javascript'>var like_arr=new Array(1,1,1,1,1,1,1,1,1,1,1,1,1)</scr"+"ipt>");' と値を返してarrayを作成しようと思っています。 しかしこの返し方だと ブラウザに表示した時 document.write(" とhtml上に表示されてしまいarrayが作成されません。 しかしjsに直接 document.write("<script type='text/javascript'>var like_arr=new Array(1,1,1,1,1,1,1,1,1,1,1,1,1)</scr"+"ipt>"); と書き込んでみるとarrayが存在しています。 どうしたらphpからの値でdocument.writeをする事が出来ますか？ 分かる方いらっしゃいませんか？ よろしくお願いします。

    • 締切済み
    • PHP
  • 外部 .js で

    index.html 内の head タグ間に <script type="text/javascript" src="./js/test2.js"></script> また、index.html と同階層にある js ディレクトリの内の test2.js の内容は document.write("test") だけです。 この条件で（というのは、最終的に別にテキストを出したいだけというわけではないので）、body の任意の場所に test を表示 [記述] させる方法を教えてください。 body の適当な場所に <script type="text/javascript"></script> と書いても、何も現れません（ソースで確かめています）。根本的におかしいのかもしれませんが、わかりません。 必ず、これら条件でお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する