| Lesson 23: Write Today we will discuss how to use JavaScript script to generate HTML dynamically, allowing us to programatically create webpages "on-the-fly". It is very important to pay attention to browser specific traits when scripting new documents, and as always we will concentrate on techniques which work with WebTv. In almost all cases, WebTv creates an entirely new document anytime new HTML is generated, and each page created takes up more space in the cache, so discretion is advised when dynamically generating content on WebTv. On non-WebTv browsers, it is almost always necessary to open the document or window being written to (or both), and subsequently closing them when finished writing new content (on some browsers, the generated content may not be displayed until you close it due to browser buffering). document.open(); document.write('stuff here'); document.close(); 1) write() and writeln() JavaScript uses the write() and writeln() methods of the document to generate new textual output, including HTML formatting. The difference being writeln() automatically puts a newline (\n) character at the end of the text/html being written. This only affects the formatting of the coding the browser will read, and is not the same as using a HTML tag, however WebTv browsers do include a space at the end of the text/html being written when writeln() is used. So long as proper syntax is used, write will virtually always suffice, Examples: 2) Generating Dynamic Content After Load Once the page has loaded, computer browsers have some ability to add to and/or change the content of the webpage via JavaScript. WebTv however creates a new page when new content is generated after the original page has loaded. We can work around this by embeding blank pages in embed, frame, or iframe HTML tags, and then generating new content for the documents contained in these "psuedo-windows" for WebTv. Pay close attention to your syntax when referencing multiple frames or embeds, and name as many objects as possible in all original HTML coding. One good use for this on WebTv is when utilizing multiple image files that are not defined at load time. The WebTv browser defines the image height and width at load time, and treats these values as read-only, meaning you cannot change the size of an image already loaded. However, if the image is the only item on an HTML page loaded into an embed or frame of some sort, we can use the write() methods to generate new HTML coding including any new image desired by the user, Example: stuff='HTML coding generated by user input'; document.embeds[0].document.write(stuff); 3) Writing While Loading While the page is loading, write() and writeln() statements are added in just as if what they write was part of the original HTML or text in the first place. Using loops, variables, and other JavaScript techniques with the document.write() and writeln() methods allows you to cut some documents with repetitive HTML to fractions of their normal file size. Here is an example loop that writes out sample font sizes: The equivalent HTML is: Notice the savings in just this small sample. Imagine the savings in file size when generating a table of all your email addresses or any other repetitively displayed data with JavaScript rather than with just HTML! |