Posts Tagged ‘javascript’

XHTML validation and Javascript : CDATA

Tuesday, September 22nd, 2009

With HTML pages on the web you can include the required Javascript between tags. The W3C validator ignores the Javascript content. The same is not true for XHTML where the code between the script tags is considered to be PCDATA (parsed character data) which is therefore processed by the validator.

The result is a break of the page validation. To fix this problem, one solution is to make the Javascript external to the page. Another solution is to  place the Javascript code within a CDATA tag. However some older web browsers don’t understand the CDATA tag and this breaks the Javascript in those browsers.

If the CDATA tag is commented out, the Javascript code is handled correctly both by newer browsers and by validators and ignored by older browsers and the page is displayed as expected in all cases.

<script type=”text/javascript”>
/* <![CDATA[ */
// content of your Javascript goes here
/* ]]> */
</script>

A guide about this topic has been written by Stephen Chapman on the About.com:Javascript website.

Tags: , , ,
Posted in Programming | Comments Off

Unobtrusive JavaScript

Saturday, August 1st, 2009

The following HTML code shows the basics of modern javascript programming :

<html>
<head>
<script type=”text/javascript” src=”helloworld.js”></script>
</head>
<body>
<p id=”hello”></p>
</body>
</html>

The concept is to keep the javascript separate from the HTML of the web page and to just use a script tag in the head section of the webpage to link the two together. An id tag is used to identify the part of the body of the web page that should be updated with javascript.

The javascript code is shown below :

function sayHello() {
document.getElementById(’hello’).innerHTML = ‘Hello World’;
}
window.onload = sayHello;

In the past the function document.write() was used for this purpose, but this is “bad form” and not valid xhtml code. To adhere to strict xhtml code, then it would be better to create elements using document.createElement and element.appendChild (and other native DOM node manipulation functions). For inserting text into an existing element, innerHTML is still acceptable code (and completely cross-browser). The “all DOM” way requires a lot of extra code, is slower, harder to maintain than simpler method and it needs more bandwidth.

Tags:
Posted in Web Design | Comments Off