Saturday, January 31, 2009

Valid Javascript in XHTML

Some of us, web developers, are trying to stick with the standards established by the W3C for markup documents. We want browsers to interpret our documents in a standard way instead of having to write dirty quirks for each browser (especially Internet Explorer).

In the World Wide Web, we have seen a tendency to shift from HTML 4.01 documents to XHTML pages. Sometimes the transition is easy, bt some other times, things that seemed normal in one specification are invalid in the other.

Let's take a look at the <script></script> tag. We use this commonly to write Javascript code. Sometimes, we need the code to be inside the (X)HTML document instead of having a separate .js file (for whatever reason). When trying to validate XHTML documents that contain Javascript code in the W3C validator, we come upon some strange errors. Let's look at the following example:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>My Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/javascript">

function initScript() {

myArray[0] = "Element 0";
myArray[1] = "Element 1";

for(var i=0;i<myArray.length;i++) {
alert(myArray[i]);
}

}

</script>

</head>

<body onload="javascript:initScript();">
<div>Hello World</div>
</body>

</html>

If we try to validate this document at

http://validator.w3.org/#validate_by_input

we get 6 errors. All of them suggest that the Javascript code is being interpreted by the validator as HTML code (and therefore by a standard-compliant browser). The solution to this problem is to tell the validator/browser that the Javascript code should be interpreted as Character Data (CDATA) and not as some strange HTML entity.

I found different methods online to tell this to the validator, but the best one that I found was at

http://javascript.about.com/library/blxhtml.htm

We enclose the Javascript code using:

/* <![CDATA[ */
Javascript code;
/* ]]> */

For my example, the final document would look like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>My Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/javascript">
/* <![CDATA[ */

function initScript() {

myArray[0] = "Element 0";
myArray[1] = "Element 1";

for(var i=0;i<myArray.length;i++) {
alert(myArray[i]);
}

}

/* ]]> */
</script>

</head>

<body onload="javascript:initScript();">
<div>Hello World</div>
</body>

</html>

1 comment:

  1. Fellas, upcoming time you buy the pill, check with
    your companions whenever they need to have a person.
    This could double up the sale in the anti-impotence treatment Cialis.
    A recent discovering indicates the erectile dysfunction capsule which has pepped up
    the sexual everyday living of men is proving to become
    successful in case of girls struggling from the sexual disinterest.
    The investigate underlines the medication is effective for ladies around it does in the event of
    guys otherwise additional.

    My web blog; buy cialis pills

    ReplyDelete