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

Create a GitHub Profile

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

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

⭐ EXTRA/TMI

Fetch requests use JavaScript promises to handle responses. This is 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

Code and Videos

• Fetch example from class This includes an additional more complex set of requests that we did not go over in class. Read it over to see what you make of it.
• Morning class video Access Passcode: zjg#%4h.
• Afternoon class video Access Passcode: Q&Hz2++X

Today’s topics

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

Project

Build a customer database

Link to assignment invitation

🔖 Resources

• Eloquent JavaScript, chapter 4: Objects and Arrays
• Rebecca Murphey on using objects to write more concise code (short video)
• Moment.js
• Lodash

⭐ EXTRA/TMI

• Podcast on learning to code with the founder of Code Newbie, Saron Yitbarek - This interview is from early on in Saron’s career, which was a while back now, but it’s still worth listening to.
• Code Newbie

Code & videos

• code example using object data
• Notes on js objects
• Morning class video Access Passcode: H6a=r!IV
• Afternoon class video Access Passcode: &%L6kUYc

Here’s a video of a short, optional class meeting checking in about calculator progress.

Video of Q&A

Access Passcode: @62mK&0U

And here is a short video I recorded to explain locally and globally scoped variables, which may help as you work through your calculator assignment.

Local and Global Scope 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

Link to the assignment invitation

🔖 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 – very interesting, but definitely not necessary at this stage:

• Browser rendering engine

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, and Video

• JS and the DOM notes
• numbered boxes code from class
• Morning class video Access Passcode: %73AzyP$ -Afternoon class video Access Passcode: 0CZEA%9X

Today’s topics

• Review what we have seen so far in JS
• Scope and arrow functions
• Practice, practice, practice

Project

Exercism: JavaScript Track

To get some more practice writing JavaScript, we’re going to use an awesome free online tool called Exercism.

Please sign up (you can use your GitHub account) and 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. Complete at minimum the first three following exercises in the JavaScript track:

1. Hello World
2. TwoFer
3. Raindrops
4. Hamming
5. High Scores
6. Word Count

For each exercise, follow the instructions on Exercism to upload your solution.

To submit your homework, paste your solution urls into this form.

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

🔖 Resources

• MDN JS Guide
• JS for Cats