dポイント最大50倍で史上最大級のお得に!

hoge.htmlに
-----------------------------------------------
<script type="text/javascript" src="piyo.js"></script>
-----------------------------------------------
を記述してpiyo.jsを読み込ませました。

この状況で、piyo.js内でfuga.jsを読み込むにはどのような記述をすればよいでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (6件)

>function JavaScriptLoader(src, callback){


>のcallbackの意味がまったく分かりません。
>関数の引数であるcallbackとどう繋がっているのでしょうか???
>callbackにはあらかじめ何を渡しておけば良いのでしょうか???

例えば、a.js、b.jsの順で読み込ませたい場合、a.jsを読み込みが完了したことを確認してから、b.jsを読み込ませることになります。
こういった(非同期の)処理の場合は、a.jsが読み込み終わったときに、ある関数を呼び出すようにする、という定石があります。その「ある関数」内でb.jsを読み込ませればよい、という仕組みです。

参考サイトに掲載されていたJavaScriptLoader関数はそのような仕組みでできており、ロード完了時に呼び出される「ある関数」が第2引数であるcallbackです。
#このような関数のことを、コールバック関数と呼びます。それが引数callbackの名前の由来です。
http://e-words.jp/w/E382B3E383BCE383ABE38390E383 …

>if (sc.readyState == 'complete') callback(sc.readyState);
>if (sc.readyState == 'loaded') callback(sc.readyState);

このような内部構造はとりあえず理解しなくても大丈夫だと思うので、簡単な使い方だけ書いておきます。

JavaScriptLoader("a.js", function(state) {
 // a.js内の関数などを利用する処理
 JavaScriptLoader("b.js", function(state) {
  // a.js, b.js内の関数などを利用する処理
 });
});

#callback関数である無名関数の第一引数にstateを指定していますが、これはなくてもOKです。

>2つめのリンクからJSLoderをダウンロードして試してみました。
>しかし、これはあらかじめjsloader.jsを読み込んでおかなければならず、piyo.js内では...

jsloader.jsの中身をpiyo.js内にコピーしてしまえば良い(ライセンスには気をつけましょう)、といえばそれまでなのですが、結構量あるのでJavaScriptLoaderの方が手軽かもしれませんね。

#両方を組み合わせる手もありですが、それはそれで冗長かな。

以上です。
解決されることをお祈りします。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。

できました!!

ずいぶん時間がかかってしまいましたが、
JavaScriptLoaderがどういう処理を行なっているのか、
なぜ教えていただいた方法で呼び出すことができるのか、
も含めてすべて解決いたしました!

親切丁寧に教えていただいてほんと感謝感謝です!

お礼日時:2011/01/30 12:33

new JSLoder().next('fuga.js','hoge2.js','hoge3.js', 'piyo.js').start();



が利用できない原因はSCRIPT要素を使うため、DOM要素を利用可能になったタイミング以降で実行されるような遅延処理が必要です。

たとえば、
window.onload = function(){ /* ここに書く必要がある */ }

あと、AJAX + eval を使ったローダについては、
http://blog.livedoor.jp/aki_mana/archives/233349 …
にアップしてみました。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。

今回はJavaScriptLoaderという前述の関数を使わせてもらいましたが、アップいただいたローダはまた次の機会に使わせていただきます。

本当にありがとうございました!

お礼日時:2011/01/30 12:35

LOHA さんの紹介する2つめのリンクが簡単に目的の動作を満たすと思います。



リンク先のページに記述されたサンプルを参考に、

new JSLoder().next('fuga.js','hoge2.js','hoge3.js', 'piyo.js').start();

あるいは、

new JSLoder().next('fuga.js').next('hoge2.js')
.next('hoge3.js').next('piyo.js').start();

といった感じでしょうか。

― おんぶに抱っこな回答で申し訳ありません。


私が回答した「ローダ関数へのアクセス制御」が必要になるケースは、ページをリロードせずに画面遷移するJSアプリケーションに限られます。

こうしたJSアプリでは画面遷移後にローダが再実行されるとマズイとか、メモリ解放しないとダメとか、質問とはかけ離れたテーマになるので、この辺りで回答を打ち切らせていただきます。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。

2つめのリンクからJSLoderをダウンロードして試してみました。
しかし、これはあらかじめjsloader.jsを読み込んでおかなければならず、piyo.js内では
------------------------------------------------
new JSLoder().next('fuga.js','hoge2.js','hoge3.js', 'piyo.js').start();
------------------------------------------------
を実行できませんでした。


何か実行させる良い方法がありますでしょうか?

お礼日時:2011/01/26 22:19

>fuga.jsの読み込み時間が結構長いので、おそらくそれが原因ではないかと思ってはいるのですが・・・


それが原因で間違いないと思います。

>2) XMLHttpRequest の responseText を eval()
>で行なった方が良いということなのでしょうか?
可能ですが、ロードしたいJSファイルは同一ドメイン内に限定されます。
なのでCDNを利用している場合などはアウトです。

