初期処理の実装方法とベストプラクティス

このQ&Aのポイント
  • 初期処理の実装方法として、HTMLのheadタグ内にJavaScriptを記述する方法があります。しかし、この方法ではdocument.writeが実行されます。
  • 初期処理で使い回す画像などは関数の外で事前に読み込むべきです。これは一般的なベストプラクティスです。
  • 初期処理は通常、onloadイベントを使用して関数を実行させる方法が一般的です。この方法はVBAでは使用できないので注意が必要です。
回答を見る
  • ベストアンサー

初期処理について

前の質問で以下のコードを教えてもらいましたが、 HTMLの<head>に以下を書いてもdocument.writeは実行されます。 <script> a=1; b=2; function hoge(){ var a=3; b=4; c=5; } hoge(); document.write("a="+a+"<br>"); document.write("b="+b+"<br>"); document.write("c="+c+"<br>"); </script> それで思ったんですけど、後で使い回す画像とかは 関数の外で書いて最初に読み込むとかは、実は常識なのですか? こんな方法で初期処理を記述すればいいんでしょうか。 今は初期処理用の関数をonload時に実行させています。 VBAはこんな真似できなかったと思います。

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

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

<html> <head> <script> imgx=new Image(); imgx.src="2.jpg"; imgy=new Image(); </script> </head> <body> <img src="1.jpg" onmouseover="imgy.src=this.src;this.src=imgx.src" onmouseout="this.src=imgy.src">; <img src="1.jpg" onmouseover="this.src='3.jpg'" onmouseout="this.src='1.jpg'">; </body> </html> たとえば、上の例だと2.jpgはhtmlを読み込んだ際にキャッシュされ、 3.jpgはmouseoverしたさいに始めて読み込まれます 回線や画像サイズ、頻度などにもよりますが、画像を入れ替えるような処理 の場合、入れ替わる画像はあらかじめ読み込んでおかないと 微妙にタイムラグが出る場合があります。 そのようなものはグローバル変数で処理しておけば参照されるときに 遣い回すのも楽だと思います。

uzume_z
質問者

お礼

度々お世話になります。 回線だとどうしてもタイムラグが出ますよね。 普段OFFICEを触っていると、こういうところが気がつきません。 同じような、違うような感じでしたが、よく分かりました。

