" + document.title + "

') // print transparent image (use any height and width) document.write('')

The Document Object and the History List

n

293

} // draw table row based on red and blue descriptors function drawRow(red, blue) { // open table row document.write('') // loop through all non-dithered color descripters as green hex for (var i = 0; i < 6; ++i) { drawCell(red, hex[i], blue) } // close current table row document.write('') } // draw table for one of six color cube panels function drawTable(blue) { // open table (one of six cube panels) document.write('') // loop through all non-dithered color descripters as red hex for (var i = 0; i < 6; ++i) { drawRow(hex[i], blue) } // close current table document.write('') } // draw all cube panels inside table cells function drawCube() { // open table document.write('') // loop through all non-dithered color descripters as blue hex for (var i = 0; i < 6; ++i) { // open table cell with white background color document.write('') } // close table row and table document.write('

') // call function to create cube panel with hex[i] blue hex drawTable(hex[i]) // close current table cell document.write('

') } // call function to begin execution drawCube() // -->

Chapter 17

// close link tag document.write('

') // print transparent image (use any height and width) document.write('') // close link tag document.write('

Is this totally cool or what!!

, use it: 
 one two three 




After interpretation, the web page appears as: one two three



You can create the same output via JavaScript in the following fashion: document.write("
") document.writeln("one") document.writeln("two") document.writeln("three") document.write("
")



Data Streams The document.open() method opens a stream to collect the output of the write() and writeln() methods. Its general syntax is: document.open(["mimeType"])



mimeType specifies the type of document, which is one of the following: text/html text/plain image/gif image/jpeg



Chapter 17



write and writeln



 302 n Chapter 17 image/x-bitmap plugIn



plugIn is any two-part plug-in supported by the user’s browser. Generally speaking, if the mimeType is one of the text or image types, the stream is opened to layout, which is generated by instructions from the browser. Otherwise, the stream is opened to a target plug-in that you are sure understands the data you provide. Since document is a property of window, document.open() or window.document.open() opens a stream specific to the document in the target window. If a document already exists in the target window, the open method clears it. If you do not specify mimeType as the method’s argument, the most common one, text/html, is assumed. Note that you should never use this method to open a stream in the document that includes the JavaScript method itself. It is always used to open data streams to documents in other windows. After you complete supplying data to the opened stream, you should close it via the document.close() method. Its syntax is simply the following: document.close()



This method primarily closes a stream opened with the document.open() method. If not explicitly closed by the script, all font style tag pairs are closed implicitly. For example, if you provide a  tag but do not provide a closing  tag later, JavaScript provides it automatically. The close() method also stops the “meteor shower” in the Netscape icon or the rotation of the Internet Explorer icon, and displays “Document: Done” in the status bar. The document.close() method is extremely important because it instructs the browser’s interpreter to display the data stream. If you do not invoke it, the output might not have any influence on the content of the page. Since we have not discussed windows yet, this discussion seems a bit theoretical. We will refer to these methods later, when the subject of windows is dealt with in depth. Another related method is document.clear(). Clearing a document via this method clears all HTML outputs in that document and resets the object model corresponding to that document. Normally, since JavaScript automatically clears the old document when you open a new stream, you don’t have to clear a document prior to its opening or rewriting. The only case in which you should clear a document is after you close the stream to it. Since the method document.clear() does not work in versions of Netscape prior to 4.5, you can clear a document by opening it, writing a line break to it, and then closing it. Look at the following example: windowReference.document.open("text/html") windowReference.document.write("
") windowReference.document.close()



 The Document Object and the History List



n



303



For some reason, this clearing method requires writing at least one character to the stream. The line break is used here because it is transparent to the user.



As you surf the web, you will load many different pages, each with its own URL. The browser maintains a list of the most recent URLs, which can be viewed with ease in Mozilla Firefox, Netscape Navigator, and Internet Explorer. This history allows you to go back to sites you have previously visited. This history list is very simple to use, but also very informative. The history list behaves like a LIFO (Last In First Out) queue, where the Back button climbs up the list so URLs loaded by the Back button are not entered into the history list. Therefore, the history list does not always contain all the recently visited pages. For example, if you reach a page named “a.html” and you press the Back button to load a page named “b.html,” its URL replaces the URL of “a.html.”



The history Object The history list is represented in JavaScript by the window.history object. This object lets you deal with the history list but not with its exact data. That is, actual URLs maintained in that list cannot be extracted or otherwise modified by a script. The only property of this object is length. Its methods enable you to load the list’s entries but not to manipulate the URL explicitly. You can take advantage of this object to automatically navigate the user’s browser backward. Another possible application is to create the equivalent of the browser’s Back button directly in the document. Since the history object is a property of the topmost window object, you have the option to refer to it as window.history or simply history.



History List Length You can access the number of entries in the history list via the history.length property. It works exactly like the length property for String and array objects. You can use this property to find how many pages the user has visited lately: // display message according to number of entries if (history.length > 10) alert("You've already accessed " + history.length + " web pages this session") else alert("You've only accessed " + history.length + " web pages this session")



Chapter 17



What Is a History List?



 304 n Chapter 17 This script displays an alert message that depends on the number of entries in the history list.



History List Entry Indexing As in arrays, each entry of the history list has an index that differentiates it from the other elements of the list. However, the indexing method is quite different from character indexing in strings and element indexing in arrays. As opposed to these indexing algorithms, the history list indexing scheme does not feature a minimum value. The index of the document currently loaded into the browser’s window is 0. The index of the document that was loaded before the current document, the one that can be reached by pressing the Back button, is –1. The document before that is indexed at –2, and so on. Similarly, documents that were first loaded after the current document are indexed positively. The index of the first document loaded after the current one, the one that can be retrieved via the Forward button, is 1. The following one is indexed at 2, and so on. The complete index resembles an axis with no limit at either end. The history list is dynamic (changes rapidly) because whenever the page in the browser’s window is replaced by a new document, the current entry becomes the previous one, and a new document takes its place. The desired shifting in terms of indexing is performed automatically by the browser, so you don’t have to worry about it. Since most people tend to surf different places at different times, the content of the history list almost never repeats itself. You might think that by creating a very structured site, you can control the way the user surfs your site and thus be able to forecast the content of the history list. This is generally impossible, and you should not even try to do it.



history Methods You can implement the history object’s methods in your script to enable the user to navigate among the list’s URLs. You cannot access the string value of any URL, but you can load any of them into the browser’s window.



back This method performs the same action as the Back button in the browser’s toolbar. It loads the most recent entry in the history list—the entry with index –1. The following HTML code can be used to create a Back button in a web page: 
  




 The Document Object and the History List



n



305



forward The history.forward method is equivalent to the Forward button in the browser’s toolbar. It loads the entry with index 1. It is less useful than the preceding method because the current document is usually the most recent in the list, so there is no URL that can be loaded when this method is invoked. You must take special precautions when using this method, because it normally does not have any effect. It should be used only when you are sure that you have full control over the user’s navigational path. The following sequence creates a Forward button for a web page:



go The go method is also one of those less useful methods featured in JavaScript. It enables you to load a history list entry in the browser’s window. You must have full control over the user’s navigating path in order to implement this method for useful purposes. This method accepts one argument, the index of the history list that you want to retrieve. This can be any integer number that has a corresponding history list entry. If the argument is 0, the current page is loaded, or better said, reloaded. For example, the following call is equivalent to invoking the history.back() method: history.go(–1)



When you want to jump back to the entry with index –1, use history.go(–1) rather than history.back(), because, among other reasons, you can just change the argument in order to jump back a few steps instead of only one. The same applies to history.forward(), which is equivalent to the following call: history.go(1)



Also bear in mind that this method does not return any value but causes immediate navigation. Alternatively, you can specify one of the URLs as the argument of this method. A portion of the desired URL is also sufficient, provided that it is a unique substring of only one entry. In both cases, the specified string (literal or value) is compared against all entries, and the one whose URL includes the specified substring will be loaded. Unfortunately, you cannot extract the URL; you can only load it. The following script segment retrieves Netscape’s home page (www.netscape.com or home.netscape.com) if it is resident in the history list: 
  




Chapter 17



  




 306 n Chapter 17 The following call reloads the current document: history.go(0)



For quite some time Netscape Navigator has also offered this method to reload the current page: location.reload()



Security Aspects of the history Object It would be very useful to be able to extract and process URLs that reside in the history list. For security reasons, this functionality has been excluded thus far. First of all, nobody should use the back door to know where the user has been and, secondly, data can be easily submitted from the client to the server via e-mail. Netscape has solved the e-mail breach of security by displaying a warning whenever an e-mail is sent (other than that sent explicitly by the user from the mail window). Netscape’s solution is not foolproof since the user might have disabled this warning, might not pay attention, or might ignore it altogether. The problem with the history list’s entries is that they contain complete URLs. A URL may contain extremely confidential information, especially in the form of a search query. For example, the user might have recently submitted a form with a field containing a credit card number. The form may have loaded another page with a search query containing the credit card number. Thus, credit card numbers or other secure information may be revealed and gleaned by malicious individuals.



Summary This chapter focused first on the document object and ended with the history list. In this chapter I showed you several properties and methods of the document object. The focus was on colors, and naturally on hexadecimal triplets that define them. You learned how to script the various document colors such as background color, link color, and so forth. Two interesting examples dealing with colors were also analyzed. We have discussed other properties and methods as well. I have presented the basic output methods, document.write() and document.writeln(), as well as data streams. Data streams and document clearing play an important role in scripting windows and frames, as will be explained later. Since the history object is not as important and does not have many uses, we kept the discussion short. The most important property of the history object is the go method. Besides having a unique functionality of its own, the go method can replace the other history methods. Because it is closely related to URLs, the history-related function replace was discussed in the previous chapter.



 Forms



n



307



Chapter 18



Forms What Are HTML Forms? HTML forms, consisting of buttons, menus, and text boxes, are the means by which the client computer can gather information from the user. They create a graphical interface whereby the user can enter data in a logical and easy-to-follow method. Forms are supported by all the major browsers, so you can use them with confidence. You have undoubtedly used forms on many pages. Most often when you fill out “contact us” fields on a business’s web site you are using an HTML form. Form tags have been part of HTML since HTML 2.0 (the current specification as of this writing is HTML 4.01) and are supported by all the wellknown browsers (Internet Explorer, Netscape, Mozilla Firefox, Opera, Galleon, and others). This is one of the reasons why forms are heavily supported by JavaScript. As you will see in this chapter, JavaScript provides a convenient means of form content manipulation and validation through the use of a client-side application. An HTML form by itself is of minimal use. Without some code to execute when the form’s buttons are clicked or when you wish to load data into the form, the form is not very useful. That is where JavaScript comes in, providing the code to work with the form. And as you will see it is really not very difficult.



JavaScript Form Reference JavaScript enables you to interact with the user via forms. You must know how forms are referenced in order to implement them in scripts. A form in terms of JavaScript is an object. It has properties, methods, and even event handlers. There are quite a few possible references from which you may choose. In this section I will outline all of these possibilities so you will have the freedom to select the most convenient method.



 308 n Chapter 18 forms Array Suppose you have an HTML document that includes several forms, each defined by a regular 
 tag pair. You can refer to each form by its index in the forms array. The forms array is a property of the document object, so it is referred to as document.forms. The object representing the first form in the page is document.forms[0], the second form is document.forms[1], the third one is document.forms[2], and so forth. The forms array includes an entry for each of the document’s forms (
 tag), in source order. The general reference to a form is as follows: document.forms[index]



As with all of JavaScript’s arrays, the forms array includes a length property representing the number of forms on the page. The last form in the document, therefore, is: document.forms[document.forms.length – 1]



Elements in the forms array can be set only by the HTML document and, hence, they are read-only for JavaScript. The following statement, for example, has no effect: document.forms[0] = "work hard"



The string value of a form is