|
1 | 1 | > Please help us improve and share your feedback! If you find better tutorials |
2 | | -or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls). |
| 2 | +> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls). |
3 | 3 |
|
4 | | -# HackYourFuture JavaScript 3 |
| 4 | +# Module #4 - JavaScript 3: Object-Oriented Programming and working with APIs (Frontend) |
5 | 5 |
|
6 | | -Here you can find course content and homework for the JavaScript3 modules. |
| 6 | + |
7 | 7 |
|
8 | | -|Week|Topic|Read|Homework| |
9 | | -|----|-----|----|--------| |
10 | | -|1.|• Structure for a basic SPA (Single Page Application) <br>• AJAX & XMLHttpRequests<br>• API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)| |
11 | | -|2.|• Event Loop (order of execution)<br>• Promises|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)| |
12 | | -|3.|• fetch, axios<br>• async/await<br>• try...catch<br>• The `this` keyword<br>• call, apply, bind<br>• Object Oriented Programming and ES6 Classes|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)| |
| 8 | +Welcome to JavaScript3! Congratulations on making it this far. You're well on your way to the top! |
13 | 9 |
|
14 | | -__Kind note:__ |
| 10 | +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! |
15 | 11 |
|
16 | | -We expect you to __always__ come prepared to the class on Sunday. |
| 12 | +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! |
17 | 13 |
|
18 | | -### Overall |
19 | | -A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear. |
| 14 | +## Learning goals |
20 | 15 |
|
21 | | -*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* :). |
| 16 | +In order to successfully complete this module you will need to master the following: |
| 17 | + |
| 18 | +- Learn what an API is |
| 19 | +- Catch up on the history of JavaScript |
| 20 | +- Understand how to write more readable asynchronous JavaScript |
| 21 | +- Connect with different public APIs |
| 22 | +- Build a Single Page Application (SPA) |
| 23 | +- Work with pre-existing code |
| 24 | +- Learn about Object-Oriented Programming |
| 25 | + |
| 26 | +## How to use this repository |
| 27 | + |
| 28 | +This repository consists of 3 essential parts: |
| 29 | + |
| 30 | +1. `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. |
| 31 | +2. `Homework`: this document contains the instructions for each week's homework. |
| 32 | +3. `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! |
| 33 | + |
| 34 | +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](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week. |
| 35 | + |
| 36 | +If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! |
| 37 | + |
| 38 | +### Before you start |
| 39 | + |
| 40 | +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: |
| 41 | + |
| 42 | +- [Creating Your Company's Style Guide](https://www.youtube.com/watch?v=gv_wrrY70E0) |
| 43 | + |
| 44 | +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. |
| 45 | + |
| 46 | +The styleguide we'll be using is the one from Airbnb: |
| 47 | + |
| 48 | +- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) |
| 49 | + |
| 50 | +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. |
| 51 | + |
| 52 | +The required packages you need to install in order to write code according to the styleguide are the following: |
| 53 | + |
| 54 | +```json |
| 55 | +"eslint" |
| 56 | +"eslint-config-airbnb-base" |
| 57 | +"eslint-config-prettier" |
| 58 | +"eslint-plugin-import" |
| 59 | +"eslint-plugin-prettier" |
| 60 | +"prettier" |
| 61 | +``` |
| 62 | + |
| 63 | +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: |
| 64 | + |
| 65 | +```md |
| 66 | +npm install |
| 67 | +``` |
| 68 | + |
| 69 | +With this out of the way we can get started! |
| 70 | + |
| 71 | +## Planning |
| 72 | + |
| 73 | +| Week | Topic | Reading Materials | Homework | Lesson Plan | |
| 74 | +| ---- | ------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------------- | -------------------------------------- | |
| 75 | +| 1. | Application Programming Interface (API), AJAX, Modules & Libraries | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) | |
| 76 | +| 2. | Promises, Fetch API, JavaScript Versions, 'this' keyword, Arrow functions | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) | |
| 77 | +| 3. | Object-Oriented Programming (OOP), ES6 Classes, Async/await, Thinking like a programmer III | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) | |
| 78 | +| 4. | Final JavaScript Test | [Details](test.md) | - | - | |
| 79 | + |
| 80 | +## Finished? |
| 81 | + |
| 82 | +Did you finish the module? High five! |
| 83 | + |
| 84 | +If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/Node.js) to go to Node.js! |
| 85 | + |
| 86 | +_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 :)_ |
22 | 87 |
|
23 | 88 | <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>. |
0 commit comments