JavaScriptをHTMLで使う方法

Webサイトを作成するためには最低限HTML/CSSが必要ですが、JavaScriptを覚えることでスライドショーやプルダウンメニューなどを利用した動きのあるページを作成することができます。

今回は、JavaScriptをHTMLで読み込んで使う方法について解説していきます。

JavaScriptとは

JavaScriptとは、主にWebサイトやWebアプリケーションを開発する際に利用されるプログラミング言語で、HTMLに動的な処理を実装することができます。

Webサイトでよくみられるスライドショーやプルダウンメニューなどは、JavaScriptを使って実装されていることが多いです。
WebページはHTMLによって構造が作られ、CSSによって装飾が施され、JavaScriptによってアニメーションなどの動きが作られます。

JavaScriptはDOMという仕組みを使いHTMLをツリー構造のオブジェクトデータで取得しています。そのデータを操作することでHTMLに動きを付与しているのです。
実際には、JavaScriptはHTMLに動きをつけるなどといったクライアントサイドの実装だけでなく、PHPやRubyのようなサーバーサイドの実装にも利用できますが、今回はHTMLに組み込んで使うというクライアントサイドの実装について解説いたします。

HTMLでJavaScriptを読み込む2通りの方法

WebサイトにJavaScriptで動きをつける際には、JavaScriptをHTMLで読み込む必要があります。
HTMLにJavaScriptを読み込むには、

JavaScriptをHTML内に記述する
JavaScriptを外部ファイルとして読み込む

という2つの方法があります。

JavaScriptをHTML内に記述する

JavaScriptのコードを直接HTMLファイル内に埋め込み、読み込ませる方法です。

この方法では、HTML内のheadタグかbodyタグの中にscriptタグを挿入し、scriptタグ内にJavaScriptのコードを記述します。
記述する場所については、bodyタグの最後に書くことが推奨されています。
これは、HTMLの読み込み時にJavaScriptの読み込みが始まるとそこでHTMLの読み込みが一旦止まってしまうのを避けるためです。

scriptタグはbodyタグの最後に入れるようにしましょう。

<body>
	<header></header>
	<main></main>
	<footer></footer>
	<script>
		//ここにJavaScriptのコードを記述
	</script>
</body>

HTML内に直接記述する方法は簡単ですが、デメリットもあります。

それは、複数のページに同じJavaScriptを適用したいときに、全てのページにコードを記述しなくてはいけないということです。
複数ページに同じJavaScriptを適用させたい場合は、外部ファイルとして読み込む方法が便利です。

JavaScriptを外部ファイルとして読み込む

JavaScriptを外部ファイルとしてHTMLで読み込む方法を紹介します。

この方法では、scriptタグのsrc属性にJavaScriptファイルを指定します。こちらもHTMLの読み込みの邪魔にならないように、bodyタグの前に記述します。

<body>
	<header></header>
	<main></main>
	<footer></footer>
	<script src="js/test.js"></script>
</body>

async / defer属性を付与して読み込みを高速化する

HTML5ではJavaScriptを読み込む際にscriptタグにasync / defer属性を付与することができます。

async/defer属性を利用することで、スクリプトを非同期で読み込むことができます。
通常HTMLは上から順番に処理されるため、途中でJavaScriptを読み込んだ場合は前述したとおりその分ページの読み込みがおそくなってしまいます。

そのため、JavaScriptはbodyタグの最後で読み込むことが推奨されていますが、トータルの読み込み時間としては早くはなっていません。

そこで、以下のようにscriptタグにasync/defer属性を記述することで、画面の読み込みとは別に非同期でJavaScriptを読み込むようになるため、ページの読み込み速度が改善します。

<script src="js/test.js" async></script>

asyncとdeferには、JavaScriptの読み込み順を維持しないのがasync、維持するのがdeferという違いがあります。
jQueryを使用する際など、読み込み順の考慮が必要な場合はdeferを使いましょう。

JavaScriptを実際に使ってみる

最後にJavaScriptを使って簡単なアラートを表示させてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="uft-8">
  <title>HTML入門-JavaScriptの基本</title>
</head>
<body>
<h1>JavaScript</h1>
<button type="button" onclick="ShowAlert()">ここをクリック</button>
<script>
  function ShowAlert() {
    alert("Hello world!!");
  }
</script>
</body>
</html>

今回はHTMLファイル内に直接JavaScriptのコードを記述しています。

scriptタグに囲まれた中に記述しているのがJavaScriptのコードです。
ShowAlert()という関数を作成し、その中にアラートを表示するプログラムを書きます。

アラートは

alert(‘表示させたい文字列、値’);

と書くことで実装します。

そして、ShowAlert()をbuttonタグのonclick属性に用意し、buttonタグクリック時に実行されるようにしています。
このコードをHTMLファイルにコピーし、文字コードを「utf-8」で保存してブラウザで開いてみてください。
ブラウザで開いたら、「ここをクリック」をクリックすることで「Hello world!!」と書かれたアラートが表示されます。

このように、JavaScriptとHTMLを組み合わせることで今回のアラートのような様々な表現が実装できます。