Introduction
In this article, we learn about BOM in JavaScript.
What is BOM(Browser Object Model) in JavaScript?
BOM refers to the browser object model in JavaScript. BOM is used on the Windows screen and communicates with the browser. BOM refers to Windows objects in JavaScript. Modern browsers have implemented the same methods and properties for JavaScript interactions, often called BOM's methods and properties. The browser automatically creates a window object.
Various types of BOM (Browser Object Model) in JavaScript
- Windows Object
- Navigator Object
- Location Object
- Screen Object
- Storage Object
The Windows Objects in JavaScript
The window object represents the browser's window. All the global JavaScript objects are members of the window object. The window object has some methods and properties,
Methods in windows objects in JavaScript
Methods |
Description |
Alert() |
It displays the popup messages with the ok button. |
Confirm() |
It displays the message on the alert box with the OK and cancel button. |
Prompt() |
It gets input from the user to display a text message in the dialog box. |
Open() |
Opens the current window. |
Close() |
Closes the current window. |
moveTO() |
Moves the current window. |
resizeTo() |
Resizes the current window. |
setTimeout() |
It acts after a specified time, like calling a function, evaluating expressions, etc. |
Properties in windows objects in JavaScript
Property |
Descriptions |
innerHeight |
It returns the height of the browser window. |
innerWidth |
It returns the width of the browser window. |
name |
Specifies the name of the window. |
Example of windows object methods in JavaScript
We can see the example for all methods, one by one; I will explain them.
The alert() method in JavaScript in JavaScript
This method is used to display an alert message to the user. It shows the alert box containing a message with the ok button to proceed. The alert () method takes a single parameter: the text displayed in the popup box.
Example
Try it yourself,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Alert Method</title>
</head>
<body>
<h2>BOM Windows alert () method</h2>
<script type="text/javascript">
function atl()
{
alert("Welcome to C-sharp Cornner"); //alert method
}
</script>
<input type="button" value="click_Here" onclick="atl();">
</body>
</html>
Output
The confirm () method in JavaScript
This method displays an alert message to the user and verifies or accepts something. It displays the alert box containing a message with two buttons, the OK and cancel button, to proceed. When the user clicks OK, the box returns true. If the user clicks Cancel, the box is invalid.
Example
Try it yourself,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Confirm Message</title>
</head>
<body>
<h3>BOM windows objectconfirm () method</h3>
<script type="text/javascript">
function msg(){
var confm= confirm("Are u sure?"); //confirmation
if(v==true)
{
alert("ok");
}
else
{
alert("cancel");
}
}
</script>
<input type="button" value="Back" onclick="msg();"/>
</body>
</html>
Output
The Prompt () Method in JavaScript
The box on a line is often used to evaluate user input before entering a page. It has a message and text field. When the Instant Box pops up, the user must click OK or Cancel to enter the input value and proceed. When the user clicks OK, the box returns the input value. When the user clicks Cancel, it returns null.
Example
Try it yourself,
<!DOCTYPE html>
<html>
<head>
<title>Prompt </title>
</head>
<body>
<h3>BOM windows Object Prompt () Method</h3>
<script type="text/javascript">
function pmpt()
{
var input= prompt("Who are you?");// input box
alert("I am "+input);
}
</script>
<input type="button" value="click" onclick="pmpt();">
</body>
</html>
Output
Afterward, enter a name, and the dialog box will be displayed.
The Open () Method in JavaScript
This displays its content in a new tab or window. In the below example, click the button to redirect to the new window.
Example
Try it yourself,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOM Open () Method</title>
</head>
<body>
<h3>Open () Method</h3>
<script type="text/javascript">
function msg()
{
open("https:www.c-sharpcorner.com"); //open the link next window
}
</script>
<input type="button" value="Click_to_Next" onclick="msg()"/>
</body>
</html>
Output
The setTimeout () Method in JavaScript
This method acts after milliseconds, like calling functions, evaluating expressions, etc.
Example
Try it yourself,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Windows Methods</title>
</head>
<body>
<h2>Windows Objects SetTimeout() Methods </h2>
<script type="text/javascript">
function msg()
{
setTimeout(
function()
{
alert("Welcome to C-sharp corner after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()">
</body>
</html>
Output
We can see the example of properties, one by one; I will explain them:
Example of windows object Properties in JavaScript
The innerHeight and innerWidth
The windows object properties return the height and width of the browser content. We cannot change in height and width as these properties are read-only.
Syntax
windows.innerHeight
windows.innerWidth
Example
Try it yourself,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOM property</title>
</head>
<body>
<h2>Browser Object Model (BOM) properties</h2>
<script type="text/javascript">
function prpt()
{
document.write("The innerHeight is :"+window.innerHeight+"<br>"); //inner height
document.write("The innerWidth is :"+window.innerWidth); // inner width
}
</script>
<input type="button" value="innerHeight_Width" onclick="prpt()">
</body>
</html>
Output
The name property
The name property will return the name of the windows. This property is often used to change the window's name after the window is created.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOM property</title>
</head>
<body>
<h2>Browser Object Model (BOM) name properties</h2>
<script type="text/javascript">
function prt()
{
window.name = "c-sharp corner";
document.write("The Name is :"+window.name); //windows name
}
</script>
<input type="button" value="Click_window_name" onclick="prt()">
</body>
</html>
Output
Summary
In this article, we have learned about BOM windows object Methods and properties. In my next article, I will discuss the remaining BOM windows objects. Thanks for reading!