Browser Object Model

1. Browser Object Model • The BOM (Browser Object Model) also loads elements into a tree-structure that you can reference with JavaScript (kinda like the DOM) • It is mostly out of vogue and not recommended for accessing or manipulating HTML elements • It's good to know to • Deal with the Browser window itself • Handle legacy code

2. The BOM is Needed Sometimes • With the DOM you are always looking at the document level (i.e. the viewable portion of the page. • With the BOM you can also access properties of the Browser window itself • window object • methods like alert( ) and prompt( ) • document object • bgColor property, write( ) method

3. Browser Object Model (BOM) • The BOM differs between browsers and versions of the same browser • DOM differs less

4. Browser Objects • We saw some of the objects earlier with the DOM • The BOM can reference Arrays, Strings, Math • The entire BOM is very large • Fortunately we need only about 10% of it to do our work

5. Diagram of the BOM • - OBJECTS - window _____________|__________________ | | | | |location history document navigator screen _________|__________ | | | forms images links

6. Window Object • Represents the browser's frame or window in which your web page is contained • Represents the browser itself • Includes some properties that don't fit anywhere else • Remember all objects have properties and methods

7. Window Properties • Example Properties: • What browser is running • Pages that the user has visited • Size of the browser window • Example Methods • Can change text in browsers status bar • Change the page that is loaded • Open new windows

8. Global Object • Means that we don't have to use the object name in order to access it’s properties and methods • Example: alert("Hello"); • Could've written: window.alert("Hello");

9. Objects within Objects • The window object has properties that are objects themselves • document object -the page • history object -the pages visited • navigator object -information about the browser • screen object -display capabilities of the client • location -details on the current page's location

10. Using the Window Object • Example: Changing the status in a window's status bar • window.defaultStatus = "Hello and Welcome";or just defaultStatus = "Hello and Welcome"; • Warning: Don't name your functions the same as BOM objects

11. The history Object • Keeps track of pages the user visits • The History Stack • Works with the Back and Forward buttons • The back( ) and forward( ) methods • Note: Check different browsers • The go( ) method • Example: history.go(-2) or history.go(3); • 1 or -1 is the default

12. The location Object • Contains useful information about the page • the URL of the page (href) • the server hosting the page (hostname) • the port number of the server connection (port) • the protocol used (protocol)

13. Changing Locations • Two ways • Set the location( ) objects href property to point to another page • Use the location object's replace( ) method • Removes the current page from the History stack • Replaces it with a new page we are moving to • Can't use the Back button!

14. The navigator Object • Used to find out which version of a browser your using, what operating system the user is using

15. Browser Version Checking • We can find out what Browser, version of browser, and the operating system of the user • Can allow us to "degrade gracefully" • Display a message: "Hey, time to upgrade!" • Code example Next

16. Code for Broswer/Version <script type="text/javascript"> var browser=navigator.appName;var b_version=navigator.appVersion;var version=parseFloat(b_version);document.write("Browser name: "+ browser);document.write("<br />");document.write("Browser version: "+ version); </script>

17. Exercise • Write a JavaScript program to detect the browser and display the following messages… • If the user is using Firefox • Display: Good geek. You are using the correct browser • If the user is using Internet Explorer • Display: For an easier life, switch to Firefox • Test your program in Firefox and IE.

18. The screen Object • Contains information about the display capabilities of the client's machine • height and width range of pixels on screen • colorDepth property to determine how many colors can display

19. The Page Itself • The document object • Common properties and methods body.bgColor alert()

20. Array Objects on Document • The forms, images, and link arrays are properties of the window object • See Document Collections

21. The images Array • We can insert an image on a page with the img tag • <imgname='myImage' src='usa.gif'> • JavaScript makes this image available to us by creating an IMG object named myImage • Each image is stored in the images [ ] array • first image on the page is document.image[0] • example: var myImage2 = document.images[1] • we can now use the variable name in our code

22. Access by Image Name • document.images["myImage"];

23. The links Array • For each hyperlink on a page ( the <a> tag) the browser creates an "A Object" • The most important property is href • Collections of A objects are contained in the links array

24. End • End of Lesson