Scripts (§18)

Noscript nitpicking (§18.3.1)

An HTML 4.0 compliant Web browser that cannot render scripts must render contents of a <noscript> element. Compliant Web browsers that can render scripts should render contents of a <noscript> element when scripting is disabled.

The standard also says Web browsers should render <noscript> after a script it could not render earlier in a document. This feature is of questionable desirability, and is rarely observed in practice.

Example:

<script type="application/x-fakescript"><!--
// There is no such thing as FakeScript.
alert("I should not be running a FakeScript script!");
document.writeln('<p><em>This Web browser executed a FakeScript script.<\/em><\/p>');
// -->
</script>
<noscript>
<p>Technically, your Web browser should render this line whether or not scripting is enabled.</p>
</noscript>

Your Web browser renders it like this:

Content types

The type attribute specifies the content type of a script (that is, what language the script is in).

On 27 June 2005, the IETF has at last registered content types for JavaScript, application/javascript, application/ecmascript, text/javascript (marked obsolete), and text/ecmascript (marked obsolete). Examples in the HTML 4.0 specification incorrectly used then‐unregistered content type text/javascript for JavaScript instead of well‐established though unofficial content type application/x-javascript. Using a subtype of text for code to be executed instead of text for humans to read was a mistake and can cause problems. Examples also incorrectly use text/vbscript (instead of application/x-vbscript) and text/tcl (instead of application/x-tcl).

The type attribute replaces the ill‐defined language attribute used by older browsers. HTML 4.0 simultaneously introduces language for compatibility, and deprecates it in favor of type.

Example:

<div id="validtypes">
<p>This Web browser executes scripts with these valid content types:</p>

<script type="application/javascript"><!--
// Correct but rarely supported type for JavaScript
if (document.createTextNode) {
// the standards-compliant DOM way
var newPara = document.createElement("p");

var textNode = document.createTextNode("\u2022 ");
newPara.appendChild(textNode);

var codeNode = document.createElement("code");
newPara.appendChild(codeNode);

textNode = document.createTextNode("application/javascript");
codeNode.appendChild(textNode);

var div = document.getElementById("validtypes");
div.appendChild(newPara);
} else {
// the old DHTML way
document.writeln("<p>&bull; <code>application/javascript<\/code> <i>(without the <abbr>DOM<\/abbr>)<\/i><\/p>");
}
// -->
</script>
<script type="application/ecmascript"><!--
// Correct but rarely supported type for ECMAscript
// Proposed by ECMAScript standard
var newPara = document.createElement("p");

var textNode = document.createTextNode("\u2022 ");
newPara.appendChild(textNode);

var codeNode = document.createElement("code");
newPara.appendChild(codeNode);

textNode = document.createTextNode("application/ecmascript");
codeNode.appendChild(textNode);

var div = document.getElementById("validtypes");
div.appendChild(newPara);
// -->
</script>
<script type="application/x-vbscript"><!--
' Correct unregistered type for VBScript
option explicit
dim newPara, textNode, codeNode, div

set newPara = document.createElement("p")
set textNode = document.createTextNode(ChrW(&H2022) + " ")
newPara.appendChild(textNode)

set codeNode = document.createElement("code")
newPara.appendChild(codeNode)

set textNode = document.createTextNode("application/x-vbscript")
codeNode.appendChild(textNode)

set div = document.getElementById("validtypes")
div.appendChild(newPara)
' -->
</script>
<script type="application/x-tcl"><!--
# Correct unregistered media type for Tcl.
# I know of no Web browsers that run Tcl.
document writeln "<p>&bull; <i><code>text/tcl<\/code><\/i><\/p>"
# -->
</script>
<script type="application/x-perlscript"><!--
# Correct unregistered media type for PerlScript
# I know of no Web browsers that run PerlScript,
# but some Web servers can generate page content with it.
$window->document->writeln("<p>&bull; <code>application/x-perlscript<\/code><\/p>");
# -->
</script>
<script type="application/x-cobolscript"><!--
* You youngsters are so spoiled.
* Back in the day, we wrote Web pages on punched cards...
 IDENTIFICATION DIVISION.
 PROGRAM-ID. Test_COBOLScript.
 DATA DIVISION.
 WORKING-STORAGE DIVISION.
 PROCEDURE DIVISION.
 INVOKE HOST "document.write" USING BY VALUE "<p>&bull; <code>application/x-cobolscript<".
 INVOKE HOST "document.write" USING BY VALUE "/code><".
 INVOKE HOST "document.write" USING BY VALUE "/p>"
 END PROGRAM.
* -->
</script>
</div>
<div id="obsoletetypes">
<p>This Web browser executes scripts with these valid, obsolete content types:</p>

<script type="text/javascript"><!--
// Historically misused for JavaScript
// Registered as obsolete in 2005
if (document.createTextNode) {
// the standards-compliant DOM way
var newPara = document.createElement("p");

var textNode = document.createTextNode("\u2022 ");
newPara.appendChild(textNode);

var codeNode = document.createElement("code");
newPara.appendChild(codeNode);

textNode = document.createTextNode("text/javascript");
codeNode.appendChild(textNode);

var div = document.getElementById("obsoletetypes");
div.appendChild(newPara);
} else {
// the old DHTML way
document.writeln("<p>&bull; <code>text/javascript<\/code> <i>(without the <abbr>DOM<\/abbr>)<\/i><\/p>");
}
// -->
</script>
<script type="text/ecmascript"><!--
// Poorly-chosen default for scripts in SVG
// Registered as obsolete in 2005
var newPara = document.createElement("p");

