document.write and XHTML

T

Thank The Cheese

Registered
Hello everyone,
I have written a tutorial for students about accessible use of JavaScript. One of the sections is on using <noscript> to provide alternative info in case JavaScript has been turned off.

Example page set up here.

The script looks like this:

Code: 
<script type="text/javascript">
<!--
document.write('<select onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;"><option selected="selected">Choose a destination</option><option value="http://www.google.com">Google</option><option value="http://www.apple.com">Apple</option><option value="http://www.w3.org">W3C</option></select>')
-->
</script>

<noscript>
<h1>Choose a Destination:</h1>
<a href="http://www.google.com">Google</a><br />
<a href="http://www.apple.com">Apple</a><br />
<a href="http://www.w3.org">W3C</a>
</noscript>

As you can see, the page generates a select box that uses JavaScript to allow the user to select an option and be taken to that website immediately. If JS has been disabled, then a hypertext version of the menu displays.

A simple example of the power of <noscript> and is made possible by placing the select box code in document.write so that it does not appear if JS has been disabled.

Problem is document.write is no longer valid according to the W3C's 2.0 guidelines, because of incompatibility with XHTML, so I need to update this exercise with something that is more compliant.

The W3C's suggestion on how to fix this is a little bit over my head, as I have very limited knowledge of JavaScript. I just can't seem to make heads or tails of it. I've looked everywhere for a straightforward tutorial on how to achieve the same as above without using document.write but I can't seem to find anything.

I was hoping someone here might be able to help me? Or point me in the right direction to an online tutorial I may have missed.

Any help greatly appreciated! :)
 
Basically it looks like they want you to use the HTML Document Object Model (DOM) instead of just writing your code in that manner. The DOM is the structure of your document and is somewhat like XML in that it has a parent "node" which contains "child" nodes. Each child node can be any of the HTML tags.

I guess(from that webpage) that the DOM has a variable called parentelem which appears to represent the body tag. So you append your tags using the java script to the body tag instead of just writing the code in the HTML directly. Then the browser should know how to display the document based on the DOM.

Who knows why they're doing this, it does seem a lot more complicated to do the same thing.
 
Code: 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>
</head>
<body>
	<script type="text/javascript">
	<!--
	     // Returns an HTML option object with it's value attribute set to url and it's text node
          // set to label. e.g. createOption("http://test.com","Test"); would return an option
          // object equivalent to html looking like this: <option value="http://test.com">Test</option>
		function createOption(url, label){
			var option = document.createElement("option"); // creates an option object with default attributes
			option.setAttribute("value", url); // attributes are within the start html tag
			option.appendChild(document.createTextNode(label)); // appends a text node as a child of option using the value of label
			
			return option;
		}
		
           // create the select object
		var select = document.createElement("select");
          // add an onchange attribute
		select.setAttribute("onchange", "if (this.selectedIndex > 0)" +  
			"location.href=this[this.selectedIndex].value;");

		// append all the option nodes
		select.appendChild(createOption("null", "Select a Site"));
		select.appendChild(createOption("http://google.com", "Google"));
		select.appendChild(createOption("http://www.apple.com","Apple"));
		select.appendChild(createOption("http://www.w3.org","W3C"));
		
           // attach the select to the body of the html document (there can only be one body in valid html)
		document.body.appendChild(select);
	-->
	</script>
	
	<noscript>
	<h1>Choose a Destination:</h1>
	<a href="http://www.google.com">Google</a><br />
	<a href="http://www.apple.com">Apple</a><br />
	<a href="http://www.w3.org">W3C</a>
	</noscript>
</body>
</html>

It is a lot more work, and I don't really know why document.write() isn't supported anymore. However, in all the DHTML stuff I have done I have never used it. The way illustrated is the standard way of modifying a document via DOM, it leaves a lot less room for crappy html generation, which is very possible with document.write().

If you want decent DOM documentation check on Microsoft's MSDN Library. I know what you are thinking, Microsoft doesn't give a shit about compatibility. This is true, and you do have to be careful when you are using that site because there are all sorts of methods and attributes that are shown that don't exist in the W3C standards, however they are nice enough to let you know if a public standard exists for the method/object/property at the bottom of each page.
 
document.write isn't supported in proper xhtml served as application/xhtml+xml as it's very possible to construct documents that are only valid xhmtl !after! the execution of the javascript. If you are serving the xhtml pages as text/html you can still use document.write because your pages are then parsed as html instead of as xhtml.

Try looking at this page http://dtu.mathiesen.info/34531/030-www/xhtml.xhtml for the lowdown on the support of xhmtl in different browsers and how xhtml is mistreated when taught.
 
You must log in or register to reply here.
Back
Top