BOM Windows Object Methods and Properties in JavaScript

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

BOM Windows Object Methods and Properties in JavaScript

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

BOM Windows Object Methods and Properties in JavaScript

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

BOM Windows Object Methods and Properties in JavaScript

Afterward, enter a name, and the dialog box will be displayed.

BOM Windows Object Methods and Properties in JavaScript

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

BOM Windows Object Methods and Properties in JavaScript

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

BOM Windows Object Methods and Properties in JavaScript

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

BOM Windows Object Methods and Properties in JavaScript

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

BOM Windows Object Methods and Properties in JavaScript

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!