JavaScript in the Browser

advanced

What You'll Learn

JavaScript's primary domain is the browser, where it breathes life into static HTML pages. The DOM (Document Object Model) is a tree representation of the HTML document, which JavaScript can traverse and modify.

DOM manipulation involves selecting elements (getElementById, querySelector, querySelectorAll) and changing their content (textContent, innerHTML), attributes (setAttribute), and styles (style property). Dynamic pages rely on creating, removing, and rearranging DOM nodes.

Browser APIs extend JavaScript's capabilities. document and window are the entry points. The Fetch API handles HTTP requests. localStorage and sessionStorage persist data. setTimeout and setInterval schedule code execution. The Geolocation API accesses device location.

Events are the bridge between user interaction and code execution. click, submit, keydown, mouseover, and load are common event types. Event listeners (addEventListener) attach handlers. Event objects provide details like target, clientX, and key.

Arrays and objects in practice: DOM queries return NodeLists that you convert to arrays for forEach/map. Objects store related data and configuration. Combining arrays of objects with DOM methods creates data-driven UIs.

Browser JavaScript in Action

javascript

Why this matters

DOM manipulation and event handling are what make web pages feel alive. Whether you're building a dropdown menu, a live search, or a single-page app, these browser APIs are the tools you'll reach for every day.

What's next

In the next lessons, you'll dive deeper into each topic with hands-on examples and exercises.

Exercises

Create a Dynamic List

easy

Write JS that creates an unordered list (ul) from an array of fruit names. For each fruit, create an li element, set its textContent, and append it to the ul. Assume there is a div with id list-container in the HTML.

Starter Code:

const fruits = ['Apple', 'Banana', 'Cherry'];\nconst container = document.getElementById('list-container');\n// Create ul and li elements here

Expected Output:

A bulleted list with Apple, Banana, Cherry