<script></script>
| ブラウザ |
|
|---|---|
| 分類 | メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素 |
| 利用場所 | メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 / スクリプトサポート要素が置ける場所 |
| 内容 | src属性がある場合：空、またはスクリプトの説明（コメント） / src属性がない場合：スクリプトのコード |
script要素は、文書内にスクリプト（主にJavaScript）を埋め込むための要素です。この要素は、head要素内とbody要素内のどちらにも配置することができます。
外部のスクリプトファイルを読み込むか、script要素内にスクリプトを記述して使用します。
<script src="example.js"></script>
<script>
ここにスクリプトを記述します
</script>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
src="" |
外部スクリプト | URL | 読み込むスクリプトファイルを指定 |
type="" |
スクリプトのMIMEタイプ | text/javascript |
JavaScriptのMIMEタイプを指定 （初期値は text/javascript） |
crossorigin="" |
 別ドメインにあるリソースの扱い方法 |
anonymous |
認証を利用しない |
use-credentials |
認証を利用する | ||
nonce="" |
 コンテンツセキュリティーポリシーで使用する暗号 |
文字列 | 暗号ノンス |
任意属性（src を指定している場合に使用可） |
|||
charset="" |
外部スクリプトの文字エンコーディング | エンコーディング名 | UTF-8、Shift_JIS、EUC-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 src="example1.js"></script>
</head>
<body>
<script src="example2.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
<script>
function test(){
alert('アラートのテスト');
}
</script>
</head>
<body>
<script>
document.write("サンプルテキスト");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
<script src="example.js" charset="UTF-8"></script>
</head>
<body>
</body>
</html>