html5/spec-author-view/the-script-element.html - view

File: [Public] / html5 / spec-author-view / the-script-element.html
Revision 1.149: download - view: text, annotated - select for diffs
Thu Oct 11 14:49:38 2012 UTC (12 years, 11 months ago) by mike
Branches: MAIN
CVS tags: HEAD

updated

<!doctype html> <html lang="en-US-x-Hixie"><meta content="HTML Tidy for HTML5 (experimental) for Linux/x86 http://github.com/w3c/tidy-html5/tree/c63cc39" name="generator"><meta charset="utf-8"><title>4.3.1 The script element — HTML5</title><link href="style.css" rel="stylesheet"><style type="text/css"> /**/ /**/ .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { white-space: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #base64-table { white-space: nowrap; font-size: 0.6em; column-width: 6em; column-count: 5; column-gap: 1em; -moz-column-width: 6em; -moz-column-count: 5; -moz-column-gap: 1em; -webkit-column-width: 6em; -webkit-column-count: 5; -webkit-column-gap: 1em; } #base64-table thead { display: none; } #base64-table * { border: none; } #base64-table tbody td:first-child:after { content: ':'; } #base64-table tbody td:last-child { text-align: right; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #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; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('fonts/Essays1743-BoldItalic.ttf'); } /**/ /**/ </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><style type="text/css"> /**/ /**/ pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } i, em { font-style: italic; } dt dfn { font-style: italic; } pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } pre em { font-weight: bolder; font-style: normal; } @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } table { border-collapse: collapse; border-style: hidden hidden none hidden; } table thead, table tbody { border-bottom: solid; } table tbody th:first-child { border-left: solid; } table tbody th { text-align: left; } table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } .matrix, .matrix td { border: none; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } img.extra, p.overview { float: right; } pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; position: relative; } pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } pre.idl::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em } pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } pre.css:first-line { color: #AAAA50; } dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; } hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } dl.domintro dd p { margin: 0.5em 0; } dl.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; } dl.switch { padding-left: 2em; } dl.switch > dt { text-indent: -1.5em; } dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } dl.triple { padding: 0 0 0 1em; } dl.triple dt, dl.triple dd { margin: 0; display: inline } dl.triple dt:after { content: ':'; } dl.triple dd:after { content: '\A'; white-space: pre; } .diff-old { text-decoration: line-through; color: silver; background: transparent; } .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } a .diff-new { border-bottom: 1px blue solid; } figure.diagrams { border: double black; background: white; padding: 1em; } figure.diagrams img { display: block; margin: 1em auto; } h2 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } h1 + h2, hr + h2.no-toc { page-break-before: auto; } p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; } div.head { margin: 0 0 1em; padding: 1em 0 0 0; } div.head p { margin: 0; } div.head h1 { margin: 0; } div.head .logo { float: right; margin: 0 1em; } div.head .logo img { border: none } /* remove border from top image */ div.head dl { margin: 1em 0; } div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } body > .toc > li { margin-top: 1em; margin-bottom: 1em; } body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } body > .toc > li > * { margin-bottom: 0.5em; } body > .toc > li > * > li > * { margin-bottom: 0.25em; } .toc, .toc li { list-style: none; } .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } .brief li { margin: 0; padding: 0; } .brief li p { margin: 0; padding: 0; } .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } .category-list li { display: inline; } .category-list li:not(:last-child)::after { content: ', '; } .category-list li > span, .category-list li > a { text-transform: lowercase; } .category-list li * { text-transform: none; } /* don't */ .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } .XXX > :first-child { margin-top: 0; } p .XXX { line-height: 3em; } .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } .annotation :link, .annotation :visited { color: inherit; } .annotation :link:hover, .annotation :visited:hover { background: transparent; } .annotation span { border: none ! important; } .note { color: green; background: transparent; font-family: sans-serif; } .warning { color: red; background: transparent; } .note, .warning { font-weight: bolder; font-style: italic; } .note em, .warning em, .note i, .warning i { font-style: normal; } p.note, div.note { padding: 0.5em 2em; } span.note { padding: 0 2em; } .note p:first-child, .warning p:first-child { margin-top: 0; } .note p:last-child, .warning p:last-child { margin-bottom: 0; } .warning:before { font-style: normal; } p.note:before { content: 'Note: '; } p.warning:before { content: '\26A0 Warning! '; } .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } .bookkeeping { font-size: 0.8em; margin: 2em 0; } .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } .bookkeeping dt { margin: 0.5em 2em 0; } .bookkeeping dd { margin: 0 3em 0.5em; } h4 { position: relative; z-index: 3; } h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } .element { background: #EEEEFF; color: black; margin: 0 0 1em 0.15em; padding: 0 1em 0.25em 0.75em; border-left: solid #9999FF 0.25em; position: relative; z-index: 1; } .element:before { position: absolute; z-index: 2; top: 0; left: -1.15em; height: 2em; width: 0.9em; background: #EEEEFF; content: ' '; border-style: none none solid solid; border-color: #9999FF; border-width: 0.25em; } .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } td > .example:only-child { margin: 0 0 0 0.1em; } ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } ul.domTree li li { list-style: none; } 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; } 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; } ul.domTree span { font-style: italic; font-family: serif; } ul.domTree .t1 code { color: purple; font-weight: bold; } ul.domTree .t2 { font-style: normal; font-family: monospace; } ul.domTree .t2 .name { color: black; font-weight: bold; } ul.domTree .t2 .value { color: blue; font-weight: normal; } ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } ul.domTree .t7 code, .domTree .t8 code { color: green; } ul.domTree .t10 code { color: teal; } body.dfnEnabled dfn { cursor: pointer; } .dfnPanel { display: inline; position: absolute; z-index: 10; height: auto; width: auto; padding: 0.5em 0.75em; font: small sans-serif, Droid Sans Fallback; background: #DDDDDD; color: black; border: outset 0.2em; } .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; } .dfnPanel :link, .dfnPanel :visited { color: black; } .dfnPanel p { font-weight: bolder; } .dfnPanel * + p { margin-top: 0.25em; } .dfnPanel li { list-style-position: inside; } #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } #configUI p label { display: block; } #configUI #updateUI, #configUI .loginUI { text-align: center; } #configUI input[type=button] { display: block; margin: auto; } fieldset { margin: 1em; padding: 0.5em 1em; } fieldset > legend + * { margin-top: 0; } fieldset > :last-child { margin-bottom: 0; } fieldset p { margin: 0.5em 0; } .stability { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto 0 auto; width: 50%; background: maroon; color: yellow; -webkit-border-radius: 1em 1em 0 0; -moz-border-radius: 1em 1em 0 0; border-radius: 1em 1em 0 0; -moz-box-shadow: 0 0 1em #500; -webkit-box-shadow: 0 0 1em #500; box-shadow: 0 0 1em red; padding: 0.5em 1em; text-align: center; } .stability strong { display: block; } .stability input { -moz-appearance: none; -webkit-appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black; position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center; } .stability input:hover { color: white; text-shadow: 0 0 2px black; } .stability input:active { padding: 0.3em 0.45em 0.2em 0.55em; } .stability :link, .stability :visited, .stability :link:hover, .stability :visited:hover { background: transparent; color: white; } /**/ /**/ </style><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><meta content="noindex" name="robots"><script> function getCookie(name) { var params = location.search.substr(1).split("&"); for (var index = 0; index < params.length; index++) { if (params[index] == name) return "1"; var data = params[index].split("="); if (data[0] == name) return unescape(data[1]); } var cookies = document.cookie.split("; "); for (var index = 0; index < cookies.length; index++) { var data = cookies[index].split("="); if (data[0] == name) return unescape(data[1]); } return null; } </script><link href="scripting-1.html" rel="prev" title="4.3 Scripting"> <link href="Overview.html#contents" rel="contents" title="Table of contents"> <link href="the-noscript-element.html" rel="next" title="4.3.2 The noscript element"> <body class="split chapter" onload="fixBrokenLink();"><div class="head" id="head"> <div aria-haspopup="true" id="jumpIndexA-button" role="button" tabindex="0">jump <div id="jumpIndexA"> <ul><li><a class="noindex" href="the-a-element.html#the-a-element">a</a><a class="noindex" href="the-abbr-element.html#the-abbr-element">abbr</a><a class="noindex" href="the-address-element.html#the-address-element">address</a><a class="noindex" href="the-area-element.html#the-area-element">area</a><a class="noindex" href="the-article-element.html#the-article-element">article</a><a class="noindex" href="the-aside-element.html#the-aside-element">aside</a><a class="noindex" href="the-audio-element.html#the-audio-element">audio</a></li> </ul><ul><li><a class="noindex" href="the-b-element.html#the-b-element">b</a><a class="noindex" href="the-base-element.html#the-base-element">base</a><a class="noindex" href="the-bdi-element.html#the-bdi-element">bdi</a><a class="noindex" href="the-bdo-element.html#the-bdo-element">bdo</a><a class="noindex" href="the-blockquote-element.html#the-blockquote-element">blockquote</a><a class="noindex" href="the-body-element.html#the-body-element">body</a><a class="noindex" href="the-br-element.html#the-br-element">br</a><a class="noindex" href="the-button-element.html#the-button-element">button</a></li> </ul><ul><li><a class="noindex" href="the-canvas-element.html#the-canvas-element">canvas</a><a class="noindex" href="the-caption-element.html#the-caption-element">caption</a><a class="noindex" href="the-cite-element.html#the-cite-element">cite</a><a class="noindex" href="the-code-element.html#the-code-element">code</a><a class="noindex" href="the-col-element.html#the-col-element">col</a><a class="noindex" href="the-colgroup-element.html#the-colgroup-element">colgroup</a><a class="noindex" href="the-command-element.html#the-command-element">command</a></li> </ul><ul><li><a class="noindex" href="the-datalist-element.html#the-datalist-element">datalist</a><a class="noindex" href="the-dd-element.html#the-dd-element">dd</a><a class="noindex" href="the-del-element.html#the-del-element">del</a><a class="noindex" href="the-details-element.html#the-details-element">details</a><a class="noindex" href="the-dfn-element.html#the-dfn-element">dfn</a><a class="noindex" href="the-div-element.html#the-div-element">div</a><a class="noindex" href="the-dl-element.html#the-dl-element">dl</a><a class="noindex" href="the-dt-element.html#the-dt-element">dt</a></li> </ul><ul><li><a class="noindex" href="the-em-element.html#the-em-element">em</a><a class="noindex" href="the-embed-element.html#the-embed-element">embed</a><a class="noindex" href="the-fieldset-element.html#the-fieldset-element">fieldset</a><a class="noindex" href="the-figcaption-element.html#the-figcaption-element">figcaption</a><a class="noindex" href="the-figure-element.html#the-figure-element">figure</a><a class="noindex" href="the-footer-element.html#the-footer-element">footer</a><a class="noindex" href="the-form-element.html#the-form-element">form</a></li> </ul><ul><li><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h2</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h3</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h4</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h5</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a><a class="noindex" href="the-head-element.html#the-head-element">head</a><a class="noindex" href="the-header-element.html#the-header-element">header</a><a class="noindex" href="the-hgroup-element.html#the-hgroup-element">hgroup</a><a class="noindex" href="the-hr-element.html#the-hr-element">hr</a><a class="noindex" href="the-html-element.html#the-html-element">html</a></li> </ul><ul><li><a class="noindex" href="the-i-element.html#the-i-element">i</a><a class="noindex" href="the-iframe-element.html#the-iframe-element">iframe</a><a class="noindex" href="the-img-element.html#the-img-element">img</a><a class="noindex" href="the-input-element.html#the-input-element">input</a><a class="noindex" href="the-ins-element.html#the-ins-element">ins</a><a class="noindex" href="the-kbd-element.html#the-kbd-element">kbd</a><a class="noindex" href="the-keygen-element.html#the-keygen-element">keygen</a></li> </ul><ul><li><a class="noindex" href="the-label-element.html#the-label-element">label</a><a class="noindex" href="the-legend-element.html#the-legend-element">legend</a><a class="noindex" href="the-li-element.html#the-li-element">li</a><a class="noindex" href="the-link-element.html#the-link-element">link</a><a class="noindex" href="the-map-element.html#the-map-element">map</a><a class="noindex" href="the-mark-element.html#the-mark-element">mark</a><a class="noindex" href="the-menu-element.html#the-menu-element">menu</a><a class="noindex" href="the-meta-element.html#the-meta-element">meta</a><a class="noindex" href="the-meter-element.html#the-meter-element">meter</a></li> </ul><ul><li><a class="noindex" href="the-nav-element.html#the-nav-element">nav</a><a class="noindex" href="the-noscript-element.html#the-noscript-element">noscript</a><a class="noindex" href="the-object-element.html#the-object-element">object</a><a class="noindex" href="the-ol-element.html#the-ol-element">ol</a><a class="noindex" href="the-optgroup-element.html#the-optgroup-element">optgroup</a><a class="noindex" href="the-option-element.html#the-option-element">option</a><a class="noindex" href="the-output-element.html#the-output-element">output</a></li> </ul><ul><li><a class="noindex" href="the-p-element.html#the-p-element">p</a><a class="noindex" href="the-param-element.html#the-param-element">param</a><a class="noindex" href="the-pre-element.html#the-pre-element">pre</a><a class="noindex" href="the-progress-element.html#the-progress-element">progress</a><a class="noindex" href="the-q-element.html#the-q-element">q</a><a class="noindex" href="the-rp-element.html#the-rp-element">rp</a><a class="noindex" href="the-rt-element.html#the-rt-element">rt</a><a class="noindex" href="the-ruby-element.html#the-ruby-element">ruby</a></li> </ul><ul><li><a class="noindex" href="the-s-element.html#the-s-element">s</a><a class="noindex" href="the-samp-element.html#the-samp-element">samp</a><a class="noindex" href="#the-script-element">script</a><a class="noindex" href="the-section-element.html#the-section-element">section</a><a class="noindex" href="the-select-element.html#the-select-element">select</a><a class="noindex" href="the-small-element.html#the-small-element">small</a><a class="noindex" href="the-source-element.html#the-source-element">source</a><a class="noindex" href="the-span-element.html#the-span-element">span</a></li> </ul><ul><li><a class="noindex" href="the-strong-element.html#the-strong-element">strong</a><a class="noindex" href="the-style-element.html#the-style-element">style</a><a class="noindex" href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sub</a><a class="noindex" href="the-summary-element.html#the-summary-element">summary</a><a class="noindex" href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sup</a></li> </ul><ul><li><a class="noindex" href="the-table-element.html#the-table-element">table</a><a class="noindex" href="the-tbody-element.html#the-tbody-element">tbody</a><a class="noindex" href="the-td-element.html#the-td-element">td</a><a class="noindex" href="the-textarea-element.html#the-textarea-element">textarea</a><a class="noindex" href="the-tfoot-element.html#the-tfoot-element">tfoot</a><a class="noindex" href="the-th-element.html#the-th-element">th</a><a class="noindex" href="the-thead-element.html#the-thead-element">thead</a><a class="noindex" href="the-time-element.html#the-time-element">time</a><a class="noindex" href="the-title-element.html#the-title-element">title</a></li> </ul><ul><li><a class="noindex" href="the-tr-element.html#the-tr-element">tr</a><a class="noindex" href="the-track-element.html#the-track-element">track</a><a class="noindex" href="the-u-element.html#the-u-element">u</a><a class="noindex" href="the-ul-element.html#the-ul-element">ul</a><a class="noindex" href="the-var-element.html#the-var-element">var</a><a class="noindex" href="the-video-element.html#the-video-element">video</a><a class="noindex" href="the-wbr-element.html#the-wbr-element">wbr</a></li> </ul><ul class="jumpIndexA-other"><li><a class="noindex" href="global-attributes.html#global-attributes">global attributes</a><a class="noindex" href="index-of-terms.html#index-of-terms">terms</a></li> </ul></div> </div> <script src="jump-indexes.js"> </script><p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p> <h1>HTML5</h1> </div> <div class="prev_next"> <a href="scripting-1.html">&slarr; 4.3 Scripting</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-noscript-element.html">4.3.2 The noscript element &srarr;</a> <ol class="toc"><li><ol><li><ol><li><a href="the-script-element.html#the-script-element"><span class="secno">4.3.1</span> The <code>script</code> element</a> <ol><li><a href="the-script-element.html#scriptingLanguages"><span class="secno">4.3.1.1</span> Scripting languages</a><li><a href="the-script-element.html#restrictions-for-contents-of-script-elements" id="4.3.1.2-restrictions-for-contents-of-script-elements"><span class="secno">4.3.1.2</span> Restrictions for contents of <code>script</code> elements</a><li><a href="the-script-element.html#inline-documentation-for-external-scripts" id="4.3.1.3-inline-documentation-for-external-scripts"><span class="secno">4.3.1.3</span> Inline documentation for external scripts</a></ol></ol></ol></ol></div> <h4 id="the-script-element"><span class="secno">4.3.1</span> The <dfn id="script"><code>script</code></dfn> element</h4> <dl class="element"><dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-categories" id="element-dfn-categories_7" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#metadata-content-0" id="metadata-content_12">Metadata content</a>.</dd> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#flow-content-1" id="flow-content_14">Flow content</a>.</dd> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#phrasing-content-1" id="phrasing-content_16">Phrasing content</a>.</dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-contexts" id="element-dfn-contexts_7" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="http://dev.w3.org/html5/spec/single-page.html#metadata-content-0" id="metadata-content_13">metadata content</a> is expected.</dd> <dd>Where <a href="http://dev.w3.org/html5/spec/single-page.html#phrasing-content-1" id="phrasing-content_17">phrasing content</a> is expected.</dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-content-model" id="element-dfn-content-model_7" title="element-dfn-content-model">Content model</a>:</dt> <dd>If there is no <code title="attr-script-src"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-src" id="src_1">src</a></code> attribute, depends on the value of the <code title="attr-script-type"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-type" id="type_6">type</a></code> attribute, but must match <a href="http://dev.w3.org/html5/spec/single-page.html#restrictions-for-contents-of-script-elements" id="script-content-restrictions">script content restrictions</a>.</dd> <dd>If there <em>is</em> a <code title="attr-script-src"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-src" id="src_2">src</a></code> attribute, the element must be either empty or contain only <a href="http://dev.w3.org/html5/spec/single-page.html#inline-documentation-for-external-scripts" id="script-documentation">script documentation</a> that also matches <a href="http://dev.w3.org/html5/spec/single-page.html#restrictions-for-contents-of-script-elements" id="script-content-restrictions_0">script content restrictions</a>.</dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-attributes" id="element-dfn-attributes_7" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#global-attributes" id="global-attributes_7">Global attributes</a></dd> <dd><code title="attr-script-src"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-src" id="src_3">src</a></code></dd> <dd><code title="attr-script-async"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-async" id="async">async</a></code></dd> <dd><code title="attr-script-defer"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-defer" id="defer">defer</a></code></dd> <dd><code title="attr-script-type"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-type" id="type_7">type</a></code></dd> <dd><code title="attr-script-charset"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-charset" id="charset_10">charset</a></code></dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-dom" id="element-dfn-dom_7" title="element-dfn-dom">DOM interface</a>:</dt>  <dd> <pre class="idl"> interface <dfn id="htmlscriptelement">HTMLScriptElement</dfn> : <a href="http://dev.w3.org/html5/spec/single-page.html#htmlelement" id="htmlelement_12">HTMLElement</a> { attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-script-src" title="dom-script-src">src</a>; attribute boolean <a href="http://dev.w3.org/html5/spec/single-page.html#dom-script-async" title="dom-script-async">async</a>; attribute boolean <a href="http://dev.w3.org/html5/spec/single-page.html#dom-script-defer" title="dom-script-defer">defer</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-script-type" title="dom-script-type">type</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-script-charset" title="dom-script-charset">charset</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-script-text" title="dom-script-text">text</a>; }; </pre></dd> </dl><p>The <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> element allows authors to include dynamic script and data blocks in their documents. The element does not <a href="http://dev.w3.org/html5/spec/single-page.html#represents" title="represents">represent</a> content for the user.</p> <p>When used to include dynamic scripts, the scripts may either be embedded inline or may be imported from an external file using the <code title="attr-script-src"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-src" id="src_4">src</a></code> attribute. If the language is not that described by "<code title="">text/javascript</code>", then the <code title="attr-script-type"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-type" id="type_8">type</a></code> attribute must be present, as described below. Whatever language is used, the contents of the <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element"> script</a></code> element must conform with the requirements of that language's specification.</p> <p>When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the <code title="attr-script-type"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-type" id="type_9">type</a></code> attribute, the <code title="attr-script-src"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-src" id="src_5">src</a></code> attribute must not be specified, and the contents of the <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> element must conform to the requirements defined for the format used.</p> <p>The <dfn id="attr-script-type" title="attr-script-type"><code>type</code></dfn> attribute gives the language of the script or format of the data. If the attribute is present, its value must be a <a href="http://dev.w3.org/html5/spec/single-page.html#valid-mime-type" id="valid-mime-type_3">valid MIME type</a>. The <code title="">charset</code> parameter must not be specified. The default, which is used if the attribute is absent, is "<code title="">text/javascript</code>".</p> <p>The <dfn id="attr-script-src" title="attr-script-src"><code>src</code></dfn> attribute, if specified, gives the address of the external script resource to use. The value of the attribute must be a <a href="http://dev.w3.org/html5/spec/single-page.html#valid-non-empty-url-potentially-surrounded-by-spaces" id="valid-non-empty-url-potentially-surrounded-by-spaces_2">valid non-empty URL potentially surrounded by spaces</a> identifying a script resource of the type given by the <code title="attr-script-type"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-type" id="type_10">type</a></code> attribute, if the attribute is present, or of the type "<code title="">text/javascript</code>", if the attribute is absent. A resource is a script resource of a given type if that type identifies a scripting language and the resource conforms with the requirements of that language's specification.</p> <p>The <dfn id="attr-script-charset" title="attr-script-charset"><code>charset</code></dfn> attribute gives the character encoding of the external script resource. The attribute must not be specified if the <code title="attr-script-src"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-src" id="src_6">src</a></code> attribute is not present. If the attribute is set, its value must be a valid character encoding name, must be an <a href="http://dev.w3.org/html5/spec/single-page.html#ascii-case-insensitive" id="ascii-case-insensitive_10">ASCII case-insensitive</a> match for the <a href="http://dev.w3.org/html5/spec/single-page.html#preferred-mime-name" id="preferred-mime-name_1">preferred MIME name</a> for that encoding, and must match the encoding given in the <code title="">charset</code> parameter of the <a href="http://dev.w3.org/html5/spec/single-page.html#content-type" title="Content-Type">Content-Type metadata</a> of the external file, if any. <a href="http://dev.w3.org/html5/spec/single-page.html#refsIANACHARSET">[IANACHARSET]</a></p> <p>The <dfn id="attr-script-async" title="attr-script-async"><code>async</code></dfn> and <dfn id="attr-script-defer" title="attr-script-defer"><code>defer</code></dfn> attributes are <a href="http://dev.w3.org/html5/spec/single-page.html#boolean-attribute" id="boolean-attribute_1" title="boolean attribute">boolean attributes</a> that indicate how the script should be executed. The <code title="attr-script-defer"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-defer" id="defer_0">defer</a></code> and <code title="attr-script-async"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-async" id="async_0">async</a></code> attributes must not be specified if the <code title="attr-script-src"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-src" id="src_7">src</a></code> attribute is not present.</p> <p>There are three possible modes that can be selected using these attributes. If the <code title="attr-script-async"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-async" id="async_1">async</a></code> attribute is present, then the script will be executed asynchronously, as soon as it is available. If the <code title="attr-script-async"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-async" id="async_2">async</a></code> attribute is not present but the <code title="attr-script-defer"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-defer" id="defer_1">defer</a></code> attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.</p> <p class="note">The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial, involving a number of aspects of HTML. The implementation requirements are therefore by necessity scattered throughout the specification. The algorithms below (in this section) describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> <a href="http://dev.w3.org/html5/spec/single-page.html#scriptTag">start</a> and <a href="http://dev.w3.org/html5/spec/single-page.html#scriptEndTag">end</a> tags in HTML, <a href="http://dev.w3.org/html5/spec/single-page.html#scriptForeignEndTag"> in foreign content</a>, and <a href="http://dev.w3.org/html5/spec/single-page.html#scriptTagXML">in XML</a>, the rules for the <code title="dom-document-write"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-document-write"> document.write()</a></code> method, the handling of <a href="http://dev.w3.org/html5/spec/single-page.html#scripting">scripting</a>, etc.</p> <p>The <code title="attr-script-defer"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-defer" id="defer_2">defer</a></code> attribute may be specified even if the <code title="attr-script-async"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-async" id="async_3">async</a></code> attribute is specified, to cause legacy Web browsers that only support <code title="attr-script-defer"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-defer" id="defer_3">defer</a></code> (and not <code title="attr-script-async"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-async" id="async_4">async</a></code>) to fall back to the <code title="attr-script-defer"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-defer" id="defer_4">defer</a></code> behavior instead of the synchronous blocking behavior that is the default.</p> <p>Changing the <code title="attr-script-src"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-src" id="src_8">src</a></code>, <code title="attr-script-type"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-type" id="type_11">type</a></code>, <code title="attr-script-charset"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-charset" id="charset_11">charset</a></code>, <code title="attr-script-async"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-async" id="async_5">async</a></code>, and <code title="attr-script-defer"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-defer" id="defer_5">defer</a></code> attributes dynamically has no direct effect; these attribute are only used at specific times described below.</p>   <dl class="domintro"><dt><var title="">script</var> . <code title="dom-script-text"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-script-text">text</a></code> [ = <var title="">value</var> ]</dt> <dd> <p>Returns the contents of the element, ignoring child nodes that aren't <code><a href="http://dev.w3.org/html5/spec/single-page.html#text-0">Text</a></code> nodes.</p> <p>Can be set, to replace the element's children with the given value.</p> </dd> </dl><p class="note">When inserted using the <code title="dom-document-write"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-document-write">document.write()</a></code> method, <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> elements execute (typically synchronously), but when inserted using <code title="dom-innerHTML"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-innerhtml">innerHTML</a></code> and <code title="dom-outerHTML"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-outerhtml">outerHTML</a></code> attributes, they do not execute at all.</p> <div class="example"> <p>In this example, two <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> elements are used. One embeds an external script, and the other includes some data.</p> <pre> <script src="game-engine.js"></script> <script type="text-x-game-map"> ........U.........e o............A....e .....A.....AAA....e .A..AAA...AAAAA...e </script> </pre> <p>The data in this case might be used by the script to generate the map of a video game. The data doesn't have to be used that way, though; maybe the map data is actually embedded in other parts of the page's markup, and the data block here is just used by the site's search engine to help users who are looking for particular features in their game maps.</p> </div> <div class="example"> <p>The following sample shows how a script element can be used to define a function that is then used by other parts of the document. It also shows how a <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> element can be used to invoke script while the document is being parsed, in this case to initialize the form's output.</p> <pre> <script> function calculate(form) { var price = 52000; if (form.elements.brakes.checked) price += 1000; if (form.elements.radio.checked) price += 2500; if (form.elements.turbo.checked) price += 5000; if (form.elements.sticker.checked) price += 250; form.elements.result.value = price; } </script> <form name="pricecalc" onsubmit="return false" onchange="calculate(this)"> <fieldset> <legend>Work out the price of your car</legend> <p>Base cost: £52000.</p> <p>Select additional options:</p> <ul> <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li> <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li> <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li> <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li> </ul> <p>Total: £<output name=result></output></p> </fieldset> <script> calculate(document.forms.pricecalc); </script> </form> </pre></div> <h5 id="scriptingLanguages"><span class="secno">4.3.1.1</span> Scripting languages</h5> <p>The following lists some <a href="http://dev.w3.org/html5/spec/single-page.html#mime-type" id="mime-type_5">MIME type</a> strings and the languages to which they refer:</p> <dl><dt>"<code>application/ecmascript</code>"</dt> <dt>"<code>application/javascript</code>"</dt> <dt>"<code>application/x-ecmascript</code>"</dt> <dt>"<code>application/x-javascript</code>"</dt> <dt>"<code>text/ecmascript</code>"</dt> <dt>"<code>text/javascript</code>"</dt> <dt>"<code>text/javascript1.0</code>"</dt> <dt>"<code>text/javascript1.1</code>"</dt> <dt>"<code>text/javascript1.2</code>"</dt> <dt>"<code>text/javascript1.3</code>"</dt> <dt>"<code>text/javascript1.4</code>"</dt> <dt>"<code>text/javascript1.5</code>"</dt> <dt>"<code>text/jscript</code>"</dt> <dt>"<code>text/livescript</code>"</dt> <dt>"<code>text/x-ecmascript</code>"</dt> <dt>"<code>text/x-javascript</code>"</dt> <dd>JavaScript. <a href="http://dev.w3.org/html5/spec/single-page.html#refsECMA262">[ECMA262]</a></dd> <dt>"<code>text/javascript;e4x=1</code>"</dt> <dd>JavaScript with ECMAScript for XML. <a href="http://dev.w3.org/html5/spec/single-page.html#refsECMA357">[ECMA357]</a></dd> </dl><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>The <code><a href="http://dev.w3.org/html5/spec/single-page.html#textcontent">textContent</a></code> of a <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> element must match the <code title="">script</code> production in the following ABNF, the character set for which is Unicode. <a href="http://dev.w3.org/html5/spec/single-page.html#refsABNF">[ABNF]</a></p> <pre> script = data1 *( escape [ script-start data3 ] "-->" data1 ) [ escape ] escape = "<!--" data2 *( script-start data3 script-end data2 ) data1 = <any string that doesn't contain a substring that matches not-data1> not-data1 = "<!--"  data2 = <any string that doesn't contain a substring that matches not-data2> not-data2 = script-start / "-->"  data3 = <any string that doesn't contain a substring that matches not-data3> not-data3 = script-end / "-->" script-start = lt s c r i p t tag-end script-end = lt slash s c r i p t tag-end lt = %x003C ; U+003C LESS-THAN SIGN character (<) slash = %x002F ; "/" (U+002F) character s = %x0053 ; U+0053 LATIN CAPITAL LETTER S s =/ %x0073 ; U+0073 LATIN SMALL LETTER S c = %x0043 ; U+0043 LATIN CAPITAL LETTER C c =/ %x0063 ; U+0063 LATIN SMALL LETTER C r = %x0052 ; U+0052 LATIN CAPITAL LETTER R r =/ %x0072 ; U+0072 LATIN SMALL LETTER R i = %x0049 ; U+0049 LATIN CAPITAL LETTER I i =/ %x0069 ; U+0069 LATIN SMALL LETTER I p = %x0050 ; U+0050 LATIN CAPITAL LETTER P p =/ %x0070 ; U+0070 LATIN SMALL LETTER P t = %x0054 ; U+0054 LATIN CAPITAL LETTER T t =/ %x0074 ; U+0074 LATIN SMALL LETTER T tag-end = %x0009 ; "tab" (U+0009) tag-end =/ %x000A ; "LF" (U+000A) tag-end =/ %x000C ; "FF" (U+000C) tag-end =/ %x0020 ; U+0020 SPACE tag-end =/ %x002F ; "/" (U+002F) tag-end =/ %x003E ; U+003E GREATER-THAN SIGN (>) </pre> <p>When a <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> element contains <a href="http://dev.w3.org/html5/spec/single-page.html#inline-documentation-for-external-scripts" id="script-documentation_0">script documentation</a>, there are further restrictions on the contents 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>If a <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> element's <code title="attr-script-src"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-src" id="src_9">src</a></code> attribute is specified, then the contents of the <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> element, if any, must be such that the value of the <code title="dom-script-text"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-script-text">text</a></code> IDL attribute, which is derived from the element's contents, matches the <code title="">documentation</code> production in the following ABNF, the character set for which is Unicode. <a href="http://dev.w3.org/html5/spec/single-page.html#refsABNF">[ABNF]</a></p> <pre> documentation = *( *( space / tab / comment ) [ line-comment ] newline ) comment = slash star *( not-star / star not-slash ) 1*star slash line-comment = slash slash *not-newline ; characters tab = %x0009 ; "tab" (U+0009) newline = %x000A ; "LF" (U+000A) space = %x0020 ; U+0020 SPACE star = %x002A ; "*" (U+002A) slash = %x002F ; "/" (U+002F) not-newline = %x0000-0009 / %x000B-10FFFF ; a <a href="http://dev.w3.org/html5/spec/single-page.html#unicode-character" id="unicode-character_2">Unicode character</a> other than "LF" (U+000A) not-star = %x0000-0029 / %x002B-10FFFF ; a <a href="http://dev.w3.org/html5/spec/single-page.html#unicode-character" id="unicode-character_3">Unicode character</a> other than "*" (U+002A) not-slash = %x0000-002E / %x0030-10FFFF ; a <a href="http://dev.w3.org/html5/spec/single-page.html#unicode-character" id="unicode-character_4">Unicode character</a> other than "/" (U+002F) </pre> <p class="note">This corresponds to putting the contents of the element in JavaScript comments.</p> <p class="note">This requirement is in addition to the earlier restrictions on the syntax of contents of <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-script-element">script</a></code> elements.</p> <div class="example"> <p>This allows authors to include documentation, such as license information or API information, inside their documents while still referring to external script files. The syntax is constrained so that authors don't accidentally include what looks like valid script while also providing a <code title="attr-script-src"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-script-src" id="src_10">src</a></code> attribute.</p> <pre> <script src="cool-effects.js"> // create new instances using: // var e = new Effect(); // start the effect using .play, stop using .stop: // e.play(); // e.stop(); </script> </pre></div>