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.

image from book
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.

image from book
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.

image from book
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.

image from book
Figure 11.10: The rewrite application

The page uses document.write to rewrite itself when you click it, as shown in Figure 11.11.

image from book
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.

image from book
Figure 11.12: The restaurant.html application

That’s fine, but sometimes, you may not want to rewrite the entire page.



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net