Annotation of html5/spec/scripting-1.html, revision 1.2

1.1       mike        1: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
                      2: <!DOCTYPE html>
                      3: <!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.3 Scripting &#8212; HTML5 </title><style type="text/css">
                      4:    pre { margin-left: 2em; white-space: pre-wrap; }
                      5:    h2 { margin: 3em 0 1em 0; }
                      6:    h3 { margin: 2.5em 0 1em 0; }
                      7:    h4 { margin: 2.5em 0 0.75em 0; }
                      8:    h5, h6 { margin: 2.5em 0 1em; }
                      9:    h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
                     10:    h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
                     11:    p { margin: 1em 0; }
                     12:    hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
                     13:    dl, dd { margin-top: 0; margin-bottom: 0; }
                     14:    dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
                     15:    dt + dt { margin-top: 0; }
                     16:    dd dt { margin-top: 0.25em; margin-bottom: 0; }
                     17:    dd p { margin-top: 0; }
                     18:    dd dl + p { margin-top: 1em; }
                     19:    dd table + p { margin-top: 1em; }
                     20:    p + * > li, dd li { margin: 1em 0; }
                     21:    dt, dfn { font-weight: bold; font-style: normal; }
                     22:    dt dfn { font-style: italic; }
                     23:    pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
                     24:    pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
                     25:    pre em { font-weight: bolder; font-style: normal; }
                     26:    @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
                     27:    var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
                     28:    table { border-collapse: collapse; border-style: hidden hidden none hidden; }
                     29:    table thead, table tbody { border-bottom: solid; }
                     30:    table tbody th:first-child { border-left: solid; }
                     31:    table tbody th { text-align: left; }
                     32:    table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
                     33:    blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
                     34: 
                     35:    .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
                     36:    .matrix, .matrix td { border: none; text-align: right; }
                     37:    .matrix { margin-left: 2em; }
                     38:    .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
                     39:    .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
                     40:    .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
                     41: 
                     42:    .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
                     43:    img.extra { float: right; }
                     44:    pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
                     45:    pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
                     46:    pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
                     47:    pre.css:first-line { color: #AAAA50; }
                     48:    dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
                     49:    hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
                     50:    dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
                     51:    dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
                     52:    dl.domintro dd p { margin: 0.5em 0; }
                     53:    dl.switch { padding-left: 2em; }
                     54:    dl.switch > dt { text-indent: -1.5em; }
                     55:    dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
                     56:    dl.triple { padding: 0 0 0 1em; }
                     57:    dl.triple dt, dl.triple dd { margin: 0; display: inline }
                     58:    dl.triple dt:after { content: ':'; }
                     59:    dl.triple dd:after { content: '\A'; white-space: pre; }
                     60:    .diff-old { text-decoration: line-through; color: silver; background: transparent; }
                     61:    .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
                     62:    a .diff-new { border-bottom: 1px blue solid; }
                     63: 
                     64:    h2 { page-break-before: always; }
                     65:    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
                     66:    h1 + h2, hr + h2.no-toc { page-break-before: auto; }
                     67: 
                     68:    p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
                     69: 
                     70:    div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
                     71:    div.head p { margin: 0; }
                     72:    div.head h1 { margin: 0; }
                     73:    div.head .logo { float: right; margin: 0 1em; }
                     74:    div.head .logo img { border: none } /* remove border from top image */
                     75:    div.head dl { margin: 1em 0; }
                     76:    div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
                     77: 
                     78:    body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
                     79:    body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
                     80:    body > .toc > li > * { margin-bottom: 0.5em; }
                     81:    body > .toc > li > * > li > * { margin-bottom: 0.25em; }
                     82:    .toc, .toc li { list-style: none; }
                     83: 
                     84:    .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
                     85:    .brief li { margin: 0; padding: 0; }
                     86:    .brief li p { margin: 0; padding: 0; }
                     87: 
                     88:    .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
                     89:    .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
                     90:    .category-list li { display: inline; }
                     91:    .category-list li:not(:last-child)::after { content: ', '; }
                     92:    .category-list li > span, .category-list li > a { text-transform: lowercase; }
                     93:    .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
                     94: 
                     95:    .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
                     96:    .XXX > :first-child { margin-top: 0; }
                     97:    p .XXX { line-height: 3em; }
                     98:    .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
                     99:    .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
                    100:    .annotation :link, .annotation :visited { color: inherit; }
                    101:    .annotation :link:hover, .annotation :visited:hover { background: transparent; }
                    102:    .annotation span { border: none ! important; }
                    103:    .note { color: green; background: transparent; font-family: sans-serif; }
                    104:    .warning { color: red; background: transparent; }
                    105:    .note, .warning { font-weight: bolder; font-style: italic; }
                    106:    p.note, div.note { padding: 0.5em 2em; }
                    107:    span.note { padding: 0 2em; }
                    108:    .note p:first-child, .warning p:first-child { margin-top: 0; }
                    109:    .note p:last-child, .warning p:last-child { margin-bottom: 0; }
                    110:    .warning:before { font-style: normal; }
                    111:    p.note:before { content: 'Note: '; }
                    112:    p.warning:before { content: '\26A0 Warning! '; }
                    113: 
                    114:    .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
                    115:    .bookkeeping { font-size: 0.8em; margin: 2em 0; }
                    116:    .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
                    117: 
                    118:    h4 { position: relative; z-index: 3; }
                    119:    h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
                    120:    .element {
                    121:      background: #EEEEFF;
                    122:      color: black;
                    123:      margin: 0 0 1em 0.15em;
                    124:      padding: 0 1em 0.25em 0.75em;
                    125:      border-left: solid #9999FF 0.25em;
                    126:      position: relative;
                    127:      z-index: 1;
                    128:    }
                    129:    .element:before {
                    130:      position: absolute;
                    131:      z-index: 2;
                    132:      top: 0;
                    133:      left: -1.15em;
                    134:      height: 2em;
                    135:      width: 0.9em;
                    136:      background: #EEEEFF;
                    137:      content: ' ';
                    138:      border-style: none none solid solid;
                    139:      border-color: #9999FF;
                    140:      border-width: 0.25em;
                    141:    }
                    142: 
                    143:    .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
                    144:    td > .example:only-child { margin: 0 0 0 0.1em; }
                    145: 
                    146:    ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
                    147:    ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
                    148:    ul.domTree li li { list-style: none; }
                    149:    ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
                    150:    ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
                    151:    ul.domTree span { font-style: italic; font-family: serif; }
                    152:    ul.domTree .t1 code { color: purple; font-weight: bold; }
                    153:    ul.domTree .t2 { font-style: normal; font-family: monospace; }
                    154:    ul.domTree .t2 .name { color: black; font-weight: bold; }
                    155:    ul.domTree .t2 .value { color: blue; font-weight: normal; }
                    156:    ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
                    157:    ul.domTree .t7 code, .domTree .t8 code { color: green; }
                    158:    ul.domTree .t10 code { color: teal; }
                    159: 
                    160:    body.dfnEnabled dfn { cursor: pointer; }
                    161:    .dfnPanel {
                    162:      display: inline;
                    163:      position: absolute;
                    164:      z-index: 10;
                    165:      height: auto;
                    166:      width: auto;
                    167:      padding: 0.5em 0.75em;
                    168:      font: small sans-serif, Droid Sans Fallback;
                    169:      background: #DDDDDD;
                    170:      color: black;
                    171:      border: outset 0.2em;
                    172:    }
                    173:    .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
                    174:    .dfnPanel :link, .dfnPanel :visited { color: black; }
                    175:    .dfnPanel p { font-weight: bolder; }
                    176:    .dfnPanel * + p { margin-top: 0.25em; }
                    177:    .dfnPanel li { list-style-position: inside; }
                    178: 
                    179:    #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
                    180:    #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
                    181:    #configUI p label { display: block; }
                    182:    #configUI #updateUI, #configUI .loginUI { text-align: center; }
                    183:    #configUI input[type=button] { display: block; margin: auto; }
                    184:   </style><style type="text/css">
                    185: 
                    186:    .applies thead th > * { display: block; }
                    187:    .applies thead code { display: block; }
                    188:    .applies tbody th { whitespace: nowrap; }
                    189:    .applies td { text-align: center; }
                    190:    .applies .yes { background: yellow; }
                    191: 
                    192:    .matrix, .matrix td { border: none; text-align: right; }
                    193:    .matrix { margin-left: 2em; }
                    194: 
                    195:    .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
                    196:    .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
                    197:    .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
                    198: 
                    199:    #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
                    200:    #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
                    201:    #table-example-1 caption { padding-bottom: 0.5em; }
                    202:    #table-example-1 thead, #table-example-1 tbody { border: none; }
                    203:    #table-example-1 th, #table-example-1 td { border: solid thin; }
                    204:    #table-example-1 th { font-weight: normal; }
                    205:    #table-example-1 td { border-style: none solid; vertical-align: top; }
                    206:    #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
                    207:    #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
                    208:    #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
                    209:    #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
                    210:    #table-example-1 tbody td:first-child::after { content: leader(". "); }
                    211:    #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
                    212:    #table-example-1 tbody td:first-child + td { width: 10em; }
                    213:    #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
                    214:    #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
                    215: 
                    216:    .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
                    217:    .apple-table-examples * { font-family: "Times", serif; }
                    218:    .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
                    219:    .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
                    220:    .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
                    221:    .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
                    222:    .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
                    223:    .apple-table-examples td { text-align: right; vertical-align: top; }
                    224:    .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
                    225:    .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
                    226:    .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
                    227:    .apple-table-examples sup { line-height: 0; }
                    228: 
                    229:    .details-example img { vertical-align: top; }
                    230: 
                    231:    #named-character-references-table {
                    232:      font-size: 0.6em;
                    233:      column-width: 28em;
                    234:      column-gap: 1em;
                    235:      -moz-column-width: 28em;
                    236:      -moz-column-gap: 1em;
                    237:      -webkit-column-width: 28em;
                    238:      -webkit-column-gap: 1em;
                    239:    }
                    240:    #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
                    241:    #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
                    242: 
