• ベストアンサー

JAvaScriptの外部ファイルの記述について

HTML内にJavaScriptの処理書くのが嫌で、外部ファイルにしてJavaScriptを読み込むようにしたのですが、このファイルに、実行したい処理を複数書いてしまうとHTMLで正しく処理されなくなるのは何故ですか？.jsファイルには処理は1つしか記述できないのでしょうか？CSSファイルみたいに1つのファイルに何個も処理を記述してHTMLに反映させるようにしたいのですが・・・。どなたにも質問できず困っています。どなたか教えて下さい。jsファイルには処理は1つしか記述できないものなのかどうか回答お願い申し上げます。

  • u2122
  • お礼率71% (125/176)

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

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.2

> window.onload=function(){ window.onload を2つ定義すると、2つめの window.onload で1つめのfunctionを上書きしてしまいます。 解決策としては、 - window.onload を一つにまとめる - イベントリスナを使う - addLoadEvent() を定義 - addEvent() を定義 などでしょうか。 javascript windowイベントに複数を指定する に関しての質問です。 ブログパーツを作っています。 window.onloadを使って、ページの読込みが完了したらある処理を開始する.. - 人力検索はてな http://q.hatena.ne.jp/1189656066 Google検索: addLoadEvent http://www.google.co.jp/search?q=addLoadEvent&lr=lang_ja&ie=utf-8 Google検索: addEvent http://www.google.co.jp/search?q=addEvent&lr=lang_ja&ie=utf-8

u2122
質問者

補足

ありがとうございます。 上書きされてしまって1つ目が実行されないと言うのは理解出来ました。解決策も教えて頂き誠にありがとうございます。 ですが、解決策のどれかを使って、 main.jsの何処をどう書き換えれば両方とも実行されるのかが、分かりません。すみません。プログラムコードを教えて頂いてよろしいでしょうか？

その他の回答 (6)

回答No.7

#6です。ていせいします。 elementId を element に。 ごめん。

u2122
質問者

お礼

ありがとうございます。出来ました！

回答No.6

いべんとのうわがきじゃなくて、つ・い・か！ ばぶ～。 //@cc_on function addEvent(elementId, evt, eventHandler){ element./*@if(@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, false); } addEvent('pohot1', 'mouseover', func1) addEvent('pohot2', 'mouseover', func2) addEvent('pohot1', 'mouseout', func3) addEvent('pohot2', 'mouseout', func4) function func1 (evt) { var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; e.src = './img/door01.gif'; }

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.5

No4です。 「imgフォルダ内にbutton11.gifがない」なんて落ちじゃないですよね？

u2122
質問者

補足

すみません。自分間違っていました！コピペを間違っていたですよ。 ちゃんと動きました。丁寧に教えて頂いてありがとうございました

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

理由はNo2、No3様のご回答の通りです。 あまりうまい書き方ではないですが、御提示のものをそのまま踏襲するなら… window.onload=function(){ document.getElementById("photo1").onmouseover=function(){ this.src="img/button11.gif"; } document.getElementById("photo1").onmouseout=function(){ this.src="img/button01.gif"; } document.getElementById("photo2").onmouseover=function(){ this.src="img/door02.gif"; } document.getElementById("photo2").onmouseout=function(){ this.src="img/door01.gif"; } } これは、No2様の回答のなかの一番最初の方法です。 動かない理由や、（それ以前に）どのように動作しているかを他の方の回答をヒントにちゃんと理解するようにしてください。

u2122
質問者

補足

まんまごっそりコピーして　main.jsに貼り付けて、main.htmlを開いてみたのですが、やはりphoto2しか動きません　？？？？ 「上書きされてしまう」ということが分かったので、皆様の回答をヒントに自分でもう少し頑張ってみます！ありがとうございました！！

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

window.onload=function(){} の意味は、「windowオブジェクトに対して、onloadのイベントが 発生したとき、function(){}を実行する」の意味です。 このイベントに複数のfunctionをセットする方法は、Ｎｏ２で解答されてますが、匿名関数にする必要がなければ、 window.onload=function(){func1();func2();func3()} として var func1 = function(){}; var func2 = function(){}; var func3 = function(){}; とか、 func1 function(){} func2 function(){} func3 function(){} にしてしまってもよいです。 ※変数や関数のスコープには注意する必要があります。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

ごめんなさい、言っている意味があいまいすぎて回答のしようがありません。 具体的にどうすると、どうなるのが気に入らないのでしょうか？ ＞.jsファイルには処理は1つしか記述できないのでしょうか？ 普通に考えれば、そんなことはありません

u2122
質問者

補足

回答ありがとうございます。すみません補足します。 以下を動かしたいのですが ＜＜main.js＞＞ window.onload=function(){ document.getElementById("photo1").onmouseover=function(){ this.src="img/button11.gif"; } document.getElementById("photo1").onmouseout=function(){ this.src="img/button01.gif"; } } window.onload=function(){ document.getElementById("photo2").onmouseover=function(){ this.src="img/door02.gif"; } document.getElementById("photo2").onmouseout=function(){ this.src="img/door01.gif"; } } ＜＜main.html＞＞ <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="main.js"></script> <script type="text/javascript" src="executes.js"></script> <title>JavaScript</title> </head> <body> <a href="top.html"><img src="img/button01.gif" width="300" height="55" alt="photo1" id="photo1" /></a><br /> <a href="top.html"><img src="img/door01.gif" width="171" height="135" alt="photo2" id="photo2" /></a> </body> </html> 何故両方動かないのでしょうか？？教えて下さい。 処理が間違っているのでしょうか？よろしくお願い申し上げます。

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

関連するQ&A

  • 外部ファイルを読み込ませるための記述方法を教えてください！

    (1)index.html (2)「index.html」以降のページのフォルダ(の中にhtml) (3)css.js (4)cssファイル を同じ階層に置いています。 htmlには<SCRIPT LANGUAGE="javascript"src="css.js"></SCRIPT> と書かれており、css.jsファイルからcssファイルを読み込み htmlにcssが適用されてるように設定されています。 この階層のhtmlにはcssが反映されるのですが (2)のフォルダの中のhtmlにとってはcss.jsの階層は一つ上になるのですが、 <SCRIPT LANGUAGE="javascript"src="css.js"></SCRIPT> と書いてもcssが反映されません。 srcの指定を正しくするにはどのように記述したらいいのでしょうか？ <SCRIPT LANGUAGE="javascript"src="../css.js"></SCRIPT> と記述してもダメでした。 Javascriptの言語がほとんどわからず困ってしまっています。 大急ぎで知りたいのですが、わかる方いらっしゃいましたら 教えてくださると大変助かります。 どうかよろしくお願い致します。

  • 外部ファイル

    HTMLに、このような記述があり <script type="text/javascript" src="●●●.js"></script> 外に、「●●●.js」　というファイルがあります。 これは、「外部のjavascript」ファイルということでしょうか? また、この、「外部のjavascript」ファイルを開く(見る)には、どうしたらいいのでしょうか? ^^ どこか、おすすめのjavascriptのサイト、ご存知でしたら、教えてください。。。^^ (CSS外部ファイル。までは意味、わかるのですが、 javascript　の関係はよくわかりません)

  • HTML内記述と外部jsファイルの違い

    JavaScript初心者です。 HTML中のとあるボタンを押したとき、二つのラジオボタン（radio1）の選択を変える処理をJavaScriptで試みています。 ■HTMLのフォーム記述（抜粋） <INPUT type="button" name="radio1" value="変更"　onClick="setRadio1()"> ■同一HTML内に記述したJavaScript function setRadio1() { <!-- document.mainform.radio1[0].checked = true; //--> }</script> ↑これは問題なく動作する。 ■外部jsファイルに記述したJavaScript function setRadio1() { document.mainform.radio1[0].checked = true; } ↑ページエラーとなる。 なぜか外部jsファイルのJavaScriptに切り替えると「ページエラー」になってしまいます。 どの辺りが問題なのか見当がつきません。 何か気づきがありましたら、アドバイスをお願いします。 ※ちなみに外部jsファイルに記述してある他のJavaScriptは問題なく動作します。

  • 外部ファイルを実行

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

  • 外部JavaScriptファイルから呼び出したい！

    ページを早く表示させるために、コピー＆ペーストでスクリプトを外部ファイル化しました。 <script language="JavaScript" src="../js/menu.js"></script> ↑とコピペした外部ファイルへリンクさせ、その後、 <script language="JavaScript">mmLoadMenus();</script> と記述してある部分があるのですが、うまく呼びだせてないようでランタイムエラーがでます。 すべてのJavaScriptを1ファイル内に記述しているときはうまく動作しているのですが、外部ファイルに切り離すとエラーが出ます。 外部ファイル化したために、mmLoadMenus();が動作しないので、どなたか分かる方、アドバイスをお願いします！！

  • 「日記」の記述を外部ファイル化したい！

    よろしくお願いいたします。 現在、自分のホームページ内に「My日記」というタイトルで、ほぼ毎日書き込んでは「日記」をアップロードしています。 そのため、HTMLソース内が文字であふれてしまっています。 そこで、ソースをすっきりさせたくて「日記」のHTMLソース部分をそのままコピーして、○○.jsファイルとして保存し HTML内に<script type="text/javascript" src="○○.js"></script>を記述して外部ファイルから読み込ませようとしたのですが、スクリプトエラーが表示されてしまい、読み込みが出来ませんでした。 そこで質問なんですが、日記のHTMLソース部分をそのままコピーした後に、○○.jsファイルとして保存した時、jsファイル内をどの様に書き直したらよろしいのでしょうか？ 初歩的な質問で申し訳ありません。

  • javascriptのPHP化について

    宜しくお願い致します。 javascriptの外部ファイルをPHP化して、サーバサイドで動的に生成した内容を吐き出し、それをHTML側でjavascriptの外部ファイルとして受け取って処理しております。 この場合のブラウザがアクセスした際に処理される順番は・・・ (1)HTMLの読み込み開始 (2)header内のjavascript外部ファイルの読み込みと実行 (3)HTMLファイルのbody以下を読み込み (4)結果をブラウザに返して表示 という流れになるはずです。 この場合、(2)のjavascript外部ファイルの方がbodyより先に実行されるはずです。 しかし、javascript外部ファイル内のPHPでセッションデータを扱っている場合、(3)のbody内でPHPでセッションを定義した内容が、なぜか(2)のjavascript外部ファイルで反映されて実行されるのです。 私のイメージでは・・・ (1)HTMLの読み込み開始 (2)header内のjavascript外部ファイルの読み込みと実行 　※この時セッションは反映しない (3)HTMLファイルのbody以下を読み込み 　※この時にセッションを入れても(2)が既に実行さられているので反映しない (4)結果をブラウザに返して表示 　※結果、セッションにデータが入っておらず、php側でエラーを吐き出しjavascriptが止まる という様になるかと思ってましたが、なぜか実行されます。 javascriptはHTMLが全部読み込まれてから実行されるのでしょうか？

  • HTMLタグが書かれた外部ファイルを、HTMLファイルに読込みたい

    複数のHTMLファイル内で、同じHTMLタグを書く部分がいくつかあります。 それらのHTMLタグの部分を外部ファイルか何かにして、HTMLファイル内で読み込むようにすることは出来ますか？ JavaScriptでは外部ファイル（jsファイル）の読み込みはできるようですが、HTMLではできないんでしょうか？ ※尚、CSSではやりたい事は出来ませんでした。 共通化できるのはスタイルだけなので・・。 私が共通化したいのは、HTMLタグです。 例えば <TD>hogehoge</TD> や <IMG src="hoge.jpg"> などのタグを複数のHTMLファイルで共有する為に 外部ファイル化したいんですが そんなことって出来るのでしょうか・・？ 上記のようなタグを複数のHTMLファイルで共通できる手段であれば、外部ファイルという形式じゃなくても別にいいのですが・・

    • ベストアンサー
    • HTML
  • javascriptファイルは１つに統合できますか

    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箇所にコピー＆ペーストするようなイメージで） お手数ですが、ご教示のほど、宜しくお願い致します。

  • 外部ＪａｖａＳｃｒｉｐｔでのdocument.writeについて

    今、JavaScriptを使ってＨＰを作ろうと思っています。 そこで、外部ファイルとしてJavaScriptを作り、ＨＴＭＬ内でsrcを使って読み込んでいます。そのときに問題が発生しているのですが、外部ファイルでdocument.writeを使うと処理が戻ってきません。 例） .... xxxx="テストJavaScript"; document.write(xxxx); .... ちなみに、ＩＥで実行した場合はきちんと表示し、NetScapeで実行した場合にずっと通信中になってしまいます。 これはNetScapeの仕様なのでしょうか。 分かりにくい説明で申し訳ありませんが、どなたかご回答お願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する