Browser Object Model

• Set of browser objects
• There is no public standard, but all major browsers support it
• Netscape3 most standard
• Browser controls through the BOM interface

Browser Object Model Hierarchy

• Window
  • Screen
  • Location
  • Navigator
  • History

Browser Object Model in browser

Window Object

• Root object of Web Browser
• The window object represents an open window in a browser
• Global object

  window.alert('test');  ===  alert('test');

Window Objects

• Browser Object Model (BOM)
  • Control the browser
• Document Object Model (DOM)
  • Access contents of the page
• Javascript objects and functions
  • Object
  • Array
  • Function
  • Etc...

Window Object Properties

• document, history, location, navigator, screen
• self
  • Returns the current window (self === window)
• closed
  • Returns a Boolean value indicating whether a window has been closed or not
  • State: false
• defaultStatus
  • Sets or returns the default text in the statusbar of a window
  • State:
• name
  • Sets or returns the name of a window
  • State:
• frames
  • Returns an array of all the frames (including iframes) in the current window
  • Frame length: 0

Window Object Properties

• opener
  • Returns a reference to the window that created the window
  • State: null
• top
  • Returns the topmost browser window
  • State: [object DOMWindow]
  • window === top: true
• parent
  • Returns the parent window of the current window
  • State: [object DOMWindow]
• status
  • Sets or returns the text in the statusbar of a window
  • State:

Window Object Properties

• innerHeight
  • Returns the inner height of a window's content area
  • State: 300
• innerWidth
  • Returns the inner width of a window's content area
  • State: 400
• outerHeight
  • Returns the outer height of a window, including toolbars/scrollbars
  • State: 0
• outerWidth
  • Returns the outer width of a window, including toolbars/scrollbars
  • State: 0

Window Object Properties

• screenLeft, screenTop, screenX, screenY
  • Returns value coordinate of the window relative to the screen
  • screenLeft: 0 screenTop: 0 screenX: 0 screenY: 0
• pageXOffset
  • Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window
  • State: 0
• pageYOffset
  • Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window
  • State: 0

Window Object Methods

• alert()
  • Displays an alert box with a message and an OK button
  • Demo
• atob(), btoa()
  • Decodes and encodes a string in base-64
  • Demo

  function window_encode_decode() {
      var str = 'Hellow IDE?';
      var enc = window.btoa(str);
      var dec = window.atob(enc);
      var res = 'Encoded String: ' + enc + '\n' + 'Decoded String: ' + dec;
      alert(res);
  }

Window Object Methods

• confirm()
  • Displays a dialog box with a message and an OK and a Cancel button
  • Demo

  var result = confirm("Confirm");

• Displays a dialog box that prompts the visitor for input
• Demo

var name= prompt('name');
alert('your name: ' + name);

• Prints the content of the current window
• Demo

window.print();

Window Object Methods

• open()
  • Opens a new browser window
  • Demo

  function window_open() {
      myWindow = window.open("","","width=200,height=100");
  }

• Closes the current window
• Demo

window.close();

• Sets focus to the current window
• Demo

window.focus();

• Removes focus from the current window
• Demo

window.blur();

Window Object Methods

• moveBy()
  • Moves a window relative to its current position
  • Demo

  window.moveTo(250,250);

• Moves a window to the specified position
• Demo

window.moveTo(0,0);

• Resizes the window by the specified pixels
• Demo

window.resizeBy(250,250);

• Resizes the window to the specified width and height
• Demo

window.resizeTo(250,250);

Window Object Methods

• scrollBy()
  • Scrolls the content by the specified number of pixels
  • Demo

  window.scrollBy(100,0);

• Scrolls the content to the specified coordinates
• Demo

window.scrollTo(500,0);

• This method has been replaced by the scrollTo() method.

Window Object Methods

• setTimeout()
  • Calls a function or evaluates an expression after a specified number of milliseconds
  • Demo

  var timeoutID = setTimeout( function() { 'logic' }, 1000 );

• Clears a timer set with setTimeout()
• Demo

clearTimeout(timeoutID);

Window Object Methods

• setInterval()
  • Calls a function or evaluates an expression at specified intervals (in milliseconds)
  • Demo

  var intervalID = setInterval( function() { 'logic' }, 1000 );

• Clears a timer set with setInterval()
• Demo

clearInterval(intervalID);

Screen Object

• The screen object contains information about the visitor's screen

  window.screen === screen

Screen Object Properties

• availHeight
  • Returns the height of the screen (excluding the Windows Taskbar)
  • State: 768
• availWidth
  • Returns the width of the screen (excluding the Windows Taskbar)
  • State: 1024
• height
  • Returns the total height of the screen
  • State: 768
• width
  • Returns the total width of the screen
  • State: 1024
• colorDepth
  • Returns the bit depth of the color palette for displaying images
  • State: 32
• pixelDepth
  • Returns the color resolution (in bits per pixel) of the screen
  • State: 32

Location Object

• The location object contains information about the current URL

  window.location === screen

Location Object Properties

• hash
  • Sets or returns the anchor portion of a URL
  • State: #/
• host
  • Sets or returns the hostname and port of a URL
  • State: leechwin.github.io
• hostname
  • Sets or returns the hostname of a URL
  • State: leechwin.github.io
• href
  • Sets or returns the entire URL
  • State: http://leechwin.github.io/slide-bom/#/

Location Object Properties

• pathname
  • Sets or returns the path name of a URL
  • State: /slide-bom/
• port
  • Sets or returns the port number the server uses for a URL
  • State:
• protocol
  • Sets or returns the protocol of a URL
  • State: http:
• search
  • Sets or returns the query portion of a URL
  • State:

Location Object Methods

• assign()
  • Loads a new document
  • Demo

  location.assign("http://leechwin.tistory.com");

• Reloads the current document
• Demo

location.reload();

• Replaces the current document with a new one
• Demo

location.replace("http://www.tizenschools.com");

Navigator Object

• The navigator object contains information about the browser

  window.navigator === navigator

Navigator Object Properties

• appCodeName
  • Returns the code name of the browser
  • State: Mozilla
• appName
  • Returns the name of the browser
  • State: Netscape
• appVersion
  • Returns the version information of the browser
  • State: 5.0 (Unknown; Linux x86_64) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.9.1 Safari/534.34
• cookieEnabled
  • Determines whether cookies are enabled in the browser
  • State: true
• language
  • Returns the language of the browser
  • State: en-US

Navigator Object Properties

• onLine
  • Determines whether the browser is online
  • State: false
• platform
  • Returns for which platform the browser is compiled
  • State: Linux x86_64
• product
  • Returns the engine name of the browser
  • State: Gecko
• userAgent
  • Returns the user-agent header sent by the browser to the server
  • State: Mozilla/5.0 (Unknown; Linux x86_64) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.9.1 Safari/534.34

Navigator Object Methods

• javaEnabled()
  • Specifies whether or not the browser has Java enabled
  • State: false

  navigator.javaEnabled();

History Object

• The history object contains the URLs visited by the user (within a browser window)

  window.history === history

History Object Properties

• length
  • Returns the number of URLs in the history list
  • State: 1

History Object Methods

• go()
  • Loads a specific URL from the history list
  • Demo

  history.go(-1);

• Loads the previous URL in the history list
• Demo

history.back();

• Loads the next URL in the history list
• Demo

history.forward();