Transcript Windows & Frames

topic 5
Windows and Frames
Goals and Objectives

Goals
Understand JavaScript window object, how popup windows work,
find the browser that a client is using, how to use DHTML, and
understand the relationship between frames and windows

Objectives








Windows and frames
Browser object
Location object
History object
Window object
Frames
DHTML
Practice using the window and other objects
2
Chapter Headlines




1 Introduction
 Learn the secrets behind all these ad popups
2 Browser Object
 Find out which browser a client is using
3 Location Object
 Control7 Including JavaScript files
 Learn how to load and use library files
8 DHTML
 Find out what the “D” in DHTML means
3
Introduction







When browsing, many other windows pop up
Closing these windows gives rise to others
This attracts the attention of web surfers
Different browsers are often incompatible
Web sites optimize their web pages for a particular
browser
JavaScript makes all of this easy to accomplish
JavaScript provides objects with properties and behaviors
for these actions
4
Browser Object


JavaScript browser related objects are:
navigator, MimeType, and Plugin
Properties of navigator object:
appCodeName, appName, appVersion, language,
mimeType, platform, plugins, userAgent

Methods of navigator object:
javaEnabled(), preference(), taintEnabled()
5
Browser Object

Example 23.1: Use navigator object
6
Location Object

Location object represents the URL associated with a
window object

Properties of Location object:
hash, host, hostname, href, pathname, port,
protocol, search

Methods of Location object:
reload(), replace(),
7
Location Object

Example 23.2: Use Location object
8
History Object

History object contains the URLs that the client has

visited during a browser session
Properties of History object:
length, current, next, previous

Methods of Location object:
back(), forward(), go(x)
9
History Object

Example 23.3: Use History object
10
Window Object

window object is the root object in JavaScript DOM tree

We can refer to the current window in three ways:
window, self, top

Properties of window object:
closed, defaultStatus, document, frames,
history, innerHeight, innerWidth, length,
location, locationbar, menubar, name, opener,
outerHeight, outerWidth, pageXOffset,
pageYOffset, parent, personalbar, scrollbars,
self, status, statusbar, toolbar, top, window

Methods of window object:
alert(), back(), blur(x), captureEvents(),
clearInterval(), clearTimeout(), close(),
confirm(), find(), focus(), forward(), home,
moveBy(), open(), print(), resizeBy(), etc.
11
Window Object

Example 23.4: Create and ad popup window
12
Frame Object





A frame set displays multiple frames each with its own
URL
JavaScript does not use tree structure to simplify dealing
with nesting frames
JavaScript creates an array called frames that holds all
the frames of a frame set
JavaScript represents a frame using a window object
Example:
frames[0].document is the first frame declared
frames[1].document is the second frame declared
frames[2].document is the third frame declared
13
Frame Object

Example 23.6: Use frames
14
Including JavaScript Files



JavaScript can load and use files stored in libraries
Functions can be stored in their own files and can be
loaded at run-time
The benefits are:
Simplifies the HTML files of web pages
 Makes one function usable by more than one web page
 Provides a central location to change a function
 The file extensions are .js example myLib.js



These files are accessed using the src attribute of the
<script> tag
One must carefully specify the path name with including
such files
15
Including JavaScript Files

Example 23.7: Use .js files
16
DHTML

Dynamic HTML (DHTML) has three components:






CSS
Content positioning
Downloadable fonts
It provides greater control over appearance, layout, and
behavior
Some people extend DHTML to include any dynamic
action in a web page that is generated by JavaScript
Web developers can also control the visibility of web page
elements via DHTML
17
Summary
•
•
•
•
•
•
•
•
Popups are generated by using certain JavaSript objects
Browser object contains information about client side
browser
Location object represents the URL
History object represents the visited URLs
Window object is the root level object
Frame object is represented using a window object
JavaScript enables us to use and load library files
DHTML is a loosely defined term
18