他には、setIntervalやsetTimeoutをつかって無理やりロードが完了するまで待つ方法、JSONPライクにする方法、普通にイベントを使う方法、などがあるようです。

下記のURLにかなり詳しく書かれているので、じっくりご参照ください。

http://d.hatena.ne.jp/os0x/20080827/1219815828
http://blog.37to.net/2008/08/script/
    • good
    • 0
この回答へのお礼

とても有意義なページですね!
ありがとうございます!
2日間かけてじっくり参照させていただきました。


1つ目のリンク先を上から順番に見ていったところ、
ページ下部にあった以下の関数が「piyo.js内でfuga.jsを読み出す」という用途に合致していそうだ、という結論に達しました。
------------------------------------------------
function JavaScriptLoader(src, callback){
var sc = document.createElement('script');
   ・
   ・
   ・
------------------------------------------------



しかし、実力不足のせいで思うように解析ができません。


<script type="text/javascript" src="fuga.js">を実行させて、
それが完了しているのかロード中なのかを判定している、という処理をしているのだと思うのですが、
いかんせん
------------------------------------------------
if (sc.readyState == 'complete') callback(sc.readyState);
if (sc.readyState == 'loaded') callback(sc.readyState);
------------------------------------------------
のcallbackの意味がまったく分かりません。
関数の引数であるcallbackとどう繋がっているのでしょうか???
callbackにはあらかじめ何を渡しておけば良いのでしょうか???


何度もお聞きして心苦しいのですが、10時間以上かけて調べてもこれくらいしか分からない実力しか持ち合わせておらず、藁にもすがる思いです。

どうかご教授よろしくお願いいたします。

お礼日時:2011/01/26 22:09

取り早いのは LOHAさんの回答。

ビギナーでも簡単に実現できます。
[boot.js]
--------
document.write(<SCRIPT要素>); // fuga.js を読む ( piyo.js で参照される変数があるので事前に )
document.write(<SCRIPT要素>); // hoge3.js 〃
document.write(<SCRIPT要素>); // hoge4.js 〃
document.write(<SCRIPT要素>); // piyo.js 〃(この中で document.write(<SCRIPT要素>)はNG )
--------

「fuga.js内の変数や関数がうまく読み出せない」のは、JavaScriptのオブジェクトが有効になるタイミングの問題です。JavaScriptでは使い回ししたいコードはとにかく先に読み込みを完了させて、メモリ上で有効にしておくのがポイント。
もし、「PHP のinclude のように」という言葉が、コード内の任意の場所で利用可能な特徴を指しているのであれば、「JavaScriptではやらないほうがいい。必ず先読みするのが大事」という事を理解してください。


理由は、JavaScriptが「オブジェクト汚染」という言葉もある言語だからです。
スタンダードな言葉としては存在しませんが、JSアプリケーションは「JSオブジェクトジャック」によって書き換えられる危険と常に隣り合わせです。
コード内の任意の場所で読み込む具体的な方法は得られないと思います。

一応、途中読み込みのアプローチは2つ
1) document.write() を使う。
2) XMLHttpRequest の responseText を eval()

