Browser APIs

Now that you know the basics of JavaScript, it's time to see how it truly comes to life in the browser. In this session, you'll learn how JavaScript interacts with the web page through the Document Object Model (DOM), how to respond to user actions with events, and how to store data directly in the browser using the Web Storage APIs. With these tools, you'll move beyond static pages and start building fully interactive web applications.

Preparation

The Document Object Model

In this video, we'll explore the Document Object Model - the structured representation of a web page that JavaScript can interact with. You'll learn how to access elements, change their content, attributes and styles - all through DOM methods that let you manipulate the page dynamically.

The videoes are coming soon! Use the resources below if you want to prepare sooner!

For a written reference, check out W3Schools' resources:

• DOM intro
• DOM methods
• Accessing DOM elements
• Changing HTML
• Changing CSS

Events

In the next video, we'll explore DOM events - how JavaScript can respond to user actions and browser-triggered events on a web page. You'll learn how to detect events like clicks, key presses, and pointer movements, and how to handle them using event listeners to make your pages interactive.

Coming soon!

W3Schools also has some good resource on DOM events and eventListeners

Web Storage APIs

The Web Storage APIs let JavaScript store key/value pairs directly in the browser. This allows you to persist data across page reloads, without relying on the server. They're mostly used to store small amounts of data, allowing web pages to remember user preferences, save form inputs and track application state. In this video, we'll explore localStorage and sessionStorage, showing how to store data either permanently or just for the current session.

Coming soon!

If you want to learn more, MDN has a good resource on the Web Storage APIs.

More APIs

There are many more browser APIs to explore! For instance, setTimeout runs a function after a specified delay, the Canvas API can be used for drawing 2D graphics and the Fetch API retrieves resources (we will learn about fetch in a later session). If you want an overview of what you can do in the browser, take a look at this list of web APIs from MDN.

Exercises

Under Construction