Chapter 4

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

2. 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. 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. 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 selfproperty 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. 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. 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() methodof 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. 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() methodis 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. 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 displayedWeb 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. 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 referenceto 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. 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. 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 propertyof the Window object combined with the frame’s index number from the frames[] array JavaScript, Third Edition

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