1. JavaScript, Third Edition
Chapter 4
The Browser Object Model

2. JavaScript, Third Edition
Objectives
Study the browser object model
Work with the Window object
Study the History, Location, and Navigator objects
Use JavaScript to refer to windows and frames
JavaScript, Third Edition

3. Understanding The Browser Object Model
Also called client-side object model
Is a hierarchy of objects
Each object provides programmatic access to a different aspect of the Web browser window or the Web page
JavaScript, Third Edition

4. Understanding The Browser Object Model (Cont.)
Window object:
Top level object in browser object model
Represents a Web browser window or an individual frame within a window
Automatically created by Web browser
Also called global object
Contains Document object
JavaScript, Third Edition

5. Understanding The Browser Object Model (Cont.)
JavaScript, Third Edition

6. JavaScript, Third Edition
The Document Object
Most important object in the browser object model
Represents Web page displayed in a browser
The write() and writeln() methods, refer to the Document object
Contains all of the elements you create on a Web page
JavaScript, Third Edition

7. Referencing JavaScript Objects
To refer to a JavaScript object in code:
you must refer to all of the objects that contain it, with the object names, separated by periods
JavaScript, Third Edition

8. JavaScript, Third Edition
The Window Object
Includes several properties that contain information about the Web browser window
Contains methods that allow you to manipulate the Web browser window itself
Use the self property to refer to the current Window object
JavaScript, Third Edition

9. The Window Object (Cont.)
JavaScript, Third Edition

10. The Window Object (Cont.)
JavaScript, Third Edition

11. The Window Object (Cont.)
JavaScript, Third Edition

12. JavaScript, Third Edition
Windows and Events
Events are particularly important when it comes to working with the browser object model
Allow you to:
Execute the methods and change the properties of objects in the browser object model
JavaScript, Third Edition

13. The click and double-click Events
Used with form controls
Often used for the anchor element:
Primary event associated with click and double-click Events
JavaScript, Third Edition

14. The click and double-click Events (Cont.)
In order to override the automatic click event with your own code
Add to the <a> element an onclick event handler that executes custom code
The dblclick event works the same as the click event, except
Users need to double-click the mouse instead of single-clicking it
JavaScript, Third Edition

15. The mouseover and mouseout Events
Use to create rollover effects:
Occur when your mouse moves over an element
The mouseover event occurs when the mouse passes over an element
The mouseout event occurs when the mouse moves off an element
JavaScript, Third Edition

16. The mousedown and mouseup Events
The mousedown event occurs when you point to an element and hold the mouse button down
The mouseup event occurs when you release the mouse button
JavaScript, Third Edition

17. Opening and Closing Windows
Reasons for opening new Web Browser windows:
To launch a new Web page in a separate window, allowing users to continue viewing current page in the current window
To use an additional window to display information such as a picture or an order form
JavaScript, Third Edition

18. Opening and Closing Windows (Cont.)
Whenever a new Web browser window is opened, a new Window object is created to represent the new window
You can manually open a new Web browser window:
in Netscape by selecting New Window from the File menu
In Internet Explorer by selecting Window from the New submenu on the File menu
JavaScript, Third Edition

19. JavaScript, Third Edition
Opening a Window
In order to open new windows in the strict DTD:
You must use the open() method of the Window object
Syntax for the open method is as follows:
window.open(url,ƒname,ƒoptions,ƒreplace);
In order to make a window the active window
Use the focus() method of the Window object
JavaScript, Third Edition

20. Opening a Window (Cont.)
JavaScript, Third Edition

21. Opening a Window (Cont.)
JavaScript, Third Edition

22. Opening a Window (Cont.)
JavaScript, Third Edition

23. JavaScript, Third Edition
Closing a Window
The close() method:
Closes a Web browser window
Probably used the most with variables representing other Window objects
To close the Web browser window represented by the OpenWin variable:
Use the Statement OpenWin.close();
JavaScript, Third Edition

24. Working with Timeouts and Intervals
Use the Window object’s timeout and interval methods to create code that executes automatically
The setTimeout() method:
Used in JavaScript to execute code after a specific amount of time has elapsed
Code executed with the setTimeout() method executes only once
JavaScript, Third Edition

