The Browser Object Model

The BOM are properties and methods that tell us about the browser and computer screen. The properties are available by using the window object.

Global Variables

Global variables are created without using const, let, or var and can be accessed in all parts of a program. Any global variable that is created is a property of the window object.

Create a global variable: x = 6;

Browser Info

You can use the navigator property of the window object to get the info about a browser that is being used.
window.navigator.userAgent //Get browser Info

Location

window.location.href //URL Info Returned as String
window.location.protocol //Returns string describing protocol
window.location.hostname //Returns string with domain of current URL

The window.location also has a reload() method that can be used to force a reload of the current page. It also has an assign() method that can be used to load another resource from a URL.
window.location.assign('https://www.CIT.com/')

Browser History

window.history //Info about previously visited pages
windows.history.length //how many pages have been visited before arriving at current page
window.history.go(1); // goes forward 1 page
window.history.go(0); // reloads the current page
window.history.go(-1); // goes back 1 page

Controlling Windows

You can open a new window with window.open(). The parameters it takes are the URL of the page to open, then the window title, then a list of attributes. This can be assigned to a variable.
const popup = window.open('https://sitepoint.com','
SitePoint','width=400,height=400,resizable=yes');

The Document Object

document.write('Hello, world!') would replace the whole document with the string.

If you include html in the string, it will become a part of the DOM tree.
document.write('

Hello, world!

');
It is best not to use document.write.

Cookies

Create a Cookie

document.cookie = 'name=Yoda';

If you assign another cookie it will append it to the end of the string instead of overwriting it.

Change Cookie Value

document.cookie = 'name=Batman'

Reading Cookies

Cookie Expiry Dates

Cookies are usually deleted when a browser session is finished, but you can make them persistent.

const expiryDate = new Date();
const tomorrow = expiryDate.getTime() + 1000 * 60 * 60 * 24;
expiryDate.setTime(tomorrow);

Path and Domain of Cookies

Cookies can only be read by pages in the same directory and domain as they were set for security. You can change it so any page in the root directory can read it.

document.cookie = 'name=Batman; path=/'

Secure Cookies

Make a cookie only be transmitted over a secure HTTPS network

document.cookie = 'name=Batman; secure';

Deleting Cookies

Set the cookie to expire at a time in the past.

document.cookie = 'name=Batman; expires=Thu, 01 Jan 1970 00:00:01 GMT';

Animation

requestAnimationFrame

HTML5

With HTML5 web storage, you can take a key-value pair that the API provides to store on a client's computer kind of like cookies with less restrictions and more storage.

Save Locally

localStorage.setItem('name', 'Walter White');

Reference localStorage.name as if it was a Variable

localStorage.name = 'Heisenberg'; console.log(localStorage.name);

Remove Item From Local Storage

localStorage.removeItem('name'); or use: delete localStorage.name;

Remove Everything From Local Storage

localStorage.clear();

Use JSON to Store Data

localStorage.setItem('superman', JSON.stringify(hero); This saves the hero object as a JSON string

Multimedia

Insert Audio Clip

Insert Video

Anything in the audio or video tags will only be displayed if the browser doesn't support them.

Audio and video can be referenced by a variable.

const video = document.getElementsByTagName('video')[0];

Start Play From Current Position

video.play();

Pause at Current Position

video.pause();

Make the Clip Loop

video.loop = true;

See Clip Duration

video.duration;