Today’s topics

• Introduction to the object data structure in JavaScript
• Storing data in and retrieving data from objects
• Using functions with objects and DOM manipulation.

🎯 Project: Build a customer directory

Link to assignment invitation. This assignment is due Monday, February 6.

🦉 Code, Notes & Videos

• Notes on JS objects
• Building HTML with JS example from class
• Example: findPeopleByCity()

🔖 Resources

• MDN Using Data Attributes
• MDN JavaScript Object Basics
• Eloquent JavaScript, chapter 4: Objects and Arrays
• blog post on JS objects
• Prettier Code Formatter This is information about the extension that you can (and should) install in VS Code.
• How to format code with Prettier

⭐ EXTRA/TMI

• Podcast on learning to code with the founder of Code Newbie, Saron Yitbarek
• Rebecca Murphey on using objects to write more concise code (short video)
• Lodash - This is a JS utility library – lots of handy little functions that can make it easier to do common things
• Moment.js - This is a very commonly used library for working with dates in JS. It’s big and kind of old, but handy for reformatting how dates are displayed. You could also check out modern alternatives like Luxon or date-fns.

Today’s topics

• More practice with functions and arrays
• Using JS in the browser
• The DOM: the Document Object Model
• DOM manipulation with JS
• Events in JS

🎯 Project: JavaScript Calculator

UPDATE: This assignment is due Thursday, Feb 1 at 9am. 🌺

NOTE: Your calculator does not have to look like the green one. It needs the same buttons, but you can add your own style. Steps 1 & 2 are HTML and CSS, so start there. Then, move on to adding the event listener to one button, then all the numbers, and so on.

🦉 Code & Notes

• JS and the DOM notes
• Animal Clicking Code Pen Example

🔖 Reference Shelf

• 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

• Loops in JavaScript (while, for, for…of)
• Using arrays
• Iteration: using loops with arrays

👩🏽‍💻 In-class Practice

We will refer to this problem set in class to practice concepts as we encounter them while looking at arrays and loops.

• Invitation Link

🎯 Project

This is the project you will work on outside of class. It is due Wednesday, February 1
Invitation Link

🦉 Code, Notes & Video

• JavaScript Arrays notes
• Rebecca’s video on variables
• Rebecca’s video on types
• Rebecca’s video on functions
• Array example from class
• JS Problem Set 1
• JS Problem Set 2

🔖 References

• MDN Loops and Iteration
• MDN Array

🗓️ Today’s topics

• Basic programming concepts in JavaScript
• Using variables, data types, conditionals, loops, and functions

🎯 Project: Intro to JavaScript Tutorial

• Free Code Camp Intro to JS up to and including the “Shopping List” exercise.

  • Complete by Monday, January 30
  • Submit three questions using this form before class on Monday

🔖 References

• So You Want to Be a Wizard
• MDN JavaScript Basics
• JS Equality Table
• MDN Falsy in JS
• MDN Truthy in JS

🦉 Notes

• Intro to JS Notes/Slides
• Code Examples from class