JavaScript VN

Changes javascript in XHTML

Extensible HyperText Markup Language( XHTML) is a reformulation of HTML as an application of XML. The rules for writing code in XHTML are stricter than those for HTML, which affects the <script>element when using embedded JavaScript code. Although valid in HTML, the following code block is invalid in XHTML:
<script type=”text/javascript”>
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 HTML, the <script>element has special rules governing how its contents should be parsed; in XHTML, these special rules don’t apply. This means that the less-than symbol (<) in the statement a < b is interpreted as the beginning of a tag, which causes a syntax error because a less-than symbol must not be followed by a space.
There are two options for fixing the XHTML syntax error. The first is to replace all occurrences of he less-than symbol (<) with its HTML entity (<). The resulting code looks like this:

<script type=”text/javascript”>
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>
This code will now run in an XHTML page; however, the code is slightly less readable. Fortunately, there is another approach.
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>
This format works in all modern browsers. Though a little bit of a hack, it validates as XHTML and degrades gracefully for pre-XHTML browsers.

Asynchronous Scripts

HTML5 introduces the asyncattribute for <script>elements. The asyncattribute is similar to defer
in that it changes the way the script is processed.
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>

</body>
</html>
In this code, the second script file might execute before the first, so it’s important that there are no
dependencies between the two. The purpose of specifying an asyncscript 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.
Asynchronous scripts are guaranteed to execute before the page’s loadevent and may execute
before or after DOMContentLoaded(see Chapter 13 for details). Firefox 3.6, Safari 5, and Chrome 7
support asynchronous scripts.

Deferred Scripts of javascript in HTML

HTML 4.01 defines an attribute named deferfor the <script>element. The purpose of deferis

to indicate that a script won’t be changing the structure of the page as it executes
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” defer src=”example1.js”></script>
<script type=”text/javascript” defer src=”example2.js”></script>
</head>
<body>

</body>

</html>

defer attribute was added beginning with Internet Explorer 4, Firefox 3.5, Safari 5, and Chrome 7. All other browsers simply ignore this attribute and treat the script as it normally would. For this reason, it’s still best to put deferred scripts at the bottom of the page.
For XHTML documents, specify the defer attribute as defer=”defer”

Tag Placement javascript in HTML

All <script>elements were placed within the <head>element on a page, such as in this example:

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” src=”example1.js”></script>
<script type=”text/javascript” src=”example2.js”></script>
</head>
<body>

</body>
</html>
All JavaScript references in the <body>element, after the page content, as shown in this example:
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>

<script type=”text/javascript” src=”example1.js”></script>
<script type=”text/javascript” src=”example2.js”></script>
</body>
</html>

JavaScript code inside the script element

Example 1:
<script type=”text/javascript”>
function sayHi(){
alert(“Hi!”);
}
</script>
Example 2: the following code causes an error when loaded into a browser because </script> not string
<script type=”text/javascript”>
function sayScript(){
alert(“</script>”);
}
</script>
This problem can be avoided easily by escaping the “/” character, as in this example:
<script type=”text/javascript”>
function sayScript(){
alert(“<\/script>”);
}
</script>
Example 3:The value of srcis a URL linked
<script type=”text/javascript” src=”example.js”></script>

or if javascrip in XHTML

<script type=”text/javascript” src=”example.js”/>
or
<script type=”text/javascript” src=”http://www.somewhere.com/afile.js”></script>

The script element of javascript in HTML

async—Optional. Indicates that the script should begin downloading immediately but should not prevent other actions on the page such as downloading resources or waiting for other scripts to load. Valid only for external script files. charset— Optional. The character set of the code specified using the srcattribute. This attribute is rarely used, because most browsers don’t honor its value.
defer— Optional. Indicates that the execution of the script can safely be deferred until after the document’s content has been completely parsed and displayed. Valid only for external scripts. Internet Explorer 7 and earlier also allow for inline scripts.language— Deprecated. Originally indicated the scripting language being used by the code block (such as “JavaScript”, “JavaScript1.2”, or “VBScript”). Most browsers ignore this attribute; it should not be used.
src— Optional. Indicates an external file that contains code to be executed.
type— Optional. Replaces language; indicates the content type (also called MIME type) of the scripting language being used by the code block. Traditionally, this value has always been “text/javascript”, though both “text/javascript”and “text/ecmascript”are deprecated. JavaScript files are typically served with the “application/x-javascript”MIME type even though setting this in the typeattribute may cause the script to be ignored. Other values that work in non–Internet Explorer browsers are “application/javascript”and “application/ecmascript”. The typeattribute is still typically set to “text/javascript”by convention and for maximum browser compatibility. This attribute is safe to omit, as “text/javascript”is assumed when missing.

Javascript in HTML

Using the <script> element
Comparing inline and external scripts
Examining how document modes affect JavaScript
Preparing for JavaScript-disabled experiences

Thứ Tư, 21 tháng 8, 2013