Understand “window” object in JavaScript

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 2246 red flag

In this article we are going to understand the basic property of "window" object in JavaScript.

Understand “window” object in JavaScript

In this article we will understand “window” object in JavaScript language. We know that in JavaScript each and everything is represented by object and the “window” object is super object of all. In JavaScript most of the objects are create on top of window object. Actually the “window” object represents the browser window and has lot of properties of it. In this article we will understand few of them with practical approach.


 “Window” is the super object   

As we have discusses the “window” object represent browser window and the immediate sub object is “document” . In this example we are calling to write() method which is on top of document object.

<form id="form1" runat="server">
        <script>
            alert(window.document.write("This line is writtten in window"));
        </script>
       
    </form>

Here is sample output.


Variable attach to “window” object

When we create any variable/object in JavaScript the variable get attach to window object  and we can access them using “window” object. Have a look one below code.

 

<form id="form1" runat="server">
 
        <script>
            var name = "sourav";
 
            function abc() {
                alert("value of name is:- " + window.name);
            }
           
 
        </script>
        <input type="button" value="value" name="value" onclick="abc()" />
    </form>
 

In this example name is defined and attached to “window” object internally. In time of call we can specify “window” object along with variable name.



Function also attach with “window” object

Now only variable , function also attach with “window” object when we define it in JavaScript application. Have a look on below example.

    <form id="form1" runat="server">
        <script>
            function hello() {
                alert("I am hello function");
            }
            window.hello();
        </script>
       
    </form>

We are calling function with the will path name of function.


 Height and width property of “window” object

As we have discusses, window represents the browser screen and it has high and width property. Here is small example of this.

<body>
    <form id="form1" runat="server">
        <script>
            alert("Height:-  " + window.innerHeight + " Width:- " + window.innerWidth);
        </script>
       
    </form>
</body>

 

 

Window.history property

When we navigate page to page in web application, all the history gets store in history object, Again we can get length of history object which creates on top of “window” object.

 

<form id="form1" runat="server">
         <script>
            alert("Length of history:- " + window.history.length);
        </script>
 
    </form>


Here is sample output.

 Conclusion:-

In this article we have learned few properties and use of “window” object in JavaScript. Though, those are very basic but very important to develop real life JavaScript application.

 

 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)