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

HTMLで要素の読み込みが完了したときにスクリプトを実行する方法

HTMLでは、onload属性を使用することで、要素の読み込みが完全に完了したタイミングでスクリプト（JavaScript）を実行できます。この属性は、ページ全体の読み込み後や、画像などの特定リソースの表示後に処理を開始したい場合に非常に便利です。

onload属性の基本的な使い方

onload属性は、<body>タグや<img>タグなど、さまざまなHTML要素に指定できます。例えば、<body>タグに設定すれば、ページ上のすべてのコンテンツ（テキスト・画像・スタイルシートなど）の読み込みが終わった時点で、指定した関数が自動的に呼び出されます。

実装サンプル

以下のコードは、ページの読み込みが完了した時点でアラートを表示するシンプルな例です。実際にブラウザで動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function display() {
            alert("ようこそ！");
         }
      </script>
   </head>
   <body onload = "display()">
      <h3>ウェブサイトへようこそ</h3>
      <p>学習コンテンツを提供しています。</p>
   </body>
</html>

コードの解説

このサンプルでは、<head>内でdisplay()という関数を定義し、<body>タグに「onload = "display()"」と指定しています。その結果、ページの読み込みが完了した瞬間に関数が実行され、「ようこそ！」というアラートが表示されます。

補足：より柔軟な代替手段

近年では、HTML内に直接イベントを記述する代わりに、JavaScript側でイベントリスナーを登録する方法も広く使われています。

window.addEventListener("load", function () {
   alert("ようこそ！");
});

また、DOMの構築だけを待ちたい場合は、画像などのリソースの読み込みを待たずに処理を開始できるDOMContentLoadedイベントを利用すると、より高速にスクリプトを実行できます。用途に応じて使い分けるとよいでしょう。

  1. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

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

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

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