1. Chapter 5: Windows and Frames
JavaScript - Introductory

2. Previewing the Virtual Zoo Program

3. Section A:
Working with Windows

4. 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

5. 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

6. JavaScript Object Model

7. 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

8. 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

9. Window Object Properties

10. Window Object Methods

11. 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

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

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

14. 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

15. A JavaScript Program That Includes Name and Target Arguments

16. Common Open () Method Options

17. 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

18. Web Browser Window With No Interface Elements

19. Web Browser Window With Toolbar and Scroll Bars

20. 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

21. PolarBearMain.html and PolarBear.html Windows

22. 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

23. Program Using setTimeout() Methods

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. Working with Frames and Other Objects
Section B:
Working with Frames and Other Objects

31. Objectives In this section students will learn how to: Create frames
Use the TARGET attribute
Create nested frames
Format frames

32. Objectives In this section students will learn about: NOFRAMES tag
Location object
History object
Navigator Object
How to reference frames and windows

33. 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

34. 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

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

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

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

38. URL Load Order

39. 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

40. Musical Instruments Document

41. Musical Instruments Document After Selecting an Instrument

42. Musical Instruments Program

43. VirtualZoo.html in a Web Browser

44. 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

45. Nested Frames

46. Musical Instruments Program With Nested Frames

47. VirtualZoo.html With Nested Frames

48. 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

49. <FRAME> Tag Attributes

50. Output of Program That Includes NORESIZE and SCROLLING Attributes

51. 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

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

53. 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

54. 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

55. Location Object Properties

56. 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

57. Methods of the History Object

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

59. 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

60. Navigator Object Properties

61. Output of Navigator Object Properties Program

62. Output of NavigatorObjects.html in Navigator

63. Output of NavigatorObjects.html in Internet Explorer

64. 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

65. Parent Property and Frames [ ] Array Example

66. Example of a Parent.Parent Reference

67. 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

68. 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

69. 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

70. 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

71. 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

72. 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