Re: Scripts in (X)HTML (was: Re: [VE][64] Error Message Feedback)

Philip TAYLOR wrote:
> Jukka K. Korpela wrote:
>> On Sun, 30 Jan 2005, DjMafia wrote:
>>> <script type="text/javascript"> if (!chatterbox || chatterbox != 'ok') {
>>> var txt = "This <a href="http://chatter.flooble.com/">flooble
>>> chatterbox</a> is"
>>
>> Quick answer: put all script code into an external file that you refer to
>> via a src attribute in a script element. Alternatively, unless you have
>> some particular reason to use XHTML, switch to HTML, where the problem
>> is smaller (you only need to worry about things like </a>, which you
>> can write as <\/a> in JavaScript).

In fact, given the script initially provided, you really must use HTML 
for it to work as intended.

Firstly, if you're going to use XHTML served as text/html, you should 
hide the script from legacy user agents and also escape it propely as 
CDATA for use within real XHTML.

<script type="text/javascript"><!--//--><![CDATA[//><!--
         ...
//--><!]]></script>

That is designed to work for both HTML user agents (which is what you 
get when you serve as text/html) and XHTML user agents (when served as 
application/xhtml+xml or other XML MIME type).  If your just going to 
use HTML (as recommended), then just use:

<script type="text/javascript"><!--
         ...
//--></script>

However, it is recommended that you include the script within an 
external file which solves the errors you were recieving, can also then 
be reused for any document.

Although, as I said, there are other problems that need to be looked at, 
especially if you're going to continue using XHTML.  From the original 
script you provided us with:

>>> <noscript>
>>> <p><img src="http://img.flooble.com/images/chatter/chaticon.gif" 
>>> align="absbottom" alt="" 
>>> onclick="window.open('http://chatter.flooble.com/chatter.php?id=Mafia63&amp;sid=2021655&amp;popup=true&amp;w=480&amp;h=400','flooblechatterbox','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no,width=480,height=400'); 
>>> return true" />

There are several problems with this section:
* Since this is in a <noscript> section, any user agent that renders it
   is not going to be able to understand the onclick attribute, thus
   defeating the whole purpose of a noscript section.

* For accessibility reasons, you should also avoid opening unrequested
   popup windows.  Also, some users (including myself) configure user
   agents to never open new windows.  So if you're application requires
   the new window to function, then it will fail.  If it doesn't require
   the new window, then you really have no reason to use one anyway.

* The alternate text provided is quite useless for any user agent that
   doesn't support images.  It's obviously not a purely presentational
   image since it supposed to serve a function when clicked.

* The align attribute is presentational, and is better handled through
   stylesheets.

So, that markup would be better replaced with:

<p>
<a href="http://chatter.flooble.com/chatter.php?id=Mafia63...">
   <img src="http://img.flooble.com/images/chatter/chaticon.gif"
        alt="Chat" /></a>
</p>

>>> Talk in my <a href="http://chatter.flooble.com/">flooble chatterbox, a free 
>>> javascript chat tag board / shoutbox / tagboard program for your xanga, diary, 
>>> blogger or weblog</a><br />
>>> <a href="http://perplexus.info/about.php">free puzzle of the day</a></p>
>>> </noscript>

Although, since it seems to link to a JavaScript-only driven chat 
service, there's really no point in providing this alternate <noscript> 
content, unless suitable alternate content is provided for the chat 
service also, or it at least degrades gracefully and is still usable 
without script enabled.

>>> <script type="text/javascript"> if (!chatterbox || chatterbox != 'ok') {
>>> var txt = "This <a href="http://chatter.flooble.com/">flooble chatterbox</a> is"
>>> document.write(txt);
>>> document.write(' temporarily unavailable. It will be back up shortly.'); } </script>

document.write() does not work for XHTML documents when they are treated 
correctly as XML [1].  The basic reason is because XML documents must 
remain well formed and document.write has the ability to break that. 
Not only that, but document.write is just not recommended anyway, 
regardless of whether you're using HTML or XHTML.  It is deprecated in 
favour is using the standardised DOM methods.  Therefore, you should use 
something like the following instead.

You need an element in your document within which you will insert the 
new content, and it needs to be accessible from the script.  This is 
most easily achieved using an element with an id.

(Note: If you're going to use XHTML, you should use the namespace aware 
methods instead, when served as XML.  The following will work for HTML)

Within the markup:

<div id="xxx">
     <!-- The script will insert the new elements here -->
</div>


Then, within the script:

var x = document.getElementById("xxx");
x.appendChild(document.createTextNode("This "))
var a = document.createElement("a");
a.setAttribute("href", "http://chatter.flooble.com/");
x.appendChild(a);
x.appendChild(document.createTextNode(" is temporarily unavailable..."))

> Not convinced this is really the cause of the problem; surely it is the
> double use of '"' that is the problem -- used first as delimiter
> for the var txt assignment, and then again within the RHS of the
> assignment to delimit the replacement text for the href.

The quotes, in the case of the original script provided, will likely 
cause a few JavaScript errors; but since the validator does not know 
JavaScript, it only knows SGML and XML, they will not have any effect on 
markup validation.

[1] http://ln.hixie.ch/?start=1091626816&count=1

-- 
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/    Rediscover the Web
http://SpreadFirefox.com/   Igniting the Web

Received on Monday, 31 January 2005 02:57:50 UTC