JavaScriptの基本を押さえよう
HTMLへの埋め込み
JavaScriptをHTMLファイルに埋め込む際には、<script>タグを使用します。ただし、このタグをHTMLファイルの上部に記述すると、他のまだ読み込まれていないHTML要素に影響を与え、思わぬ不具合が発生することがあります。そのため、通常は<script>タグをファイルの末尾に配置するのがベストです。
以下はその例です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>テストページ</title>
</head>
<body>
<img src="images/sample.png" alt="テスト画像" />
</body>
<script src="scripts/main.js"></script>
</html>
このように記述することで、外部のJavaScriptファイル（ここでは main.js）がHTMLに読み込まれる仕組みになっています。
イベント処理
JavaScriptでは「イベント」を検知して、それに応じたアクションを実行することが可能です。イベントとは、例えばクリックやスクロール、キーボード操作など、ブラウザで発生する動作のことを指します。
次のコードは、HTML全体をクリックしたときに「Hello World」というアラートを表示する簡単な例です。
main.js
document.querySelector("html").addEventListener("click", function ()
{
alert("Hello World")
});
ここでは、querySelector()メソッドを使用してHTMLの要素を選択し、addEventListener()で「クリック」イベントに反応する処理を追加しています。イベントが発生すると、指定された関数が実行され、アラートが表示される仕組みです。
このようにして、JavaScriptを活用すれば、ページのインタラクティブな動きを簡単に実装することができます。