Coding Tutorials Blog

Fundamentals of Client Side Javascript

December 28, 2020

Why read this?

Often when learning client-side javascript people skip right to DOM manipulation with the native DOM API (document.querySelector) or with jQuery. While these are important and pivotal skills to have there are several javascript browser APIs that can be used to solve all sorts of problems.

The ones I’ll be covering

navigator API

The navigator object has several functions that can be used to determine

  • what browser is being used (navigator.userAgent)
  • whether there is an internet connection (navigator.online)
  • register service workers

window API

The window object really bundles most of the APIs I’ll be talking about but one of the parts of it people may not be aware of but is quite useful is the location property.

customElements

the customElements registry allows you to register elements with HTML tags, also known as web components.

document

The document object allows us to manipulate, create, and remove elements from the DOM (document object model). This is how we make sites dynamic, exciting, and interactive. jQuery is a popular abstraction over this API, the most downloaded javascript library of all time. Modern Frontend frameworks like React, Vue, Angular, and Svelte also provide a large amount of abstraction over this API.

localStorage and sessionStorage

The storage API allows you to store data as strings in the browser.

  • localStorage: saves the data until you remove it
  • sessionStorage: saved the data until the browser is closed

They both work the same way.

Adding Data

const data = {
    name: "Alex",
    age: 35
}

localStorage.setItem("data", JSON.stringify(data))
sessionStorage.setItem("data", JSON.stringify(data))

retrieving data

const extractedData = JSON.parse(localStorage.getItem("data"))

const extractedData2 = JSON.parse(sessionStorage.getItem("data"))

Removing Data

localStorage.removeItem("data")
sessionStorage.removeItem("data")

© AlexMercedCoder.com 2020