JavaScript スクリプトが実行されるタイミングの詳細な説明

JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出されるのでしょうか?ブラウザが HTML ファイルを開くと、宣言された関数ではないスクリプトを直接実行したり、イベントを通じてスクリプト関数を呼び出したりします。以下では、これらの状況を分析します。

1. ブラウザはページを開くときにスクリプトを実行します

ブラウザが HTML ファイルを開くと、HTML タグやスクリプトを含め、ファイル全体が最初から解釈されます。スクリプト内に直接実行できるステートメントがある場合、それらは検出された時点ですぐに解釈され、実行されます。主に2つの状況があります:

1) プログラムが起動すると (ここでブラウザがページを読み込む)、このアラート関数がトリガーされ、実行されます。

<html>
  <ヘッド>
    <title>デモ</title>
    <script type="text/javascript">
      alert("もう一度クリックしてみますか");  
    </スクリプト>
  </head>
  <body onLoad="display()">
  </本文>
</html>

2) ブラウザが js 関数を読み込んで解析すると、自動的に呼び出されます (ユーザーのクリックなどによってトリガーされることはありません)。

2. onLoadイベントを使用してスクリプトを実行します（**の発生をリッスンしてから実行するのと同じです）

onLoad イベントは、ブラウザでページが開かれたときに発生します。このメソッドは、ページを開いているときにユーザーにメッセージを表示するためによく使用されます。
次の例では、タグの onLoad イベントを使用して次のことを説明します。

<html>
  <ヘッド>
    <title>デモ</title>
    <script type="text/javascript">
      //ここに JavaScript コードを挿入します。
      関数表示()
      {
        アラート("もう一度クリックしてもいいですか")  
      }
    </スクリプト>
  </head>
  <body onLoad="display()">
  </本文>
</html>

3. ユーザーイベントを使用してスクリプトを実行する

ブラウザを使用する際、ユーザーはマウスとキーボードを使用して、マウスを比例的に動かしたり、リンクやボタンをクリックするなどの操作を実行することが多く、これらの操作によって対応するイベントが生成されます。これらのイベントを使用してスクリプト関数を呼び出すことができます。
次の例では、ボタンクリックイベントを使用して display() 関数を呼び出します。

<html>
  <ヘッド>
    <title>デモ</title>
    <script type="text/javascript">
      //ここに JavaScript コードを挿入します。
      関数表示(){
        警告("クリックすると、とても痛いです")
        }
    </スクリプト>
  </head>
  <本文>
    <センター><br>
    <フォーム>
      <input type="button" value="onclick" onclick="display()">
    </フォーム>
  </center>
  </本文>
</html>

上記はJavaScriptスクリプトが実行されるタイミングについての詳しい説明です。JavaScriptスクリプトが実行されるタイミングの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません: