Movatterモバイル変換

Team Emertxewww.webstackacademy.comBrowser Object Model (BOM)JavaScript

www.webstackacademy.com ‹#›www.webstackacademy.comJavaScript BOM(Introduction)

BOM• The Browser Object Model (BOM) is used to interact with the browser.• These BOM provides access to the various characteristics of a browser (Browserwindow itself, Screen characteristics, Browser history etc…)• The default object of browser is window means we can call all the functions ofwindow by specifying window or directly.• If a document contain frames (<iframe> tags), the browser creates one windowobject for the HTML document, and one additional window object for each frame.Example :window.alert("Hello World");

DOM and BOM - DifferencesDocument Object Model (DOM) Browser Object Model (BOM)• DOM, the document object model, whichrepresents the contents of the web page. Wecan manipulate it using JavaScript.• All the objects are arranged as tree structure.There are various APIs provided to access andmanipulate the document.• W3C Recommendation. Goes beyond HTML,supports XML and XHTML as well.Functionality wise DOM is different.• The BOM operates one level above the web pagewhich includes browser attributes (ex: Location)and the page becomes a child of Browser.• All global JavaScript objects, functions and variablesautomatically become members of the windowobject.• Using BOM, we can modify, move the window orcan change the text in status bar, read the currentURL, go back or forward of the current page

www.webstackacademy.com ‹#›www.webstackacademy.comBOM - Window(Basic BOM Window APIs)

BOM – Window Size<script>var w = window.innerWidth;var h = window.innerHeightvar x = document.getElementById("ex");x.innerHTML = “Width: " + w + “<br>” + " Height: " + h;</script>Property Descriptionwindow.innerHeight The browser's client area height including scrollbarswindow.innerWidth The browser's client area width including scrollbarsThere are two properties to determine the size of window:

BOM – Window MethodsMethod to open a new window with some parametersMethod Descriptionwindow.alert() Displays alert box with OK button.window.confirm() Displays a confirmation dialog box with OK and cancel button.window.prompt() Displays a prompt dialog box to get user inputwindow.close() Closes the windowwindow.moveTo() Move the current windowwindow.resizeTo() Resize the current window

BOM – Window.open() MethodMethod & Descriptionwindow.open(URL, name, specs, replace)URL:• Specifies the URL of the page to open.Name:• Specifies the target attribute or the name of the window.• Values supported (ex: blank)Specs:• Comma separated values, loads of options• Example – HeightReplace:• Specifies whether the URL creates a new entry or replaces the current entry in the history list.• True and False values are supported

BOM – Window Screen MethodsThe screen object contains information about visitor’s screenProperty DescriptionavailHeight() Returns the height of the screenavailWidth() Returns the width of the screencolorDepth() Returns the bit depth of the color palette for displaying imageheight() Returns the total height of the screenwidth() Returns the total width of the screenpixelDepth() Returns the color resolution of the screen

www.webstackacademy.com ‹#›www.webstackacademy.comBOM – Navigator(BOM Browser related APIs)

BOM – Navigator ObjectThe window.navigator provides information about the browser. There is no standardimplementation for this, often most of the information is misleading. Don’t rely on it, justlearn Property DescriptionappCodeName The code name of the browserappName The name of the browserappVersion Specifies the version of the browseruserAgent Returns the user agentlanguage Returns the language of the browser.cookieEnabled Returns true if cookie is enabled otherwise falseplatform Browser platform (OS)

BOM – Navigator Object<script>document.write("Navigator App Name : "+ navigator.appName + "<br>");document.write("Navigator App Code Name : "+ navigator.appCodeName + "<br>");document.write("Navigator App Version : "+ navigator.appVersion + "<br>");document.write("Navigator User Agent : "+ navigator.userAgent + "<br>");document.write("navigator Language : "+ navigator.language + "<br>");document.write("Navigator Platform : "+ navigator.platform + "<br>");document.write("Navigator Cookie Enabled : "+ navigator.cookieEnabled + "<br>");</script>

www.webstackacademy.com ‹#›www.webstackacademy.comBOM – History(BOM User history related APIs)

