Thursday, September 13, 2018

JavaScript - Document Object Model - Window object


let a = window.innerWidth;
console.log(a);

Since, we are in the widow is the global object. That is why we can just use it as:
console.log(innerWidth);

If we want to actually, see the width of the window, check the outerWidth variable
console.log(outerWidth);

To check the height of the window:
console.log(innerHeight);
console.log(outerHeight);

To know all the available properties on the window object:
console.log(window);

The window object is a really complex object - giving access to high level features here. The methods: setTimeout and setInterval are also the methods available on the window object.

localStorage: It is a built in storage which will save certain values in the browser - as long as the application is running here. We can use the setItem method on the localStorage:

localStorage.setItem('key1',55);

Now, we can get the value stored against the key using the getItem method.
console.log(localStorage.getItem('key1'));

sessionStorage: We also have sessionStorage, which is similar to localStorage:

sessionStorage.setItem('key1',55);
console.log(sessionStorage.getItem('key1'));

The difference is the localStorage will persist. But the sessionStorage will be deleted or emptied when the user closes the tab or the browser.

location: The window object also has the location you are currently at:
console.log(window.location);

document: The window object also has access to the document or the DOM:
console.log(window.document); // the dom

open: This will open the URL in a separate tab:
window.open("http://www.google.com");

The goal is not to learn all. But, to know how to find and use these objects. The global scope we are referring to the window object. So, the global scope is the window object. Therefore, we do not need to use window.anything... we can use
window.open("http://www.google.com");

as

open("http://www.google.com");

Refer:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction


Practice at:
http://jsbin.com/?js,console

No comments:

Post a Comment