Using document.write
One of the mainstays of dynamic HTML is the document.write method, which lets you rewrite Web pages on the fly. You can use this method when a page loads, contacting the server using Ajax techniques for instructions on how to write the page. In this way, Web pages can become self-modifying.
Here’s an example, selfModifying.html. This application can display one of two graphic images: a larger image or a smaller one. When opened, this page starts by asking users which image they want, as shown in Figure 11.7.
Figure 11.7: The selfModifying application
If the user clicks the OK button, the Web page is rewritten on the fly to display the larger image, as shown in Figure 11.8.
Figure 11.8: Displaying the larger image
If the user clicks the other button, however, the Web page is rewritten to display the smaller image, as shown in Figure 11.9.
Figure 11.9: Displaying the smaller image
This application uses a <script> element in the page’s <body> element, not the page’s <head> element, because when a script is executed in the <head> element, the <body> element has not been loaded, and so is not accessible. This example starts by displaying the confirmation box shown in Figure 11.7:
<html> <head> <title> A self-modifying Web page </title> </head> <body> <center> <h1> A self-modifying Web page </h1> <script language="JavaScript"> if(confirm("Do you want the larger graphics?")) { . . . If the user clicks the OK button, the code uses document.write to write an <img> element to the page that uses the larger image in this example, image1.jpg:
<html> <head> <title> A self-modifying Web page </title> </head> <body> <center> <h1> A self-modifying Web page </h1> <script language="JavaScript"> if(confirm("Do you want the larger graphics?")) { document.write("<br><img " + "src='/books/1/252/1/html/2/image1.jpg'></IMG>") } . . . If the user didn’t click the OK button, on the other hand, the code writes an <img> element to the Web page that displays the smaller image, image1small.jpg:
<html> <head> <title> A self-modifying Web page </title> </head> <body> <center> <h1> A self-modifying Web page </h1> <script language="JavaScript"> if(confirm("Do you want the larger graphics?")) { document.write("<br><img " + "src='/books/1/252/1/html/2/image1.jpg'></IMG>") } else { document.write("<br><img " + "src='/books/1/252/1/html/2/image1small.jpg'></IMG>") } </script> </center> </body> </html> You can also use document.write to rewrite an entire Web page, if you want. This is a perilous technique for the Ajax developer because it looks a lot like a page refresh, but it can be done. Take a look at the example application, rewrite.html, shown in Figure 11.10.
Figure 11.10: The rewrite application
The page uses document.write to rewrite itself when you click it, as shown in Figure 11.11.
Figure 11.11: Rewriting a Web page on the fly
This application connects the page’s onmousedown attribute to a function named rewrite:
<body onmousedown="rewrite()"> <h1> Click this page. </h1> </body>
and in the rewrite function, the code uses the document.write method to rewrite the entire page-you can’t use document.write to write to just part of a page:
<html> <head> <title> Rewriting a Web page </title> <script> function rewrite() { document.write("<h1>Welcome to the new page!</h1>") } </script> </head> <body onmousedown="rewrite()"> <h1> Click this page. </h1> </body> </html> In fact, you can rewrite Web pages even based on the time of day. The example restaurant.html displays various menus-breakfast, lunch, or dinner-depending on the time of day using document.write:
<html> <head> <script language="JavaScript"> var dateNow = new Date(); var hourNow = dateNow.getHours(); document.write( "<center>"); document.write( "<h1>"); document.write("Welcome to the Dynamic HTML Restaurant"); document.write( "</h1>"); document.write( "</center>"); if (hourNow < 5 || hourNow > 23){ document.write( "<center>"); document.write( "<h1>"); document.write( "Sorry, we're closed." ); document.write( "</h1>"); document.write( "</center>"); } if (hourNow > 6 && hourNow < 12 ) { document.write( "<center>"); document.write( "<table border>"); document.write( "<tr><th colspan = 2>Breakfast</th></tr>"); document.write( "<tr><td>Eggs</td><td>$2.50</td></tr>"); document.write( "<tr><td>Pancakes</td><td>$2.00</td></tr>"); document.write( "<tr><td>Oatmeal</td><td>$1.00</td></tr>"); document.write( "<tr><td>Waffles</td><td>$1.50</td></tr>"); document.write( "</table>"); document.write( "</center>"); document.write( "</table>"); document.write( "</center>"); } if ( hourNow >= 12 && hourNow < 17 ) { document.write( "<center>"); document.write( "<table border>"); document.write( "<tr><th colspan = 2>Lunch</th></tr>"); document.write( "<tr><td>Turkey Sandwich</td><td>$3.50</td></tr>"); document.write( "<tr><td>Chicken Sandwich</td><td>$3.50</td></tr>"); document.write( "<tr><td>Ham Sandwich</td><td>$3.00</td></tr>"); document.write( "<tr><td>Alligator Nuggets</td><td>$5.00</td></tr>"); document.write( "<tr><td>Ostrich</td><td>$4.50</td></tr>"); document.write( "<tr><td>Chili</td><td>$2.00</td></tr>"); document.write( "<tr><td>Crocodile Soup</td><td>$1.50</td></tr>"); document.write( "</table>"); document.write( "</center>"); } if ( hourNow >= 17 && hourNow < 22 ) { document.write( "<center>"); document.write( "<table border>"); document.write( "<tr><th colspan = 2>Dinner</th></tr>"); document.write( "<tr><td>Lobster</td><td>$7.50</td></tr>"); document.write( "<tr><td>Filet Mignon</td><td>$8.00</td></tr>"); document.write( "<tr><td>Flank Steak</td><td>$7.00</td></tr>"); document.write( "<tr><td>Tube Steak</td><td>$3.50</td></tr>"); document.write( "<tr><td>Salad</td><td>$2.50</td></tr>"); document.write( "<tr><td>Potato</td><td>$1.50</td></tr>"); document.write( "<tr><td>Eggplant</td><td>$1.50</td></tr>"); document.write( "</table>"); document.write( "</center>"); } </script> </head> <body> </body> </html> You can see restaurant.html at work in Figure 11.12.
Figure 11.12: The restaurant.html application
That’s fine, but sometimes, you may not want to rewrite the entire page.