できあがった関数を外部JSローダ関数としたとき、

いずれの方法で仕上がったとしても、以下の要件を満たす必要があります。
- タイミング制御
- 外部JSローダ関数に対するアクセス制御
    • good
    • 1
この回答へのお礼

回答ありがとうございます。

まさしくおっしゃる通り、コード内の任意の場所で利用可能な特徴があると思ってました。
わざわざその理由までご説明いただいて、とても勉強になりました。


ちなみに、
boot.jsにdocument.write(<SCRIPT要素>)を列挙する方法を試してはみたのですが、
やはりfuga.js内の関数等がうまく読み出せません。
fuga.jsの読み込み時間が結構長いので、おそらくそれが原因ではないかと思ってはいるのですが・・・



となると、私の場合は

2) XMLHttpRequest の responseText を eval()

で行なった方が良いということなのでしょうか?


なにぶんAjaxはまったくの初めてでよく分からないのですが、色々調べてみた感じ、
この 2) の指し示す処理は、fuga.jsが完全に読み込まれたことを確認してから、以降の処理をするというプログラムを組む、ということでしょうか?


いろいろ試行錯誤しましたが、結局うまく動いてくれず難儀しています。
不躾で申し訳ないのですが、もし可能でしたら、例文をご掲示いただけませんでしょうか。
よろしくお願いいたします。

お礼日時:2011/01/24 22:01

piyo.js内でfuga.jsで実装したモノを利用したいといういことでしょうか。


それなら
<script type="text/javascript" src="fuga.js"></script>
<script type="text/javascript" src="piyo.js"></script>
のように、piyo.jsの前に読み込ませるのが一般的です。
    • good
    • 0
この回答へのお礼

早速の回答ありがとうございます。

すみません、ちょっと質問文を省略しすぎてしまいました。

hoge.htmlには
-----------------------------------------------
<script type="text/javascript" src="piyo.js"></script>
-----------------------------------------------
の1文のみを表記し、
piyo.js内でfuga.jsを読み込みたい(PHPのincludeみたいな感じで)ということです。
さらに付け加えると、実際はfuga.js以外にも3つほどpiyo.js内で読み込ませたいjsファイルがあります。


また、
-----------------------------------------------
document.write("<script type='text/javascript' src='fuga.js'></script>");
-----------------------------------------------
をpiyo.js内に表記し、無理やり読み込ませてみたのですが、fuga.js内の変数や関数がうまく読み出せませんでした。


何か良い手立てはないものでしょうか?
ご教授お願いいたします。

お礼日時:2011/01/24 00:07

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q別ファイルのfunctionの読み込み方

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために私が最初に書いたhtmlの文です(もちろん実行できませんでした)
------------------------------------
<html>
<script language="javascript" src="hello.js">
aisatsu(){
document.write(aa);
}
</script></html>
------------------------------------

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために...続きを読む

Aベストアンサー

function内で「var」をつけて変数を宣言するとfunction外からその変数の内容を取得することができなくなります。(returnで参照することはできます。)
なので変数の内容を取得する場合は「hello.js」の内容を

function aisatsu(){
var aa="hello";
return aa;
}

このように修正し、

<script language="javascript" src="hello.js"></script>
<script language="javascript">
var data=aisatsu();//「aisatsu()」関数の「aa」変数内のデータを引っ張り出す(return aa;)
document.write(data);//書いたり
alert(data);//アラートしたり
window.status=data;//ステータスバーに表示したり・・
</script>

Qjavascriptファイルは1つに統合できますか

javascript初心者のため、どなたかご教示いただけるとありがたいです。

html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。

<現状>
<script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script>
<script type="text/javascript" src="・・/js/jquery.cookie.js"></script>
<script type="text/javascript" src="・・・/js/ui.core.js"></script>
<script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script>
<script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script>
<script type="text/javascript" src="・・・/js/set_slider.js"></script>
・・・

jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか?
(単純に1箇所にコピー&ペーストするようなイメージで)

お手数ですが、ご教示のほど、宜しくお願い致します。

