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 this assignment, there is no code to write and no repo to clone. Your assignment is to debug the weekend homework together in pairs and commit your debugged code. Please note in a commit message the name of the person 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

⭐️EXTRA/TMI

There’s a 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

Code, slides, and video from class

• class slides PDF
• Debugging the number guessing game - You can look at the recent commits here to see the fixes we put in. There is still a logic error in the game, if you want to see if you can find it!
• morning class video Access Password: 8N&*+o4&
• afternoon class video Access Password: 5h$dcz9#

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

Links and resources

• MDN Forms Guide
• MDN HTML form element
• MDN HTMLFormElement
• MDN HTML input element
• MDN HTML label element
• MDN Client-Side Form Validation
• Form Fields in Eloquent JavaScript, Chapter 18
• MDN HTML5 Constraint Validation (we’re not using this for our project, but it is a very common tool for client-side validation and important to know about)

Code, slides, and video from class

• class slides PDF
• Forms demo code
• afternoon class video Access Password: 1G^1j924

Today’s topics

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

Project

JavaScript Calculator

Link to the assignment invitation

Links and resources

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

• Browser rendering engine

Code, slides, and video from class

• class slides PDF
• morning class video Access Password: 7V*^0.25
• afternoon class video Access Password: 4S+$3Nb$
• code examples from class:
  • bear-says
  • acme (the js file in this repo has another example you can try on your own for practice!)

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

Links and 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

Code, slides, and video from class

• class slides PDF

Today’s topics

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

Project

JavaScript Problem Set 1

Link to the assignment invitation

TODO

1. Read So You Want to Be a Wizard by Julia Evans
2. JavaScript problem set 1

Links and resources

• So You Want to Be a Wizard
• MDN JavaScript
• Kyle Simpson’s You Don’t Know JS: Get Started
• Eloquent JavaScript
• JS Equality Table
• MDN Falsy in JS
• MDN Truthy in JS

Code, slides, and video from class

• class slides PDF