JavaScript and the DOM
Posted on Mar 31st, 2022
Today’s topics
- Using JS in the browser
- The DOM: the Document Object Model
- DOM manipulation with JS
- Events in JS
🎯 Project: JavaScript Calculator
This assignment is due Monday, April 4.
Link to the assignment invitation for part 1
If you complete part 1, continue to part 2. Continue in the same repository as part 1, nothing additional to clone. You can read the instructions for part 2 here.
🐈 Kittens and Puppies 🐶
- Use the notes) and the example from class as a guide.
- The video from morning class is also available, where we talk about DOM mapipulation. Passcode: .TJ4@Nw@
🔖 Resources to use as reference
- CSS-Tricks: What Is the DOM?
- MDN Introduction to Events
- MDN Element Events -> this is where you can see the events that are defined for elements (like “click” or “mouseover”)
- MDN Event Reference -> this is a huge list of all the available events, useful mainly to get an idea of what’s possible
- DOM Manipulation with Vanilla JS
- How JS Event Delegation Works
- 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.
And here is more info about what is happening when a browser renders a page – very enlightening, although not strictly necessary at this stage:
This is a good explanation about how JS events “bubble” up the chain of elements on the page:
If you would like to know more about the JavaScript Event Loop and how it works, I highly recommend this resource. Don’t miss the video of the conference talk that goes along with it – it’s excellent: