Today’s topics

• Introduction to the object data structure in JavaScript
• Storing data in and retrieving data from objects

🎯 Project: Build a customer directory

Link to assignment invitation

🔖 Resources

• MDN JavaScript Object Basics
• Eloquent JavaScript, chapter 4: Objects and Arrays
• blog post on JS objects

⭐ EXTRA/TMI

• Rebecca Murphey on using objects to write more concise code (short video)
• Podcast on learning to code with the founder of Code Newbie, Saron Yitbarek
• Lodash
• Moment.js

🦉 Code, Notes & Videos

• notes on js objects
• Morning Video

Access Passcode: 7!%^p0C8

Today’s topics

• What’s a bug?
• Debugging tools and techniques
• Errors and exceptions
• Handling errors with try…catch

🐛 Project: Debugging Parking Validation Form

For today’s assignment, there is no code to write and no repo to clone. Your task is to debug the weekend homework together in collaboration with one or two others in class and commit your debugged code. Please note in a commit message the name(s) of the person(s) who helped you debug!

Links and resources

• Get started with debugging JS in Chrome Dev Tools
• How to step through code at a breakpoint
• How to use the Dev Tools watch panel
• The JS Error Object
• Chrome Dev Tools Guide
• Handling errors with try…catch
• Conference talk about linters and StandardJS
  • eslint extension for VS Code
  • StandardJS extension for VS Code

⭐️ EXTRA/TMI

There’s an awesome article about stacks, which we encounter in a stack trace in our debugging adventures, in Vaidehi Joshi’s BaseCS blog series. It’s not necessary to read this to understand debugging, but if you want some more information about terminology and what’s really happening, it’s great!

• BaseCS: Stacks and Overflows

🤓 Essential Nerd Humor: Gary Bernhardt’s WAT talk

Code, slides, and video from class

• notes on debugging in JS
• Morning Video

Access Passcode: +1f.rgzg

Today’s topics

• HTML forms
• Working with form data in JavaScript
• Client-side form validation with JavaScript

Project

JavaScript Form Validation

Link to the assignment invitation

🔖 Resources

• MDN Client-Side Form Validation
• MDN HTML5 Constraint Validation
• MDN Forms Guide
• MDN HTML form element
• MDN HTMLFormElement
• MDN HTML input element
• MDN HTML label element
• MDN submit event
• MDN Event.preventDefault

⭐️ EXTRA/TMI

• Form Fields in Eloquent JavaScript, Chapter 18

🦉 Code, Notes & Videos

• forms notes
• Morning Video

Access Passcode: Lg1@dwT1

Practice, practice, and more practice

Review what we have seen so far in JS by going back over notes – be sure to type out the code examples so that you can see the concepts illustrated in code for yourself. This will go a long way to establishing and deepening your understanding.

Optional project: 👻 Exercism: JavaScript Track

To get some more practice writing JavaScript, check out this awesome free online tool called Exercism.

You can sign up using your GitHub account. Choose the JavaScript track. There are two ways to use Exercism, in Practice Mode or Mentor Mode. For now, just choose Practice Mode.

Work through the setup instructions to install Exercism on your computer with Homebrew. The following exercises in the JavaScript track are a great place to begin, but you’re of course welcome to explore and find the exercises that you find interesting.

1. TwoFer
2. Raindrops
3. Resistor Color
4. Hamming
5. High Scores
6. Word Count

For each exercise, follow the instructions on Exercism to upload your solution. Once you do that you will be able to see the solutions other folks have posted for the same exercise.

I’m not requiring you to submit your solutions to this. In the past I’ve assigned this to be turned in, and I recorded a video to show folks how to get exercism set up and submitted in the following video. I’m just including this here in case anyone finds it useful.

Video demo of downloading, completing, and submitting the first exercise

🔖 Resources

• MDN JS Guide
• JS for Cats – If you want a low-key walk through of basics, this is actually pretty helpful. It’s older so you will see references to the var keyword instead of let or const.

Today’s topics

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

🎯 Project: JavaScript Calculator

This assignment is due tomorrow morning.

Link to the assignment invitation

🔖 Resources

• CSS-Tricks: What Is the DOM?
• MDN Introduction to Events
• MDN Event Reference
• 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

🦉 Code, Notes & Video

• JS and the DOM notes
• CODE: DOM manipulation example – based on what we did in class this morning, with more examples added
• Morning Video

Access Passcode: 77A*rATn