Categories
JavaScript Writing

Learning JavaScript errata

Recovered from the Wayback Machine.

If wishes were horses, book authors would have a herd. All too often you see the ‘oops’ and such only after the book is in print. In my case, I’ve worked with JavaScript for so long (since the very beginning) I brought along a couple of bad habits that made it into the book.

One new errata that is going in for the book is the following:

Several examples in the book use document.write, but with an XHTML doctype. The document.write or document.writeln functions do not work with XHTML when the page is served with the application/xhtml+XML MIME type. The examples in the book work with the most common browsers because the examples have an .htm extension. These pages are served up with an HTML MIME type, regardless
of which DOCTYPE was used, therefore the use of document.write or innerHTML does not fail. When the page is loaded with an XHTML MIME Type, though, the examples will fail.

The examples will work in the most common browsers, and to ensure they continue to do so, you can change the DOCTYPE to an HTML one, though you’ll need to modify automatic closings such as that on the meta tag (remove the ending ‘/’) if you want them to validate.

The author is apologetic for not explaining this in Chapter 1. The alternative is to use the DOM to create new page elements and append to the document, but since this wasn’t covered until later in the book, document.write was used instead.

Typically, you’ll want to use the DOM, just because this ensures the examples work fully with XHTML, as well as HTML. To see this demonstrated more fully, the author is working on modified examples using DOM calls and ensuring the examples work as XHTML. As soon as these are finished, they will be posted and a note added to this errata page.

In this, the DOCTYPE is XHTML but the page is served up as HTML. As Anne Van Kesteren succinctly puts it it doesn’t matter what DOCTYPE you use if the page is served up as text/html. And yes, I am using document.write and innerHTML, bad me.

I don’t necessarily share in the universal condemnation of document.write or innerHTML, especially when you’re learning. I have 98 examples in the book, and a simple document.write sure saves on book space rather than having to use the DOM to get document, and use create element and create text node and append and yada yada. What I should have done, though, is create a library and make my own version of ‘write’ that is XHTML friendly, and used this. Note, though, that in the book I don’t cover the DOM until chapter 11, so the only alternatives I had were document.write or an alert, and the latter doesn’t work if you’re using focus and blur events.

However, in pages where I used document.write, I should have used an HTML DOCTYPE, and also made mention of document.write and its incompatibility with XHTML. I should also have covered this in more detail in chapter 1. I should have also covered quirks mode in more detail in chapter 1.

As for innerHTML, now that one is open for debate. There’s bunches of Ajax developers who will only give up their innerHTML if you pry if from their cold, dead browser. BUT, it’s also not XHTML friendly, though it is the handiest darn thing (and again, one could create a library alternative).

The reason why these are a problem is they both allow us to add XHTML formatted data directly to the document, but without going through the XHTML validation process. When one serves valid XHTML, one doesn’t want one’s page developer putting crufty XML or HTML into one’s perfectly lovely XML formatted document. Gives one heartburn, causes one to tear hair out, does odd things to one’s browser and so on.

For now, I asked O’Reilly to put in this errata. Next, I’m going through all of the examples and updating them to be more forward looking and using the DOM, only. These will be provided as secondary downloads, because comparing the two–the original example and the modified–is a learning experience in itself.

The use of document.write and innerHTML is incidental to most examples. I only used such to print some result out or demonstrate some other feature of JavaScript. Still, if I’m going to stress best practices, I blew it with both of these. All I can say is I think it is a good book regardless, these errors aren’t that common or that essential, and mea culpa. Twenty lashes with Firebug.

Here’s a discussion on the problem and code workaround. Note that both Google Maps and Google’s adSense use document.write, so I’m in good company–the use of these really are ubiquitous, but NOT a best practice, so no excuse for me.