BOM Windows Object Methods and Properties in JavaScript

Introduction

 
In this article, we learn about BOM in JavaScript. 
 

What is BOM?

 
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 referred to as BOM's methods and properties. A window object is automatically created by the browser.
 
Various types of BOM (Browser Object Model)
  • Windows Object
  • Navigator Object
  • Location Object
  • Screen Object
  • Storage Object

The Windows Objects

 
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
 
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 performs an action after a specified time, like calling a function, evaluating expressions, etc.
 
Properties in windows objects
 
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
 
We can see the example for all methods, one by one I will explain them.
 

The alert () method

 
This method is used to display an alert message to the user. It displays the alert box containing a message with the ok button to proceed. The alert () method takes a single parameter, which is the text displayed in the popup box.
 
Example
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">
  5.     <title>Alert Method</title>  
  6. </head>  
  7. <body>  
  8.     <h2>BOM Windows alert () method</h2>  
  9.     <script type="text/javascript">    
  10.         function atl()  
  11.         {    
  12.         alert("Welcome to C-sharp Cornner");  //alert method  
  13.         }    
  14. </script>    
  15.     <input type="button" value="click_Here" onclick="atl();">  
  16. </body>  
  17. </html>  
Output
 
BOM Windows Object Methods And Properties In JavaScript
 

The confirm () method

 
This method is used to display an alert message to the user and verify or accept something. It displays the alert box containing a message with two buttons, 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:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head> 
  4.     <meta charset="utf-8">  
  5.     <title>Confirm Message</title>  
  6. </head>  
  7. <body>  
  8.     <h3>BOM windows objectconfirm () method</h3>  
  9. <script type="text/javascript">    
  10.     function msg(){    
  11.     var confm= confirm("Are u sure?"); //confirmation   
  12.         if(v==true)  
  13.         {    
  14.             alert("ok");    
  15.         }    
  16.         else  
  17.         {    
  18.             alert("cancel");    
  19.         }    
  20.         }    
  21. </script>      
  22. <input type="button" value="Back" onclick="msg();"/>   
  23. </body>  
  24. </html>  
Output
 
BOM Windows Object Methods And Properties In JavaScript
 

The Prompt () Method

 
The box on a line is often used to evaluate user input before entering a page. When the Instant Box pops up, the user must click OK or Cancel to enter the input value and proceed. It has a message and text field. When the user clicks OK, the box returns the input value. When the user clicks Cancel, it returns null.
 
Example
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Prompt </title>  
  5. </head>  
  6. <body>  
  7.     <h3>BOM windows Object Prompt () Method</h3>  
  8. <script type="text/javascript">    
  9.     function pmpt()  
  10.     {    
  11.         var input= prompt("Who are you?");// input box    
  12.         alert("I am "+input);    
  13.     }    
  14. </script>    
  15.   <input type="button" value="click" onclick="pmpt();">   
  16. </body>  
  17. </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

 
This displays its content in a new tab or window. In the below example, click the button and it will redirect the new window.
 
Example
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>
  4.     <meta charset="utf-8">   
  5.     <title>BOM Open () Method</title>  
  6. </head>  
  7. <body>  
  8.     <h3>Open () Method</h3>  
  9.     <script type="text/javascript">    
  10.     function msg()  
  11.     {    
  12.     open("https:www.c-sharpcorner.com");  //open the link next window  
  13.     }    
  14. </script>    
  15. <input type="button" value="Click_to_Next" onclick="msg()"/>    
  16. </body>  
  17. </html>  
Output
 
BOM Windows Object Methods And Properties In JavaScript
 
BOM Windows Object Methods And Properties In JavaScript
 

The setTimeout () Method

 
This method is performing the action on after the given milliseconds, like calling function, evaluating expressions etc.
 
Example
 
Try it yourself:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Windows Methods</title>  
  6. </head>  
  7. <body>  
  8.     <h2>Windows Objects SetTimeout() Methods </h2>  
  9.     <script type="text/javascript">    
  10.         function msg()  
  11.         {    
  12.             setTimeout(    
  13.                 function()  
  14.                 {    
  15.                     alert("Welcome to C-sharp corner after 2 seconds")  
  16.                 },2000);    
  17.         }    
  18.     </script>     
  19. <input type="button" value="click" onclick="msg()">    
  20. </body>  
  21. </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

 
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
  1. windows.innerHeight  
  2. windows.innerWidth  
Example
 
Try it yourself,
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>BOM property</title>  
  6. </head>  
  7. <body>  
  8.     <h2>Browser Object Model (BOM) properties</h2>  
  9.     <script type="text/javascript">   
  10.         function prpt()   
  11.         {  
  12.          document.write("The innerHeight is :"+window.innerHeight+"<br>"); //inner height  
  13.          document.write("The innerWidth is :"+window.innerWidth); // inner width   
  14.         }  
  15.     </script>     
  16.     <input type="button" value="innerHeight_Width" onclick="prpt()">     
  17. </body>  
  18. </html>  
Output
 
BOM Windows Object Methods And Properties In JavaScript
 
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 name of the window after the window is created.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>BOM property</title>  
  6. </head>  
  7. <body>  
  8.     <h2>Browser Object Model (BOM) name properties</h2>  
  9.     <script type="text/javascript">   
  10.         function prt()   
  11.         {  
  12.          window.name = "c-sharp corner";  
  13.          document.write("The Name is :"+window.name); //windows name  
  14.         }  
  15.     </script>     
  16.     <input type="button" value="Click_window_name" onclick="prt()">     
  17. </body>  
  18. </html>  
Output
 
BOM Windows Object Methods And Properties In JavaScript
 
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!