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.