script 要素クライアントサイドスクリプトのコードを埋め込む

script 要素はクライアントサイドスクリプトのコードを埋め込み、実行します。外部ファイルとして用意した JavaScript を src 属性で読み込んで実行できるほか、script 要素内に直接ソースコードを記述することもできます。

さらに詳細な説明を見る

サンプルソースを見る

script 要素の仕様

カテゴリ
コンテンツモデル
  • src 属性が指定されていない場合、type 属性の値と一致するスクリプト
  • src 属性が指定されている場合は空、もしくは JavaScript におけるコメントテキスト
この要素を使用できる文脈
  • メタデータ・コンテンツが期待される場所
  • フレージング・コンテンツが期待される場所
この要素で使用できる属性
DOM インタフェース
interface HTMLScriptElement : HTMLElement {
           attribute DOMString src;
           attribute boolean async;
           attribute boolean defer;
           attribute DOMString type;
           attribute DOMString charset;
           attribute DOMString text;
};

詳細説明

script 要素に指定可能な属性は下記の通りです。

属性 概要
src 属性 外部スクリプトの URI を指定します。
type 属性 スクリプトの MIME タイプを指定します。省略された場合の初期値は text/javascript です。
async 属性 async 属性は論理属性です。src 属性が指定されている場合のみ指定可能です。文書を読み込み時、この属性が指定されたスクリプトが実行可能になった時点で実行します。
defer 属性 defer 属性は論理属性です。src 属性が指定されている場合のみ指定可能です。文書の読み込みが完了した時点で、この属性が指定されたスクリプトを実行します。
charset 属性 src 属性が指定されている場合のみ指定可能です。読み込まれるスクリプトの文字コードを指定します。
crossorigin 属性 crossorigin 属性は CORS (Cross-Origin Resource Sharing / クロスドメイン通信) 設定属性です。サードパーティ (元の文書とは異なるオリジン) から読み込んだ画像などのリソースを利用する際のルールを指定します。
nonce 属性 CSP(Content Security Policy)によって、文書内に読み込まれた script 要素や、style 要素の内容を実行するかを決定するために利用される nonce(number used once / ワンタイムトークン) を指定します。

async 属性と defer 属性

async 属性と defer 属性は同時に指定することも可能です。併記された場合、async 属性に対応する環境では async 属性が有効になり、async 属性に対応しない環境では defer 属性がフォールバックとなります。

script 要素のサンプルソース

<script>
 window.onload = function() {
  var canvas = document.getElementById('canvas');
  if ( ! canvas || ! canvas.getContext ) {
   return false;
  }
  var ct = canvas.getContext('2d');
  ct.strokeStyle = '#009900';
  ct.strokeRect(50, 50, 200, 200);
 }
</script>
<script src="/js/script.js" charset="utf-8"></script>
<script src="/js/jquery.js">/* jQuery の読み込み */</script>

関連する要素

W3C HTML5 仕様書

4.3.1 The script element