＜script要素＞ - スクリプト

公開日: 2017/02/09

script要素は、主にJavaScriptを実行するための要素です。要素内にコードを直接埋め込むか、または外部リソースを読み込むことができます。

概要

名前

script

カテゴリー

Metadata content

Flow content

Phrasing content

Script-supporting element

配置できる場所

Metadata contentが期待される場所。

Phrasing contentが期待される場所。

Script-supporting elementが期待される場所。

コンテンツモデル

src属性を持たない場合、type属性の値に従ったスクリプトの内容。

src属性が持つ場合、空、または、type属性の値に従ったスクリプトの内容。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLScriptElement

デフォルトのスタイル

script {
	display: none;
}

仕様書

https://html.spec.whatwg.org/multipage/scripting.html#the-script-element

属性

src

外部リソースを読み込む場合、アドレスを指定する。

type

言語の種類を表すMIMEタイプ。省略時はJavaScript。

nomodule

この属性を付けると、モジュールの実行をブロックする。論理属性。

charset

文字コード。

async

src属性がある場合に、この属性を付けると、非同期の読み込みになる。読み込みはスムーズになるが、後にあるscript要素が先に実行されるかもしれない。論理属性。

defer

src属性がある場合に、この属性を付けると、ドキュメントの解析後まで待ってから実行するようになる。論理属性。

crossorigin

この属性を指定すると、リソースの取得がクロスオリジンモード(CORS)で行なわれる。その上で、クッキーなどの情報(クレデンシャル)を送信するか、しないかをキーワードで指定する。列挙属性で、無効な値を指定した場合は初期値が適用される。

anonymous: 送信しない。初期値。
use-credentials: 送信する。

nonce

CSPで利用する暗号。

integrity

SRIで利用する暗号。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

script要素の使い方は主に2種類です。まずは、直接、コードを要素内に埋め込む方法です。この方法だと、外部リソースの読み込みが発生しない分、ページの表示をほんのわずかに高速化できますが、同じコードを複数のページで利用したい場合には非効率です。

HTML (コードを直接埋め込む)

<script>
	// アラート
	alert( "Hello World!!" ) ;
</script>

もう1つは、外部にファイルを用意しておき、それをsrc属性で読み込む方法です。こちらの場合、複数ページで同じコードを効率よく共有できます。

HTML (外部リソースを読み込む)

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

外部ファイル (script.js)

// アラート
alert( "Hello World!!" ) ;

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜script要素＞ - スクリプト</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/script/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>script要素は、主にJavaScriptを実行するための要素です。</p>

<button type="button">クリック</button>

<script>
// イベント設定
document.querySelector( "button" ).onclick = function () {
	document.body.style.backgroundColor = "#ffeeee" ;

	setTimeout( function () {
		document.body.style.backgroundColor = "#ffffff" ;
	}, 3000 ) ;
}
</script>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/670/"> <meta charset="utf-8"> <title>【デモ】＜script要素＞ - スクリプト</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/script/"> </head> <body>

<p>script要素は、主にJavaScriptを実行するための要素です。</p> <button type="button">クリック</button> <script> // イベント設定 document.querySelector( "button" ).onclick = function () { document.body.style.backgroundColor = "#ffeeee" ; setTimeout( function () { document.body.style.backgroundColor = "#ffffff" ; }, 3000 ) ; } </script>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>