script

提供: ASCII.jp HTMLリファレンス

ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 スクリプトの組み込み
読み方 スクリプト

カテゴリー

メタデータ・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ

親にできる要素/カテゴリー

メタデータ・コンテンツが期待される個所、フレージング・コンテンツが期待される場所

子にできる要素/カテゴリー

src属性がなければ、type属性の値に応じて、かつスクリプトの記法に沿った内容
src属性があれば、空またはスクリプトのドキュメント

<script 属性="値">~</script>

属性 概要
src URL 外部スクリプトリソースのアドレス
async 論理値 非同期実行するかどうか
defer 論理値 遅延読み込みするかどうか
type 文字列 外部スクリプトリソースのMIMEタイプ
charset 文字列 外部スクリプトリソースの文字エンコーディング

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 script要素は、文書にダイナミックなスクリプト(JavaScriptなど)を組み込むために使います。スクリプトは、文書に直接に組み込むことも、外部ファイルから組み込むこともできます。

 type属性では、スクリプトのMIMEタイプを指定します。この属性が省略された場合の標準値は「text/javascript」です。

 src属性では、外部ファイルからスクリプトを読み込む際に、そのアドレスを指定します。また、外部のスクリプトを組み込む場合は、charset属性でそのファイルの文字エンコーディングも指定します。src属性を省略した場合は、charset属性を指定してはいけません。

 async属性を指定すると、スクリプトをできるだけ早いタイミングで実行します。一方、defer属性を指定すると、ページの解析が終わった時点でスクリプトを実行します。

 ただし、async属性は、Internet Explorer 8/9や、Opera11.5、まだ古いWebブラウザーではサポートされていません。また、defer属性はOpera 11.5ではサポートされていません。

 async属性とdefer属性の両方を指定した場合、async属性をサポートしないWebブラウザーでは、defer属性の動作になります。

 なお、src属性がない場合は、async・defer属性は指定してはいけません。

サンプル

HTMLファイル部分
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>script要素 - サンプル</title>
</head>
<body>
<p id="msg1">3秒後に表示が変わります。</p>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
test.jsファイル
setTimeout(function() {
    document.getElementById('msg1').innerHTML = 'script属性のサンプルです。';
}, 3000);

サンプル実行画像

 ページにアクセスした時点での表示

 アクセスから3秒後の表示

よくある間違い、勘違い

 defer属性・async属性は、src属性がない場合は指定できません。

 <script type="text/javascript" defer>
  スクリプト
</script>
 <script type="text/javascript" src="○○○.js" defer>
</script>
Powered by Web Professional

目次