The 'Window' Object and More Scope


In this lesson we finally talk about browser, how to direct target to browser because essentially browser is an operating system just like we writing application and run in normal operating system as Windows, we write application for our web sites and run on browser's so all of the code who we writing is direct hit to the browser. They gives us many objects which we use, that's do not access by browser its self but manipulate things with in the page so browser gives us Higher key of Object and in list of very higher key of object is Window Object Key. Which we are going to talk about in this lesson -- Window Object.

You do remember In lesson 5 (Scopes) we talk about two types of scopes.
1. Function/local Scope : Anything defined in function is access by only form inside the functions.
2. Global Scope : Anything defined as global is access by anywhere in web page. functions.
So whenever we create a global variable or global function is actually creating a property of Global Or Window Object. Let's understand by an example:
var foo = "hello! Window";
window.alert(window.foo);

Till today we are not type our code as like this, right?? But still there is no need to implied window object every time before our code because we still talking about this topic that window object is an global object and we can access it from anywhere and this is also stay hidden with their code's where our code absolutely need window object.
Let see some window method : Do you remember that two functions we talk about in previous lessons.
window.parseInt();
window.parseFloat();
They are also an window object.

Still confuse when window object keep itself hide than what we need of it let understand with an Example:

var foo = "Hello ! Window."; // Global variable
var bar = function(){
var foo = "Hello! Function." //Local variable Here we overriding the foo variable

alert(foo); // Accessing local variable
}
bar();

Result of this example is : Hello! function.

Now problem is this that if there's any need to access global variable form inside the functions so how can we access this where ever already a local variable is available. So for sought out this problem we can use here alert(window.foo) on behalf of alert(foo) from inside the function and than we can access global scope easily, update the example:

var foo = "Hello ! Window."; // Global variable
var bar = function(){
var foo = "Hello! Function." //Local variable Here we overriding the foo variable

alert( window .foo); // Accessing Global variable from inside the function
}
bar();

Result of this example is : Hello! Window.

But we still have a problem of The overriding of global variables :

Because we are human we making mistake so it can be easily happen that we override or create same var with same name again or it can be create by third party so in this condition our function is going to break or our code can break third party's function. So how can we sought out this problem or by which way we can save our code from break by third party and keep our code safe

NOTE: By using anonymous function or put our code into anonymous function we can keep our code safe let see syntax : It's like an empty function code


(function (){

|| Put your code or function inside anonymous function's body here ||

}());

Inside this anonymous function we can't access global var as by using Window object because it turn global var into local var if we forceful do this than alert function return undefined value.

(function (){ // Anonymous function.

var foo = "Hello ! Window."; // Global variable
var bar = function(){
var foo = "Hello! Function." //Local variable Here we overriding the foo variable

alert( window .foo); // Accessing Global variable from inside the function but this is wrong because we are in anonymous function.
}
bar();

}()); // Closing Antisepsis of Anonymous function.

Result of this example is : Undefined

If we use there : alert(foo); Than alert function return this result : Hello! Function.

Dialog boxes : Java script have own 3 dialog boxes.

alert();

// display anything on pop up window of browser

confirm();

// display with confirm window for user to select choice than take an action on pop up window of browser

Example :

(function(){

if(confirm("Do you want to open home page of Priyankit Systems.")){
location = "../index.html";

}else{
alert("Stay here.")
}

}());

prompt();

// display an input box for user to write anything on pop up window of browser

Note : alert( location.href ) method is use for check location of current page.


Wconcert India © 2015   ·   All Rights Reserved

Free Web Hosting