Transcript Chapter 5

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