JavaScript 101 – Lesson 09 – The Window Object

JS101

Welcome back to our JavaScript 101 series! Sorry for the long break from my side 🙁

 
In this part, we will start learning how to target the browser. The browser gives us a hierarchy of objects, at the very top of this hierarchy is the “window” object.

 
We already know about the functional scope and the global scope. Anything global can be accessed from the entire code block. But, anything inside the functional scope can only be accessed within that function.

 
When we are creating a global variable or function, we are actually creating a property or methods of the window object.

 
An example: Anything global is attached to the window object by default, so here we can access the “foo” variable using “window” object as below:

var foo = "this is foo";
alert( window.foo ); //this will work, and will popup "this is foo"

 
NOTE: We typically do not use “window” explicitly, because “window” is automatically implied for us. So, we can just omit the “window” and can use only “foo” as below to get the result. But, there are some situations when we can use “window” object explicitly for our convenience, like – for accessing a global variable from inside a function.

Example 1:

var foo = "this is foo";
alert( foo );

Example 2:

var foo = "this is from global scope";

var bar = function(){
	var foo = "this is from functional scope";
	alert( foo ); // will popup "this is from functional scope"
	alert( window.foo ); // will popup "this is from global scope"
};

bar();

Also, “alert()” function is also a method of window object, so we can use this method like:

window.alert("Alert Message");

 
Some known methods of window object are as below:

alert();
confirm();
prompt();
parseInt();
parseFloat();

 
Since, window object is automatically implied for us, we do not need to use them explicitly, like:

window.parseInt();
//or 
window.confirm();

 
To avoid conflicts among different JavaScript libraries or different parts of our codes, we can use “Immediately Invoked Function”. We put all of our codes inside this function. So, whenever this function is triggered – all of our codes are (variables or functions) treated us as local to this function. So, in this way we can avoid conflicts among several same named global variables or methods, since our codes are no longer in global scope – rather its now in our own functional block. In this way, we are also protecting our code from being overwritten by anyone else code.

 
An “Immediately Invoked Function” function is typically an anonymous function [i.e. a function without a given name to it]. In order to execute an anonymous function all we have to do is specify the calling parenthesis at the end of the function declaration. Then we need to wrap the entire function inside a set of parenthesis, this will allow to execute this function automatically. Anything defined inside this functional block is protected from outside interference or disturbance. Example:

 
//Immediately invoked function structure

(function(){
	//Code goes here
}());

//Example with code

(function(){
	var foo = "this is foo";

	var bar = function(){
		var foo = "this is new foo";
		alert( foo );
	};

	bar();
}());

 
Finally, we want to discuss about “confirm()” method today, which is also a method of the “window” object. It is helpful for making a decision from the user. This function returns a boolean value – true, if they confirm or false, if they cancel.

if( confirm("Do you want to leave this page?") ){
	alert("You decided to leave here!");
}
else{
	alert("You decided to stay here!");	
}

 
We can use the “location” object – which is also an object of “window” object. “location” object is handy for getting or setting the URL value of the browser. We can use like:

window.loaction = "http://www.google.com";

or we can just use:

loaction = "http://www.google.com"; //Since we does not require to explicitly specify the window object anywhere

var href = location; //getting the current URL
location = "http://www.google.com"; //setting the URL, to redirect 

 
Thats all for today! Thanks!

Leave a Comment.