Date, Math, and String objects are built into the JavaScript language. They are always there for your use in the format described. Other instances of objects arise in the course of building a web page-- most prominently, windows and documents. When you open a page, the browser creates a particular instance of a window from the window class; within the window it creates a document instance from the document class. The properties and methods associated with these objects then become available to you. Window PropertiesThe window object contains properties and methods to provide information about the window and offer ways to manipulate the window and the document it contains. The following table describes some of the window object properties:
The most-often used properties are self and window. These are used to refer to the current window (the one containing the script reference to self or window). When referring to the current window, you do not always have to use the self.property or window.property format. If the property reference appears in a JavaScript function, self. and window. are assumed defaults; However, if the property reference appears in an event handler, self. and window. must prefix the property. Therefore, to be consistent and to make your scripts more readable, you should probably always use the full, dotted reference. The document property is also a reference to an object containing its own properties, that object being the document appearing the the window. (We'll get to the properties and methods of the document object in a few moments.) To refer to a property of this document from the current window, the reference is to window.document.property or self.document.property. When referring to the properties of a secondary window (one that is opened from the current window), you must prefix the property with the window's name. Thus, if you opened a secondary window called Win1 from the current window, a reference to, say, the status bar of that window would read: Win1.property. The scripts and buttons below illustrate these references. In the first example a script in the onclick event handler of the button writes to the status bar of the current window:
<FORM>
In order to make the status message disappear, refresh the window. Some people don't like to be irritated by status messages that replace the default messages showing window activity. So use them judiciously, if at all. In the second example, a similar script appearing in a function opens a secondary window and writes to its status bar (You'll need to move your cursor into the window to see it write.):
<SCRIPT>
<FORM>
Window MethodsWindows also have methods associated with them. These methods become available to the instances of the window class created when you open a new window. The following table summarizes these methods:
Here is where those Alert, Confirm, and Prompt message boxes come from! They are created with the alert ( ), confirm ( ), and prompt ( ) methods provided by the window object when you open or create a window. Thus, they are available for use in this current window:
More formally, the methods are called from the current window by window.alert ( ), window.confirm ( ), and window.prompt ( ) (or by using self. instead of window.). For the current window these prefixes are assumed. The open and close methods are used when you create secondary windows. The general format is: [WindowNameJ =] open ( "[URL]", "[WindowNameH]", ["window features"] ) A WindowNameJ is optional but must be provided if you plan to refer to this window from another JavaScript script. The assignment returns the window opened with the open ( ) method to this name. The URL is the location of the document that will be placed in the window. It is optional if you don't intend to open an HTML document in the window--if you intend, instead, to leave it blank or write to a new document. In this case, you still must provide the quotes, back-to-back ("") to indicate a null name. The WindowNameH is provided only if the name will be used in an HTML <A HREF=> or <FRAME> tag reference. It is the name used as a TARGET in these tags. Otherwise, you provide a null name (""). The window features is a list of window characteristics. You can choose from:
toolbar - displays the browser's toolbar;The set of parameters must be enclosed, as a group, in quotes and not contain any embedded spaces ("resizable,width=250,height=300"). You can choose a feature by specifying feature=yes, or feature=1, or by simply using its name; you eliminate a feature by specifying feature=no, or feature=0, or by omitting its name. If you do not include any features in the list, JavaScript assumes you want them all. Here are some typical examples:
Users can always close windows by clicking on the "X" in the upper-right corner of the window. Alternately, you can provide a close button in the secondary window with an onclick script that uses the self.close( ) or window.close( ) method:
<FORM> Writing to DocumentsNot only can you simply open documents in secondary windows, you can write to them. Plus, you can open and write to more than one window at a time. The following extended example shows how to open a secondary window containing the list of window features. The features are labels for a series of radio buttons which, when clicked, open another widow that displays the definition for the feature:
Let's step through this example. The above button and associated script open a secondary window in which is displayed the document "features.html."
<SCRIPT>
<FORM>
The document "features.html" contains the code to define the radio buttons with their window-feature labels. An onclick event handler in each button definition calls a function named WriteDefinition ( ) to which is passed a numeric value (0 thru 8) representing the index number of the feature in the list.
<CENTER>
The function, in turn, opens a second window and writes the corresponding definition:
<SCRIPT>
First, an array named Definitions is created to hold the values that will be displayed as the definitions. The values in the nine elements of the array correspond to the nine terms in the radio buttons. The function WriteDefinition ( Which ) receives as argument Which the numeric value (0 thru 8) passed from the radio button that was clicked . The 0-thru-8 value associated with the radio button term corresponds to the 0-thru-8 definition value in the array. The function then displays the definition for the term. First, the function opens a secondary window and associates it with the name DefWin. Recall that a secondary window must be named if it will be referred to in a script. Second, it writes to the newly opened window. As part of the output, the function writes the appropriate array element as the definition of the term clicked. And it writes a line-break character (<BR>) to ensure that the definition is displayed. Next, the document is closed, meaning that this is the end of the document output stream. Finally, for Netscape browsers, the window is brought to focus so that it is the top window on the screen. A better method of calling up the definitions probably would be to provide a list of linked terms. That is, the list would be defined something like: <A HREF="" onclick = "WriteDefinition (Which)">toolbar</A> However, under Navigator, the onclick event handler does not work correctly within an anchor tag. So, until that feature works, you are forced to use buttons for links. Slide ShowsBy using the setTimeout method you can create a slide-show effect. The general format is:setTimeout ( "instruction", time-delay-in-milliseconds ) The "instruction" is the JavaScript statement to delay. In the following example, this method is used to display a series of documents with a 9-second delay between each. The reason for the extended delay is to allow time for graphic images to originally load over a modem. You can change to a shorter delay by typing a new value in the text box and clicking the button.
<SCRIPT>
<FORM>
Note that the time delay is increased for each window. If you don't do this, the script will attempt to display all windows at the same time delay. The clearTimeout ( ) method is used to halt a timer. In order to use it you must name the timer in the setTimeout ( ) method: TimerName = setTimeout ( "instruction", time-delay-in-milliseconds ) permitting you to stop the delay with clearTimeout ( TimerName ). This method would be used most often if you have defined more than one timer and wish to selectively halt their actions.
Contents
Next
| |
