HTML/jp/Elements/script

From W3C Wiki

<script>

<script>要素はWeb制作者がドキュメントに動的なスクリプトはデータブロックを含められるようにします。

ポイント

  • 動的なスクリプトを含めるために使用する場合、スクリプトは、インラインで埋め込むか、src属性を使用して外部ファイルからインポートすることができます。
  • スクリプト言語が"text/javascript"でない場合、以下に示すとおりtype属性を指定しなければなりません。


コンテンツ属性

  • src = URL
    使用する外部スクリプトファイルのアドレスを示します。


  • async = 論理属性
    スクリプトが利用可能になるとすぐに、非同期で実行するようにします。


  • defer = 論理属性
    ページの読み込みが完了した後にスクリプトが実行されるようにします。


  • type = MIMEタイプ
    スクリプトの言語またはデータのフォーマットを与えます。MIMEタイプの種類には以下のようなものがあります。
    • application/ecmascript
    • application/javascript
    • application/x-ecmascript
    • application/x-javascript
    • text/ecmascript
    • text/javascript
    • text/javascript1.0
    • text/javascript1.1
    • text/javascript1.2
    • text/javascript1.3
    • text/javascript1.4
    • text/javascript1.5
    • text/jscript
    • text/livescript
    • text/x-ecmascript
    • text/x-javascript
    • text/javascript;e4x=1
    • ... ユーザーエージェントは、他のMIMEタイプもサポートしているかもしれません。


  • charset = 文字エンコーディング
    外部スクリプトファイルの文字エンコーディングを示します。
    この属性は、src属性がない場合は指定してはいけません。


グローバル属性も参照してください。


例題

例題 A

以下の例は、<script>要素が、ドキュメントの他の場所で使われる関数をどのように定義することができるかを示しています。 It also shows how a script element can be used to invoke script while the document is being parsed, in this case to initialize the form's output. [try it]:

<script>
  function calculate(form) {
    var price = 52000;
    if (form.elements.brakes.checked)
      price += 1000;
    if (form.elements.radio.checked)
      price += 2500;
    if (form.elements.turbo.checked)
      price += 5000;
    if (form.elements.sticker.checked)
      price += 250;
    form.elements.result.value = price;
  }
</script>
<form name="pricecalc" onsubmit="return false">
  <fieldset>
    <legend>Work out the price of your car</legend>
    <p>Base cost: £52000.</p>
    <p>Select additional options:</p>
    <ul>
      <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
      <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
      <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
      <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
    </ul>
    <p>Total: £<output name=result onformchange="calculate(form)"></output></p>
  </fieldset>
  <script>
    document.forms.pricecalc.dispatchFormChange();
  </script>
</form>

HTML仕様書

<script>要素は、HTML5仕様書の4.3.1 The script elementに定義されています。