Today’s topics

• Arrow notation for functions
• DOM manipulation with JS
• Events in JS

🎯 Project for the week: JavaScript Calculator

Part 1: Due 9am Wednesday, July 27

• Assignment link

Part 2: Due 4pm Thursday, July 28

When you complete part 1, continue to part 2. Continue in the same repository as part 1, nothing additional to clone for part 2. here.

🐈 Events 🐶

• Use the notes) and the example from class as a guide.

🔖 Resources to use as reference

• MDN Arrow Notation
• DOM Manipulation in 18 Minutes Video
• 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.

• 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 – very enlightening, although not strictly necessary at this stage:

• About the browser rendering engine
• How browser rendering works

This is a good explanation about how JS events “bubble” up the chain of elements on the page:

• JS Event Bubbling and Capturing

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:

• Loupe: Visualizing the JS Event Loop

Today’s topics

• Homework review
• Using JS in the browser
• The DOM: the Document Object Model
• Events in JS

Pre-Work for Calculator: Due 9am Tuesday, July 26

• Thinkific Unit on JavaScript and the DOM

• 🎯 Project for the week: JavaScript Calculator

Part 1: Due 9am Wednesday, July 27

• Assignment link

Part 2: Due 4pm Thursday, July 28

When you complete part 1, continue to part 2. Continue in the same repository as part 1, nothing additional to clone for part 2. here.

🐈 Events 🐶

• Use the notes) and the example as a guide.

🔖 Resources to use as reference

• Event Listeners in 18 Minutes Video
• 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.

• 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 – very enlightening, although not strictly necessary at this stage:

• About the browser rendering engine
• How browser rendering works

This is a good explanation about how JS events “bubble” up the chain of elements on the page:

• JS Event Bubbling and Capturing

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:

• Loupe: Visualizing the JS Event Loop

🗓️Today’s topics

• Using arrays
• Iteration: using loops with arrays
• Transforming arrays with map, reduce, and filter

🎯 Project

Build A Game

Optional:

• Modern JavaScript Tutorial
  • More explanations, examples, and exercises for JavaScript concepts

🔖 Resources

• MDN Loops and Iteration
• MDN Array
• A pretty good explanation of map, filter, and reduce
• map, filter, and reduce in a tweet
• A Visualization of What Reduce Does

⭐️ EXTRA/TMI

• Eloquent JavaScript Chapter 5: Higher Order Functions - This is a pretty intense read but it includes examples of map, filter, and reduce.

🦉 Code, Notes & Video

• JavaScript Arrays notes
• More JS Array examples from notes codepen
• Rebecca’s video on for loops & while loops
• Rebecca’s video on for of loops

🗓️ Today’s topics

• Using variables, data types, conditionals, loops, and functions

🎯 Project: Free Code Camp JavaScript Exercises

Finish Second Half

JavaScript practice exercises

🔖 Resources

• Rebecca’s video on variables
• Rebecca’s video on types
• Rebecca’s video on functions

🦉 Notes

• Intro to JS Notes/Slides
• JS Arrays Slides
• Radius Example Code Pen
• JS Function Example from class
• JS Loops examples from class