script
elementsrc
attribute, depends on the value of the
type
attribute, but must match script content
restrictions.src
attribute, the element must be either empty
or contain only script documentation that also
matches script content
restrictions.src
async
defer
type
charset
interface HTMLScriptElement : HTMLElement { attribute DOMString src; attribute boolean async; attribute boolean defer; attribute DOMString type; attribute DOMString charset; attribute DOMString text; };
The script
element allows authors to include dynamic script and data blocks in
their documents. The element does not represent content for the user.
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. Whatever language is used, the contents of the
script
element must conform with the requirements of
that language's specification.
When used to include data blocks (as opposed to scripts), the
data must be embedded inline, the format of the data must be given
using the type
attribute, the src
attribute must not be specified, and the
contents of the script
element must conform to the requirements defined for the format
used.
The type
attribute gives the
language of the script or format of the data. If the attribute is
present, its value must be a valid MIME type. The charset
parameter must not be specified. The default,
which is used if the attribute is absent, is "text/javascript
".
The src
attribute, if specified,
gives the address of the external script resource to use. The value
of the attribute must be a valid
non-empty URL potentially surrounded by spaces identifying a
script resource of the type given by the type
attribute, if the attribute is
present, or of the type "text/javascript
", if
the attribute is absent. A resource is a script resource of a given
type if that type identifies a scripting language and the resource
conforms with the requirements of that language's
specification.
The charset
attribute gives
the character encoding of the external script resource. The
attribute must not be specified if the src
attribute is not present. If the attribute
is set, its value must be a valid character encoding name, must be
an ASCII case-insensitive match for
the preferred MIME name for that
encoding, and must match the encoding given in the charset
parameter of the Content-Type metadata of the external file, if
any. [IANACHARSET]
The async
and defer
attributes are
boolean
attributes that indicate how the script should be executed. The
defer
and async
attributes must not be specified if
the src
attribute is not present.
There are three possible modes that can be selected using these
attributes. If the async
attribute is present, then the script
will be executed asynchronously, as soon as it is available. If the
async
attribute is not present but the
defer
attribute is present, then the script
is executed when the page has finished parsing. If neither
attribute is present, then the script is fetched and executed
immediately, before the user agent continues parsing the page.
The exact processing details for these attributes
are, for mostly historical reasons, somewhat non-trivial, involving
a number of aspects of HTML. The implementation requirements are
therefore by necessity scattered throughout the specification. The
algorithms below (in this section) describe the core of this
processing, but these algorithms reference and are referenced by
the parsing rules for script
start
and end
tags in HTML,
in foreign content, and in
XML, the rules for the
document.write()
method, the handling of scripting,
etc.
The defer
attribute may be specified even if
the async
attribute is specified, to cause
legacy Web browsers that only support defer
(and not async
) to fall back to the defer
behavior instead of the synchronous
blocking behavior that is the default.
Changing the src
, type
, charset
, async
, and defer
attributes dynamically has no direct
effect; these attribute are only used at specific times described
below.
text
[ = value ]Returns the contents of the element, ignoring child nodes that
aren't Text
nodes.
Can be set, to replace the element's children with the given value.
When inserted using the document.write()
method, script
elements execute (typically synchronously), but when inserted using
innerHTML
and outerHTML
attributes, they do not execute at all.
In this example, two script
elements are used. One embeds an external script, and the other
includes some data.
<script src="game-engine.js"></script> <script type="text-x-game-map"> ........U.........e o............A....e .....A.....AAA....e .A..AAA...AAAAA...e </script>
The data in this case might be used by the script to generate the map of a video game. The data doesn't have to be used that way, though; maybe the map data is actually embedded in other parts of the page's markup, and the data block here is just used by the site's search engine to help users who are looking for particular features in their game maps.
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.
<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" onchange="calculate(this)"> <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></output></p> </fieldset> <script> calculate(document.forms.pricecalc); </script> </form>
The following lists some MIME type strings and the languages to which they refer:
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
"script
elementsThe textContent
of a script
element must match the script
production in
the following ABNF, the character set for which is Unicode.
[ABNF]
script = data1 *( escape [ script-start data3 ] "-->" data1 ) [ escape ] escape = "<!--" data2 *( script-start data3 script-end data2 ) data1 = <any string that doesn't contain a substring that matches not-data1> not-data1 = "<!--" data2 = <any string that doesn't contain a substring that matches not-data2> not-data2 = script-start / "-->" data3 = <any string that doesn't contain a substring that matches not-data3> not-data3 = script-end / "-->" script-start = lt s c r i p t tag-end script-end = lt slash s c r i p t tag-end lt = %x003C ; U+003C LESS-THAN SIGN character (<) slash = %x002F ; "/" (U+002F) character s = %x0053 ; U+0053 LATIN CAPITAL LETTER S s =/ %x0073 ; U+0073 LATIN SMALL LETTER S c = %x0043 ; U+0043 LATIN CAPITAL LETTER C c =/ %x0063 ; U+0063 LATIN SMALL LETTER C r = %x0052 ; U+0052 LATIN CAPITAL LETTER R r =/ %x0072 ; U+0072 LATIN SMALL LETTER R i = %x0049 ; U+0049 LATIN CAPITAL LETTER I i =/ %x0069 ; U+0069 LATIN SMALL LETTER I p = %x0050 ; U+0050 LATIN CAPITAL LETTER P p =/ %x0070 ; U+0070 LATIN SMALL LETTER P t = %x0054 ; U+0054 LATIN CAPITAL LETTER T t =/ %x0074 ; U+0074 LATIN SMALL LETTER T tag-end = %x0009 ; "tab" (U+0009) tag-end =/ %x000A ; "LF" (U+000A) tag-end =/ %x000C ; "FF" (U+000C) tag-end =/ %x0020 ; U+0020 SPACE tag-end =/ %x002F ; "/" (U+002F) tag-end =/ %x003E ; U+003E GREATER-THAN SIGN (>)
When a script
element contains script documentation, there are
further restrictions on the contents of the element, as described
in the section below.
If a script
element's src
attribute is specified, then the contents of
the script
element, if any, must be such that the value of the text
IDL attribute, which is derived from the element's contents,
matches the documentation
production in the
following ABNF, the character set for which is Unicode. [ABNF]
documentation = *( *( space / tab / comment ) [ line-comment ] newline ) comment = slash star *( not-star / star not-slash ) 1*star slash line-comment = slash slash *not-newline ; characters tab = %x0009 ; "tab" (U+0009) newline = %x000A ; "LF" (U+000A) space = %x0020 ; U+0020 SPACE star = %x002A ; "*" (U+002A) slash = %x002F ; "/" (U+002F) not-newline = %x0000-0009 / %x000B-10FFFF ; a Unicode character other than "LF" (U+000A) not-star = %x0000-0029 / %x002B-10FFFF ; a Unicode character other than "*" (U+002A) not-slash = %x0000-002E / %x0030-10FFFF ; a Unicode character other than "/" (U+002F)
This corresponds to putting the contents of the element in JavaScript comments.
This requirement is in addition to the earlier
restrictions on the syntax of contents of script
elements.
This allows authors to include documentation, such as license
information or API information, inside their documents while still
referring to external script files. The syntax is constrained so
that authors don't accidentally include what looks like valid
script while also providing a src
attribute.
<script src="cool-effects.js"> // create new instances using: // var e = new Effect(); // start the effect using .play, stop using .stop: // e.play(); // e.stop(); </script>