Tutorial 5 - Windows and Frames

The JavaScript Object Model

• also called the browser object model, client-side object model, and Navigator object model.

• refer to Figure 5-2 on page 204 (JavaScript object model)



 

• Window object represents the Web browser window or an individual frame within a window. The Web browser automatically creates the window object.
• Document object represents the HTML document displayed in a window. All HTML elements descend from this object.
• Form[] - the HTML forms in a document. Each form in a document is represented as an element of the Document.forms[] array. Named forms are also represented by the form_name property of their document, where form_name is the name specified in the NAME attribute of the <FORM> tag.
• Plugin[] - an array of software modules that can be invoked by the browser to display specialized types of embedded data within the browser window.
• Applet[] - the Java applets embedded in an HTML document.
• Anchor[] - the HTML anchors within the document. Anchors are created with an <A> tag that has a NAME attribute specified.
• Area[] - an array of links created with the <AREA> tag within a client-side image map.
• Image[] - an array of images embedded in an HTML document.
• Link[] - an array of links created with the <A> tag and embedded in an HTML document.
• Layer[] - an array of Layer objects contained within the HTML document. A Layer object is Navigator 4’s technique for supporting dynamically positioned HTML elements.

• See Figure 5-3 page 207 for Window object properties.

• See Figure 5-4 page 207 for Window object methods

• You can open additional browser windows from your JavaScript code using the open() method of the Window object.
• The syntax is window.ppen("URL", "name", options); "URL" is the initial Web page to display in the window, "name" is the name given to the new Window object that is created, and options specify various properties of the new window.
• See Figure 5-8 page 211 for Common open() method options

• If you exclude the options string of the open() method, then all the normal options will be included in the new Web browser window.
• If you include the option string, you must include all the components you want to create for the new window, any options you leave off will not be included.

• Do not put spaces between items in the option list.
• The name of the window object is used to refer to it by other JavaScript commands. See Figure 5-7 page 210.

• The window object contains several methods that can be used to automatically trigger other methods.

• timeoutId - a value used by clearTimeout() to cancel the setTimeout() command.
• code - A string that contains the JavaScript code to be executed after the delay has elapsed.
• delay - The delay in milliseconds to wait until executed the code.
• setTimeout() executes the specified code only once. To execute code repeatedly, code must itself contain a call to setTimeout() to register itself to be executed again.

• timeoutId - a value returned by setTimeout() to identify which of several possible setTimeout commands to cancel.

• intervalId - a value used by clearInterval to stop the execution of code by setInterval.
• code - A string that contains the JavaScript code to be executed after the delay has elapsed.
• delay - The delay in milliseconds between executions of the code.

• intervalId - a value returned by setInterval() to identify which of several possible setInterval commands to cancel.

Frame - independent scrollable portion of a Web browser window.

• Each frame is capable of containing its own URL.
• JavaScript treats each frame as an individual window.
• Each frame has its own Window object.
• The top level HTML document contains a Window object from which each frame’s Window object is descended.
• An HTML document is divided into frames using the <FRAMESET> … </FRAMESET> tags. The only items that can be placed inside a <FRAMESET> tag pair are <FRAME> and other <FRAMESET> tags.
• Frames can be created in horizontal rows, vertical columns, or both.
• Two attributes of the <FRAMESET> tag are ROWS, and COLS. They determine whether frames are created as rows or columns.
• ROWS - determines the number of horizontal frames to create.
• COLS - determines the number of vertical frames to create.
• To set the size of the frames, you assign a string to the ROWS or COLS attribute containing the percentage of space or number of pixels each row or column should occupy in the window. For example:

• The previous example creates two rows, which each take up 50 percent of the height of the screen, and two columns, which each take up 50 percent of the width of the screen.
• You must define more than one row or more than one column or your frames will be ingored by the Web browser.
• Use an asterisk (*) to indicate that you wish the frame to occupy all of the remaining available space in the window. Example:

• The previous example creates three rows: the first row is 100 pixels high, the second row take up 50% of the visible window, and the asterisk allocates the remainder of the visible window to the third row.
• The <FRAME> tag is used to specify options for individual frames once they are created.
• A separate <FRAME> tag is used for each frame in the window.
• The URLs of frames are associated with a particular frame on a left-to-right, top-to-bottom basis. Example:

• The TARGET attribute of the <A> tag is used to specify which frame or Web browser window a URL opens in.
• The syntax for the <A> tag is:

• "name" specifies the name of the frame or window where webpage.html should be displayed.
• The <BASE> tag can be used to specify a default target for all links in an HTML document. For example:

• Frames may be created within other frames. This is done by including a <FRAMESET>…</FRAMESET> tag pair inside another <FRAMESET>…</FRAMESET> tag pair. Refer to the example on pages 232-233.

• The <FRAME> tag contains several attributes that change a frames appearance. Figure 5-24 lists the attributes:

• The <NOFRAMES>…</NOFRAMES> tag pair is used to display an alternate message to users of Web browsers that are not capable of displaying frames.

• The Location object allows you to change to a new Web page from within JavaScript code.
• The location object contains several properties and methods for working with the URL of the document.
• When you use a method or property of the Location object, you must include a reference to the Location object itself. For example:

• The properties of the location object are:

• The location object contains two methods: reload() and replace().
• reload() is equivalent to pressing the Reload button in Netscape or the Refresh button in IE. By default the page is only reloaded if it has changed. If you want to force a reload of the page even if no changes have been made to it, use an argument of true with reload(). Example: location.reload(true);
• replace() is used to replace the currently loaded page with a different one. The replace() method differs from simply specifying a new href property of the location object. The replace() method actually overwrite one document with another and replaces the old URL entry in the Web browser’s history list with the new URL.

• The History object contains a list of all of the documents that have been opened during the current Web browser session.
• Each Web browser window and frame contains its own internal History object.
• The History object supports three methods: (See figure 5-28 on page 241)

• When you use one of the methods of the history object you must include a reference to the History object itself. Example: history.back()
• The go() method is used to navigate to a specific page in the history list. The argument of the go() method is an integer that indicates how many pages, forward or backward, you want to navigate. For example: history.go(-2); opens the Web page that is two pages back in the history list.
• The go() method can also be used with a string argument representing a previously opened Web page’s URL. If you only use a portion, or substring, of the URL, the closest match in the history list is opened. For example:
location.href = "http://www.course.com";
location.href = "http://www.netscape.com";
history.go("course"); // goes back to www.course.com
• The History contains a single property, the length property, which contains the specific number of documents that have been opened during the current browser session.
• To use the length property the syntax is history.length;

• The Navigator object is used to obtain information about the current Web browser.
• The Navigator object contains the properties listed in Figure 5-30.

• IE does not support the language property. Instead, it used two other properties: userLanguage and systemLanguage.
• IE and Navigator contain other properties that are not compatible.
• The statement browserType = navigator.appName; returns the name of the Web browser in which the code is running to the browserType variable. You can then use the browserType variable to determine which cod to run for the specific browser type.
• For Navigator, the value of the appName property is "Netscape". In IE, the value of the property is "Microsoft Internet Explorer".

• Any frame in a window can refer to any other frame through the use of the frames[], parent,and top properties of the Window object.
• Every window has a frames property. This property refers to an array of Window objects, each of which represent a frame contained within the window.
• If a window does not have any frames, the frames[] array is empty and frames.length is zero.
• A window (or frame) can refer to its first subframe as frames[0], its second subframe as frames[1], and so on. Similarly, JavaScript code running in a window can refer to the third subframe of its second frame like this:

• Every window also has a parent property, which refers to the window object in which it is contained. Thus, the first frame within a window might refer to the second frame within the window like this:

• The top property always refers to the top-level containing window. Thus, top.frames[0] always refers to the first frame of the opening browser window.
• A simpler approach to frame access is to give each frame a unique name when it is created. Then refer to the frame by name in combination with the parent and top properties. For example, if you have two windows, one named table_of_contents and the other named mainwin, you might have the following HTML code in the table_of_contents window:

• When the user click on this hyperlink, the browser loads the specified URL into the frame named mainwin. If there is no window or frame named mainwin, clicking the link creates a new window with that name and loads the specified URL into it.