javascript初心者のため、どなたかご教示いただけるとありがたいです。

html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。

<現状>
<script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script>
<script type="text/javascript" src="・・/js/jquery.c...続きを読む

Aベストアンサー

外部スクリプトの読み込みは、原則として(いくつかの例外を除き)順番通りです。1.js を読み込んだら 2.js、それも終わったら 3.js……のようにです。

裏を返せば、1.js が読み込まれない限り 2.js も 3.js も読み込まれず、しかも後続のページ描画すらストップしてしまうわけです。

ですから、1 個の外部スクリプトにまとめることは非常に大切です。そのためには「もともと読み込んでいた順番通りに」1 個のスクリプトファイルに書き写していけば、まずは十分です。ただし、ライセンスの表記を消さないように注意して下さい。

No.1 のご懸念の通り、使わない部分も書いてしまうのは無駄に思えるかもしれません。しかしながら、たかだか数十~数百 kB のファイルサイズの心配よりは、HTTP コネクションの数を減らすことの方が、はるかに速度向上につながります。キャッシュも効きますからね。

---
Web アプリケーションならば、表示されたボタンを押しても何も起きない、なんて事態になっては困りますので、ボタンを表示する前にスクリプトを読み込んでおく必要があります。しかし、普通の Web ページでは、スクリプトが動作することよりもページ内容をなるべく早く表示させることの方が重要です。

head 要素内に 5 個も 6 個も外部スクリプトを並べてページ描画をスタックさせるよりは、1 個にまとめるか、あるいはページ末尾にでも置いた方がずっとマシです。「スクリプトのオンデマンドな読み込み」なんて色気を出して良いのは、開発中かせいぜいテストまでです。実運用を開始するときは、なるべく 1 ファイルにまとめて下さい。

外部スクリプトの読み込みは、原則として(いくつかの例外を除き)順番通りです。1.js を読み込んだら 2.js、それも終わったら 3.js……のようにです。

裏を返せば、1.js が読み込まれない限り 2.js も 3.js も読み込まれず、しかも後続のページ描画すらストップしてしまうわけです。

ですから、1 個の外部スクリプトにまとめることは非常に大切です。そのためには「もともと読み込んでいた順番通りに」1 個のスクリプトファイルに書き写していけば、まずは十分です。ただし、ライセンスの表記を消さないように注...続きを読む

QJavaScriptからJavaScriptを呼ぶ方法?

あるJavaScriptのファイルでで変数に値を代入します。
他の複数のJavaScriptのファイルで、その変数を使用したいと思います。
JavaScript{
    JavaScript{
    }
    処理・・・・
}
という形になるのでしょうか。
このように、他のJavaScriptから変数を呼び出したいのです。
どのように記述したら良いでしょうか?

Aベストアンサー

関数内で明示的に定義した変数(ローカル変数)でなければ、どこからでも自由に参照,更新できます。
ただ、逆にどこでも自由という処が危険であり誤動作の元なので、
参照用(値の引き渡し用)の変数を1つ用意する事をお勧めします。


まず変数の有効範囲ですが、
関数の外で明示的に定義された変数とか
明示的に定義せずに使用している変数などは、
グローバル変数と言われ
少なくとも同一ファイル内では自由に参照,更新できます。
位置的には、window.self.変数 となります。
そして JavaScript の外部ファイルは HTML のファイルから呼ばれて読み込まれて動作するので、
特別な指定をしない限り
HTML ファイル上にて JavaScript は実行されます。

よって、どこの外部ファイルに書かれていようとも
グローバル変数はどこでも自由に参照,更新ができます。
(故に、名称の重複にも要注意。)

それから、関数の中で明示的に定義している
ローカル変数を
もしどこでも使いたいと考えた場合は「無理」という答えになります。
これはその関数でのみ参照,更新が可能で、
何よりその関数が動作(呼ばれて)していない時の変数の内容が保障されていません。


あとおまけで、HTML 自体が別々(例えばフレームとかの別フレーム)でもそのフレーム名を用いてとかで
(セキュリティーで引っかからなければという前提で)参照,更新が可能な場合もあります。

