1 / 24

Browser Object Model

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

nitara
Download Presentation

Browser Object Model

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related