関連するQ&A

  • イベントハンドラに処理を追加するには?

    例えばbodyタグのonloadイベントハンドラに JavaScriptを使って処理を追加するにはどうすればよいのでしょうか? 例) ・rei.htm <html>  <script language="JavaScript" type="text/javascript">  function hoge(){   alert("hogeです");  }  function foo(){   alert("fooです");  }  </script>  <body onload="hoge();">  </body>  <script language="JavaScript" type="text/javascript">  document.body.onload += foo();  </script> <html> ※前提条件として、変更可能な箇所はscriptタグ内のみとなります。 「こんなんでいけないかな?」と思って上記のようにやってみたのですがうまくいきませんでした。 (結果はfoo()のみ実行され、hoge()は実行されませんでした。 alertでbody.onloadの中身を確認すると『function anonymous{hoge();}undefined』と表示されるので、なぜfoo()が実行されてhoge()が実行されないのかよくわかりませんが‥) また試しに document.body.onload += foo(); これを以下のように変更してみました。 document.body.onload = foo(); この時は、 ・foo()の実行  ↓ ・javascriptエラー  ↓ ・hoge()の実行 となりました。(これもなぜこうなるのかよくわかりせん) 以上、イベントハンドラに最初から任意に入れられている処理を残しつつ、 さらに処理を加えるにはどうすればよいのかご教示お願いします。

  • 関数から関数を呼び出したときのリターン処理について

    宜しくお願いいたします。 ユーザー定義関数からユーザ定義関数を呼び出す必要があり 以下の様にしてみたところ function chk($value) {    if ($value>0) {       return TRUE;    }    return FALSE; } function test(){    $a = 0;    $b = -1;    $c = 2;    $txt = '';    if (chk($a)) {       $txt .= 'aはhoge<br>';    }    if (chk($b)) {       $txt .= 'dはhoge<br>';    }    if (chk($c)) {       $txt .= 'cはhoge<br>';    }    return $txt; } 最初の chk($a) で処理が終わってしまいます。 この場合 chk() の return が test() をも止めてしまっているのでしょうか? return で調べて見ると 呼び出し元のスクリプトに戻る というような解説だったので test() に戻って処理の続きをしてくれる と思ったのですがうまくいきません。 これを return $txt; まで処理させるにはどのようにしたらよいでしょうか? できれば chk() をTRUE、FALSEの判定に使いたいと思います。 何卒ご教授のほどよろしくおねがいします。

    • ベストアンサー
    • PHP
  • 処理のしくみがわかりません・・・

    以下のスクリプトはfor文による繰り返し処理の例です。 <script type="text/javascript"> <!-- var a="あ"; var b=new Array("い","う","え","お"); function FUNC1(){ for(i=0;i<b.length;i++){ a=a+b[i]; } document.write(a); } function FUNC2(){ for(i=0;i<b.length;i++){ document.write(a=a+b[i]); } } //--> </script> FUNC1の関数を実行すると、「あいうえお」、 FUNC2の関数を実行すると、「あいあいうあいうえあいうえお」 と表示されるのは理解できます。 それで試しにこのスクリプトの最後に、 FUNC1()+FUNC2(); を追加したところ、 「あいうえおあいあいうあいうえあいうえお」 と表示されると思いきや、 「あいうえおあいうえおいあいうえおいうあいうえおいうえあいうえおいうえお」 と表示されました。 どうもFUNC2を足す時、グローバル変数 a が "あ" ではなく、 "あいうえお" と代入されて実行されてるみたいです。 そして、FUNC1、FUNC2を実行すると、それぞれ 「あいうえおいうえおいうえお」 「あいうえおいうえおいあいうえおいうえおいうあいうえおいうえおいうえあいうえおいうえおいうえお」 と、理解不能の文字の並びになってしまいました。 なぜ FUNC1()+FUNC2(); を追加したらそれぞれの関数の実行値が変わってしまったのでしょうか? その処理の仕組みをご教授お願いいたします<(_ _)>

  • document.writeの文字列が実行されるタイミング

    javascriptで<script>タグの表示をdocument.writeで行ったところ、 直後に、<script>ソースの関数呼び出しでリンク切れになったのですが、 なぜでしょうか。 document.writeの文字列が実行されるタイミングっていつなんでしょうか。 <script> document.write('<script type="text/javascript" src="hoge.js"></script>'); hoge(); </script> ※hoge()はhoge.js内で定義されています。

  • window.onloadでのfunction

    javascript初心者で質問自身が僕が解決したい問題の原因かどうかも解らずに質問しています。 <script type="text/javascript"> <!-- function hoge_1() { ~処理1~ } function hoge_2(hiki_suu) { ~処理2~ } window.onload = function() { document.getElementById("button_1").onclock = hoge_1; document.getElementById("button_2").onclock = hoge_2("watasu"); } // --> </script> 上記のようにページheadにscriptを配置したとします。ページ上のbutton_1がクリックされると処理1が実行されるのですが、hoge_2のように引数を使ってしまうと、onload時に処理2を実行してしまい、button_2は有効に動作しません。 functionの引数の問題なのか、window.onloadの作法なのか、なにが悪いのか全く解らず質問しています。 ご指導のほどよろしくお願いいたします。

  • 各々の関数を処理するごとに変数aに1を足したい

    各々の関数を処理するごとに変数aに1(実際には関数ごとに異なる数)を足したいと考えています。 (関数Aの処理を行った場合には変数aに1を足し(0+1=1)、加えて関数Bの処理を行った場合には変数aにさらに1を足して(1+1=2)、加えて関数Cの処理を行った場合には変数aにさらに1を足して(2+1=3)・・・・) perlでは以下のような記述で実現できるかと思いますが、JAVAスクリプトではどのように記述すればよいのでしょうか。色々と参照しながら試行錯誤したのですが、うまく動作しませんでした。恐らくは基本的な質問かとも思われ大変恐縮ですが、特にJAVAスクリプトに関しては全くの初心者の為、何卒ご教授いただけないでしょうか。申し訳ありませんが、よろしくお願いいたします。 $a = 1; sub A{$a = $a+1;} sub B{$a = $a+1;} sub C{$a = $a+1;} &A; &B; &C; print "$a"; ############################################# ちなみに、本などを見ながらreturnや引数を利用するのかと試行錯誤したのですが、具体的な記述方法が分からず、失敗しました。 a=1; function A() {a = a+1;} function B() {a = a+1;} function C() {a = a+1;} function A(); function B(); function C(); document.write(a);

  • なぜ、ジャバスクリプトが表示されない?

    なぜ、ジャバスクリプトが表示されない? 下のように記述しました。問題なく表示されます。 document.write ("<br><b>旅について</b></br>"); document.write ("<br>(旅のリンク集です。…)</br>"); しかし、1行加えて、次のようにすると表示されません。「このスクリプトでエラーが発生しました。」となってしまいます。何が原因なんでしょうか? document.write ("<br><b>旅について</b></br>"); document.write ("<br>(旅のリンク集です。…)</br>"); document.write ("<br><a href="http://www.arukikata.co.jp/link/airline_yellow.html">エアライン</a>地球の歩き方</br>"); また1行目を<b>~</b>でboldにしました。すると2行目もboldになってしまいます。なぜでしょうか? よろしくおねがいします。

  • PHP同時処理の負荷について

    PHP同時処理の負荷について教えて下さい。 仮に、検索語句の詳細情報表示PHPスクリプトがあったとします。 (例A) 野菜サイト(yasai.hoge.jp)内にこのPHPスクリプトがあり 魚サイト(sakana.hoge.jp)内にもこのPHPスクリプトがあり 肉サイト(niku.hoge.jp)内にもこのPHPスクリプトがあるとします。 Aさんが野菜サイトで「ネギ」語句を検索実行 Bさんが魚サイトで「鮭」語句を検索実行 Cさんが肉サイトで「牛」語句を検索実行 例Aは、マルチドメインごとにPHPスクリプトを配置しているとします。 (例B) PHPスクリプトは全く同じ内容なのでサーバー内に1つだけ置き 野菜、魚、肉の各サイトから語句が検索実行されると この1つのPHPスクリプトで処理される。これを例Bとします。 この場合、読込速度が遅いのやサーバーに負荷がかかるのはどちらでしょうか? 例Bは、1つのPHPへ処理が集中するので読込が遅くなるのでは??と思ったり 結局サーバーの処理負荷は例Aも例Bも全く同じでは??と思ったりするのですが 実際のところはどうなのでしょうか?  

    • ベストアンサー
    • PHP
  • htmlからjavascript経由でのphp結果

    お世話になります。 htmlからjavascriptを介してphpを呼んでいます。 htmlでは以下のように呼んでいます。 <script type="text/javascript" src="../xxx.php" charset="utf-8"></script> html内のphpファイルをwebサーバ上で直接実行すると以下のように表示されます。 ----------------------------- document.write("<a href=http://xxx1 target=_blank>タイトル1</a><br>") document.write("<a href=http://xxx2 target=_blank>タイトル2</a><br>") document.write("<a href=http://xxx3 target=_blank>タイトル3</a><br>") document.write("<a href=http://xxx4 target=_blank>タイトル4</a><br>") ----------------------------- 出力した内容は表示できているので、phpコード的には問題ないと思うのですが htmlに出力されません。 他の箇所で同様の処理を行っていて、こちらはhtml上に表示されているので ちょっと苦戦しています。 ファイルもutf-8でbomなしにしています。 先輩方よろしくお願いします。

    • ベストアンサー
    • PHP
  • javascriptに引数を渡す方法について

    お世話になります、 javascriptに下記のように引数を渡して 表示したいのですがうまくいきません。 <script language="javascript"> function dispData(msg) { document.write(msg); } </script> $a = "hoge"; echo "<a href='#' onclick='javascript:dispData($a)'>" . $a . "</a><br>"; とすると動作してくれません。 $aをシングルコートで囲っても同じです。 $a = "/hoge/";をやると/hoge/を表示されます。 コーディングの方法を教えて頂きたいのですが。 dispData()に引数を渡して処理を行いたいもので。 よろしくお願い致します。

    • ベストアンサー
    • PHP

専門家に質問してみよう