ゴール
流れ
- HTMLを作成
- ボタンを設置
- JavaScript読み込み
- ボタンをクリックしたら実行されるイベントリスナーを設定
作業詳細
HTMLを作成
<!-- 文書がHTML5で作成されたものであることを宣言 -->
<!DOCTYPE html>
<!-- HTML文書であることの宣言 -->
<html>
<!-- タイトルや目に見えない設定を記述 -->
<head>
<!-- その文書に関する情報（メタ情報）を指定する -->
<!-- 文字コードの指定 -->
<meta charset="utf-8">
<!-- ファビコンの指定 -->
<link rel="icon" href="favicon.ico" />
<!-- 文書にタイトルをつける -->
<title>初めてのJavaScript</title>
</head>
<!-- 主に目に見える部分を記述 -->
<body>
</body>
</html>
ボタンを設置
<!-- 文書がHTML5で作成されたものであることを宣言 -->
<!DOCTYPE html>
<!-- HTML文書であることの宣言 -->
<html>
<!-- タイトルや目に見えない設定を記述 -->
<head>
<!-- その文書に関する情報（メタ情報）を指定する -->
<!-- 文字コードの指定 -->
<meta charset="utf-8">
<!-- ファビコンの指定 -->
<link rel="icon" href="favicon.ico" />
<!-- 文書にタイトルをつける -->
<title>初めてのJavaScript</title>
</head>
<!-- 主に目に見える部分を記述 -->
<body>
<!-- =========================================================================================================================
= ボタン
========================================================================================================================== -->
<button>
ボタン
</button>
</body>
</html>
JavaScript読み込み
<!-- 文書がHTML5で作成されたものであることを宣言 -->
<!DOCTYPE html>
<!-- HTML文書であることの宣言 -->
<html>
<!-- タイトルや目に見えない設定を記述 -->
<head>
<!-- その文書に関する情報（メタ情報）を指定する -->
<!-- 文字コードの指定 -->
<meta charset="utf-8">
<!-- ファビコンの指定 -->
<link rel="icon" href="favicon.ico" />
<!-- 文書にタイトルをつける -->
<title>初めてのJavaScript</title>
</head>
<!-- 主に目に見える部分を記述 -->
<body>
<!-- =========================================================================================================================
= ボタン
========================================================================================================================== -->
<button>
ボタン
</button>
<script>
// =======================================================================================================================
// = 動作確認 JavaScript
// =======================================================================================================================
console.log("JavaScriptが起動しました");
</script>
</body>
</html>
ボタンをクリックしたら実行されるイベントリスナーを設定
<!-- 文書がHTML5で作成されたものであることを宣言 -->
<!DOCTYPE html>
<!-- HTML文書であることの宣言 -->
<html>
<!-- タイトルや目に見えない設定を記述 -->
<head>
<!-- その文書に関する情報（メタ情報）を指定する -->
<!-- 文字コードの指定 -->
<meta charset="utf-8">
<!-- ファビコンの指定 -->
<link rel="icon" href="favicon.ico" />
<!-- 文書にタイトルをつける -->
<title>初めてのJavaScript</title>
</head>
<!-- 主に目に見える部分を記述 -->
<body>
<!-- =========================================================================================================================
= ボタン
========================================================================================================================== -->
<button>
ボタン
</button>
<script>
// =======================================================================================================================
// = 動作確認 JavaScript
// =======================================================================================================================
console.log("JavaScriptが起動しました");
// =======================================================================================================================
// = ボタンをクリックしたら実行されるイベントリスナーを設定
// =======================================================================================================================
addEventListener('click', event => {
// ===================================================================================================================
// = 動作確認 イベントリスナー
// ===================================================================================================================
console.log("ボタンが押されて、addEventListenerが起動しました");
// console.log("event：" + event);
});
</script>
</body>
</html>