今回は、HTMLでJavaScriptを読み込む方法について学んでいきます。
実際には、JSはHTMLに動きをつけるなどといったクライアントサイドの実装だけでなく、PHPやRubyのようなサーバーサイドの実装にも利用できますが、 今回はHTMLに組み込んで使うというクライアントサイドの実装について解説します。
HTMLでJavaScriptを読み込む2通りの方法
WebサイトにJavaScriptで動きをつける際には、JavaScriptをHTMLで読み込む必要があります。
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タグの前に記述します。
例題
では、実際にJavaScriptを使って簡単なアラートを表示させてみましょう。
以下のソースコードをエディタに貼り付けて動かしてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</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のコードです。
ShowAlart()という関数を作成し、その中にアラートを表⽰するプログラムを書きます。
今回は、アラートは以下のように書くことで実装してください。
alert(‘表示させたい文字列、値’);