HTMLにJavaScriptを追加する方法-フロントエンドQ&A-php.cn

HTMLにJavaScriptを追加する方法

WBOY

リリース： 2023-05-21 09:04:07

オリジナル

3000 人が閲覧しました

JavaScript は、Web 開発で広く使用されているオブジェクトベースのイベント駆動型スクリプト言語です。 Web ページは JavaScript を使用してよりインタラクティブで動的にすることができ、開発中にページの機能を実現するために HTML に JavaScript コードを追加することが必要になることがよくあります。

この記事では、内部スクリプト、外部スクリプト、インラインスクリプトなどの JavaScript を HTML に追加する方法を紹介します。

1. 内部スクリプト

内部スクリプトとは、HTML ページに JavaScript コードを直接記述することです。この方法は、単純なインタラクティブなエフェクトなど、コードの量が少ない状況に適しています。以下は、内部スクリプトを使用して、マウスを置いたときにテキストの色を変更する例です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内部脚本示例</title>
</head>

<body>
    <h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">鼠标放上去改变颜色</h1>
</body>

</html>

ログイン後にコピー

この例では、JavaScript コードが、onmouseover および onmouseout イベントを通じて HTML 要素 h1 に直接追加されます。マウスを置くと文字の色が変化し、上に行くと赤、離れると黒になります。

2. 外部スクリプト

外部スクリプトは、JavaScript コードを別のファイルに保存し、HTML ページを通じてそれを導入します。この方法は、コード量が多い場合や複数のページを共有する必要がある場合に適しており、コードの保守性や再利用性を向上させることができます。外部 JavaScript ファイルを HTML ページに導入する例を次に示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
    <script src="example.js"></script>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>

ログイン後にコピー

この例では、外部 JavaScript ファイルは、<script&gt の src 属性によって指定されます。 ; タグのパスを追加し、ファイル内の JavaScript コードを HTML ファイルに導入することでコードの再利用を実現します。

3. インラインスクリプト

インラインスクリプトとは、HTML タグの属性に JavaScript コードを記述することを意味します。このメソッドは、JavaScript を使用して特定のインタラクティブ効果を実装する必要があり、このタグ内でのみ機能する必要がある状況に適しています。以下は、ボタンをクリックしたときにインラインスクリプトを使用してプロンプトボックスをポップアップ表示する例です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内脚本示例</title>
</head>

<body>
    <button onclick="alert('Hello World!')">点击这里弹出提示框</button>
</body>

</html>

ログイン後にコピー

この例では、onclick イベントを通じて HTML ボタン要素に JavaScript コードが直接追加されます。ボタンをクリックするとプロンプトボックスが表示されます。

上記の 3 つの方法では、JavaScript コードを HTML に追加して、よりインタラクティブで動的な Web ページを実現できます。実際の開発では、コードの読みやすさ、保守性、再利用性を考慮し、必要に応じて JavaScript コードの追加方法を選択してください。

以上がHTMLにJavaScriptを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。