BOM – History Object• The JavaScript history object represents an array of URL visited by the user.• The History object is a read-only array of URL.• We can load previous, forward or any particular page using history object.Method Descriptionback() Loads the previous URL in the history listforward() Loads the next URL in the history listgo() Loads specific page in the history listlength Number of elements in the history list

BOM – History Objectwindow.history.forward() ; // Forwardwindow.history.back(); // Backwindow.history.go(-5); // Go back 5 timeswindow.history.go(2); // Forward two timeswindow.history.go(window.history.length-1); // Go last item

www.webstackacademy.com ‹#›www.webstackacademy.comBOM – Location(BOM User location related APIs)

BOM – Location ObjectLocation object provides general access properties of the documentProperty Descriptionwindow.location.href The full URL of the currently loaded page (ex: http://www.ABC.com)window.location.hostname Returns the domain name of the web host (ex: www.ABC.com)window.location.pathname Returns path and filename of the current pagewindow.location.protocol Returns web protocol used (http or https)window.location.hash Sets or returns the anchor(#) part of URL (ex: www.ABC.com#print)window.location.port Sets or returns the port number of a URL (Typically for HTTP 80 isused, it can be configured / changed)

BOM – Location MethodsLocation object provides following methods to load / unload new documentsProperty Descriptionwindow.location.assign() Loads a new documentwindow.location.reload() Reloads the current documentwindow.location.replace() Replace the current document with a new one

www.webstackacademy.com ‹#›www.webstackacademy.comBOM – Timing Events(BOM Timer APIs)

BOM Timing EventsMethod DescriptionsetTimeout(function,duration) This function calls function after duration milliseconds fromnowsetInterval(function,duration) This function calls function after every duration millisecondsclearTimeout(timeout) This function calls clears any timer set by the setTimeout()functions• The window object supports events for setting Time Intervals.• These Time Intervals are called Timing events.

www.webstackacademy.com ‹#›www.webstackacademy.comCookies(Storing meta information using BOM)

Cookies – What?• A Cookie is a small piece of text data set by a web server that resideson the client's machine.• The Cookie is stored on the user's computer, it does not require anyserver space .• A website can set and read only its own cookies. Primarily cookies areused for user identity management.• The document.cookie property is used while dealing withcookies

Cookies – Types & UsesCookiesSession CookiesPersistent CookiesSet with expiry field. Destroyed when the user quits the browser.They are set with a expiry date. Maintained until the date.Cookies can be used for: Authentication, Session Tracking, Remember specific information about the userlike his name, password, last visited date etc

Cookie AttributesToken Descriptionusername=value User identification informationexpires=date Set the expiration date in form of UTC (Co-ordinated Universal Time). If you don’t setcookies are deleted when the browser get closed (Session cookies).domain=domain The domain for which the cookie is valid. In case is it not specified, the hostname ofthe server is usedpath=path This specifies the path where the cookie is valid. By default is will be set as “/”directory, for specific sub-domains the path need to be addedsecure Setting secure option will make the cookie to be returned only over encryptedHTTPS connection. This way it will protect other scripts accessing the cookie, whichwill enhance the security.

Setting Cookies - ExampleSyntax :name1=value1;name2=value2;name3=value3;Example:document.cookie=“username=WSA;expires=“Mon,18-Mar-2017 09:00:00 UTC”;path=/;domain=example.com;"Important note:• The document.cookie gives valid value only when the page is hosted from a server (in Chrome).• Use Bracket for testing cookies and host pages from XAMPP web server.

Cookie Limitations• Cookies can identify the computer being used , not the individual.• Cookies cannot access by any other computer except the visitor'scomputer that created the cookie.• The total number of cookies a browser can store at one time fromone particular site is limited to 20.• Each cookie is limited to about 4000 characters.

WebStack Academy#83, Farah Towers,1st Floor, MG Road,Bangalore – 560001M: +91-809555 7332E: training@webstackacademy.comWSA in Social Media:

Movatterモバイル変換

Change Language

JavaScript - Chapter 13 - Browser Object Model(BOM)

Embed presentation

Recommended

More Related Content

What's hot

Similar to JavaScript - Chapter 13 - Browser Object Model(BOM)

More from WebStackAcademy

Recently uploaded

JavaScript - Chapter 13 - Browser Object Model(BOM)