20 - Using the Window Object

The browser window can be accessed using the window object in Javascript. The object has several properties and objects which can be used to perform some thrift and useful operations. Well, here are some of them.

window.alert()

The alert function can be used to pop up an alert with the message passed as a parameter to the function. In general it is usually a string that is customized to display what is required. Here are some examples

· Invalid user name and password.

· Login has been successfully created.

· Your application has been submitted.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
                
        </script>
    </head>
     
    <body style = "font-size:16px;">
       <hr>
        <script type="text/javascript">        
           window.alert("Deep into the sea of Javascript!!");
        </script>
    </body>
</html>

We have earlier seen many examples in all our earlier tutorials and used this function to understand our concepts.

window.prompt()

This function is different from the alert function in that it displays a pop up too but asks the user to input a value to a text box. You can pass a message that can help the user understand what has to be keyed in. On the press of the OK button the value is taken and returned by the function. If the cancel button is pressed then null is returned. This can be seen from the examples in the screen shots below.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
                
        </script>
    </head>
    
    <body style = "font-size:16px;">
       <hr>
        <script type="text/javascript">        
          var userValue = window.prompt("Type in Whatever you feel like..");
          window.alert(userValue);
        </script>
    </body>
</html>


The user inputs Javascript in the text box and presses ok. Now the value is taken and returned. In the code we have stored it in a variable and passed the variable to the alert function which displays it.

Now, time, the user can enter some value or leave it blank and press cancel. This would return a null value and the variable would have null value which can be seen.

window.print()

This function can be used to print the contents of the window that is currently being used.

In this example you can see that the prompt for choosing the printer and setting the printer options comes on when the window.print() statement is executed.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
                
        </script>
    </head>
     
    <body style = "font-size:16px;">
       <hr>
        Hello World! 
        <script type="text/javascript">        
          window.print();
        </script>
    </body>
</html>


window.confirm()

The confirm function can be used to return a yes or no from the user which means the user can decide whether to proceed with an action or cancel it.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
        </script>
    </head>
     
    <body style = "font-size:16px;">
        <hr>
        Hello World! 
        <script type="text/javascript">        
          var ageConfirmation = window.confirm("Is your age over 18 years?");
          if(ageConfirmation)
          {
              alert("We trust you!");
          }
          else
          {
            alert("You shouldn't be here!");
          }
        </script>
    </body>
</html>


The first time press the OK button which is taken as a true.

The second time you could press the cancel and see that it is taken as a false.

 

Like us on Facebook