Chapter 5: Windows and Frames

JavaScript - Introductory

Previewing the Virtual Zoo Program

Section A:

Working with Windows

Objectives

In this section, the students will learn:

• About the JavaScript object model

• About the window object

• How to open and close windows

• How to work with timeouts and intervals

The JavaScript Object Model

• JavaScript object model is a hierarchy of JavaScript objects, each of which provides programmatic access to a different aspect of an HTML page or Web browser window

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

• The Window object represents a Web browser window or an individual frame within a window

• The Document object descends from a Window object

JavaScript Object Model

The JavaScript Object Model

• When using the object name in code, you must always use a lowercase letter, because you are referring to a property

• To display the value of the text box in an alert dialog box, you must use the statement alert(document.myForm.myTextBox.value);

• In Internet Explorer, you do not always need to use all of an object’s ancestors

• It is not always necessary to include the Window object to clearly distinguish between that and the document object

• Self property refers to the current Window object

The Window Object

• The Window object includes several properties that contain information about Web browser window

• It also contains various methods that allow you to manipulate the Web browser window itself

• Navigator and Internet Explorer each have custom properties and methods for the Windows object

Window Object Properties

Window Object Methods

Opening and Closing Windows

• Navigator and Internet Explorer both allow you to open new web browser windows in addition to the web browser or windows that may already be open

• Several reasons why you may need to open a new web browser window are:– Launch a new Web page – Use an additional window to display information such

as a picture or an order form

• A new Web browser window is opened, a new Window object is created to represent the new window

Web Browser Window Opened With a URL Argument of the Open() Method

Web Browser Window Opened With the window.open(); Statement

Opening and Closing Windows

• The name property of a Window object can be used to specify a window as the target in which a URL opens or results of a form submission appear

• If the name argument of the open() method is already in use by another Web browser window, then JavaScript changes focus to existing Web browser window instead of creating a new one

• When you open a new Web browser window, customize its appearance using the options argument of the open () method

A JavaScript Program That Includes Name and Target Arguments

Common Open () Method Options

Opening and Closing Windows

• If excluding the options string of the open () method, then all normal options will be included in the new Web browser window

• If you include the options string, you must include all components you want to create for the new window

• For an open() method to work properly with both Navigator and Internet Explorer, do not include any spaces in an options string

Web Browser Window With No Interface Elements

Web Browser Window With Toolbar and Scroll Bars

Opening and Closing Windows

• A Window object’s name property can be used only to specify a target window with hypertext links or forms, and cannot be used in JavaScript code

• It is not necessary to include the Window object when listing an object’s ancestors

• The Document object also contains methods named open() and close(), used for opening and closing HTML documents

• A Window object is usually included with open() and close () methods, in order to distinguish from Document objects

PolarBearMain.html and PolarBear.html Windows

Working With Timeouts and Intervals

• The setTimeout() method of the window object is used in JavaScript to execute code after a specific amount of time has elapsed

• Code executed with the setTimeout() method executes only once

• The syntax for setTimeout() method is:– var variable + setTimeout (“code”, milliseconds);

• The clearTimeout() method of the Window object is used to cancel a setTimeout() method before its code executes

Program Using setTimeout() Methods

Working With Timeouts and Intervals

• The clearTimeout() method receives a single argument, which is the variable that represents a setTimeout() method call

• The setInterval() method is similar to the setTimeout() method, except it repeatedly executes the same code after being called only once

• The clearInterval() method is used to clear a setInterval () method

• The setInterval and clearInterval () methods are most often used for starting animation code that executes repeatedly

Section A: Chapter Summary

• The Window object represents a web browser or an individual frame within a window

• The hierarchy of JavaScript objects is called the JavaScript object model

• You can use methods and properties of objects in the JavaScript object model to manipulate the window, frames, and HTML elements displayed in a web browser

• An important object in JavaScript object model is the Document object, which represents HTML documents

Section A: Chapter Summary

• Although objects in the JavaScript object model are referred to in this text with an uppercase letter, you must always use a lowercase letter when using the object name in code, since you are actually referring to a property of the object

• It is usually not necessary to include the Window object when listing an object’s ancestors in a statement

• You can use the open() method of the Window object to open a new Web browser window

Section A: Chapter Summary

• You can use the name property of a Window object to specify a target window in which a hypertext link’s URL opens the location where results of form submission appear

• In the open() method, the URL argument represents the Web address or filename to be opened

• If you exclude the options string of open() method, then all normal options will be created in the new Web browser window

Section A: Chapter Summary

• A Window object’s name property can only be used to specify a target window with hypertext links or forms, and cannot be used in JavaScript code

• The Window object is usually included with the open() and close() methods to clearly distinguish between the Window and Document objects

• The setTimeout() method of Window object is used in JavaScript to execute code after a specific amount of time has elapsed

Section A: Chapter Summary

• The clearTimeout () method of Window object is used to cancel a setTimeout() method call before its code executes

• The setInterval() method of Window object repeatedly executes the same code after being called only once

• The clearInterval() method of Window object is used to cancel a setInterval() method call

Section B:

Working with Frames

and Other Objects

Objectives

In this section students will learn how to:

• Create frames

• Use the TARGET attribute

• Create nested frames

• Format frames

Objectives

In this section students will learn about:

• NOFRAMES tag

• Location object

• History object

• Navigator Object

• How to reference frames and windows

Creating Frames

• Frames are independent, scrollable portions of a Web browser window, with each frame capable of containing its own URL

• An HTML document is divided into frames using the <FRAMESET>…</FRAMESET> tag pair

• Frames in an HTML document can be created in horizontal rows, vertical columns, or both

• Two attributes of the <FRAMESET> tag, ROWS, and COLS, determine whether frames are created as rows or columns

