HTML は JavaScript の結果をどのように呼び出しますか?-フロントエンドQ&A-php.cn

HTML は JavaScript の結果をどのように呼び出しますか?

PHPz

リリース： 2023-04-25 18:18:32

オリジナル

1380 人が閲覧しました

Web 開発では、動的な効果やユーザーインタラクション機能を提供するために JavaScript が広く使用されています。ただし、JavaScript コードを有効にするには、HTML ファイル内で呼び出す必要があります。この記事では、HTML で JavaScript を呼び出す方法とサンプルコードを紹介します。

1. ドキュメントヘッダー

HTML ドキュメントで JavaScript を呼び出す前に、ドキュメントヘッダーで JavaScript コードを次のように宣言する必要があります:

<head>
  <script type="text/javascript">
      // JavaScript代码
  </script>
</head>

ログイン後にコピー

wheretype 属性は必須であり、スクリプト言語のタイプを指定するために使用されます。text/javascript は JavaScript コードを表します。 HTML5 を使用している場合は、type 属性を省略できます。

2. 内部 JavaScript コード

JavaScript コードを HTML ファイルに直接記述し、<script> タグに保存できます (例:

)。

<!DOCTYPE html>
<html>
  <head>
    <title>调用JavaScript的例子</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>内部JavaScript的例子</h1>
    <script>
      function showMessage() {
        alert("你好，欢迎访问我的网站！");
      }
      showMessage();
    </script>
  </body>
</html>

ログイン後にコピー

上記の例では、showMessage() 関数を使用して、ウェルカムメッセージを含むダイアログボックスをポップアップ表示します。コードの最後の行でこの関数を呼び出し、ページが読み込まれた直後にダイアログボックスが表示されます。

3. 外部 JavaScript ファイル

JavaScript コードが長い場合、または繰り返し使用する必要がある場合、通常は外部ファイルに保存され、HTML ファイル内で参照されます。たとえば、上記の例の JavaScript コードを myscript.js という名前のファイルに保存できます。

HTML ファイルで、<script> タグを使用して、次のようにこのファイルを参照します。

<!DOCTYPE html>
<html>
  <head>
    <title>调用JavaScript的例子</title>
    <meta charset="utf-8" />
    <script src="myscript.js"></script>
  </head>
  <body>
    <h1>外部JavaScript的例子</h1>
  </body>
</html>

ログイン後にコピー

ファイル名は myscript.js## です。 #、HTML ファイルと同じディレクトリに配置されます。 <script> タグの src 属性は、外部ファイルのパスを指定するために使用されます。

4. イベントハンドラーは JavaScript を呼び出します

HTML ドキュメントでは、ユーザーインタラクションイベント (マウスクリック、マウスホバー、キーボードキーなど) は JavaScript を通じて応答できます。このセクションでは、イベントハンドラーを通じて JavaScript を呼び出す方法を説明します。

1. イベントハンドラーの指定

以下はマウスクリックイベントハンドラーの例です:

<!DOCTYPE html>
<html>
  <head>
    <title>event handling example</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
      function showMessage() {
        alert("你好，欢迎访问我的网站！");
      }
    </script>
  </head>
  <body>
    <h1>事件处理器调用JavaScript的例子</h1>
    <button onclick="showMessage()">点击这里发送欢迎消息</button>
  </body>
</html>

ログイン後にコピー

この例では、ボタン要素 # に ## を追加します。 onclick

属性。この属性の値は showMessage() 関数です。ボタンをクリックすると、ブラウザによってこの機能が実行され、ダイアログボックスが表示されます。 2.DOM イベントモデル

DOM イベントモデルでは、イベントリスナーを追加してユーザーインタラクションイベントに応答します。たとえば、次のコードは、要素の上にマウスを置くとメッセージをポップアップ表示します:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DOM事件模型的例子</title>
    <script type="text/javascript">
      function showMessage() {
        alert("你好，欢迎访问我的网站！");
      }
      var myButton = document.getElementById("myButton");
      myButton.addEventListener("mouseover", showMessage);
    </script>
  </head>
  <body>
    <h1>调用JavaScript的例子</h1>
    <button id="myButton">鼠标悬停在此处弹出欢迎消息</button>
  </body>
</html>

ログイン後にコピー

この例では、DOM メソッド

addEventListener()

を使用してイベントリスナーを追加します。これは前のものと同じです onclick方法が異なります。 mouseover はイベントタイプ、showMessage はイベント応答関数です。概要

この記事では、内部 JavaScript コード、外部 JavaScript ファイル、JavaScript を呼び出すイベントハンドラーなど、HTML で JavaScript を呼び出すさまざまな方法を紹介します。これらのメソッドを使用すると、Web 開発者は JavaScript を使用して、より優れた動的効果とインタラクティブなエクスペリエンスを実現できます。

以上がHTML は JavaScript の結果をどのように呼び出しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。