type属性

script要素のtype属性は、スクリプトのMIMEタイプを指定する属性。

ブラウザ対応

構文

<script type="MIMEタイプ"></script>

MIMEタイプ

script要素で使う主なスクリプトのMIMEタイプ。

  • text/javascript：JavaScript。初期設定値。
  • text/ecmascript
  • application/ecmascript
  • application/javascript
  • text/vbscript

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

<script type="MIMEタイプ">
	スクリプト
</script>

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

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

サンプルコード

script要素内にJavaScriptを記述

<script type="text/javascript">
	window.onload = function(){
		document.getElementById("sample").innerHTML = "id属性が「sample」である要素にテキストを出力。";
	}
</script>
<p id="sample"></p>
type属性を省略

初期設定値は、text/javascriptなので、JavaScriptの場合は、type属性を省略できる。

<script>
	window.onload = function(){
		document.getElementById("sample").innerHTML = "id属性が「sample」である要素にテキストを出力。";
	}
</script>
<p id="sample"></p>

外部のJavaScriptファイルを読み込む

<script type="text/javascript" src="sample.js">
	// コメント文
</script>
type属性を省略

初期設定値は、text/javascriptなので、JavaScriptの場合は、type属性を省略できる。

<script src="sample.js">
	// コメント文
</script>

サンプル

script要素内にJavaScriptを記述

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<title>script要素のサンプル・ドキュメント</title>
	</head>
	<body>
		<script type="text/javascript">
			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 type="text/javascript">
			document.getElementById("sampleB").innerHTML = "id属性が「sampleB」である要素にテキストを出力。";
		</script>
	</body>
</html>
実際の表示

別窓で表示。

外部のJavaScriptファイルを読み込む

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」である要素にテキストを出力。";
}