What are browser APIs?
If you take a look at most JavaScript courses out there, they are intertwined with concepts that are technically not part of the language itself. For example, you'll find courses doing the following:
document.getElementById('some-id').innerHTML = 'New content'from the very start as a means of accessing an HTML element by its id attribute and then programmatically working with it.
In my JavaScript and Advanced JavaScript courses, I try to avoid covering such unnecessary information as much as I can. These features are technically NOT in the core language but rather features provided by the browser environment to you.
In general, we call them browser APIs. What's an API?
you ask. Think of an API as a set of utilities that you can interact with. By that means, a browser API is a set of utilities provided by the browser to you, in the form of JavaScript functions or classes, that you can use to accomplish useful things.
JavaScript on its own is just a language. You can do basic arithmetic using it, or perform a loop, or execute a function, but beyond that you're limited. That's where a host environment steps in and provides you with a rich set of features to interact with.
The browser is one such example of a host environment for JavaScript. It allows you to use JavaScript to get numerous things done outside of the language itself, for e.g. programmatically working with HTML elements, or sending HTTP requests, etc. It provides you with a multitude of APIs that you can interact with.
Why a separate mini course?
As I stated earlier, most courses don't make this separation between JavaScript and browser APIs, and rather teach both together. This confuses learners because they tend to assume that JavaScript is what these APIs define.
Long ago when I learned JavaScript, I too had it mixed up with browser APIs. Later on, when I went to learn Node.js, it was somewhat difficult for me to be able to comprehend why many features weren't available there. The reason was because I never thought of JavaScript in this way — that it's a language that's embellished by the browser with tons and tons of external, browser-specific APIs.
So squaring back to the original question: Why a separate mini course?
Two reasons:
- When you go on to learn Node.js — another host environment for JavaScript, usually used to create web servers — you already know the core language, JavaScript, itself.
- This separation keeps each learning unit small and concise. That is, when you're learning JavaScript, you're doing exactly that — learning the language itself. Similarly, when you're learning browser APIs, you're not learning the language.
The APIs covered
Before we begin, let me quickly mention the APIs that I'll be discussing with you throughout the rest of this mini course.
By far, the most important browser API for any JavaScript developer concerned with the frontend is the HTML DOM (HTML Document Object Model). It's so important that I can't stress on it any more. Using the HTML DOM API, you're able to programmatically access HTML elements on a webpage and then modify them, add new elements, delete existing ones, and so on.
The browser doesn't just allow you to modify the HTML; it also extends this ability to the CSS on the webpage. In essence, you can modify the styles of elements and tap into other aspects of a document's layout using the CSSOM (CSS Object Model) API.
Since a webpage is boring without interactions, another extremely important API is the Events API which enables you to track user events (e.g. mouse click) and/or application events (e.g. document loaded completely) and then react to them.
When you're developing interactions on a webpage, you commonly need to get information from the browser such as its window size, or that how much the user has scrolled the page, and so on. These bits of information are kept behind the BOM (Browser Object Model) API.
Timers are pervasively used by all kinds of web applications, and they come from the Timers API. Similarly, making HTTP requests programmatically is another frequent concern of web applications, made possible by the Fetch API.
Finally, there is one API that I feel useful enough to be discussed in this mini course — Storage. The Storage API allows you to store data locally in the browser for retrieval later on (for e.g. to store the user's preferences).
Alright then, with this quick intro out of the way, let's get started!