Creating Frames

• The ROWS attribute determines the number of horizontal frames to create

• The COLS attribute determines the number of vertical frames to create

• Must define more than one row or column or frames will be completely ignored by the web browser

• The <FRAME> tag is used to specify options for individual frames, including a frame’s URL

Frames Created With <FRAMESET ROWS=“50%, 50%” COLS=“50%, 50%”>

Frames Created With <FRAMESET ROWS=“50%, 50%”>

Frames Created With <FRAMESET COLS=“50%, 50%>

URL Load Order

Using the TARGET Attribute

• One popular use of frames creates “table of contents” on left side and on right side “display” frame to show contents of URL selected from link in table of contents frame

• The TARGET attribute determines in which frame or Web browser window a URL opens

• The <BASE> tag is used to specify a default target for all links in an HTML document, using assigned name of window or frame

Musical Instruments Document

Musical Instruments Document After Selecting an Instrument

Musical Instruments Program

VirtualZoo.html in a Web Browser

Nesting Frames

• Frames that are contained within other frames are called nested frames

• As a Web browser starts creating frames, URLS of frames are loaded in the order in which each <FRAME> tag is encountered

• In Figure 5-21, the first <FRAMESET> tag creates the four parent frames in the window

Nested Frames

Musical Instruments Program With Nested Frames

VirtualZoo.html With Nested Frames

Frame Formatting

• The NORESIZE attribute disables the user’s ability to resize an individual frame

• Use the NORESIZE attribute when you want to add a title that should always be visible in a frame or on a web page

• To disable resizing of a frame, add NORESIZE attribute to <FRAME> tag

<FRAME> Tag Attributes

Output of Program That Includes NORESIZE and SCROLLING Attributes

Frame Formatting

• Scroll bars are automatically added to frame when contents are larger than visible area

• You can disable a frame’s scroll bars using the SCROLLING attribute

• The MARGINHEIGHT and MARGINWIDTH attributes determine the margins of the frame in pixels

– for example: MARGINHEIGHT = 50 and MARGINWIDTH = 50 added to <FRAME> tag

Middle Frame Changed to <FRAME SRC= “body.html” MARGINHEIGHT=50

MARGINWIDTH=50>

The NOFRAMES Tag

• The <NOFRAMES>…</NOFRAMES> tag pair is similar type of tag; it displays an alternate message to users, of Web browsers that are incapable of displaying frames

• Web browsers that are capable of displaying frames ignore the <NOFRAMES> tag

The Location Object

• The Location object allows you to change to a new Web page from within JavaScript code

• The Location object includes two methods: reload() and replace()

• Reload() method of the Location object is equivalent to the Reload button in Navigator or the Refresh button in Internet Explorer

• Replace() method of the Location object is used to replace the currently loaded URL with a different one

Location Object Properties

The History Object

• A History object maintains a history list of all the documents that have been opened during the current Web browser session

• When you use a method or property of the History object, you must include a reference to the History object itself

• The go() method is used for navigating to a specific Web page that has been previously visited

• The argument of the go() method is an integer

Methods of the History Object

Program Using the Back() and Forward() Methods of the History Object

The Navigator Object

• A Navigator object is used to obtain information about current Web browser

• The Navigator object gets its name from Netscape Navigator, but is supported by Internet Explorer also

• Internet Explorer does not support the language property

Navigator Object Properties

Output of Navigator Object Properties Program

Output of NavigatorObjects.html in Navigator

Output of NavigatorObjects.html in Internet Explorer

Referring to Frames and Windows

• When working with multiple frames and windows, you need to be able to refer to individual frames and windows in JavaScript code

• To refer to a frame within the same frame set, you use the parent property of the Window object combined with the frame’s index number from frames [ ] array

Parent Property and Frames [ ] Array Example

Example of a Parent.Parent Reference

Section B: Chapter Summary

• Frames are independent, scrollable portions of a Web browser window, with each frame capable of containing its own URL

• Each frame has its own Window object, separate from other frames in the document

• An HTML document is divided into frames using the <FRAMESET>…</FRAMESET> tag pair

• The ROWS attribute of the <FRAMESET> tag determines the number of rows to create in a frame set

Section B: Chapter Summary

• The COLS attribute of the <FRAMESET> tag determines the number of columns in frame set

• The <FRAME> tag is used for specifying options for individual frames, including a frame’s URL

• The SRC attribute of the <FRAME> tag specifies the URL to be opened in an individual frame

• The URLs of frames are opened in the order in which each <FRAME> tag is encountered

• The <BASE> tag uses an assigned name of a window or frame to specify a default target for all links in an HTML document

Section B: Chapter Summary

• Frames that are contained within other frames are called nested frames

• The NORESIZE attribute disables the ability to resize an individual frame

• You can disable a frame’s scroll bars with the SCROLLING attribute

• The <NOFRAMES>…</NOFRAMES>tag pair displays an alternate message to users of Web browsers that are unable to display frames

Section B: Chapter Summary

• The Location object contains several properties and methods for working with the URL of document currently open in Web browser

• The reload()method of the Location object is equivalent to the Reload button in Navigator and Refresh button in Internet Explorer

• The replace() method of the Location object replaces the currently loaded URL with a different URL

Section B: Chapter Summary

• The History object maintains a history list of all the documents that have been opened during current Web browser session

• The back() and forward() methods of History object allow a program to move backward and forward in a web browser’s history list

• The go() method of the History object is used for navigating to a specific Web page

Section B: Chapter Summary

• The Navigator object is used to obtain information about the current Web browser

• The Frame object includes a frames [] array that contains all frames in a window

• To refer to a frame within same frame set, use parent property of Window object