- ベストアンサー
関数を呼び出すHTMLタグ<body onload="hoge()">について
ほぼ独学でJavaScriptを学んでいるので、一般的なコード（ＨＴＭＬ含め）の書き方が分かりません。 JavaScriptでは、ボタンや画像をクリックすると動作する、 というものが多いですが、そうではなくて、 （それはonclick等で関数を呼び出せば良いことは分かります） 時計のように、アクセスした瞬間から実行されるプログラムを複数書きたい時は、 どのようにするのが妥当でしょうか。 <body onload="hoge()">では、関数hoge()しか実行されないことになりますよね。 そうではなくて、hoge()以外にもいくつかの関数を実行したい時はどうするのが一般的ですか？ ここでＣ言語のように、hoge()をmain関数（int main(void){}）のような扱い方にすると、 hoge()関数内で呼び出されている関数も呼び出されることになりますが、そのような書き方で良いですか？ アクセスの効率の良さから考えて、他に良いやり方はあるでしょうか。 ・・・前に困ったので<body>タグを２つ付けて２つの関数をonloadアトリビュートで呼び出すという、 奇々怪々なことをやってみて、それでIE7,FireFox3で動いていたので驚いたんですが、 そんなやり方はさすがに御法度ですよね(笑)。 答えにくい質問だと思いますが、アドバイスお願いします。
- skillpp
- お礼率84% (11/13)
- JavaScript
- 回答数5
- ありがとう数7
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
""の中がスクリプトなので、<body>タグを2個書かないでも、実行する関数の数が少ないのなら <body onload="A(); B();"> みたいなのでもＯＫ。 あるいは window.onload を用いれば、<body>タグ内に書かないでもすみます。 （二重定義になると、後方優先になりますが…ANo2参照） <html> <head> <script type="text/javascript"> window.onload = function(){ B(); A(); } function A(){ alert("A"); } function B(){ alert("B"); } </script> </head> <body> <!-- <body onload="A(); B();"> 注）コメント行 --> </body> </html>
その他の回答 (4)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
普通にコマンドや関数を書き連ねればいいだけです。たとえば、 <body onLoad="hoge();piyo()">
お礼
上記の補足がお礼です。すみません。
補足
ああ、そんな簡単な方法がｗ。 独学なので独りよがりになって落とし穴にハマってた気分ですｗ 参考になりました。ありがとうございます。
- bkbkb
- ベストアンサー率33% (97/289)
bodyタグ二つはマズイですね（笑） 今動いていても、ブラウザが変わっても動くという保証はありませんしね。
お礼
やはりそうですね(笑) たまたま動いてるって感じですよね。 ありがとうございます。
//@cc_on function addEvent(elementId, evt, eventHandler, flag){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; element./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, flag); } として addEvent(window, 'load', hoge1, false); addEvent(window, 'load', hoge2, false); addEvent(window, 'load', hoge3, false); とか //@cc_on /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, function () { //ここにhoge1(); //ここにhoge2(); }, false); /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, function () { //ここにhoge3の中身そのものをここに書く; }, false); 「window.onloadは、書き換えられるとそれ以前のものが呼ばれない。」と勝手に学んだ。^^; なので最近は、意地になってwindow.onloadを使わないコードで書いています。 （イベントが追加できないものは、自分の中では勝手に対象外）
お礼
とても詳しい解説ありがとうございました。 コードの中にはちょっとまだ分からない面もあるのですが、 window.onloadでも結局は難しい、 他の手といっても結構回りくどいコードになってしまう、 （No.5さんの意見を含め）ということがよく分かりました。 私はwindow.onloadにもっと上手い書き方があるのかと思っていましたが、 ダメなんですね・・・上書きされちゃうんですか。 変数の上書き（型変換含む）と同じですね。 例えば、 time = new Date(); month = time.getMonth + 1; //この時点でmonthは整数 if (month < 10) month = "0" + month; //ここでmonthが文字列になることがある このあたり、JavaScriptは簡単に統一されていて、 むしろ分かり良いというのはありますが・・・
- bkbkb
- ベストアンサー率33% (97/289)
そのhogeの中で複数の関数を呼び出す、そのやり方で良いですよ。
お礼
ふむふむ、やはりＣやJavaのように、main関数代わりですか。 解答ありがとうございます！
補足
<body>タグを二つ付ける、というのはありえないですよねｗ 例えば、 <body onload="hoge()"><body onload="piyo()"> （中略） </body></body> のような。 動くのが不思議です。bodyタグは１つだけ、というのが原則なはずなのに。
お礼
ありがとうございます。 総合して全てすんなりと理解できました。 これでこれから、 <body onload="hoge();piyo();"を使うか、 window.onload = function(){}でいくか、 <body onload="main()">として他のプログラミングのようにmain関数から他の関数を呼び出しまくるか、 あるいはNo2のような方法もあるからそうしてみるか（←あまり理解できていませんがｗ）、 という道が分かりました。本当に皆さんお答え下さりありがとうございました。