Today’s topics

• Reviewing and practicing object-oriented techniques
• Understanding how to use canvas and requestAnimationFrame
• Building up a working application in stages

Project

Build a game, Day 2

This project is due on Thursday, May 14. Continue working with your study group!

Links and resources

• Mary Rose Cook’s annotated code
• updated space invaders code

⭐️EXTRA/TMI

Kyle Simpson’s You Don’t Know JS series of books has been around for 5+ years which is about 1000 years in JS time. He is currently updating the whole series and kindly shares all of his writing on GitHub. He’s still writing the second edition of his book on this & Object prototypes, so you’ll have to make do with the first edition. I find that he is really good at explaining things clearly, although this is not really beginner material. Still, if you need to know more, I would recommend reading what he has to say.

• You Don’t Know JS: this & Object Prototypes - 1st Edition

Code, slides, and video from class

• game starter code from class
• basic oo js example
• morning class video Access Password: 6t?3#697
• afternoon class video Access Password: 4n$&#5O%

Today’s topics

• Intro to object-oriented programming in JS
• Using classes in JS
• Building games in JS
  • using requestAnimationFrame
  • the Canvas API

Project

Build a game

This project is due on Thursday, May 14.

Study groups for this project are to encourage you to put your heads together to solve the problems this project poses. You will need to wrestle with this material; read other people’s code; take that code apart and run it, change it, and break it to understand what it’s doing; read documentation and just try stuff until things start to click for you. Doing this with other people will help a lot!

• Dave/Sarah/Britton
• Alyshia/Ben/Luke
• Ashley/Danny/Steve/Kaley
• Iziz/Hanny/Blake/Aaron

Link to assignment invitation

TODO for tonight

Whew! Today was a lot. To recap, below are some strategies I recommend to get started. Mix and match! You don’t have to do these in order, but I would strongly recommend beginning with reading the updated space invaders code.

• Watch Mary Rose Cook’s video again; read her annotated code. Get the updated space invaders code from our examples repo and run it locally. Read that code, change it, and see what happens. See if you can start to understand what is happening. (Links to all of these things below)
• Play with the Canvas API and requestAnimationFrame. Both of these are used in the space invaders code. See if you can write code to draw a player on the screen in your own browser.
• Play the games that are provided as options in the homework assignment. Begin to write a CRC model for the one that you feel most interested in.

End of Phase Project

Instructions for technical presentations

Links and resources

• MDN OO in JS for Beginners
• MDN this
• this in JS explained simply
• Class-Responsibility-Collaborator model
• Mary Rose Cook live codes space invaders
• Mary Rose Cook’s annotated space invaders code
• animation with requestAnimationFrame
• How to use requestAnimationFrame
• MDN Canvas API
• 2D Collision Detection in JS

⭐️EXTRA/TMI

• Eloquent JavaScript: The Secret Life of Objects
• Prototypes in Plain English

Code, slides, and video from class

• class slides PDF
• Revised Space Invaders example
• CRC model notes
• morning class video Access Password: 9B#2D44E
• afternoon class video Access Password: 5h$2$776

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

• 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 demo code
• afternoon class video Access Password: 2H@4N^!n

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
• Insomnia client
• GitHub API Docs
• MDN Fetch API
• MDN fetch() method
• CSS-Tricks article on using Fetch
• MDN JS Promise

Code, slides, and video from class

• There are no slides for this topic today
• Using fetch with the GitHub API demo code
• morning class video Access Password: 9N@48@*v
• afternoon class video Access Password: 9O@Sys7%

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
• Podcast on learning to code with the founder of Code Newbie, Saron Yitbarek

Code, slides, and video from class

• class slides PDF
• Repl.it for functions/arguments
• Repl.it for working with an object
• Demo using object data for menu items
• afternoon class video Access Password: 6K!654dN