JavaScript and the DOM

Today’s topics

• Using JS in the browser
• The DOM: the Document Object Model
• DOM manipulation with JS
• JS Events

Project

JavaScript Calculator

Link to the assignment invitation

Links and resources

• CSS-Tricks: What Is the DOM?
• MDN Introduction to Events
• MDN Event Reference
• DOM Manipulation with Vanilla JS
• Chapters 13-15 of Eloquent JavaScript

⭐️EXTRA/TMI

This resource is really not at all necessary to understand or do the project, but if you want to know more about the concept of tree structures in computer science, check out this piece from Vaidehi Joshi’s BaseCS blog series. She is awesome! There is also a thoroughly delightful accompanying BaseCS podcast with the equally amazing Saron Yitbarek.

• BaseCS blog series: How Not to be Stumped by Trees

And here is more info about what is happening when a browser renders a page:

• Browser rendering engine

Code, slides, and video from class

• class slides PDF
• morning class video Access Password: 7V*^0.25
• afternoon class video Access Password: 4S+$3Nb$
• code examples from class:
  • bear-says
  • acme (the js file in this repo has another example you can try on your own for practice!)