Today’s topics

• Using Fetch to create, read, update, and destroy data (CRUD)
• HTTP methods: GET, POST, PUT/PATCH, DELETE
• HTTP status codes

Project

Create a single page note-taking app

Link to assignment invitation

Links and resources

• json-server documentation
• MDN HTTP Overview
• HTTP status codes
• Using the Network Tab in Chrome Dev Tools
• Eloquent JavaScript: HTTP and Forms
• More detailed primer on Fetch

⭐️EXTRA/TMI

For more information about how the internet works and the mechanics of a request over HTTP, check out this comic by the always brilliant Julia Evans!

• Julia Evans zine on networking
• Cross-Origin Resource Sharing (CORS) explained by Julia Evans
• MDN Web Guide: AJAX
• HTTP Basics - This is more detail than you really need right now, but has some instructive diagrams

Code, slides, and video from class

• class slides PDF
• todo app example
• morning class video Access Password: 3t#w!2^1
• afternoon class video Access Password: 8Y^47B=6

Today’s topics

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

Project

Create a GitHub Profile

Link to assignment invitation

Links and resources

• Illustrated Dev: Meet the Robowaiter APIs Serving Us Data
• AJAX explained by analogy
• MDN AJAX
• Insomnia client
• GitHub API Docs
• MDN Fetch API
• MDN fetch() method
• CSS-Tricks article on using Fetch
• MDN JS Promise

A Short History of the Web, in links

• Tim Berners-Lee
• original proposal for HTTP
• The First Web Page
• HTTP Working Group
• Mosaic Browser
• Netscape Navigator
• IE 1.0 showing baby wikipedia
• Firefox 1.0
• Google 1.0
• Amazon 1.0
• (The) Facebook 1.0
• CNN 1996 Year in Review – This page doesn’t work for me in Chrome, but it does in Firefox. YMMV.
• National Archives: Offical White House websites through the years

Code, slides, and video from class

• There are no slides for this topic today
• using fetch to get github data demo
• morning class video Access Password: 5n^84@W6
• afternoon class video Access Password: 7q.tgdA9

Today’s topics

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

Project

Build a customer database

Link to assignment invitation

Links and resources

• Eloquent JavaScript, chapter 4: Objects and Arrays
• 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, slides, and video from class

• class slides PDF
• demo from class with menu items – go back a few commits to see the original version before I refactored to break things up into functions, so you can see the progression
• morning class video Access Password: 4N=@12h6
• afternoon class video Access Password: 9b%W5*4#

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
• morning class video Access Password: 0w^2G9c^

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

⭐️EXTRA/TMI

• 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
• form validation demo code
• class video Access Password: 6q%11@4Q