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

Slides from class

• notes on debugging in JS

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
• Example Code

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

Today’s topics

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

🎯 Project

JavaScript Problem Set 2

Link to the assignment invitation

🔖 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

🦉 Code & Notes

• JavaScript Arrays notes
• Code examples from class

Today’s topics

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

🎯 Project: JavaScript Problem Set 1

This is due tomorrow.

Link to the assignment invitation

✅ TODO Today

1. Read So You Want to Be a Wizard by Julia Evans
2. Read MDN JavaScript Basics
3. Check out these basic practice exercises for a warm-up. Clone that repo to work on the exercises locally. You do not need to turn this in.
4. JavaScript Problem Set 1

🔖 Resources

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

🦉 Code & Notes

• Intro to JS Notes/Slides
• Code from class