Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a pull request.
Module #4 - JavaScript 3: Object-Oriented Programming and working with APIs (Frontend)
Welcome to JavaScript3! Congratulations on making it this far. You're well on your way to the top!
A big part of being a programmer means moving data from one place to another. It also means working with other people's software. In this module you'll be learning about one of the core things of what makes a web developer: working with APIs!
On top of that you'll also learn how to think differently about how you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done differently. In programming we call these paradigms and in this module you'll learn one such paradigm: Object-Oriented Programming!
Learning goals
In order to successfully complete this module you will need to master the following:
- Learn what an API is
- Catch up on the history of JavaScript
- Understand how to write more readable asynchronous JavaScript
- Connect with different public APIs
- Build a Single Page Application (SPA)
- Work with pre-existing code
- Learn about Object-Oriented Programming
How to use this repository
This repository consists of 3 essential parts:
Reading materials: this document contains all the required theory you need to know while you're coding. It's meant as both study material and as a reference to understand what you're doing.Homework: this document contains the instructions for each week's homework.Lesson Plans: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
After your first class you should start off with checking the reading materials for that week. At the beginning that would be the Week 1 Reading. Study all the concepts and try to get the gist of everything. After, you can get started with the homework for that week.
If you have any questions or if something is not entirely clear ¯\_(ツ)_/¯, please ask/comment on Slack!
Before you start
In the following weeks we will be using a styleguide to help you write "clean code". What is a styleguide? Simply put, it's a set of design standards put in one collection. Companies create and use them to define their public identity (their "brand"). Watch the following to get a better idea:
A styleguide is made by designers. In the case of website design, this styleguide is then handed over to developers to use when styling the frontend.
The styleguide we'll be using is the one from Airbnb:
While you do not need to read this guide in detail, it is recommended that you look at sections 1-8, 12-13, 15-21 and 23.
The required packages you need to install in order to write code according to the styleguide are the following:
"eslint"
"eslint-config-airbnb-base"
"eslint-config-prettier"
"eslint-plugin-import"
"eslint-plugin-prettier"
"prettier"They are already in this repository's package.json so all you have to do now to prepare is to execute the following command in your command line:
npm installWith this out of the way we can get started!
Planning
| Week | Topic | Reading Materials | Homework | Lesson Plan |
|---|---|---|---|---|
| 1. | Application Programming Interface (API), AJAX, Modules & Libraries | Reading W1 | Homework W1 | Lesson Plan W1 |
| 2. | Promises, Fetch API, JavaScript Versions, 'this' keyword, Arrow functions | Reading W2 | Homework W2 | Lesson Plan W1 |
| 3. | Object-Oriented Programming (OOP), ES6 Classes, Async/await, Thinking like a programmer III | Reading W3 | Homework W3 | Lesson Plan W1 |
| 4. | Final JavaScript Test | Details | - | - |
Finished?
Did you finish the module? High five!
If you feel ready for the next challenge, click here to go to Node.js!
The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)
This work is licensed under a Creative Commons Attribution 4.0 International License.
