Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:
Last commented:

Dynamic Drive Blog Here

Updating a JavaScript to be XHTML compliant

Date: 05/14/2006 | By ddadmin | Comments: 22

As a webmaster you've undoubtedly noticed the increasing shift in coding practices from HTML to XHTML on the web. If you're a professional web designer, you've probably even heard it first hand from your clients who demand their web pages be XHTML compliant. I get quite a lot of emails on a monthly basis asking for help in making a webpage that contains a DHTML script to be XHTML compliant. A common misconception is that this is a difficult process, which can be no further from the truth.

There are two ways to go about making a DHTML or JavaScript XHTML compliant, both should take no more than a few moments of your time.

Method 1: For inline JavaScript, wrap the code itself in the CDATA tag coupled with some clever use of JavaScript comments to let the validator know the content within the script should not be parsed for XHTML validity:

<script type="text/javascript">
/*<![CDATA[*/
//The JavaScript code itself
//The JavaScript code itself
// etc...
/*]]>*/
</script>

As you can see, just wrap any inline JavaScript with the parts in red, and you're done. You may also choose to use an alternate version of the CDATA/ JavaScript comment code:

<script type="text/javascript">
//<![CDATA[
//The JavaScript code itself
//The JavaScript code itself
// etc...
//]]>
</script>

Either code wrappers work.

Method 2: The other method for making your JavaScript XHTML compliant is to remove the entire script from your page, and place its contents inside an external JavaScript file, then reference this file on your page:

<script type="text/javascript" src="myscript.js">
//Comment here
//Comment here
</script>

Where "myscript.js" contains the script itself minus the surrounding SCRIPT tags. Comments within the script tags are still allowed.

And there you have it. Now a JavaScript no longer has to trip up the XHTML validity of your pages!

Your Comments (22)

Comment Pages 1 of 3 pages  1 2 3 >

For method 2, please pay attention to the character set specified in the JavaScript source file. If your JavaScript source file contains non-English characters (say Chinese Big-5), you may need to specify 'script'-tag like that:

<script type="text/javascript" src="myscript.js" charset="big5">
// comment
</script> 


Hope this can help you when dealing with such kind of problems.
Posted by Joe on 06/04, 10:08 PM
method 2 is simple and best for common use, I use it often.
Posted by Atul on 12/15, 02:01 AM
Thnx Joe!
Posted by Thinkbasic on 12/18, 06:21 AM
This method doesn't seem to work for me. I'm using the Explorer Destroyer code with this, and it's not working.
Posted by MarioGamer99 on 12/21, 12:35 PM
Awsome. I can't count the times in which I had to trash javascript because it was not compliant. Great!
Posted by roScripts on 12/23, 01:43 PM
Can I use this code on my wordpress blog?
Posted by Suresh on 12/29, 03:16 AM
Nice and easy to implement, you guys are great !
Posted by Richard S on 12/29, 07:25 PM
whats the actual diff. between method 1 and 2 and what is "CDATA"?

Waiting for some answer...
Posted by Edu Guru on 01/17, 07:28 AM
Wow, cool. Thanks.
Posted by ivan on 03/18, 06:18 PM
All text in an XML document will be parsed by the parser. Only text inside a CDATA section will be ignored by the parser.
Posted by Doode on 03/22, 06:29 AM

Comment Pages 1 of 3 pages  1 2 3 >

Commenting is not available in this weblog entry.
Sponsors

Advertise Here

Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.