BOM - The BOM Only Makes Sense in a Browser Environment
Utilizing global variables
x = 6; // creating the global variable (scope is the whole window)
window.x; // yields 6
window.x === x; // true
Methods of the global obj - isNAN() and parseInt() - these are also methods of the Number
object (Number.isNAN(4.2)// false)
window.parseInt(4.2); // 4
window.isNaN(4.2); // false
These can produce dialogs in the browsers: alert() , confirm() , and prompt()
window.location.href // "https://www.sitepoint.com/premium/books/javascript-novice-to-ninja"
or assignment window.location.href = 'https://www.sitepoint.com/javascript/'
window.location.protocol // "https:"
window.location.host // "www.sitepoint.com"
window.location.hostname // similar to host without the port#
window.location.port
window.location.pathname // "/premium/books/javascript-novice-to-ninja"
window.location.search // "?q=javascript&limit=24&offset=0&page=1&
content_types[]=All&slugs[]=all&states[]=available&order="
This was a search for javascript
There are methods that can be used with the window.location
reload(), assign(), replace(), toString()
window.history property can be used to access informtion about current browser history...
window.history.length // how many pages were visited prior
window.history.go(1); // goes forward 1 page
window.history.go(0); // reloads the current page
window.history.go(-1); // goes back 1 page
window.open() can open a new window
and can even be given parameters as attributes
const popup = window.open('https://sitepoint.com','
SitePoint','width=400,height=400,resizable=yes');
popup.close(); // if there is a reference to it
window.moveTo(0,0); // top left
and
window.resizeTo(600,400); // resize using hight and width
window.screen.height; // 1024
window.screen.width; // 1280
The availHeight and availWidth can be used to find the height and width of the screen, excluding any
operating system menus:
window.screen.availWidth; // 1280
window.screen.availHeight; // 995
The colorDepth property can be used to find the color bit depth of the user’s monitor,
although there are few use cases for doing this other than collecting user statistics:
window.screen.colorDepth;
********************************
Don't forget, each window contains a document object.
document.cookie = 'name=Superman';
// "name=Superman"
The document.cookie property acts like a special type of string. Assigning another cookie to it
won’t overwrite the entire property,
it will just append it to the end of the string. So we can
add more cookies by assigning them to document.cookie :
document.cookie = 'hero=true';
// "hero=true"
document.cookie = 'city=Metropolis';
// "city=Metropolis"
To change the cookie value just access the exact key and reference a new value
document.cookie = 'name=Batman' // "name=Batman"
document.cookie = 'city=Gotham' // "city=Gotham"
Reading Cookies
To see the current contents of the cookie jar, simply enter document.cookie :
document.cookie: // "name=Batman; hero=true; city=Gotham"
We can use the split method to break the string into an array containing each name/value pair, then
use a for of loop to iterate through the array:
const cookies = document.cookie.split("; ");
for (crumb of cookies){
const [key,value] = crumb.split("=");
console.log(`The value of ${key} is ${value}`);
}
// The value of name is Batman
The value of hero is true
The value of city is Gotham
There are some keywords that change functionality of cookies: path, domain, domainName, secure, expires or (max-age)
Cookies
window and scheduling methods for execution
window.setTimeout()
window.setTimeout( () => alert("Time's Up!"), 3000); // 4
The number returned is an ID that references that timeout, you can use that number to clear the timeout.
window.clearTimeout(4);
* The window object is the global object in a browser.
* Global variables are actually properties of the window object in a browser environment.
alert , confirm() , and prompt() are all methods of the window object, and open dialogs that halt the execution of the program.
* The window.navigator object gives information about the user’s browser and operating system, although it can be unreliable.
* The window.location object provides information about the URL of the current page.
* The window.history object keeps information about the pages that have been visited in the session.
* You can open, close, resize, and move windows (although, this doesn’t mean you should!).
* The window.screen object provides information about the user’s screen.
document.write() is an archaic method of writing text to the document and should be avoided.
* Cookies can be used to store small pieces of information between requests using the document.cookie property.
* The window.setTimeout() method can be used to invoke a function after a set amount of time. It can be canceled using the clearTimeout() method.
* The window.setInterval() method can be used to repeatedly invoke a function. It can be stopped using the clearInterval() method.
* The window.requestAnimationFrame() method can be used to produce smooth and optimized animation by utilizing the browser's built-in graphics capabilities. It can be canceled using the cancelAnimationFrame() method.