Self-Modifying Pages Using document.write
Self-Modifying Pages Using document.writeWe've used the document.write method (see in Table 9.5) to change documents on-the-fly throughout this book, but it's important to include it in our Dynamic HTML chapters. This method is limited in precision, because it's hard to specify exactly when the writing should start to a document. (Note that relying on a certain loading order of elements to estimate when the <SCRIPT> element containing the document.write method will execute is not reliable.) As a result, programmers usually use document.write only when a document is loading or when they're creating a new document. Here's an example from Chapter 9, "Using the document and body Objects," that writes different HTML to a document, letting users indicate with a confirm dialog box whether they want to see the large image or a smaller one: <HTML> <HEAD> <TITLE> Self-modifying Web Pages </TITLE> </HEAD> <BODY> <H1>Self-modifying Web Pages</H1> <SCRIPT LANGUAGE="JavaScript"> <!-- if(confirm("Do you want a graphics intensive page?")) { document.write("<BR><IMG WIDTH='2048' HEIGHT='2048' " + "SRC='gif/bigimage.jpg'></IMG>") } else { document.write("<BR><IMG WIDTH='100' HEIGHT='100' " + "SRC='gif/smallimage.jpg'></IMG>") } // --> </SCRIPT> </BODY> </HTML> Here's another example. This onethe JavaScript Caf responds to the local time of day on the user 's computer to display one of three menus : breakfast , lunch , or dinner: (Listing 16-04.html on the web site) <HTML> <HEAD> <TITLE> Welcome to the JavaScript Caf </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var currentDate = new Date() var currentHour = currentDate.getHours() document.write("<CENTER>") document.write("<H1>") document.write("Welcome to the JavaScript Caf") document.write("</H1>") document.write("</CENTER>") if (currentHour < 5 currentHour > 23){ document.write("<CENTER>") document.write("<H1>") document.write("Sorry, we're closed now.") document.write("</H1>") document.write("</CENTER>") } if (currentHour > 6 && currentHour < 12) { document.write("<CENTER>") document.write("<TABLE BORDER BGCOLOR='CYAN'>") document.write("<TR><TH COLSPAN = 2>Breakfast Menu</TH></TR>") document.write("<TR><TD>Two eggs</TD><TD>.50</TD></TR>") document.write("<TR><TD>Three eggs</TD><TD>.50</TD></TR>") document.write("<TR><TD>Pancakes</TD><TD>.00</TD></TR>") document.write("<TR><TD>Cereal</TD><TD>.00</TD></TR>") document.write("</TABLE>") document.write("</CENTER>") document.write("</TABLE>") document.write("</CENTER>") } if (currentHour >= 12 && currentHour < 17) { document.write("<CENTER>") document.write("<TABLE BORDER BGCOLOR='CYAN'>") document.write("<TR><TH COLSPAN = 2>Lunch Menu</TH></TR>") document.write("<TR><TD>Lobster</TD><TD>.00</TD></TR>") document.write("<TR><TD>Frog legs</TD><TD>.50</TD></TR>") document.write("<TR><TD>Brie rollups</TD><TD>.00</TD></TR>") document.write(document.write("<TR><TD>Peacock flamb</TD><TD>.50</TD></TR>") "<TR><TD>Chili</TD><TD>.00</TD></TR>") document.write("<TR><TD>Octopus Soup</TD><TD>.50</TD></TR>") document.write("</TABLE>") document.write("</CENTER>") } if (currentHour >= 17 && currentHour < 22) { document.write("<CENTER>") document.write("<TABLE BORDER BGCOLOR='CYAN'>") document.write("<TR><TH COLSPAN = 2>Dinner Menu</TH></TR>") document.write("<TR><TD>Lobster Newburg</TD><TD>.50</TD></TR>") document.write("<TR><TD>Filet mignon</TD><TD>.00</TD></TR>") document.write("<TR><TD>Strip steak</TD><TD>.00</TD></TR>") document.write("<TR><TD>House salad</TD><TD>.50</TD></TR>") document.write("<TR><TD>Garlic potato</TD><TD>.50</TD></TR>") document.write("<TR><TD>Broccoli alfredo</TD><TD>.50</TD></TR>") document.write("</TABLE>") document.write("</CENTER>") } //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> You can see what's for lunch in Figure 16.3. Using code like this, you can make your web pages respond to the time of day. Figure 16.3. Rewriting a page in response to the time of day.  |
