HTMLファイルに直接JavaScriptのコードを記述する

HTML ファイルの中に JavaScript のコードを直接記述する方法について解説します。

(Last modified: )

script要素を記述する

JavaScript のコードを記述するには script 要素を使用します。具体的には <script> から </script> の間に JavaScript のコードを記述します。 

<script>
// コードを記述する
</script>

例えば JavaScript を使ってドキュメントに文字列を書き出すには次のように記述します。 

<script>
document.write("<p>JavaScript テスト</p>");
</script>

<script> から </script> の間に記述されたものは実行されるコードであることを示しています。

※ 簡潔に記述できるので document.write をここでは使用していますが、現在は document.write の利用は非推奨となっています。 document.write の代わりとして「現在処理を実行しているscript要素を取得(currentScript)」などを使用されてください。

HTMLファイルの中でscript要素を記述する場所

script 要素は HTML ファイルの中の head 要素内、または body 要素内に記述します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<script>
// コードを記述する
</script>

</head>
<body>

<script>
// コードを記述する
</script>

</body>
</html>

どちらに書かなくてはいけないということはありません。ただコードの内容によっては head 要素の中に書く必要がある場合もありますし、逆に body 要素の中に書く必要がある場合もあります。

また script 要素は複数記述することができます。下記では body 要素のなかに script 要素を 2 つ記述した場合です。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

<p>...</p>

<script>
// コードを記述する
</script>

<p>...</p>

<script>
// コードを記述する
</script>

<p>...</p>

</body>
</html>

script 要素をどの位置に記述するべきかについてより詳しくは「JavaScriptのコードをHTMLファイルのどこに記述するべきなのか」を参照されてください。

script要素でのtype属性の省略とmeta要素でのスクリプト言語の省略

HTML 4.01 の時は、 script 要素を記述するときに type 属性にスクリプトの MIME タイプを指定する必要がありました。例えば JavaScript のコードを記述する場合は次のように記述していました。 

<script type="text/javascript">
// コードを記述する
</script>

HTML 5 以降は type 属性のデフォルトの値が text/javascript になったので、 JavaScript のコードを記述する場合は type 属性を省略して次のように記述することができます。 

<script>
// コードを記述する
</script>

また同じように HTML 4.01 の時はイベントハンドラなどにコードを記述するような場合に meta 要素にデフォルトのスクリプト言語を指定する必要がありました。具体的には head 要素内に次のような記述をしていました。 

<meta http-equiv="Content-Script-Type" content="text/javascript">

HTML 5 以降はデフォルトのスクリプト言語の指定は不要となり、 http-equiv 属性の値として "Content-Script-Type" は指定すること自体できなくなりました。そのため、この meta 要素は記述する必要がありません。

サンプルコード

それでは簡単な JavaScript のコードが含まれる HTML ページを作成し、 sample2-1.html という名前で保存します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>
</head>
<body>

<p>
この下に JavaScript を使って文字列を出力します。
</p>

<script>
document.write("<p>JavaScriptのテスト</p>");
</script>

</body>
</html>

ブラウザから先ほど保存した HTML ページを開きます。

HTMLファイルに直接JavaScriptのコードを記述する(1)

HTML ページ内に記述された JavaScript コードが実行されて、画面に文字列が出力されました。

-- --

HTML ファイルの中に JavaScript のコードを直接記述する方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。

カテゴリ