1.2     ! mike      243:    .glyph.control { color: red; }
        !           244: 
1.1       mike      245:   </style><style type="text/css">
                    246:    .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
                    247:   </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script type="text/javascript">
                    248:    function getCookie(name) {
                    249:      var params = location.search.substr(1).split("&");
                    250:      for (var index = 0; index < params.length; index++) {
                    251:        if (params[index] == name)
                    252:          return "1";
                    253:        var data = params[index].split("=");
                    254:        if (data[0] == name)
                    255:          return unescape(data[1]);
                    256:      }
                    257:      var cookies = document.cookie.split("; ");
                    258:      for (var index = 0; index < cookies.length; index++) {
                    259:        var data = cookies[index].split("=");
                    260:        if (data[0] == name)
                    261:          return unescape(data[1]);
                    262:      }
                    263:      return null;
                    264:    }
                    265:    function load(script) {
                    266:      var e = document.createElement('script');
                    267:      e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
                    268:      document.body.appendChild(e);
                    269:    }
                    270:    function init() {
                    271:      if (location.search == '?slow-browser')
                    272:        return;
                    273:      var configUI = document.createElement('div');
                    274:      configUI.id = 'configUI';
                    275:      document.body.appendChild(configUI);
                    276:      // load('reviewer.js'); // would need cross-site XHR
                    277:      if (document.getElementById('head'))
                    278:        load('toc.js');
                    279:      load('styler.js');
                    280:      // load('updater.js'); // would need cross-site XHR
                    281:      load('dfn.js'); // doesn't support split-out specs, but, oh well.
                    282:      // load('status.js'); // would need cross-site XHR
                    283:      if (getCookie('profile') == '1')
                    284:        document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
                    285:      fixBrokenLink();
                    286:    }
                    287:   </script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css">
                    288:   <script src="link-fixup.js"></script>
                    289:   <link href="semantics.html" title="4 The elements of HTML" rel="prev">
                    290:   <link href="spec.html#contents" title="Table of contents" rel="index">
                    291:   <link href="sections.html" title="4.4 Sections" rel="next">
                    292:   </head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
                    293:    <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
                    294:    <h1>HTML5</h1>
                    295:    </div><div>
                    296:    <a href="semantics.html">&#8592; 4 The elements of HTML</a> &#8211;
                    297:    <a href="spec.html#contents">Table of contents</a> &#8211;
                    298:    <a href="sections.html">4.4 Sections &#8594;</a>
                    299:   <ol class="toc"><li><ol><li><a href="scripting-1.html#scripting-1"><span class="secno">4.3 </span>Scripting</a>
                    300:     <ol><li><a href="scripting-1.html#script"><span class="secno">4.3.1 </span>The <code>script</code> element</a>
                    301:       <ol><li><a href="scripting-1.html#scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</a></li><li><a href="scripting-1.html#restrictions-for-contents-of-script-elements"><span class="secno">4.3.1.2 </span>Restrictions for contents of <code>script</code> elements</a></li><li><a href="scripting-1.html#inline-documentation-for-external-scripts"><span class="secno">4.3.1.3 </span>Inline documentation for external scripts</a></li></ol></li><li><a href="scripting-1.html#the-noscript-element"><span class="secno">4.3.2 </span>The <code>noscript</code> element</a></li></ol></li></ol></li></ol></div>
                    302: 
                    303:   <h3 id="scripting-1"><span class="secno">4.3 </span>Scripting</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Scripts allow authors to add interactivity to their documents.</p><p>Authors are encouraged to use declarative alternatives to
                    304:   scripting where possible, as declarative mechanisms are often more
                    305:   maintainable, and many users disable scripting.</p><div class="example">
                    306:    <p>For example, instead of using script to show or hide a section
                    307:    to show more details, the <code><a href="interactive-elements.html#the-details-element">details</a></code> element could be
                    308:    used.</p>
                    309:   </div><p>Authors are also encouraged to make their applications degrade
                    310:   gracefully in the absence of scripting support.</p><div class="example">
                    311:    <p>For example, if an author provides a link in a table header to
                    312:    dynamically resort the table, the link could also be made to
                    313:    function without scripts by requesting the sorted table from the
                    314:    server.</p>
                    315:   </div><h4 id="script"><span class="secno">4.3.1 </span>The <dfn><code>script</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
                    316:    <dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
                    317:    <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
                    318:    <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
                    319:    <dt>Contexts in which this element may be used:</dt>
                    320:    <dd>Where <a href="content-models.html#metadata-content">metadata content</a> is expected.</dd>
                    321:    <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
                    322:    <dt>Content model:</dt>
                    323:    <dd>If there is no <code title="attr-script-src"><a href="#attr-script-src">src</a></code>
                    324:    attribute, depends on the value of the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, but must match
                    325:    <a href="#restrictions-for-contents-of-script-elements">script content restrictions</a>.</dd>
                    326:    <dd>If there <em>is</em> a <code title="attr-script-src"><a href="#attr-script-src">src</a></code>
                    327:    attribute, the element must be either empty or contain only
                    328:    <a href="#inline-documentation-for-external-scripts">script documentation</a> that also matches <a href="#restrictions-for-contents-of-script-elements">script
                    329:    content restrictions</a>.</dd>
                    330:    <dt>Content attributes:</dt>
                    331:    <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
                    332:    <dd><code title="attr-script-src"><a href="#attr-script-src">src</a></code></dd>
                    333:    <dd><code title="attr-script-async"><a href="#attr-script-async">async</a></code></dd>
                    334:    <dd><code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code></dd>
                    335:    <dd><code title="attr-script-type"><a href="#attr-script-type">type</a></code></dd>
                    336:    <dd><code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code></dd>
                    337:    <dt>DOM interface:</dt>
                    338:    <dd>
                    339: <pre class="idl">interface <dfn id="htmlscriptelement">HTMLScriptElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
                    340:            attribute DOMString <a href="#dom-script-src" title="dom-script-src">src</a>;
                    341:            attribute boolean <a href="#dom-script-async" title="dom-script-async">async</a>;
                    342:            attribute boolean <a href="#dom-script-defer" title="dom-script-defer">defer</a>;
                    343:            attribute DOMString <a href="#dom-script-type" title="dom-script-type">type</a>;
                    344:            attribute DOMString <a href="#dom-script-charset" title="dom-script-charset">charset</a>;
                    345:            attribute DOMString <a href="#dom-script-text" title="dom-script-text">text</a>;
                    346: };</pre>
                    347:    </dd>
                    348:   </dl><p>The <code><a href="#script">script</a></code> element allows authors to include dynamic
                    349:   script and data blocks in their documents. The element does not
                    350:   <a href="rendering.html#represents" title="represents">represent</a> content for the user.</p><p>When used to include dynamic scripts, the scripts may either be
                    351:   embedded inline or may be imported from an external file using the
                    352:   <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute. If the language
                    353:   is not that described by "<code title="">text/javascript</code>",
                    354:   then the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute must
                    355:   be present, as described below.</p><p>When used to include data blocks (as opposed to scripts), the
                    356:   data must be embedded inline, the format of the data must be given
                    357:   using the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, and
                    358:   the <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute must not be
                    359:   specified.</p><p>The <dfn id="attr-script-type" title="attr-script-type"><code>type</code></dfn>
                    360:   attribute gives the language of the script or format of the data. If
                    361:   the attribute is present, its value must be a <a href="infrastructure.html#valid-mime-type">valid MIME
                    362:   type</a>. The <code title="">charset</code> parameter must not be
                    363:   specified. The default, which is used if the attribute is absent,
                    364:   is "<code title="">text/javascript</code>".</p><p>The <dfn id="attr-script-src" title="attr-script-src"><code>src</code></dfn>
                    365:   attribute, if specified, gives the address of the external script
                    366:   resource to use. The value of the attribute must be a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid
                    367:   non-empty URL potentially surrounded by spaces</a> identifying a
                    368:   script resource of the type given by the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, if the attribute is
                    369:   present, or of the type "<code title="">text/javascript</code>", if
                    370:   the attribute is absent. A resource is a script resource of a given
                    371:   type if that type identifies a scripting language and the resource
                    372:   conforms with the requirements of that language's specification.</p><p>The <dfn id="attr-script-charset" title="attr-script-charset"><code>charset</code></dfn>
                    373:   attribute gives the character encoding of the external script
                    374:   resource. The attribute must not be specified if the <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute is not present. If the
                    375:   attribute is set, its value must be a valid character encoding name,
                    376:   must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the
                    377:   <a href="infrastructure.html#preferred-mime-name">preferred MIME name</a> for that encoding, and must match
                    378:   the encoding given in the <code title="">charset</code> parameter of
                    379:   the <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a> of the
                    380:   external file, if any. <a href="references.html#refsIANACHARSET">[IANACHARSET]</a></p><p>The <dfn id="attr-script-async" title="attr-script-async"><code>async</code></dfn> and
                    381:   <dfn id="attr-script-defer" title="attr-script-defer"><code>defer</code></dfn> attributes
                    382:   are <a href="common-microsyntaxes.html#boolean-attribute" title="boolean attribute">boolean attributes</a> that
                    383:   indicate how the script should be executed. The <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> and <code title="attr-script-async"><a href="#attr-script-async">async</a></code> attributes must not be
                    384:   specified if the <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute
                    385:   is not present.</p><p>There are three possible modes that can be selected using these
                    386:   attributes. If the <code title="attr-script-async"><a href="#attr-script-async">async</a></code>
                    387:   attribute is present, then the script will be executed
                    388:   asynchronously, as soon as it is available. If the <code title="attr-script-async"><a href="#attr-script-async">async</a></code> attribute is not present but
                    389:   the <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attribute is
                    390:   present, then the script is executed when the page has finished
                    391:   parsing. If neither attribute is present, then the script is
                    392:   fetched and executed immediately, before the user agent continues
                    393:   parsing the page.</p><p class="note">The exact processing details for these attributes
                    394:   are, for mostly historical reasons, somewhat non-trivial, involving
                    395:   a number of aspects of HTML. The implementation requirements are
                    396:   therefore by necessity scattered throughout the specification. The
                    397:   algorithms below (in this section) describe the core of this
                    398:   processing, but these algorithms reference and are referenced by the
                    399:   parsing rules for <code><a href="#script">script</a></code> <a href="tokenization.html#scriptTag">start</a>
                    400:   and <a href="tokenization.html#scriptEndTag">end</a> tags in HTML, <a href="tokenization.html#scriptForeignEndTag">in foreign content</a>, and <a href="the-xhtml-syntax.html#scriptTagXML">in XML</a>, the rules for the <code title="dom-document-write"><a href="apis-in-html-documents.html#dom-document-write">document.write()</a></code> method, the
                    401:   handling of <a href="webappapis.html#scripting">scripting</a>, etc.</p><p>The <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attribute may be
                    402:   specified even if the <code title="attr-script-async"><a href="#attr-script-async">async</a></code>
                    403:   attribute is specified, to cause legacy Web browsers that only
                    404:   support <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> (and not <code title="attr-script-async"><a href="#attr-script-async">async</a></code>) to fall back to the <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> behavior instead of the
                    405:   synchronous blocking behavior that is the default.</p><p>Changing the <code title="attr-script-src"><a href="#attr-script-src">src</a></code>, <code title="attr-script-type"><a href="#attr-script-type">type</a></code>, <code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code>, <code title="attr-script-async"><a href="#attr-script-async">async</a></code>, and <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attributes dynamically has no
                    406:   direct effect; these attribute are only used at specific times
                    407:   described below.</p><!-- by implication, changes to the base URL
                    408:   also have no effect --><div class="impl">
                    409: 
                    410:   <p>A <code><a href="#script">script</a></code> element has several associated pieces of
                    411:   state.</p>
                    412: 
                    413:   <p>The first is a flag indicating whether or not the script block
                    414:   has been <dfn id="already-started">"already started"</dfn>. Initially,
                    415:   <code><a href="#script">script</a></code> elements must have this flag unset (script
                    416:   blocks, when created, are not "already started"). When a
                    417:   <code><a href="#script">script</a></code> element is cloned, the "already started" flag,
                    418:   if set, must be propagated to the clone when it is created.</p>
                    419: 
                    420:   <p>The second is a flag indicating whether the element was
                    421:   <dfn id="parser-inserted">"parser-inserted"</dfn>. Initially, <code><a href="#script">script</a></code>
                    422:   elements must have this flag unset. It is set by the <a href="parsing.html#html-parser">HTML
                    423:   parser</a> and the <a href="the-xhtml-syntax.html#xml-parser">XML parser</a> on <code><a href="#script">script</a></code>
                    424:   elements they insert and affects the processing of those
                    425:   elements.</p>
                    426: 
                    427:   <p>The third is a flag indicating whether or not the script block is
                    428:   <dfn id="ready-to-be-parser-executed">"ready to be parser-executed"</dfn>. Initially,
                    429:   <code><a href="#script">script</a></code> elements must have this flag unset (script
                    430:   blocks, when created, are not "ready to be parser-executed"). This
                    431:   flag is used only for elements that are also
                    432:   <a href="#parser-inserted">"parser-inserted"</a>, to let the parser know when to
                    433:   execute the script.</p>
                    434: 
                    435:   <p>The fourth and fifth pieces of state are <dfn id="the-script-block-s-type"><var>the script
                    436:   block's type</var></dfn> and <dfn id="the-script-block-s-character-encoding"><var>the script block's character
                    437:   encoding</var></dfn>. They are determined when the script is run,
                    438:   based on the attributes on the element at that time.</p>
                    439: 
                    440:   <p>When a <code><a href="#script">script</a></code> element that is neither marked as
                    441:   having <a href="#already-started">"already started"</a> nor marked as being
                    442:   <a href="#parser-inserted">"parser-inserted"</a> experiences one of the events listed
                    443:   in the following list, the user agent must synchronously <a href="#running-a-script" title="running a script">run</a> the <code><a href="#script">script</a></code>
                    444:   element:</p>
                    445: 
                    446:   <ul><li>The <code><a href="#script">script</a></code> element gets <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an
                    447:    element into a document">inserted into a document</a>.</li>
                    448: 
                    449:    <li>The <code><a href="#script">script</a></code> element is <a href="infrastructure.html#in-a-document">in a
                    450:    <code>Document</code></a> and its child nodes are changed.</li>
                    451: 
                    452:    <li>The <code><a href="#script">script</a></code> element is <a href="infrastructure.html#in-a-document">in a
                    453:    <code>Document</code></a> and has a <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute set where previously
                    454:    the element had no such attribute.</li>
                    455: 
                    456:   </ul><p><dfn id="running-a-script" title="running a script">Running a script</dfn>: When a
                    457:   <code><a href="#script">script</a></code> element is to be run, the user agent must act as
                    458:   follows:</p>
                    459: 
                    460:   <ol><li id="script-processing-prepare">
                    461: 
                    462:     <p>If either:</p>
                    463: 
                    464:     <ul class="brief"><li>the <code><a href="#script">script</a></code> element has a <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute and its value is
                    465:      the empty string, or</li>
                    466: 
                    467:      <li>the <code><a href="#script">script</a></code> element has no <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute but it has a <code title="attr-script-language"><a href="obsolete.html#attr-script-language">language</a></code> attribute and
                    468:      <em>that</em> attribute's value is the empty string, or</li>
                    469: 
                    470:      <li>the <code><a href="#script">script</a></code> element has neither a <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute nor a <code title="attr-script-language"><a href="obsolete.html#attr-script-language">language</a></code> attribute, then</li>
                    471: 
                    472:     </ul><p>...let <var><a href="#the-script-block-s-type">the script block's type</a></var> for this
                    473:     <code><a href="#script">script</a></code> element be "<code title="">text/javascript</code>".</p>
                    474: 
                    475:     <p>Otherwise, if the <code><a href="#script">script</a></code> element has a <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, let <var><a href="#the-script-block-s-type">the
                    476:     script block's type</a></var> for this <code><a href="#script">script</a></code> element be
                    477:     the value of that attribute with any leading or trailing sequences
                    478:     of <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>
                    479:     removed.</p>
                    480: 
                    481:     <p>Otherwise, the element has a non-empty <code title="attr-script-language"><a href="obsolete.html#attr-script-language">language</a></code> attribute; let
                    482:     <var><a href="#the-script-block-s-type">the script block's type</a></var> for this <code><a href="#script">script</a></code>
                    483:     element be the concatenation of the string "<code title="">text/</code>" followed by the value of the <code title="attr-script-language"><a href="obsolete.html#attr-script-language">language</a></code> attribute.</p> <!--
                    484:     user agents already support, e.g., type="text/javascript1.3", so
                    485:     we don't have to support that separately. -->
                    486: 
                    487:     <p class="note">The <code title="attr-script-language"><a href="obsolete.html#attr-script-language">language</a></code> attribute is never
                    488:     conforming, and is always ignored if there is a <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute present.</p>
                    489: 
                    490:    </li>
                    491: 
                    492:    <li id="script-processing-encoding">
                    493: 
                    494:     <p>If the <code><a href="#script">script</a></code> element has a <code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code> attribute, then let
                    495:     <var><a href="#the-script-block-s-character-encoding">the script block's character encoding</a></var> for this
                    496:     <code><a href="#script">script</a></code> element be the encoding given by the <code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code> attribute.</p>
                    497: 
                    498:     <p>Otherwise, let <var><a href="#the-script-block-s-character-encoding">the script block's character encoding</a></var>
                    499:     for this <code><a href="#script">script</a></code> element be the same as <a href="dom.html#document-s-character-encoding" title="document's character encoding">the encoding of the document
                    500:     itself</a>.</p>
                    501: 
                    502:    </li>
                    503: 
                    504:    <li id="script-processing-for">
                    505: 
                    506:     <p>If the <code><a href="#script">script</a></code> element has an <code title="attr-script-event"><a href="obsolete.html#attr-script-event">event</a></code> attribute and a <code title="attr-script-for"><a href="obsolete.html#attr-script-for">for</a></code> attribute, then run these
                    507:     substeps:</p>
                    508: 
                    509:     <ol><li><p>Let <var title="">for</var> be the value of the <code title="attr-script-for"><a href="obsolete.html#attr-script-for">for</a></code> attribute.</p></li>
                    510: 
                    511:      <li><p>Let <var title="">event</var> be the value of the <code title="attr-script-event"><a href="obsolete.html#attr-script-event">event</a></code> attribute.</p></li>
                    512: 
                    513:      <li><p><a href="common-microsyntaxes.html#strip-leading-and-trailing-whitespace">Strip leading and trailing whitespace</a> from
                    514:      <var title="">event</var> and <var title="">for</var>.</p></li>
                    515: 
                    516:      <li><p>If <var title="">for</var> is not an <a href="infrastructure.html#ascii-case-insensitive">ASCII
                    517:      case-insensitive</a> match for the string "<code title="">window</code>", then the user agent must abort these
                    518:      steps at this point. The script is not executed.</p></li>
                    519: 
                    520:      <li><p>If <var title="">event</var> is not an <a href="infrastructure.html#ascii-case-insensitive">ASCII
                    521:      case-insensitive</a> match for either the string "<code title="">onload</code>" or the string "<code title="">onload()</code>", then the user agent must abort these
                    522:      steps at this point. The script is not executed.</p></li>
                    523: 
                    524:     </ol></li>
                    525: 
                    526:    <li id="script-processing-noscript">
                    527: 
                    528:     <p>If <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is
                    529:     disabled</a> for the <code><a href="#script">script</a></code> element, or if the
                    530:     user agent does not <a href="#support-the-scripting-language">support the scripting language</a>
                    531:     given by <var><a href="#the-script-block-s-type">the script block's type</a></var> for this
                    532:     <code><a href="#script">script</a></code> element, then the user agent must abort these
                    533:     steps at this point. The script is not executed.</p>
                    534: 
                    535:    </li>
                    536: 
                    537:    <li id="script-processing-empty">
                    538: 
                    539:     <p>If the element has no <code title="attr-script-src"><a href="#attr-script-src">src</a></code>
                    540:     attribute, and its child nodes consist only of comment nodes and
                    541:     empty <a href="infrastructure.html#text-node" title="text node">text nodes</a>, then the user
                    542:     agent must abort these steps at this point. The script is not
                    543:     executed.</p>
                    544: 
                    545:    </li>
                    546: 
                    547:    <li id="script-processing-start">
                    548: 
                    549:     <p>The user agent must set the element's <a href="#already-started">"already
                    550:     started"</a> flag.</p>
                    551: 
                    552:    </li>
                    553: 
                    554:    <li id="script-processing-src-prepare">
                    555: 
                    556:     <p>If the element has a <code title="attr-script-src"><a href="#attr-script-src">src</a></code>
                    557:     attribute whose value is not the empty string, then the value of
                    558:     that attribute must be <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a>
                    559:     relative to the element, and if that is successful, the specified
                    560:     resource must then be <a href="fetching-resources.html#fetch" title="fetch">fetched</a>, from the
                    561:     <a href="origin-0.html#origin">origin</a> of the element's <code><a href="infrastructure.html#document">Document</a></code>.</p>
                    562:     <!-- not http-origin privacy sensitive -->
                    563: 
                    564:     <p>If the <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute's
                    565:     value is the empty string or if it could not be resolved, then the
                    566:     user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple
                    567:     event</a> named <code title="event-error">error</code> at the
                    568:     element, and abort these steps.</p>
                    569: 
                    570:     <p>For historical reasons, if the <a href="urls.html#url">URL</a> is a <a href="webappapis.html#javascript-protocol" title="javascript protocol"><code title="">javascript:</code>
                    571:     URL</a>, then the user agent must not, despite the requirements
                    572:     in the definition of the <a href="fetching-resources.html#fetch" title="fetch">fetching</a>
                    573:     algorithm, actually execute the script in the URL; instead the
                    574:     user agent must act as if it had received an empty HTTP 400
                    575:     response.</p>
                    576: 
                    577:     <p>Once the resource's <a href="fetching-resources.html#content-type" title="Content-Type">Content Type
                    578:     metadata</a> is available, if it ever is, apply the
                    579:     <a href="fetching-resources.html#algorithm-for-extracting-an-encoding-from-a-content-type">algorithm for extracting an encoding from a
                    580:     Content-Type</a> to it. If this returns an encoding, and the
                    581:     user agent supports that encoding, then let <var><a href="#the-script-block-s-character-encoding">the script
                    582:     block's character encoding</a></var> be that encoding.</p>
                    583: 
                    584:     <p>For performance reasons, user agents may start fetching the
                    585:     script as soon as the attribute is set, instead, in the hope that
                    586:     the element will be inserted into the document. Either way, once
                    587:     the element is <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an element into a
                    588:     document">inserted into the document</a>, the load must have
                    589:     started. If the UA performs such prefetching, but the element is
                    590:     never inserted in the document, or the <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute is dynamically
                    591:     changed,<!-- or the base URL is dynamically changed,--> then the
                    592:     user agent will not execute the script, and the fetching process
                    593:     will have been effectively wasted.</p>
                    594: 
                    595:    </li>
                    596: 
                    597:    <li>
                    598: 
                    599:     <p>Then, the first of the following options that describes the
                    600:     situation must be followed:</p>
                    601: 
                    602:     <dl class="switch"><dt id="script-processing-defer">If the element has a <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute, and the element has
                    603:      a <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attribute, and the
                    604:      element has been flagged as <a href="#parser-inserted">"parser-inserted"</a>, and
                    605:      the element does not have an <code title="attr-script-async"><a href="#attr-script-async">async</a></code> attribute</dt>
                    606: 
                    607:      <dd>
                    608: 
                    609:       <p>The element must be added to the end of the <dfn id="list-of-scripts-that-will-execute-when-the-document-has-finished-parsing">list of
                    610:       scripts that will execute when the document has finished
                    611:       parsing</dfn>.</p>
                    612: 
                    613:       <p>The <a href="webappapis.html#concept-task" title="concept-task">task</a> that the
                    614:       <a href="webappapis.html#networking-task-source">networking task source</a> places on the <a href="webappapis.html#task-queue">task
                    615:       queue</a> once the <a href="fetching-resources.html#fetch" title="fetch">fetching
                    616:       algorithm</a> has completed must set the element's
                    617:       <a href="#ready-to-be-parser-executed">"ready to be parser-executed"</a> flag. The parser will
                    618:       handle executing the script.</p>
                    619: 
                    620:      </dd>
                    621: 
                    622: 
                    623:      <dt id="script-processing-parser-inserted">If the element has a
                    624:      <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute, and the
                    625:      element has been flagged as <a href="#parser-inserted">"parser-inserted"</a>, and
                    626:      the element does not have an <code title="attr-script-async"><a href="#attr-script-async">async</a></code> attribute</dt>
                    627: 
                    628:      <dd>
                    629: 
                    630:       <p>The element is the <a href="#pending-parsing-blocking-script">pending parsing-blocking
                    631:       script</a>. (There can only be one such script at a
                    632:       time.)</p>
                    633: 
                    634:       <p>The <a href="webappapis.html#concept-task" title="concept-task">task</a> that the
                    635:       <a href="webappapis.html#networking-task-source">networking task source</a> places on the <a href="webappapis.html#task-queue">task
                    636:       queue</a> once the <a href="fetching-resources.html#fetch" title="fetch">fetching
                    637:       algorithm</a> has completed must set the element's
                    638:       <a href="#ready-to-be-parser-executed">"ready to be parser-executed"</a> flag. The parser will
                    639:       handle executing the script.</p>
                    640: 
                    641:      </dd>
                    642: 
                    643: 
                    644:      <dt id="script-processing-style-delayed">If the element does not
                    645:      have a <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute, but
                    646:      there is <a href="semantics.html#a-style-sheet-blocking-scripts">a style sheet blocking scripts</a>, and the
                    647:      element has been flagged as <a href="#parser-inserted">"parser-inserted"</a></dt>
                    648: 
                    649:      <dd>
                    650: 
                    651:       <p>The element is the <a href="#pending-parsing-blocking-script">pending parsing-blocking
                    652:       script</a>. (There can only be one such script at a
                    653:       time.)</p>
                    654: 
                    655:       <p>Set the element's <a href="#ready-to-be-parser-executed">"ready to be parser-executed"</a>
                    656:       flag. The parser will handle executing the script.</p>
                    657: 
                    658:      </dd>
                    659: 
                    660: 
                    661:      <dt id="script-processing-src">If the element has a <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute</dt>
                    662: 
                    663:      <dd>
                    664: 
                    665:       <p>The element must be added to the <dfn id="set-of-scripts-that-will-execute-as-soon-as-possible">set of scripts that
                    666:       will execute as soon as possible</dfn>.</p>
                    667: 
                    668:       <p>The <a href="webappapis.html#concept-task" title="concept-task">task</a> that the
                    669:       <a href="webappapis.html#networking-task-source">networking task source</a> places on the <a href="webappapis.html#task-queue">task
                    670:       queue</a> once the <a href="fetching-resources.html#fetch" title="fetch">fetching
                    671:       algorithm</a> has completed must <a href="#executing-a-script-block" title="executing a
                    672:       script block">execute the script block</a> and then remove
                    673:       the element from the <a href="#set-of-scripts-that-will-execute-as-soon-as-possible">set of scripts that will execute as
                    674:       soon as possible</a>.</p>
                    675: 
                    676:      </dd>
                    677: 
                    678: 
                    679:      <dt id="script-processing-inline">Otherwise</dt>
                    680: 
                    681:      <dd>The user agent must immediately <a href="#executing-a-script-block" title="executing a
                    682:      script block">execute the script block</a>, even if other
                    683:      scripts are already executing.</dd>
                    684: 
                    685:     </dl></li>
                    686: 
                    687:   </ol><!-- similar text in various places --><p>Fetching an external script must <a href="the-end.html#delay-the-load-event">delay the load
                    688:   event</a> of the element's document until the <a href="webappapis.html#concept-task" title="concept-task">task</a> that is <a href="webappapis.html#queue-a-task" title="queue a
                    689:   task">queued</a> by the <a href="webappapis.html#networking-task-source">networking task source</a> once
                    690:   the resource has been <a href="fetching-resources.html#fetch" title="fetch">fetched</a> (defined
                    691:   above) has been run.</p>
                    692: 
                    693:   <p>The <dfn id="pending-parsing-blocking-script">pending parsing-blocking script</dfn> is used by the
                    694:   parser.</p>
                    695: 
                    696:   <p><dfn id="executing-a-script-block" title="executing a script block">Executing a script
                    697:   block</dfn>: When the steps above require that the script block be
                    698:   executed, the user agent must act as follows:</p>
                    699: 
                    700:   <dl class="switch"><dt>If the load resulted in an error (for example a DNS error, or
                    701:    an HTTP 404 error)</dt>
                    702: 
                    703:    <dd><p>Executing the script block must just consist of <a href="webappapis.html#fire-a-simple-event" title="fire a simple event">firing a simple event</a> named
                    704:    <code title="event-error">error</code> at the element.</p></dd>
                    705: 
                    706:    <dt>If the load was successful</dt>
                    707: 
                    708:    <!-- SCRIPT EXEC -->
                    709:    <dd>
                    710: 
                    711:     <ol><li>
                    712: 
                    713:       <p>Initialize <dfn id="the-script-block-s-source"><var>the script block's source</var></dfn> as
                    714:       follows:</p>
                    715: 
                    716:       <dl class="switch"><dt>If the script is from an external file and <var><a href="#the-script-block-s-type">the script block's type</a></var> is a text-based language</dt>
                    717: 
                    718:        <dd>
                    719: 
                    720:         <p>The contents of that file, interpreted as string of
                    721:         Unicode characters, are the script source.</p>
                    722: 
                    723:         <p>For each of the rows in the following table, starting with
                    724:         the first one and going down, if the file has as many or more
                    725:         bytes available than the number of bytes in the first column,
                    726:         and the first bytes of the file match the bytes given in the
                    727:         first column, then set <var><a href="#the-script-block-s-character-encoding">the script block's character
                    728:         encoding</a></var> to the encoding given in the cell in the second
                    729:         column of that row, irrespective of any previous value:</p>
                    730: 
                    731:         <!-- this table is present in several forms in this file; keep them in sync -->
                    732:         <table><thead><tr><th>Bytes in Hexadecimal
                    733:            </th><th>Encoding
                    734:          </th></tr></thead><tbody><!-- nobody uses this
                    735:           <tr>
                    736:            <td>00 00 FE FF
                    737:            <td>UTF-32BE
                    738:           <tr>
                    739:            <td>FF FE 00 00
                    740:            <td>UTF-32LE
                    741: --><tr><td>FE FF
                    742:            </td><td>UTF-16BE
                    743:           </td></tr><tr><td>FF FE
                    744:            </td><td>UTF-16LE
                    745:           </td></tr><tr><td>EF BB BF
                    746:            </td><td>UTF-8
                    747: <!-- nobody uses this
                    748:           <tr>
                    749:            <td>DD 73 66 73
                    750:            <td>UTF-EBCDIC
                    751: -->
                    752:         </td></tr></tbody></table><p class="note">This step looks for Unicode Byte Order Marks
                    753:         (BOMs).</p>
                    754: 
                    755:         <p>The file must then be converted to Unicode using the
                    756:         character encoding given by <var><a href="#the-script-block-s-character-encoding">the script block's character
                    757:         encoding</a></var>.</p>
                    758: 
                    759:        </dd>
                    760: 
                    761:        <dt>If the script is from an external file and <var><a href="#the-script-block-s-type">the script block's type</a></var> is an XML-based language</dt>
                    762: 
                    763:        <dd>
                    764: 
                    765:         <p>The external file is the script source. When it is later
                    766:         executed, it must be interpreted in a manner consistent with
                    767:         the specification defining the language given by <var><a href="#the-script-block-s-type">the
                    768:         script block's type</a></var>.</p>
                    769: 
                    770:        </dd>
                    771: 
                    772:        <dt>If the script is inline and <var><a href="#the-script-block-s-type">the script block's type</a></var> is a text-based language</dt>
                    773: 
                    774:        <dd>
                    775: 
                    776:         <p>The value of the <code title="dom-script-text"><a href="#dom-script-text">text</a></code>
                    777:         IDL attribute at the time the element's <a href="#already-started">"already
                    778:         started"</a> flag was set is the script source.</p>
                    779: 
                    780:        </dd>
                    781: 
                    782:        <dt>If the script is inline and <var><a href="#the-script-block-s-type">the script block's type</a></var> is an XML-based language</dt>
                    783: 
                    784:        <dd>
                    785: 
                    786:         <p>The child nodes of the <code><a href="#script">script</a></code> element at the
                    787:         time the element's <a href="#already-started">"already started"</a> flag was set
                    788:         are the script source.</p>
                    789: 
                    790:        </dd>
                    791: 
                    792:       </dl></li>
                    793: 
                    794:      <li>
                    795: 
                    796:       <p><a href="webappapis.html#create-a-script-from-a-node" title="create a script from a node">Create a
                    797:       script</a> from the <code><a href="#script">script</a></code> element node, using
                    798:       <var><a href="#the-script-block-s-source">the script block's source</a></var> and <var><a href="#the-script-block-s-type">the script
                    799:       block's type</a></var>.</p>
                    800: 
                    801:       <p class="note">This is where the script is compiled and
                    802:       actually executed.</p>
                    803: 
                    804:      </li>
                    805: 
                    806:      <li>
                    807: 
                    808:       <p>If the script is from an external file, <a href="webappapis.html#fire-a-simple-event">fire a simple
                    809:       event</a> named <code title="event-load">load</code> at the
                    810:       <code><a href="#script">script</a></code> element.</p>
                    811: 
                    812:       <p>Otherwise, the script is internal; <a href="webappapis.html#queue-a-task">queue a task</a>
                    813:       to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-load">load</code> at the <code><a href="#script">script</a></code>
                    814:       element.</p>
                    815: 
                    816:      </li>
                    817: 
                    818:     </ol></dd>
                    819: 
                    820:   </dl><p>The IDL attributes <dfn id="dom-script-src" title="dom-script-src"><code>src</code></dfn>, <dfn id="dom-script-type" title="dom-script-type"><code>type</code></dfn>, <dfn id="dom-script-charset" title="dom-script-charset"><code>charset</code></dfn>, <dfn id="dom-script-async" title="dom-script-async"><code>async</code></dfn>, and <dfn id="dom-script-defer" title="dom-script-defer"><code>defer</code></dfn>, each must
                    821:   <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
                    822:   name.</p>
                    823: 
                    824:   </div><dl class="domintro"><dt><var title="">script</var> . <code title="dom-script-text"><a href="#dom-script-text">text</a></code> [ = <var title="">value</var> ]</dt>
                    825: 
                    826:    <dd>
                    827: 
                    828:     <p>Returns the contents of the element, ignoring child nodes that
                    829:     aren't <a href="infrastructure.html#text-node" title="text node">text nodes</a>.</p>
                    830: 
                    831:     <p>Can be set, to replace the element's children with the given
                    832:     value.</p>
                    833: 
                    834:    </dd>
                    835: 
                    836:   </dl><div class="impl">
                    837: 
                    838:   <p>The IDL attribute <dfn id="dom-script-text" title="dom-script-text"><code>text</code></dfn> must return a
                    839:   concatenation of the contents of all the <a href="infrastructure.html#text-node" title="text
                    840:   node">text nodes</a> that are direct children of the
                    841:   <code><a href="#script">script</a></code> element (ignoring any other nodes such as
                    842:   comments or elements), in tree order. On setting, it must act the
                    843:   same way as the <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute.</p>
                    844: 
                    845:   </div><p class="note">When inserted using the <code title="dom-document-write"><a href="apis-in-html-documents.html#dom-document-write">document.write()</a></code> method,
                    846:   <code><a href="#script">script</a></code> elements execute (typically synchronously), but
                    847:   when inserted using <code title="dom-innerHTML"><a href="apis-in-html-documents.html#dom-innerhtml">innerHTML</a></code> and <code title="dom-outerHTML"><a href="apis-in-html-documents.html#dom-outerhtml">outerHTML</a></code> attributes, they do not
                    848:   execute at all.</p><div class="example">
                    849: 
                    850:    <p>In this example, two <code><a href="#script">script</a></code> elements are used. One
                    851:    embeds an external script, and the other includes some data.</p>
                    852: 
                    853:    <pre>&lt;script src="game-engine.js"&gt;&lt;/script&gt;
                    854: &lt;script type="text/x-game-map"&gt;
                    855: ........U.........e
                    856: o............A....e
                    857: .....A.....AAA....e
                    858: .A..AAA...AAAAA...e
                    859: &lt;/script&gt;</pre>
                    860: 
                    861:    <p>The data in this case might be used by the script to generate
                    862:    the map of a video game. The data doesn't have to be used that way,
                    863:    though; maybe the map data is actually embedded in other parts of
                    864:    the page's markup, and the data block here is just used by the
                    865:    site's search engine to help users who are looking for particular
                    866:    features in their game maps.</p>
                    867: 
                    868:   </div><div class="example">
                    869: 
                    870:    <p>The following sample shows how a script element can be used to
                    871:    define a function that is then used by other parts of the
                    872:    document. It also shows how a <code><a href="#script">script</a></code> element can be
                    873:    used to invoke script while the document is being parsed, in this
                    874:    case to initialize the form's output.</p>
                    875: 
                    876:    <pre>&lt;script&gt;
                    877:  function calculate(form) {
                    878:    var price = 52000;
                    879:    if (form.elements.brakes.checked)
                    880:      price += 1000;
                    881:    if (form.elements.radio.checked)
                    882:      price += 2500;
                    883:    if (form.elements.turbo.checked)
                    884:      price += 5000;
                    885:    if (form.elements.sticker.checked)
                    886:      price += 250;
                    887:    form.elements.result.value = price;
                    888:  }
                    889: &lt;/script&gt;
                    890: &lt;form name="pricecalc" onsubmit="return false"&gt;
                    891:  &lt;fieldset&gt;
                    892:   &lt;legend&gt;Work out the price of your car&lt;/legend&gt;
                    893:   &lt;p&gt;Base cost: &#163;52000.&lt;/p&gt;
                    894:   &lt;p&gt;Select additional options:&lt;/p&gt;
                    895:   &lt;ul&gt;
                    896:    &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=brakes&gt; Ceramic brakes (&#163;1000)&lt;/label&gt;&lt;/li&gt;
                    897:    &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=radio&gt; Satellite radio (&#163;2500)&lt;/label&gt;&lt;/li&gt;
                    898:    &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=turbo&gt; Turbo charger (&#163;5000)&lt;/label&gt;&lt;/li&gt;
                    899:    &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=sticker&gt; "XZ" sticker (&#163;250)&lt;/label&gt;&lt;/li&gt;
                    900:   &lt;/ul&gt;
                    901:   &lt;p&gt;Total: &#163;&lt;output name=result onformchange="calculate(form)"&gt;&lt;/output&gt;&lt;/p&gt;
                    902:  &lt;/fieldset&gt;
                    903:  &lt;script&gt;
                    904:   document.forms.pricecalc.dispatchFormChange();
                    905:  &lt;/script&gt;
                    906: &lt;/form&gt;</pre>
                    907: 
                    908:   </div><h5 id="scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><div class="impl">
                    909: 
                    910:   <p>A user agent is said to <dfn id="support-the-scripting-language">support the scripting language</dfn>
                    911:   if <var><a href="#the-script-block-s-type">the script block's type</a></var> is an <a href="infrastructure.html#ascii-case-insensitive">ASCII
                    912:   case-insensitive</a> match for the <a href="infrastructure.html#mime-type">MIME type</a> string
                    913:   of a scripting language that the user agent implements.</p>
                    914: 
                    915:   </div><p>The following lists some <a href="infrastructure.html#mime-type">MIME type</a> strings and the
                    916:   languages to which they refer:</p><dl><dt>"<code>application/ecmascript</code>"</dt>
                    917:    <dt>"<code>application/javascript</code>"</dt>
                    918:    <dt>"<code>application/x-ecmascript</code>"</dt>
                    919:    <dt>"<code>application/x-javascript</code>"</dt>
                    920:    <dt>"<code>text/ecmascript</code>"</dt>
                    921:    <dt>"<code>text/javascript</code>"</dt>
                    922:    <dt>"<code>text/javascript1.0</code>"</dt>
                    923:    <dt>"<code>text/javascript1.1</code>"</dt>
                    924:    <dt>"<code>text/javascript1.2</code>"</dt>
                    925:    <dt>"<code>text/javascript1.3</code>"</dt>
                    926:    <dt>"<code>text/javascript1.4</code>"</dt>
                    927:    <dt>"<code>text/javascript1.5</code>"</dt>
                    928:    <dt>"<code>text/jscript</code>"</dt>
                    929:    <dt>"<code>text/livescript</code>"</dt>
                    930:    <dt>"<code>text/x-ecmascript</code>"</dt>
                    931:    <dt>"<code>text/x-javascript</code>"</dt>
                    932:    <dd>JavaScript. <a href="references.html#refsECMA262">[ECMA262]</a></dd>
                    933: 
                    934:    <dt>"<code>text/javascript;e4x=1</code>"</dt>
                    935:    <dd>JavaScript with ECMAScript for XML. <a href="references.html#refsECMA357">[ECMA357]</a></dd>
                    936: 
                    937:   </dl><div class="impl">
                    938: 
                    939:   <p>User agents may support other <a href="infrastructure.html#mime-type" title="MIME type">MIME
                    940:   types</a> and other languages.</p>
                    941: 
                    942:   <!-- this paragraph is also present in the <style type="text/css"> section -->
                    943:   <p>When examining types to determine if they support the language,
                    944:   user agents must not ignore unknown MIME parameters &#8212; types
                    945:   with unknown parameters must be assumed to be unsupported. The <code title="">charset</code> parameter must be treated as an unknown
                    946:   parameter for the purpose of comparing <a href="infrastructure.html#mime-type" title="MIME type">MIME
                    947:   types</a> here.</p>
                    948: 
                    949:   </div><h5 id="restrictions-for-contents-of-script-elements"><span class="secno">4.3.1.2 </span><dfn title="script content restrictions">Restrictions for contents of <code>script</code> elements</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="infrastructure.html#textcontent">textContent</a></code> of a <code><a href="#script">script</a></code> element must match the
                    950:   <code title="">script</code> production in the following ABNF, the
                    951:   character set for which is Unicode. <a href="references.html#refsABNF">[ABNF]</a></p><pre>script        = data1 *( escape [ script-start data3 ] "--&gt;" data1 ) [ escape ]
                    952: escape        = "&lt;!--" data2 *( script-start data3 script-end data2 )
                    953: 
                    954: data1         = &lt;any string that doesn't contain a substring that matches not-data1&gt;
                    955: not-data1     = <!-- script-end / -->"&lt;!--"             <!-- the script-end is redundant here since it would close the element -->
                    956: 
                    957: data2         = &lt;any string that doesn't contain a substring that matches not-data2&gt;
                    958: not-data2     = <!-- script-end / -->script-start / "--&gt;"  <!-- the script-end is redundant here since it would close the element -->
                    959: 
                    960: data3         = &lt;any string that doesn't contain a substring that matches not-data3&gt;
                    961: not-data3     = script-end / "--&gt;"
                    962: 
                    963: script-start  = lt       s c r i p t tag-end
                    964: script-end    = lt slash s c r i p t tag-end
                    965: 
                    966: lt            =  %x003C ; U+003C LESS-THAN SIGN character (&lt;)
                    967: slash         =  %x002F ; U+002F SOLIDUS character (/)
                    968: 
                    969: s             =  %x0053 ; U+0053 LATIN CAPITAL LETTER S
                    970: s             =/ %x0073 ; U+0073 LATIN SMALL LETTER S
                    971: c             =  %x0043 ; U+0043 LATIN CAPITAL LETTER C
                    972: c             =/ %x0063 ; U+0063 LATIN SMALL LETTER C
                    973: r             =  %x0052 ; U+0052 LATIN CAPITAL LETTER R
                    974: r             =/ %x0072 ; U+0072 LATIN SMALL LETTER R
                    975: i             =  %x0049 ; U+0049 LATIN CAPITAL LETTER I
                    976: i             =/ %x0069 ; U+0069 LATIN SMALL LETTER I
                    977: p             =  %x0050 ; U+0050 LATIN CAPITAL LETTER P
                    978: p             =/ %x0070 ; U+0070 LATIN SMALL LETTER P
                    979: t             =  %x0054 ; U+0054 LATIN CAPITAL LETTER T
                    980: t             =/ %x0074 ; U+0074 LATIN SMALL LETTER T
                    981: 
                    982: tag-end       =  %x0009 ; U+0009 CHARACTER TABULATION
                    983: tag-end       =/ %x000A ; U+000A LINE FEED (LF)
                    984: tag-end       =/ %x000C ; U+000C FORM FEED (FF)
                    985: tag-end       =/ %x0020 ; U+0020 SPACE
                    986: tag-end       =/ %x002F ; U+002F SOLIDUS (/)
                    987: tag-end       =/ %x003E ; U+003E GREATER-THAN SIGN (&gt;)</pre><p>When a <code><a href="#script">script</a></code> element contains <a href="#inline-documentation-for-external-scripts">script
                    988:   documentation</a>, there are further restrictions on the contents
                    989:   of the element, as described in the section below.</p><h5 id="inline-documentation-for-external-scripts"><span class="secno">4.3.1.3 </span><dfn title="script documentation">Inline documentation for external scripts</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>If a <code><a href="#script">script</a></code> element's <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute is specified, then the
                    990:   contents of the <code><a href="#script">script</a></code> element, if any, must be such
                    991:   that the value of the <code title="dom-script-text"><a href="#dom-script-text">text</a></code> IDL
                    992:   attribute, which is derived from the element's contents, matches the
                    993:   <code title="">documentation</code> production in the following
                    994:   ABNF, the character set for which is Unicode. <a href="references.html#refsABNF">[ABNF]</a></p><pre>documentation = *( *( space / tab / comment ) [ line-comment ] newline )
                    995: comment       = slash star *( not-star / star not-slash ) 1*star slash
                    996: line-comment  = slash slash *not-newline
                    997: 
                    998: ; characters
                    999: tab           = %x0009 ; U+0009 TAB
                   1000: newline       = %x000A ; U+000A LINE FEED (LF)
                   1001: space         = %x0020 ; U+0020 SPACE
                   1002: star          = %x002A ; U+002A ASTERISK (*)
                   1003: slash         = %x002F ; U+002F SOLIDUS (/)
                   1004: not-newline   = %x0000-0009 / %x000B-10FFFF
                   1005:                 ; a Unicode character other than U+000A LINE FEED (LF)
                   1006: not-star      = %x0000-0029 / %x002B-10FFFF
                   1007:                 ; a Unicode character other than U+002A ASTERISK (*)
                   1008: not-slash     = %x0000-002E / %x0030-10FFFF
                   1009:                 ; a Unicode character other than U+002F SOLIDUS (/)</pre><p class="note">This corresponds to putting the contents of the
                   1010:   element in JavaScript comments.</p><p class="note">This requirement is in addition to the earlier
                   1011:   restrictions on the syntax of contents of <code><a href="#script">script</a></code>
                   1012:   elements.</p><div class="example">
                   1013: 
                   1014:    <p>This allows authors to include documentation, such as license
                   1015:    information or API information, inside their documents while still
                   1016:    referring to external script files. The syntax is constrained so
                   1017:    that authors don't accidentally include what looks like valid
                   1018:    script while also providing a <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute.</p>
                   1019: 
                   1020:    <pre>&lt;script src="cool-effects.js"&gt;
                   1021:  // create new instances using:
                   1022:  //    var e = new Effect();
                   1023:  // start the effect using .play, stop using .stop:
                   1024:  //    e.play();
                   1025:  //    e.stop();
                   1026: &lt;/script&gt;</pre>
                   1027: 
                   1028:   </div><h4 id="the-noscript-element"><span class="secno">4.3.2 </span>The <dfn><code>noscript</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
                   1029:    <dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
                   1030:    <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
                   1031:    <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
                   1032:    <dt>Contexts in which this element may be used:</dt>
                   1033:    <dd>In a <code><a href="semantics.html#the-head-element-0">head</a></code> element of an <a href="dom.html#html-documents" title="HTML documents">HTML document</a>, if there are no ancestor <code><a href="#the-noscript-element">noscript</a></code> elements.</dd>
                   1034:    <dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected in <a href="dom.html#html-documents">HTML documents</a>, if there are no ancestor <code><a href="#the-noscript-element">noscript</a></code> elements.</dd>
                   1035:    <dt>Content model:</dt>
                   1036:    <dd>When <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>, in a <code><a href="semantics.html#the-head-element-0">head</a></code> element: in any order, zero or more <code><a href="semantics.html#the-link-element">link</a></code> elements, zero or more <code><a href="semantics.html#the-style-element">style</a></code> elements, and zero or more <code><a href="semantics.html#meta">meta</a></code> elements.</dd>
                   1037:    <dd>When <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>, not in a <code><a href="semantics.html#the-head-element-0">head</a></code> element: <a href="content-models.html#transparent">transparent</a>, but there must be no <code><a href="#the-noscript-element">noscript</a></code> element descendants.</dd>
                   1038:    <dd>Otherwise: text that conforms to the requirements given in the prose.</dd>
                   1039:    <dt>Content attributes:</dt>
                   1040:    <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
                   1041:    <dt>DOM interface:</dt>
                   1042:    <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
                   1043:   </dl><p>The <code><a href="#the-noscript-element">noscript</a></code> element <a href="rendering.html#represents">represents</a> nothing
                   1044:   if <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting is enabled</a>, and
                   1045:   <a href="rendering.html#represents">represents</a> its children if <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>. It is used
                   1046:   to present different markup to user agents that support scripting
                   1047:   and those that don't support scripting, by affecting how the
                   1048:   document is parsed.</p><p>When used in <a href="dom.html#html-documents">HTML documents</a>, the allowed content
                   1049:   model is as follows:</p><dl><dt>In a <code><a href="semantics.html#the-head-element-0">head</a></code> element, if <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the
                   1050:    <code><a href="#the-noscript-element">noscript</a></code> element</dt>
                   1051: 
                   1052:    <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only
                   1053:    <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="semantics.html#the-style-element">style</a></code>, and <code><a href="semantics.html#meta">meta</a></code>
                   1054:    elements.</p></dd>
                   1055: 
                   1056:    <dt>In a <code><a href="semantics.html#the-head-element-0">head</a></code> element, if <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting is enabled</a> for the
                   1057:    <code><a href="#the-noscript-element">noscript</a></code> element</dt>
                   1058: 
                   1059:    <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only text,
                   1060:    except that invoking the <a href="the-end.html#html-fragment-parsing-algorithm">HTML fragment parsing
                   1061:    algorithm</a> <!-- (which disables <script type="text/javascript"> execution) --> with
                   1062:    the <code><a href="#the-noscript-element">noscript</a></code> element as the <var title="">context</var> element and the text contents as the <var title="">input</var> must result in a list of nodes that consists
                   1063:    only of <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="semantics.html#the-style-element">style</a></code>, and
                   1064:    <code><a href="semantics.html#meta">meta</a></code> elements that would be conforming if they were
                   1065:    children of the <code><a href="#the-noscript-element">noscript</a></code> element, and no <a href="parsing.html#parse-error" title="parse error">parse errors</a>.</p></dd>
                   1066: 
                   1067:    <dt>Outside of <code><a href="semantics.html#the-head-element-0">head</a></code> elements, if <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the
                   1068:    <code><a href="#the-noscript-element">noscript</a></code> element</dt>
                   1069: 
                   1070:    <dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element's content model is
                   1071:    <a href="content-models.html#transparent">transparent</a>, with the additional restriction that a
                   1072:    <code><a href="#the-noscript-element">noscript</a></code> element must not have a <code><a href="#the-noscript-element">noscript</a></code>
                   1073:    element as an ancestor (that is, <code><a href="#the-noscript-element">noscript</a></code> can't be
                   1074:    nested).</p></dd>
                   1075: 
                   1076:    <dt>Outside of <code><a href="semantics.html#the-head-element-0">head</a></code> elements, if <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting is enabled</a> for the
                   1077:    <code><a href="#the-noscript-element">noscript</a></code> element</dt>
                   1078: 
                   1079:    <dd>
                   1080: 
                   1081:     <p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only text,
                   1082:     except that the text must be such that running the following
                   1083:     algorithm results in a conforming document with no
                   1084:     <code><a href="#the-noscript-element">noscript</a></code> elements and no <code><a href="#script">script</a></code>
                   1085:     elements, and such that no step in the algorithm causes an
                   1086:     <a href="parsing.html#html-parser">HTML parser</a> to flag a <a href="parsing.html#parse-error">parse error</a>:</p>
                   1087: 
                   1088:     <ol><li>Remove every <code><a href="#script">script</a></code> element from the
                   1089:      document.</li>
                   1090: 
                   1091:      <li>Make a list of every <code><a href="#the-noscript-element">noscript</a></code> element in the
                   1092:      document. For every <code><a href="#the-noscript-element">noscript</a></code> element in that list,
                   1093:      perform the following steps:
                   1094: 
                   1095:       <ol><li>Let the <var title="">parent element</var> be the parent
                   1096:        element of the <code><a href="#the-noscript-element">noscript</a></code> element.</li>
                   1097: 
                   1098:        <li>Take all the children of the <var title="">parent element</var>
                   1099:        that come before the <code><a href="#the-noscript-element">noscript</a></code> element, and call these
                   1100:        elements <var title="">the before children</var>.</li>
                   1101: 
                   1102:        <li>Take all the children of the <var title="">parent element</var>
                   1103:        that come <em>after</em> the <code><a href="#the-noscript-element">noscript</a></code> element, and
                   1104:        call these elements <var title="">the after children</var>.</li>
                   1105: 
                   1106:        <li>Let <var title="">s</var> be the concatenation of all the
                   1107:        <a href="infrastructure.html#text-node">text node</a> children of the <code><a href="#the-noscript-element">noscript</a></code>
                   1108:        element.</li>
                   1109: 
                   1110:        <li>Set the <code title="dom-innerHTML"><a href="apis-in-html-documents.html#dom-innerhtml">innerHTML</a></code>
                   1111:        attribute of the <var title="">parent element</var> to the value
                   1112:        of <var title="">s</var>. (This, as a side-effect, causes the
                   1113:        <code><a href="#the-noscript-element">noscript</a></code> element to be removed from the
                   1114:        document.)</li>
                   1115: 
                   1116:        <li>Insert <var title="">the before children</var> at the start of
                   1117:        the <var title="">parent element</var>, preserving their original
                   1118:        relative order.</li>
                   1119: 
                   1120:        <li>Insert <var title="">the after children</var> at the end of the
                   1121:        <var title="">parent element</var>, preserving their original
                   1122:        relative order.</li>
                   1123: 
                   1124:       </ol></li>
                   1125: 
                   1126:     </ol></dd>
                   1127: 
                   1128:   </dl><p class="note">All these contortions are required because, for
                   1129:   historical reasons, the <code><a href="#the-noscript-element">noscript</a></code> element is handled
                   1130:   differently by the <a href="parsing.html#html-parser">HTML parser</a> based on whether <a href="parsing.html#scripting-flag" title="scripting flag">scripting was enabled or not</a> when the
                   1131:   parser was invoked.</p><p>The <code><a href="#the-noscript-element">noscript</a></code> element must not be used in <a href="dom.html#xml-documents">XML
                   1132:   documents</a>.</p><p class="note"><strong>The <code><a href="#the-noscript-element">noscript</a></code> element is only
                   1133:   effective in <a href="syntax.html#syntax">the HTML syntax</a>, it has no effect in
                   1134:   <a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML syntax</a>.</strong></p><div class="impl">
                   1135: 
                   1136:   <p>The <code><a href="#the-noscript-element">noscript</a></code> element has no other requirements. In
                   1137:   particular, children of the <code><a href="#the-noscript-element">noscript</a></code> element are not
                   1138:   exempt from <a href="association-of-controls-and-forms.html#form-submission">form submission</a>, scripting, and so forth,
                   1139:   even when <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting is enabled</a>
                   1140:   for the element.</p>
                   1141: 
                   1142:   </div><div class="example">
                   1143: 
                   1144:    <p>In the following example, a <code><a href="#the-noscript-element">noscript</a></code> element is
                   1145:    used to provide fallback for a script.</p>
                   1146: 
                   1147:    <pre>&lt;form action="calcSquare.php"&gt;
                   1148:  &lt;p&gt;
                   1149:   &lt;label for=x&gt;Number&lt;/label&gt;:
                   1150:   &lt;input id="x" name="x" type="number"&gt;
                   1151:  &lt;/p&gt;
                   1152:  &lt;script&gt;
                   1153:   var x = document.getElementById('x');
                   1154:   var output = document.createElement('p');
                   1155:   output.textContent = 'Type a number; it will be squared right then!';
                   1156:   x.form.appendChild(output);
                   1157:   x.form.onsubmit = function () { return false; }
                   1158:   x.oninput = function () {
                   1159:     var v = x.valueAsNumber;
                   1160:     output.textContent = v + ' squared is ' + v * v;
                   1161:   };
                   1162:  &lt;/script&gt;
                   1163:  &lt;noscript&gt;
                   1164:   &lt;input type=submit value="Calculate Square"&gt;
                   1165:  &lt;/noscript&gt;
                   1166: &lt;/form&gt;</pre>
                   1167: 
                   1168:    <p>When script is disabled, a button appears to do the calculation
                   1169:    on the server side. When script is enabled, the value is computed
                   1170:    on-the-fly instead.</p>
                   1171: 
                   1172:    <p>The <code><a href="#the-noscript-element">noscript</a></code> element is a blunt
                   1173:    instrument. Sometimes, scripts might be enabled, but for some
                   1174:    reason the page's script might fail. For this reason, it's
                   1175:    generally better to avoid using <code><a href="#the-noscript-element">noscript</a></code>, and to
                   1176:    instead design the script to change the page from being a
                   1177:    scriptless page to a scripted page on the fly, as in the next
                   1178:    example:</p>
                   1179: 
                   1180:    <pre>&lt;form action="calcSquare.php"&gt;
                   1181:  &lt;p&gt;
                   1182:   &lt;label for=x&gt;Number&lt;/label&gt;:
                   1183:   &lt;input id="x" name="x" type="number"&gt;
                   1184:  &lt;/p&gt;
                   1185:  <strong>&lt;input id="submit" type=submit value="Calculate Square"&gt;</strong>
                   1186:  &lt;script&gt;
                   1187:   var x = document.getElementById('x');
                   1188:   var output = document.createElement('p');
                   1189:   output.textContent = 'Type a number; it will be squared right then!';
                   1190:   x.form.appendChild(output);
                   1191:   x.form.onsubmit = function () { return false; }
                   1192:   x.oninput = function () {
                   1193:     var v = x.valueAsNumber;
                   1194:     output.textContent = v + ' squared is ' + v * v;
                   1195:   };
                   1196: <strong>  var submit = document.getElementById('submit');
                   1197:   submit.parentNode.removeChild(submit);</strong>
                   1198:  &lt;/script&gt;
                   1199: &lt;/form&gt;</pre>
                   1200: 
                   1201:    <p>The above technique is also useful in XHTML, since
                   1202:    <code><a href="#the-noscript-element">noscript</a></code> is not supported in <a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML
                   1203:    syntax</a>.</p>
                   1204: 
                   1205:   </div></body></html>

Webmaster