Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book

This chapter is from the book

Managing JavaScript in an XHTML Site

Perhaps the most frustrating thing about keeping the XHTML 1.0 documents on WebReview.com clean came about when the advertising code was delivered. The ad code is created by an outside source, and like so many professional companies, standards aren't an issue. The HTML they generate doesn't conform to any particular DTD, and they use a combination of Iframes and JavaScript to deliver the ads.

Listing 3.2 shows the markup the ad folk submitted to me.

Listing 3.2 Markup From an External Source

<IFRAME WIDTH=120 HEIGHT=60 MARGINWIDTH=0 MARGINHEIGHT=0 
HSPACE=0 VSPACE=0
FRAMEBORDER=0 SCROLLING=no BORDERCOLOR=#000000 
SRC="http://newads.cmpnet.com/html.ng/
site=webreview
&pagepos=topleftbutton"> 
<SCRIPT LANGUAGE="JavaScript" 
SRC="http://newads.cmpnet.com/js.ng/Params.richmedia=yes
&site=webreview
&pagepos=topleftbutton">
</SCRIPT>
</IFRAME>

Taking a quick look at this markup, you can already tell that it doesn't conform to the more rigid rules derived from XML and found in XHTML (See Chapter 1). Furthermore, when you use recommended markup, such as XHTML 1.0 or HTML 4, it creates some concerns. In this case, the problems are two-fold. First, the introduction of any proprietary or ill-used tag or attribute causes the document to be invalid (although it will still likely operate). Second, the introduction of the inline JavaScript that hasn't been escaped also causes the page to be invalid.

When you use JavaScript with XHTML, it's ideal if you can put your JavaScript into a separate document. This only works with scripts that would normally be embedded, however. (Inline scripting is another story.)

In the case of inline scripts, you have to escape special characters in order for the document to validate. The peskiest of these characters is the ampersand (&), which is used frequently in JavaScript. So you'll need to escape it whenever possible.

To escape character entities in JavaScript by hand, follow these steps:

  1. Open master_script.html, which says the following

    <iframe width="120" height="60" marginwidth="0" 
    marginheight="0" 
    frameborder="0" scrolling="no"
    src="http://newads.cmpnet.com/html.ng/site=webreview
    &pagepos=topleftbutton">
    <script type="text/javascript" language="JavaScript"
    src="http://newads.cmpnet.com/js.ng/Params.richmedia=yes
    &site=webreview
    &pagepos=topleftbutton">
    
    </script>
    </iframe>:
  2. Open master_script_escaped.html, which contains the following:<iframe width="120" height="60" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"

    src="http://newads.cmpnet.com/html.ng/site=webtechniques&amp;
    pagepos=topleftbutton">
    <script type="text/javascript" language="JavaScript" 
    src="http://newads.cmpnet.com/js.ng/Params.richmedia=yes&amp;
    site=webtechniques&amp;pagepos=topleftbutton">
    
    </script>
    </iframe>
  3. Manually escape the attributes or use HTML Tidy to escape the character entities.

    HTML Tidy is a faster and happier method, so I use the Tidy plug-in to HTML-Kit from Chami. The figure shows the conversion of the master_script.html to an escaped version.

    Figure 3.8 Convert the document by using the HTML Tidy plug-in in HTML-Kit from Chami.

    NOTE

    HTML Tidy is an excellent tool to test, repair, and convert files. Check it out at http://www.w3.org/. HTML-Kit can be found at http://www.chami.com/.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus