ホームページ > 記事 > ウェブフロントエンド > HTMLにJavaScriptを追加する方法
HTMLにJavaScriptを追加する方法
- WBOYオリジナル
- 2023-05-21 09:04:072909ブラウズ
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> の 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 サイトの他の関連記事を参照してください。