HTML5タグ虎の巻

scriptタグ

scriptは、スクリプトを記述するタグです。

解説

スクリプトはscriptタグの要素として記述する方法(下記サンプル2)と、スクリプトは外部ファイルに記述してそのファイルを読み込む方法(下記サンプル1)の2種類があります。
併用することも可能です。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
メタデータ・コンテンツ
フロー・コンテンツ
フレージング・コンテンツ
コンテキスト
(親カテゴリ)
メタデータ・コンテンツを許可する場所
フレージング・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)

属性

scriptタグには以下の属性が指定できます。

【属性】
属性説明
src外部スクリプトファイルのパスを指定
(例)src="common.js"
typeスクリプトのタイプを指定する
(例)type="text/javascript"
※"text/javascript"が初期値のためJavaScriptの場合は指定不要です。
charset外部スクリプトファイルの文字コードを指定する
(例)charset="utf-8"
※その他例:shift-jis、euc-jp、iso-2002-jp など
async外部スクリプトファイルを非同期で読み込むように指定する
(例)async ※値はありません。
※asyncを指定した場合はsrc属性が必須です。
defer外部スクリプトファイル読込み完了時に実行するように指定する
(例)defer ※値はありません。
※deferを指定した場合はsrc属性が必須です。
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

(サンプル1)外部スクリプトファイル「common.js」を読み込む

<script src="common.js"></script>

(サンプル2)スクリプトをHTML文章中に直接記述する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function test(x){
  alert(x + "ボタンが押されました");
}
</script>
</head>
<body>
  <input type="button" value="ボタン" onclick="test('hoge');">
</body>
</html>

備考

  • scriptタグは通常head要素内に記述しますが、body要素内で記述しても有効です。
  • 古い書き方では、script要素の中をコメントアウト形式「<!-- ~ -->」で記述することもあります。これはscriptに対応していない昔のブラウザ向けの書き方ですが、今現在scriptに対応していないブラウザはほぼ存在しないので、コメントアウト形式にする必要は特にありません。
  • スクリプトに対応していないブラウザでの表示を考慮したい場合は、noscriptタグをご使用ください。

関連項目

  • script:スクリプトを記述する
  • noscript:スクリプトが使用できない環境で有効になる