Asynchronous Scripts
HTML5 introduces the async attribute for <script> elements. The async attribute is similar to defer
in that it changes the way the script is processed. Also similar to defer, async applies only to external
scripts and signals the browser to begin downloading the file immediately. Unlike defer, scripts
marked as async are not guaranteed to execute in the order in which they are specifi ed. For example:
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” async src=”example1.js”></script>
<script type=”text/javascript” async src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</body>
</html>
In this code, the second script fi le might execute before the fi rst, so it’s important that there are no
dependencies between the two. The purpose of specifying an async script is to indicate that the
page need not wait for the script to be downloaded and executed before continuing to load, and it
also need not wait for another script to load and execute before it can do the same.Because of this,
it’s recommended that asynchronous scripts not modify the DOM as they are loading.
The second option for turning this code into a valid XHTML version is to wrap the JavaScript
code in a CDATA section. In XHTML (and XML), CDATA sections are used to indicate areas of
the document that contain free-form text not intended to be parsed. This enables you to use any
character, including the less-than symbol, without incurring a syntax error. The format is as follows:
<script type=”text/javascript”><![CDATA[
function compare(a, b) {
if (a < b) {
alert(“A is less than B”);
} else if (a > b) {
alert(“A is greater than B”);
} else {
alert(“A is equal to B”);
}
}
]]></script>
In XHTML-compliant web browsers, this solves the problem. However, many browsers are still
not XHTML-compliant and don’t support the CDATA section. To work around this, the CDATA
markup must be offset by JavaScript comments:
<script type=”text/javascript”>
//<![CDATA[
function compare(a, b) {
if (a < b) {
alert(“A is less than B”);
} else if (a > b) {
alert(“A is greater than B”);
} else {
alert(“A is equal to B”);
}
}
//]]>
</script>
Any named argument that is not passed into the function is automatically assigned the value
undefined. This is akin to defining a variable without initializing it. For example, if only one
argument is passed into the doAdd() function, then num2 has a value of undefined.
Strict mode makes several changes to how the arguments object can be used. First, assignment,
as in the previous example, no longer works. The value of num2 remains undefined even though
arguments[1] has been assigned to 10. Second, trying to overwrite the value of arguments is a
syntax error. (The code will not execute.)
If two functions are defi ned to have the same name in ECMAScript, it is the last function that
becomes the owner of that name.