HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【HTML】ページの解析完了時にスクリプトを実行する方法（defer属性の使い方）

defer属性とは

HTMLでページの解析（パース）が完了したときにスクリプトを実行したい場合は、<script>タグにdefer属性を指定します。defer属性が付いたスクリプトは、HTMLドキュメントの解析を妨げることなくバックグラウンドでダウンロードされ、解析が完全に終わった後（DOM構築後）に実行されます。

なお、defer属性は外部スクリプトファイルを読み込む場合にのみ有効で、インラインスクリプトには適用できません。

1. JavaScriptファイルを作成する

まず、JavaScriptファイルを追加します。ここではファイル名をnew.jsとし、以下のコードを記述します。

function sayHello() {
    alert("Hello World")
}

この関数は、呼び出されると「Hello World」というメッセージをアラートで表示します。

実行例

次に、上記のスクリプトを読み込んで実行するためのHTMLコードを見てみましょう。

<html>
   <head>
      <script src = "new.js" defer></script>
   </head>
   <body>
      <p>This is demo text.</p>
   </body>
</html>

<head>内でnew.jsをdefer属性付きで読み込んでいます。これにより、ブラウザはHTMLの解析を中断することなくスクリプトをダウンロードし、ページ全体の解析が終わった時点でスクリプトを実行します。

押さえておきたいポイント

  • defer属性：スクリプトのダウンロードをHTML解析と並行して行い、解析完了後に実行します。複数のdefer付きスクリプトがある場合も、記述順どおりに実行されます。
  • async属性との違い：async属性はダウンロード完了後すぐに実行されるため、実行順序が保証されません。実行順序を守りたい場合はdefer属性が適しています。
  • DOMContentLoadedイベント：defer付きスクリプトは、DOM構築完了を示すこのイベントが発火する前に実行されます。
  1. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

    HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実