JavaScript HTMLとJavaScriptの基本的な連携方法

2023年3月26日

HTMLは、Webページの構造や内容を記述するためのマークアップ言語です。一方、JavaScriptは、Webページやアプリケーションに動的な機能を追加するためのスクリプト言語です。HTMLとJavaScriptを連携させることで、Webページに動的な機能を追加することができます。

以下に、HTMLとJavaScriptを連携させる基本的な方法を紹介します。

scriptタグを使用する

HTMLの中で、JavaScriptコードを記述するには、scriptタグを使用します。scriptタグは、以下のようにHTMLコード内に挿入することができます。

<!DOCTYPE html>
<html>
<head>
	<title>Sample Page</title>
</head>
<body>
	<script>
		// JavaScriptコードをここに記述する
	</script>
</body>
</html>

scriptタグ内で直接JavaScriptコードを記述する方法に加えて、外部ファイルからJavaScriptコードを読み込むこともできます。以下のように、src属性を使用して外部ファイルを指定します。

<!DOCTYPE html>
<html>
<head>
	<title>Sample Page</title>
</head>
<body>
	<script>
		// JavaScriptコードをここに記述する
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Sample Page</title>
</head>
<body>
	<script src="script.js"></script>
</body>
</html>

JavaScriptを使って、ユーザーがボタンをクリックしたり、入力フォームに文字を入力したりしたときに、Webページ上で何らかの動作をすることができます。これは、イベント処理と呼ばれます。以下のように、HTMLの要素にイベントリスナーを追加することで、イベント処理を実装することができます。

<!DOCTYPE html>
<html>
<head>
	<title>Sample Page</title>
</head>
<body>
	<button onclick="alert('Hello, World!');">Click me</button>
</body>
</html>

---

JavaScript