JavaScript and the DOM

Coding in the browser

How to make that webpage pop.

Web browsers include a built-in JavaScript engine to allow you to run client-side code. The purpose of this code is to respond to user actions and manipulate the web page immediately, without waiting for a slow HTTP request and page reload. Programmatic access to the web page is provided through the Document Object Model (DOM), a tree of objects built from the HTML and rendered on the page.

Working with the DOM in JavaScript (19:53)

Controlling the page from code.

Additional reference: JS HTML DOM tutorial at w3schools

Code Organization and DOM Events (15:12)

Responding to user events.

Additional reference: List of HTML DOM Events

The assignment repo has a single .html page and matching .js and .css pages. To complete the assignment, open the html page in your browser by double-clicking it (you don't need to serve it through node for this assignment).

Repo invite: https://classroom.github.com/a/bO63E3CX

On the page you will see instructions for nine problems. Complete each problem by writing code in the .js file to add the specified behavior to the page. This is all running client-side in the browser, so reloading the page will reset it and clear any changes that you have made at the console.

Cheat sheet, for your reference:

Finding elements: document.getElementById(), document.getElementsByClassName()
Changing text: .innerHTML, .innerText
Changing attributes (they're just properties of the nodes!): e.g. .style, .src
Working with HTMLCollections: Array.from()
Responding to events: addEventListener(),
Changing classes: .classList.add(), .classList.remove()
Form values: .value for textbox, have to look up for each type (e.g. select, radio)

Note that addEventListener is preferred to directly assigning methods (e.g. node.onclick = ) because it maintains an ordered list of handlers, not just one. For the same reason, .classList is preferred to direct assignment of the .class property, although some very old browsers don't support it.

Additional resources:

A video about the Document Object Model (DOM)
Another JavaScript DOM tutorial

Assignment Checklist

Complete all problems by adding code to js_dom.js (you can add CSS classes to js_dom.css if you want)