25. Working with Timeouts and Intervals (Cont.)
Syntax for the setTimeout() method is
var variable = setTimeout(“code”, milliseconds);
ClearTimeout() method is used to cancel a setTimeout() method before its code executes
ClearTimeout() method receives a single argument:
Variable that represents a setTimeout() method call
JavaScript, Third Edition

26. Working with Timeouts and Intervals (Cont.)
Two other JavaScript methods that create code and execute automatically are:
setInterval() method
clearInterval() method
The setInterval() method:
is similar to the setTimeout() method, EXCEPT
it repeatedly executes the same code after being called only once
JavaScript, Third Edition

27. Working with Timeouts and Intervals (Cont.)
The clearInterval() method:
Used to clear a setInterval() method call in the same fashion that the clearTimeout() method clears a setTimeout() method call
JavaScript, Third Edition

28. JavaScript, Third Edition
The History Object
Maintains an internal list (known as a history list) of all the documents that have been opened during the current Web browser session
Each Web browser window and frame contains its own internal History object
JavaScript, Third Edition

29. The History Object (Cont.)
You cannot view the URLs contained in the history list:
BUT you can write a script that uses the history list to navigate to Web pages that have been opened during a Web browser session
JavaScript, Third Edition

30. The History Object (Cont.)
In Internet Explorer, you can use JavaScript code to navigate through a history list
Only possible if the currently displayed Web page exists within the same domain as the Web page containing the JavaScript code attempting to move through the list
JavaScript, Third Edition

31. The History Object (Cont.)
JavaScript, Third Edition

32. JavaScript, Third Edition
The Location Object
Allows you to change to a new Web page from within JavaScript code
One reason to change Web pages with JavaScript code is
to redirect your Web site visitors to a different or updated URL
When you use a method or property of the Location object, you
must include a reference to the Location object itself
JavaScript, Third Edition

33. The Location Object (Cont.)
JavaScript, Third Edition

34. The Location Object (Cont.)
JavaScript, Third Edition

35. The Location Object (Cont.)
JavaScript, Third Edition

36. JavaScript, Third Edition
The Navigator Object
Used to obtain information about current Web browser
Netscape and Internet Explorer each contain unique methods and properties of the Navigator object that cannot be used with the other browser
Most commonly used to determine which type of Web browser is running
JavaScript, Third Edition

37. The Navigator Object (Cont.)
JavaScript, Third Edition

38. Using the target and base Attributes
Target attribute determines in which frame or Web browser window a document opens:
Based on value assigned to an <a> element’s target attribute or the value assigned to a <frame> element’s name attribute
JavaScript, Third Edition

39. Using the target and base Attributes (Cont.)
Use the target attribute with the <base> element
to specify a default target for all links in a document
Using the assigned name of a window or frame
JavaScript, Third Edition

40. JavaScript, Third Edition
The parent Property
If a window contains no frames, then the frames[] array is empty
To refer to a frame within the same frame set:
Use the parent property of the Window object combined with the frame’s index number from the frames[] array
JavaScript, Third Edition

41. JavaScript, Third Edition
The top Property
Refers to the topmost window on a Web page
When working with frames, the top property refers to the window that constructed the frames
When the top property is used on a Web page that does not contain frames
refers to the window itself
JavaScript, Third Edition

42. JavaScript, Third Edition
Chapter Summary
Browser object model (BOM):
Hierarchy of objects, each of which provides programmatic access to a different aspect of the Web browser window or the Web page
Window object:
Top-level object in the browser object model
JavaScript, Third Edition

43. Chapter Summary (cont.)
Document object:
Arguably the most important object in the browser object model
Represents the Web page displayed in a browser
Location object:
Allows you to change to a new Web page from within JavaScript code
JavaScript, Third Edition

44. Chapter Summary (cont.)
Navigator object:
Object is used to obtain information about the current Web browser
target attribute:
Determines in which frame or Web browser window a document opens, based on the value assigned to an <a> element’s target attribute OR the value assigned to a <frame> element’s name attribute
JavaScript, Third Edition

45. Chapter Summary (cont.)
To refer to a frame within the same frameset:
Use parent property of the Window object combined with the frame’s index number from the frames[] array
Top property:
Topmost window on a Web page
JavaScript, Third Edition