topic 5 Windows and Frames

2 Goals and Objectives Goals 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 Objectives Windows and frames Windows and frames Browser object Browser object Location object Location object History object History object Window object Window object Frames Frames DHTML DHTML Practice using the window and other objects Practice using the window and other objects

3 Chapter Headlines 1 Introduction 1 Introduction Learn the secrets behind all these ad popups Learn the secrets behind all these ad popups 2 Browser Object 2 Browser Object Find out which browser a client is using Find out which browser a client is using 3 Location Object 3 Location Object Control 7 Including JavaScript files Control 7 Including JavaScript files Learn how to load and use library files Learn how to load and use library files 8 DHTML 8 DHTML Find out what the “D” in DHTML means Find out what the “D” in DHTML means

4Introduction When browsing, many other windows pop up When browsing, many other windows pop up Closing these windows gives rise to others Closing these windows gives rise to others This attracts the attention of web surfers This attracts the attention of web surfers Different browsers are often incompatible Different browsers are often incompatible Web sites optimize their web pages for a particular browser Web sites optimize their web pages for a particular browser JavaScript makes all of this easy to accomplish JavaScript makes all of this easy to accomplish JavaScript provides objects with properties and behaviors for these actions JavaScript provides objects with properties and behaviors for these actions

5 Browser Object JavaScript browser related objects are: navigator, MimeType, and Plugin JavaScript browser related objects are: navigator, MimeType, and Plugin Properties of navigator object: appCodeName, appName, appVersion, language, mimeType, platform, plugins, userAgent Properties of navigator object: appCodeName, appName, appVersion, language, mimeType, platform, plugins, userAgent Methods of navigator object: javaEnabled(), preference(), taintEnabled() Methods of navigator object: javaEnabled(), preference(), taintEnabled()

6 Browser Object Example 23.1: Use navigator object

7 Location Object Location object represents the URL associated with a window object Location object represents the URL associated with a window object Properties of Location object: hash, host, hostname, href, pathname, port, protocol, search Properties of Location object: hash, host, hostname, href, pathname, port, protocol, search Methods of Location object: reload(), replace(), Methods of Location object: reload(), replace(),

8 Location Object Example 23.2: Use Location object

9 History Object History object contains the URLs that the client has visited during a browser session History object contains the URLs that the client has visited during a browser session Properties of History object: length, current, next, previous Properties of History object: length, current, next, previous Methods of Location object: back(), forward(), go(x) Methods of Location object: back(), forward(), go(x)

10 History Object Example 23.3: Use History object

11 Window Object window object is the root object in JavaScript DOM tree window object is the root object in JavaScript DOM tree We can refer to the current window in three ways: window, self, top 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 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. Methods of window object: alert(), back(), blur(x), captureEvents(), clearInterval(), clearTimeout(), close(), confirm(), find(), focus(), forward(), home, moveBy(), open(), print(), resizeBy(), etc.

12 Window Object Example 23.4: Create and ad popup window

13 Frame Object A frame set displays multiple frames each with its own URL A frame set displays multiple frames each with its own URL JavaScript does not use tree structure to simplify dealing with nesting frames 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 creates an array called frames that holds all the frames of a frame set JavaScript represents a frame using a window object 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 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

14 Frame Object Example 23.6: Use frames

15 Including JavaScript Files JavaScript can load and use files stored in libraries JavaScript can load and use files stored in libraries Functions can be stored in their own files and can be loaded at run-time Functions can be stored in their own files and can be loaded at run-time The benefits are: The benefits are: Simplifies the HTML files of web pages Simplifies the HTML files of web pages Makes one function usable by more than one web page Makes one function usable by more than one web page Provides a central location to change a function Provides a central location to change a function The file extensions are.js example myLib.js The file extensions are.js example myLib.js These files are accessed using the src attribute of the tag These files are accessed using the src attribute of the tag One must carefully specify the path name with including such files One must carefully specify the path name with including such files

16 Including JavaScript Files Example 23.7: Use.js files

17DHTML Dynamic HTML (DHTML) has three components: Dynamic HTML (DHTML) has three components: CSS CSS Content positioning Content positioning Downloadable fonts Downloadable fonts It provides greater control over appearance, layout, and behavior 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 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 Web developers can also control the visibility of web page elements via DHTML

18Summary Popups are generated by using certain JavaSript objects Popups are generated by using certain JavaSript objects Browser object contains information about client side browser Browser object contains information about client side browser Location object represents the URL Location object represents the URL History object represents the visited URLs History object represents the visited URLs Window object is the root level object Window object is the root level object Frame object is represented using a window object Frame object is represented using a window object JavaScript enables us to use and load library files JavaScript enables us to use and load library files DHTML is a loosely defined term DHTML is a loosely defined term