JavaScript in the Browser
The browser is where JavaScript becomes visible. Until now, most examples have printed to the console. In this part, your code will change what the reader sees and respond to what the reader does. The browser gives JavaScript a model of the page called the DOM. Through the DOM, JavaScript can find an element, change its text, update classes, add new items, remove old ones, and read form input. Events are the other half of browser programming. A page is not only a document. It is a place where users click, type, submit forms, press keys, and change controls. Event listeners let your code respond to those actions. This part ends by turning the console to-do list into a browser app. You will add tasks through a form, complete them with checkboxes, delete them with buttons, and save them with `localStorage`. By the end of this part, you should understand the path from user action to JavaScript response to page update. That path is the core of browser interactivity.
Chapters
The DOM: Making Pages Come Alive
The DOM is where JavaScript starts changing the page. Until now, most of your programs have printed to the console. That is useful for learning logic, but browser JavaScript usually needs to do something visible: change text, add items, hide messages, update classes, read attributes, or build part of a page from data. DOM stands for Document Object Model. It is the browser's JavaScript representation of an HTML document. When JavaScript changes the DOM, the page changes. This chapter is about doing something visible instead. You will learn to select elements on the page, read and change their text, update attributes and classes, create and remove elements, and build a whole list from an array of data. The goal is simple to state: connect your JavaScript to an HTML page and change what the reader sees without editing the HTML by hand.
Events
The DOM lets JavaScript change the page. Events tell JavaScript when to change it. An event is something that happens in the browser: a click, a key press, a form submission, a change in an input, a mouse movement, or the page finishing a load. Browser apps are built around events. The user does something, and your code responds. This chapter is about listening for those moments and responding. You will work with event listeners for clicks, typing, keyboard input, and form submission, and you will get to know the event object that arrives with each one. We also cover the browser's default behavior, how events bubble up through the page, and why delegation is the trick that keeps lists working even as items come and go.
Project: Interactive To-Do List (Web Edition)
This project turns the console to-do list into a browser app. The console version taught you how to model tasks with arrays and objects, then change that data with functions. The browser version adds a user interface. The user will type a task into a form, click a button, complete tasks with checkboxes, delete tasks with buttons, filter the list, clear completed tasks, and refresh the page without losing the list. This project combines the DOM, events, arrays, objects, strings, JSON, and `localStorage`. The point of the project is one pattern that runs under many small browser apps: keep the state in JavaScript, render the page from that state, respond to events by changing the state, save it, and render again.