BROWSER ENVIRONMENT
Browser Object Model (BOM)
Introduction
◻ The JavaScript language was initially created for
web browsers. Since then it has evolved and become
a language with many uses and platforms.
◻ A platform may be a browser, or a web-server or
another host.
◻ A host environment provides own objects and
functions additional to the language core. Web
browsers give a means to control web pages
Browser Object Model
◻ The Browser Object Model (BOM) is used to
interact with the browser.
Browser window
◻ The default object of browser is window means you
can call all the functions of window by specifying
window or directly.
◻ The BOM provides you with objects that expose the
web browser’s functionality.
Section 1. Window
◻ It is used to interact with the browser window which
displays the web page. It generally represents a tab in
browser, but some actions like window width and height
will affect the complete browser window.
◻ Window – understand the window object.
◻ Alert – display an alert dialog.
◻ Confirm – display a modal dialog with a question.
◻ Prompt – prompt the user to input some text.
◻ setTimeout – set a timer and execute a callback function
once the timer expires.
◻ setInterval – execute a callback function repeatedly with
a fixed delay between each call.
window object
◻ The window object is supported by all browsers. It
represents the browser's window.
◻ All global JavaScript objects, functions, and variables
automatically become members of the window object.
◻ Global variables are properties of the window object.
◻ Global functions are methods of the window object.
◻ Even the document object (of the HTML DOM) is a
property of the window object:
◻ [Link]("header");
Window Methods
◻ Two properties can be used to determine the size of the
browser window.
◻ [Link] - the inner height of the browser window
(in pixels)
◻ [Link] - the inner width of the browser window
(in pixels)
◻ Other Window Methods
◻ Some other methods:
◻ [Link]() - open a new window
◻ [Link]() - close the current window
◻ [Link]() - move the current window
◻ [Link]() - resize the current window
Section 2. Location
◻ The [Link] object can be used to get the
current page address (URL) and to redirect the browser
to a new page.
◻ The [Link] object can be written without the
window prefix.
◻ Location – manipulate the location of a document via
the location object.
◻ Get query string parameters – learn how to retrieve
query string parameters.
◻ Redirect to a new URL – show you how to redirect to a
new URL using JavaScript.
[Link]
Some examples:
◻ [Link] returns the href (URL) of the current page
◻ [Link] returns the domain name of the web host
◻ [Link] returns the path and filename of the
current page
◻ [Link] returns the web protocol used (http: or
https:)
◻ [Link]() loads a new document
◻ Example
◻ Display the href (URL) of the current page:
◻ [Link]("demo").innerHTML =
"Page location is " + [Link];
Section 3. Navigator
◻ It acts as a storehouse of all the data
and information about the Browser software used
to access the webpage and this object is used to
fetch information related to the browser for
example, whether the user is using Chrome browser
or Safari browser, which version of browser is being
used etc.
◻ Navigator – query the information and capabilities
of the browser using the navigator object.
[Link]
◻ The [Link] object contains information about the visitor's
browser.
◻
The [Link] object can be written without the window prefix.
◻ Some examples:
◻ [Link]
◻ [Link]
◻ [Link]
◻ Example
◻ <p id="demo"></p>
<script>
[Link]("demo").innerHTML =
"[Link] is " + [Link];
</script>
Section 4. Screen
◻ The [Link] object contains information about the user's screen.
◻ Screen – get the information about the screen on which the browser is
running by using the screen object.
◻ The [Link] object can be written without the window prefix.
◻ Properties:
◻ [Link]
◻ [Link]
◻ [Link]
◻ [Link]
◻ [Link]
◻ [Link]
◻ Example
◻ Display the width of the screen in pixels:
◻ [Link]("demo").innerHTML =
"Screen Width: " + [Link];
Section 5. History
◻ The [Link] object contains the browsers history.
◻ To protect the privacy of the users, there are limitations
to how JavaScript can access this object.
◻ Some methods:
◻ [Link]() - same as clicking back in the browser
◻ [Link]() - same as clicking forward in the
browser
◻ History – manage the web browser’s history stack with
the history object.
The various objects that can be used to access various components of
the browser window in the picture
JavaScript Popup Boxes
◻ JavaScript has three kind of popup boxes: Alert box, Confirm box, and
Prompt box.
◻ Alert Box:-An alert box is often used if you want to make sure information
comes through to the user.
◻ When an alert box pops up, the user will have to click "OK" to proceed.
◻ Confirm Box:-A confirm box is often used if you want the user to verify or
accept something.
◻ When a confirm box pops up, the user will have to click either "OK" or
"Cancel" to proceed.
◻ If the user clicks "OK", the box returns true. If the user clicks "Cancel", the
box returns false.
◻ Prompt Box:-A prompt box is often used if you want the user to input a
value before entering a page.
◻ When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value.
◻ If the user clicks "OK" the box returns the input value. If the user clicks
"Cancel" the box returns null
Example
◻ alert("I am an alert box!");
◻ if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
◻ let person = prompt("Please enter your name", "Harry Potter");
let text;
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}
