script要素

script要素は、JavaScriptなどのクライアント・サイド・スクリプトを、ドキュメントに埋め込む要素。

カテゴリー メタデータ・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ、スクリプトサポート要素。
コンテキスト メタデータ・コンテンツを内包できる要素内で使用できる。
フレージング・コンテンツを内包できる要素内で使用できる。
スクリプトサポート要素を内包できる要素内で使用できる。
コンテンツ・モデル src属性が存在しない場合、type属性に指定した値により異なる。
src属性が存在する場合、空、もしくは、スクリプトのコメント文。
属性 グローバル属性。
src属性、type属性、charset属性、async属性、defer属性、crossorigin属性。
ブラウザ対応

構文

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

<script>
	スクリプト
</script>

外部のスクリプト・ファイルを読み込む

<script src="外部スクリプト・ファイルのURL"></script>

script要素内にコメント文を記述

src属性を指定した場合、script要素内にスクリプトのコメント文を記述できる。 

<script src="外部スクリプト・ファイルのURL">
// コメント文１
/*
	コメント文２
*/
</script>

要点

  • script要素は、JavaScriptなどのクライアント・サイド・スクリプトを、ドキュメントに埋め込む要素である。
  • script要素内にスクリプトを記述することも、外部のスクリプト・ファイルをsrc属性で読み込むこともできる。
  • script要素は、head要素内にも、body要素内にも、どちらにも配置できる。
  • src属性が存在する場合、script要素内は、空、もしくは、スクリプトのコメント文だけを配置できる。コメント文とは、//で始まる文や、/*と*/で括る文のこと。主に、スクリプトに関する説明や著作権情報を記述する。
  • src属性が存在する場合、charset属性、async属性、defer属性を使用できる。
  • 埋め込んだスクリプトが利用できない環境の場合、noscript要素の内容を表示する。

属性

任意属性

属性 説明
src属性 外部のスクリプト・ファイルのURLを指定する属性。
type属性 スクリプトのMIMEタイプを指定する属性。
charset属性 外部のスクリプト・ファイルの文字エンコーディングを指定する属性。
async属性 外部のスクリプト・ファイルのスクリプトが使用可能になったら実行する属性。
defer属性 ページ読み込み時に、外部のスクリプト・ファイルのスクリプトを実行する属性。
crossorigin属性 CORSを設定する属性。

サンプルコード

head要素内に、script要素を配置

script要素内にスクリプトを記述
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<script>
			window.onload = function(){
				document.getElementById("sample").innerHTML = "id属性が「sample」である要素にテキストを出力。";
			}
		</script>
		<title>ドキュメントのタイトル</title>
	</head>
	<body>
		<p id="sample"></p>
	</body>
</html>
外部スクリプト・ファイルを読み込む
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<script src="sample.js">
			// コメント文
		</script>
		<title>ドキュメントのタイトル</title>
	</head>
	<body>
		<p id="sample"></p>
	</body>
</html>

body要素内に、script要素を配置

script要素内にスクリプトを記述
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<title>ドキュメントのタイトル</title>
	</head>
	<body>
		<script>
			window.onload = function(){
				document.getElementById("sample").innerHTML = "id属性が「sample」である要素にテキストを出力。";
			}
		</script>
		<p id="sample"></p>
	</body>
</html>
外部スクリプト・ファイルを読み込む
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<title>ドキュメントのタイトル</title>
	</head>
	<body>
		<script src="sample.js">
			// コメント文
		</script>
		<p id="sample"></p>
	</body>
</html>

サンプル

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

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<script>
			window.onload = function(){
				document.getElementById("sample").innerHTML = "id属性が「sample」である要素にテキストを出力。";
			}
		</script>
		<title>script要素のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>script要素のサンプル</h1>
		<p style="font-size: 24px;">スクリプトで表示： <b id="sample" style="color: #f00;"></b></p>
	</body>
</html>
実際の表示

別窓で表示。

head要素内のscript要素で外部スクリプト・ファイルを読み込む

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<script type="text/javascript" src="sample-script.js">
			// コメント文
			/*
				コメント文
			*/
		</script>
		<title>script要素のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>script要素のサンプル</h1>
		<p style="font-size: 24px;">スクリプトで表示： <b id="sample" style="color: #f00;"></b></p>
	</body>
</html>
実際の表示

別窓で表示。

外部スクリプト・ファイル「sample-script.js」に記述したJavaScriptのソースコード
window.onload = function(){
	document.getElementById("sample").innerHTML = "id属性が「sample」である要素にテキストを出力。";
}

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

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<title>script要素のサンプル・ドキュメント</title>
	</head>
	<body>
		<script>
			window.onload = function(){
				document.getElementById("sampleA").innerHTML = "id属性が「sampleA」である要素にテキストを出力。";
			}
		</script>
		<h1>script要素のサンプル</h1>
		<p style="font-size: 24px;">sampleA： <b id="sampleA" style="color: #f00;"></b></p>
		<p style="font-size: 24px;">sampleB： <b id="sampleB" style="color: #f00;"></b></p>
		<script>
			document.getElementById("sampleB").innerHTML = "id属性が「sampleB」である要素にテキストを出力。";
		</script>
	</body>
</html>
実際の表示

別窓で表示。

body要素内のscript要素で外部スクリプト・ファイルを読み込む

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<title>script要素のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>script要素のサンプル</h1>
		<script type="text/javascript" src="sample-script.js">
			// コメント文
			/*
				コメント文
			*/
		</script>
		<p style="font-size: 24px;">スクリプトで表示： <b id="sample" style="color: #f00;"></b></p>
	</body>
</html>
実際の表示

別窓で表示。

外部スクリプト・ファイル「sample-script.js」に記述したJavaScriptのソースコード
window.onload = function(){
	document.getElementById("sample").innerHTML = "id属性が「sample」である要素にテキストを出力。";
}