<script></script>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素
利用場所 メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 / スクリプトサポート要素が置ける場所
内容 src属性がある場合:空、またはスクリプトの説明(コメント) / src属性がない場合:スクリプトのコード

script要素は、文書内にスクリプト(主にJavaScript)を埋め込むための要素です。この要素は、head要素内とbody要素内のどちらにも配置することができます。

外部のスクリプトファイルを読み込むか、script要素内にスクリプトを記述して使用します。


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


<script>

ここにスクリプトを記述します

</script>

属性
任意属性
src="" 外部スクリプト URL 読み込むスクリプトファイルを指定
type="" スクリプトのMIMEタイプ text/javascript JavaScriptMIMEタイプを指定 (初期値は text/javascript
crossorigin="" [+]別ドメインにあるリソースの扱い方法 anonymous 認証を利用しない
use-credentials 認証を利用する
nonce="" [5.1]コンテンツセキュリティーポリシーで使用する暗号 文字列 暗号ノンス
任意属性(src を指定している場合に使用可)
charset="" 外部スクリプトの文字エンコーディング エンコーディング名 UTF-8Shift_JISEUC-JP、等
async [+]利用可能な時点で実行 async 値は省略可能、文書の読み込み中にそのスクリプトが利用可能になった時点で実行する
defer 読み込み完了後に実行 defer 値は省略可能、文書の読み込みが完了した時点でそのスクリプトを実行する
仕様から除外(使用することは可能)
language="" スクリプト言語の指定 JavaScript 値はJavaScriptのみ指定が可能、type属性の指定内容と矛盾してはいけない
  • charset属性async属性defer属性は、script要素にsrc属性が指定されている場合にのみ、使用することができます。
  • crossorigin属性は、CORS (Cross-Origin Resource Sharing)の仕組みを利用して、別ドメインのリソースにアクセスする際の扱いを指定するもの、だそうです。値が省略された場合のデフォルト値は anonymous、属性そのものが省略された場合はCORSを利用せずにアクセスします。(詳細未確認
  • nonce属性は、コンテンツセキュリティーポリシー(CSP)で使用する暗号ノンスを設定する際に指定するそうです。(詳細未確認
  • language属性の値には、JavaScript のみが指定可能となっています(大文字と小文字は区別されません)。この属性を指定する場合は、type属性の値が text/javascript である必要があります(type属性は省略も可)。

async属性defer属性の詳細については、下記のページを参考にしてください。

type属性は省略可能(JavaScriptの場合)ですが、指定する場合は次のように記述します。

<script type="text/javascript">

外部スクリプトの読み込み

外部スクリプトを読み込む場合は、src属性の値に外部スクリプトファイルのURLを指定します。具体的には次のような記述になります。

  • 外部スクリプトファイル(JavaScriptファイル)の拡張子は .js になります。
<script src="example.js"></script>

src属性が指定されたscript要素の内容には、コメント(/**/ または //)を入れることができます。このコメント部分には、外部スクリプトに関する説明著作権情報などを記載しておくことができます。

<script src="example.js">
/*
合計金額を計算するJavaScript
作成日:2011年11月11日
*/
// Copyright (C) 2011 TAG index
</script>
  • /**/ は1行または複数行、// は1行のコメントとして扱われます。

script要素内にスクリプトを記述

script要素内にスクリプトを記述する場合は、src属性を指定せずに次のように記述します。

<script>
ここにスクリプトを記述します
</script>
HTML5における変更点
  • async属性とcrossorigin属性が追加されました。
  • スクリプトの言語がJavaScriptの場合、type属性が省略可能になりました。(初期値が text/javascript になったため)
  • language属性が仕様から除外されました。(使用することは可能)
HTML 5.1における変更点
  • nonce属性が追加されました。

使用例

外部スクリプトを読み込む例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<script type="text/javascript" src="example1.js"></script>

</head>
<body>

<script type="text/javascript" src="example2.js"></script>

</body>
</html>

script要素内にスクリプトを記述した例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<script type="text/javascript">

function test(){

	alert('アラートのテスト');

}

</script>

</head>
<body>

<script type="text/javascript">

document.write("サンプルテキスト");

</script>

</body>
</html>

外部スクリプトの文字エンコーディングを指定した例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<script type="text/javascript" src="example.js" charset="UTF-8"></script>

</head>
<body>



</body>
</html>