関数内で明示的に定義した変数(ローカル変数)でなければ、どこからでも自由に参照,更新できます。
ただ、逆にどこでも自由という処が危険であり誤動作の元なので、
参照用(値の引き渡し用)の変数を1つ用意する事をお勧めします。


まず変数の有効範囲ですが、
関数の外で明示的に定義された変数とか
明示的に定義せずに使用している変数などは、
グローバル変数と言われ
少なくとも同一ファイル内では自由に参照,更新できます。
位置的には、window.self.変数 となります。
そして JavaScript ...続きを読む

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

Q外部ファイルを実行

javascriptで
<script type="text/javascript" src="test.js" ></script>
を記述すると、
HTML読み込み時にtest.jsを実行するのですが、
ボタンクリック時に外部ファイルを実行するコードはどのように記述すればいいのでしょうか?

よろしくお願いします。

Aベストアンサー

当方、本日手が空いたので色々試行錯誤してみましたが
javascriptを動的に呼び出すのは少し難しいようですな。

[test.js]
function test() { alert('moge'); }
というファイルがあるとして、


[例1]
<input type='button' value='go' onclick='on()' />
<script type='text/javascript'><!--
function on(){
 document.write('<script type="text/javascript" src="./test.js"></script>');
}
// --></script>

これだとグローバルスコープでtest.jsの定義が使えるのですが、
画面が再描画されるため意図した動作をせず。
再描画させず、意図させた場所のみ更新させHTMLparseを行わせるという挙動ってできるのですかねぇ。


[例2]
<input type='button' value='go' onclick='on()' />
<script type='text/javascript'><!--
var jsStr = "";
function on(){
 getCode();
 eval(jsStr);
 test();
}

function getXMLHTTPObj(){
 try{
  return new ActiveXObject("Msxml2.XMLHTTP");
 }catch(e){
(snip.)
 }
}
function getCode(){
 // make instanse
 var reqSend = getXMLHTTPObj();
 // get instanse
 if(reqSend){
  reqSend.onreadystatechange = function(){
   if(reqSend.readyState == 4 ){
    jsStr = reqSend.responseText;
   }
  }
  reqSend.open('POST', "./test.js", false);
  reqSend.setRequestHeader('content-type', "application/x-www-form-urlencoded;charset=UTF-8;");
  reqSend.send();
 }
}
// --></script>

XMLHTTPで呼んでevalしてみる。
使えなくもないですが・・・・
最初から<script>で呼べよという話に。


[例3]
<script src="common1.js"></script>
<script src="common2.js"></script>
<script src="common3.js"></script>
<script src="test.js"></script>(typeはsnip)
<input type="button" onclick='test()' />

スタンダード。
必要な奴は必要なときに逐次呼ぶのが普通。


外部読み込みはprototype.jsとかにありそうな気はしますけどね。
使ったことないですが。

当方、本日手が空いたので色々試行錯誤してみましたが
javascriptを動的に呼び出すのは少し難しいようですな。

[test.js]
function test() { alert('moge'); }
というファイルがあるとして、


[例1]
<input type='button' value='go' onclick='on()' />
<script type='text/javascript'><!--
function on(){
 document.write('<script type="text/javascript" src="./test.js"></script>');
}
// --></script>

これだとグローバルスコープでtest.jsの定義が使えるのですが、
画面が再描画さ...続きを読む

Q外部JavaScriptファイルから呼び出したい!

ページを早く表示させるために、コピー&ペーストでスクリプトを外部ファイル化しました。

<script language="JavaScript" src="../js/menu.js"></script>

↑とコピペした外部ファイルへリンクさせ、その後、

<script language="JavaScript">mmLoadMenus();</script>

と記述してある部分があるのですが、うまく呼びだせてないようでランタイムエラーがでます。
すべてのJavaScriptを1ファイル内に記述しているときはうまく動作しているのですが、外部ファイルに切り離すとエラーが出ます。

