src属性

script要素のsrc属性は、ドキュメントに埋め込む外部スクリプト・ファイルのURLを指定する属性。

ブラウザ対応

構文

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

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

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

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

要点

  • script要素は、ドキュメントに埋め込む外部スクリプト・ファイルのURLを指定する属性。
  • src属性を指定した場合、script要素内は、空、もしくは、スクリプトのコメント文だけを配置できる。クリプトのコメント文とは、//で始まる文や、/*と*/で括る文のこと。主に、スクリプトに関する説明や著作権情報を記述する。
  • src属性を指定した場合、charset属性、async属性、defer属性を使用できる。

サンプルコード

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

<!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要素を配置

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