var textNode = document.createTextNode("\u2022 ");
newPara.appendChild(textNode);

var codeNode = document.createElement("code");
newPara.appendChild(codeNode);

textNode = document.createTextNode("text/ecmascript");
codeNode.appendChild(textNode);

var div = document.getElementById("obsoletetypes");
div.appendChild(newPara);
// -->
</script>
<script type="application/x-javascript"><!--
// Widely-accepted unregistered type for JavaScript
// Used since the days of Netscape 3.x
if (document.createTextNode) {
// the standards-compliant DOM way
var newPara = document.createElement("p");

var textNode = document.createTextNode("\u2022 ");
newPara.appendChild(textNode);

var codeNode = document.createElement("code");
newPara.appendChild(codeNode);

textNode = document.createTextNode("application/x-javascript");
codeNode.appendChild(textNode);

var div = document.getElementById("obsoletetypes");
div.appendChild(newPara);
} else {
// the old DHTML way
document.writeln("<p>&bull; <code>application/x-javascript<\/code> <i>(without the <abbr>DOM<\/abbr>)<\/i><\/p>");
}
// -->
</script>
<script type="application/x-ecmascript"><!--
// Recommended by ECMAScript standard
// To be replaced by application/ecmascript
var newPara = document.createElement("p");

var textNode = document.createTextNode("\u2022 ");
newPara.appendChild(textNode);

var codeNode = document.createElement("code");
newPara.appendChild(codeNode);

textNode = document.createTextNode("application/x-ecmascript");
codeNode.appendChild(textNode);

var div = document.getElementById("obsoletetypes");
div.appendChild(newPara);
// -->
</script>
</div>
<div id="invalidtypes">
<p>This Web browser executes scripts with these unregistered content types:</p>

<script type="text/fakescript"><!--
alert("I should not be running a text/fakescript script!");
document.writeln('<p>&bull; <em>text/fakescript<\/em><\/p>');
// -->
</script>
<script type="text/jscript"><!--
// Microsoft's proprietary version
if (document.createTextNode) {
// the standards-compliant DOM way
var newPara = document.createElement("p");

var textNode = document.createTextNode("\u2022 ");
newPara.appendChild(textNode);

var codeNode = document.createElement("code");
newPara.appendChild(codeNode);

textNode = document.createTextNode("text/jscript");
codeNode.appendChild(textNode);

var div = document.getElementById("invalidtypes");
div.appendChild(newPara);
} else {
// the old DHTML way
document.writeln("<p>&bull; <code>text/jscript<\/code> <i>(without the <abbr>DOM<\/abbr>)<\/i><\/p>");
}
// -->
</script>
<script type="text/livescript"><!--
// iCab's alias
if (document.createTextNode) {
// the standards-compliant DOM way
var newPara = document.createElement("p");

var textNode = document.createTextNode("\u2022 ");
newPara.appendChild(textNode);

var codeNode = document.createElement("code");
newPara.appendChild(codeNode);

textNode = document.createTextNode("text/livescript");
codeNode.appendChild(textNode);

var div = document.getElementById("invalidtypes");
div.appendChild(newPara);
} else {
// the old DHTML way
document.writeln("<p>&bull; <code>text/livescript<\/code> <i>(without the <abbr>DOM<\/abbr>)<\/i><\/p>");
}
// -->
</script>
<script type="text/vbscript"><!--
option explicit
dim newPara, textNode, codeNode, div

set newPara = document.createElement("p")
set textNode = document.createTextNode(ChrW(&H2022) + " ")
newPara.appendChild(textNode)

set codeNode = document.createElement("code")
newPara.appendChild(codeNode)

set textNode = document.createTextNode("text/vbscript")
codeNode.appendChild(textNode)

set div = document.getElementById("invalidtypes")
div.appendChild(newPara)
' -->
</script>
<script type="text/vbs"><!--
option explicit
dim newPara, textNode, codeNode, div

set newPara = document.createElement("p")
set textNode = document.createTextNode(ChrW(&H2022) + " ")
newPara.appendChild(textNode)

set codeNode = document.createElement("code")
newPara.appendChild(codeNode)

set textNode = document.createTextNode("text/vbs")
codeNode.appendChild(textNode)

set div = document.getElementById("invalidtypes")
div.appendChild(newPara)
' -->
</script>
<script type="text/tcl"><!--
# I know of no Web browsers that run Tcl.
# The standard mentions text/tcl as an example value
# for the Content-Script-Type header.
document writeln "<p>&bull; <i><code>text/tcl<\/code><\/i><\/p>"
# -->
</script>
</div>

Your Web browser renders it like this:

This Web browser executes scripts with these valid content types:

This Web browser executes scripts with these valid, obsolete content types:

This Web browser executes scripts with these unregistered content types:

Related Mozilla bug reports: text-ecmascript.

Deferring execution

The defer attribute marks scripts that may be executed after the rest of a page has finished rendering. It is used for scripts that do not generate document content (using methods like document.writeln() functions in the scripts above).

Deferring document.writeln() functions until a page is fully loaded would cause generated content to be appended to the end of the page. However, one could defer a script that used DOM methods to insert content within a particular element in a document.

Example:

<script type="text/javascript"><!--
var defer_support = "used";
// -->
</script>
<script type="text/javascript" defer><!--
// may be executed after the following script
var defer_support = "ignored";
// -->
</script>
<script type="text/javascript"><!--
document.writeln("<p>The <code>defer<\/code> attribute was ", defer_support, ".<\/p>");
// -->
</script>

Your Web browser renders it like this:

Related Mozilla bug reports: Defer.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.