Today’s topics

• Using JSON for data
• Basics of HTTP requests
• Make GET requests with Insomnia client
• Make GET requests using the Fetch API and display response data on a page

🎯 Project: Currency Converter

Link to assignment invitation

🔖 Resources

HTTP

• MDN: HTTP Messages

APIs

• Illustrated Dev: Meet the Robowaiter APIs Serving Us Data
• Insomnia client
• GitHub API Docs

AJAX, Fetch, & JSON

• AJAX explained by analogy
• MDN AJAX
• MDN Fetch API
• MDN fetch() method
• CSS-Tricks article on using Fetch
• MDN Working with JSON

⭐ EXTRA/TMI

Fetch requests use JavaScript promises to handle responses. Promises are a much bigger topic than we will get into right now, but if you want to know more about what a promise is and how to use it beyond the context of AJAX requests, you can start with the MDN documentation about it.

• MDN JS Promise

🦉 Notes

• Notes on AJAX

{“mode”:”full”,”isActive”:false}%

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

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

• forms notes

Today’s topics

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

🐛 Project: Debugging JS Calculator

For today’s assignment, there is no code to write and no repo to clone. Continue pushing forward on your JS calculator!

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!

Did you finish your JS calculator? Kudos! Here’s another project to try your hand at…
invitation link to the assignment

Still looking for things to do? Revist an previous lab or project that you were unable to complete!

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

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 Monday, October 11.

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

• JS and the DOM notes