HTML/Elements/script

From Web Education Community Group
< HTML‎ | Elements
Jump to: navigation, search

<script>

The <script> element allows authors to include dynamic script and data blocks in their documents.

Point

  • When used to include dynamic scripts, the scripts may either be embedded inline or may be imported from an external file using the src attribute.
  • If the language is not that described by "text/javascript", then the type attribute must be present, as described below.


HTML Attributes

  • src = URL potentially surrounded by spaces
    Gives the address of the external script resource to use.


  • async = boolean
    Specifies that the script should be executed asynchronously, as soon as it becomes available.


  • defer = boolean
    Specifies that script should be executed after the document has been parsed.


  • type = MIME type
    Gives the language of the script or format of the data:
    • 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
    • ... User agents may support other MIME types and other languages.


  • charset = character encoding name
    Gives the character encoding of the external script resource.
    The attribute must not be specified if the src attribute is not present.


See global attributes.


Example

Example A

The following sample shows how a script element can be used to define a function that is then used by other parts of the document. 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>

Script01.png

HTML Reference

The HTML5 specification defines the <script> element in 4.3.1 The script element.