外部ファイル化したために、mmLoadMenus();が動作しないので、どなたか分かる方、アドバイスをお願いします!!

Aベストアンサー

すみません
懲りずにまたお邪魔しますm(_ _)m

外部ファイル(../js/menu.js)の書き方のことなのですが
<script language="JavaScript"></script>
なども書かれてはいないですか?
私もタグごとコピーしてダメだったことがあるので・・
そんなこと!
でしたらすみません(>_<)

失礼しましたC= C= \(;・_・)/

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Q外部読み込みで動かないときの対処法

プログラミングの入口にも立っていない初心者です。

あるプログラムを導入することになりました。
htmlに直接記述した場合はjsが動いていることが確認ができるのですが、外部読み込みにした場合、なぜか動きません。
記述方法がまちがっているのでしょうか?
サイト運営の手間を考えて、絶対外部読み込みにする必要があります。


《動く…jsをhtmlに直接記述》
<head>
<!-- 文字コードなどの記述は省いています -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>

<body>
<!-- その他のhtml記述は省略 -->
<script type="text/javascript">
<!--
document.write(unescape("%3Cscript src='" + document.location.protocol +
'//www.sample.com/js?pcid=PC-123456-A' + "' type='text/javascript'%3E%3C/script%3E"));
// -->
</script>
<script type="text/javascript">
<!--
(function() {
var pc = new predicta.PClick();
pc.start();
})();
// -->
</body>



《動かない…js外部読み込みの記述》
<head>
<!-- 文字コードなどの記述は省いています -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="http://www.sample.net/hoge/js/sample.js"></script>
</head>

------------------------------------------------------
js/sample.jsの記述
------------------------------------------------------
document.write(unescape("%3Cscript src='" + document.location.protocol +
'//www.sample.com/js?pcid=PC-123456-A' + "' type='text/javascript'%3E%3C/script%3E"));

(function() {
var pc = new predicta.PClick();
pc.start();
})();


ちなみに、その他にも外部読み込みし、動いているJavaScriptはあります。

ご教示のほど、どうぞよろしくお願いいたします。

プログラミングの入口にも立っていない初心者です。

あるプログラムを導入することになりました。
htmlに直接記述した場合はjsが動いていることが確認ができるのですが、外部読み込みにした場合、なぜか動きません。
記述方法がまちがっているのでしょうか?
サイト運営の手間を考えて、絶対外部読み込みにする必要があります。


《動く…jsをhtmlに直接記述》
<head>
<!-- 文字コードなどの記述は省いています -->
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>

<body>
<!...続きを読む

Aベストアンサー

>『protocolを指定してますが、http:で統一…』のくだり

ようは、自分自身のファイルがhttpプロトコルをつかっていれば
http://www.exsample.com/jsを呼びますが、
自分がhttps:だったりするとhttps://www.exsample.com/jsを
読みに行っちゃうということです。
もう少し突っ込めばローカルのファイルを処理すると
file://www.exsample.com/jsになってしまい、テストするにもブレがでてきます。

//hoge.htm
<html>
<head>
<script type="text/javascript" src="hoge.js"></script>
</head>
<body>
test
</body>

//hoge.js
window.onload=function(){
var s=document.createElement('script');
s.setAttribute('src','http://www.exsample.com/js?pcid=PC-123456-A');
s.setAttribute('type','text/javascript');
document.getElementsByTagName("head")[0].appendChild(s);
var pc = new predicta.PClick();
pc.start();
}

みたいな感じですかねぇ・・・

>『protocolを指定してますが、http:で統一…』のくだり

ようは、自分自身のファイルがhttpプロトコルをつかっていれば
http://www.exsample.com/jsを呼びますが、
自分がhttps:だったりするとhttps://www.exsample.com/jsを
読みに行っちゃうということです。
もう少し突っ込めばローカルのファイルを処理すると
file://www.exsample.com/jsになってしまい、テストするにもブレがでてきます。

//hoge.htm
<html>
<head>
<script type="text/javascript" src="hoge.js"></script>
</head>
<body>
test
</body>

...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報